[HOLD for payment 2023-02-10] [$1000] Bottom margin missing in Payment methods

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Log in to ND.
2. Navigate to Payments Page

Expected Result:

Payment Methods Title has bottom margin

Actual Result:

Payment Methods Title's missing bottom margin

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.2.63-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: @fedirjh
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1675206012491849

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013ee862b130415d52
• Upwork Job ID: 1620944151393075200
• Last Price Increase: 2023-02-02

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[luacmartins]

I'm taking this one since it came from a PR I worked on

[luacmartins]

@fedirjh wanna make a proposal here since we already discussed it here?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013ee862b130415d52

[melvin-bot]

Current assignee @alexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[melvin-bot]

Current assignee @luacmartins is eligible for the External assigner, not assigning anyone new.

[fedirjh]

@luacmartins Thank you

Proposal

This is a regression from PR #14217 0479c58. Inside BasePaymentsPage.js , the listHeaderComponent is missing the margin bottom , this was missed during fixing the font style . We already discussed this and agreed that we should add .mb1 to header styles

--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -324,7 +324,7 @@ class BasePaymentsPage extends React.Component {
                     </>
                 )}
                 <Text
-                    style={[styles.ph5, styles.mt6, styles.textLabelSupporting]}
+                    style={[styles.ph5, styles.mt6, styles.textLabelSupporting, styles.mb1]}
                 >
                     {this.props.translate('paymentsPage.paymentMethodsTitle')}
                 </Text>

[mollfpr]

@fedirjh proposal looks good to me 👍 @luacmartins

🎀👀🎀 C+ reviewed!

[melvin-bot]

📣 @fedirjh You have been assigned to this job by @luacmartins!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.64-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Fix] Add missing bottom margin style to Payment Page #14746

If no regressions arise, payment will be issued on 2023-02-10. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mollfpr / @luacmartins] The PR that introduced the bug has been identified. Link to the PR: Fix label fonts #14217
• [@mollfpr / @luacmartins] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Fix label fonts #14217 (comment)
• [@mollfpr / @luacmartins] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: https://expensify.slack.com/archives/C049HHMV9SM/p1676040020503419
• [@fedirjh] Propose [regression test] (https://github.com/Expensify/App/blob/main/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md) steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: [HOLD for payment 2023-02-10] [$1000] Bottom margin missing in Payment methods #14743 (comment)

[fedirjh]

Regression Test Steps:

• Go to URL https://staging.new.expensify.com/
• Log in with any account
• Navigate to Payments Page
• Verify that payment Methods Title has it's margin bottom
• Do we agree 👍 or 👎

[luacmartins]

I'm not sure that we need a specific regression test for this one. We don't have individual test steps to check margins or other visual aspects of every specific element in App -- those are usually tested from a customer's point of view of what looks right/wrong.

[alexpensify]

@luacmartins - if this won't require testing, what are the next steps before closing - payment?

[luacmartins]

@alexpensify we should still complete the BZ checklist above. @mollfpr would you mind filling the checklist above please?

[mollfpr]

@luacmartins Sure! I will work on it!

[mollfpr]

Here's the checklist @luacmartins

[@mollfpr / @luacmartins] The PR that introduced the bug has been identified. Link to the PR:

#14217

[@mollfpr / @luacmartins] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

#14217 (comment)

[@mollfpr / @luacmartins] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

https://expensify.slack.com/archives/C049HHMV9SM/p1676040020503419

[luacmartins]

I think the only thing left here is payment.

[alexpensify]

Ok, I'll review this one today and prepare the next steps.

[alexpensify]

@luacmartins - I asked for a buddy check on the payment in the BZ Slack room to ensure that I pay everyone correctly in Upwork.

[alexpensify]

@fedirjh and @mollfpr - I've started the payment process via Upwork and applied the bonus amounts.

[mollfpr]

@alexpensify accepted, thank you!

[fedirjh]

@alexpensify Thank you!

[alexpensify]

Closing! Great work everyone. I've taken these actions in Upwork:

• Paid @fedirjh and @mollfpr
• Ended the contracts associated with this job
• Closed the job