The margin between ToS checkbox and its error message is way more than the other fields - reported by @adeel0202

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to Settings > Payments > Add Payment method > Debit card
2. Press Save without filling the form

Expected Result:

The ToS checkbox and its error message should have the same margin as other fields and their error messages

Actual Result:

The margin between ToS checkbox and its error message is way more than the other fields and their error messages

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.39-1
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644254987542729

View all open jobs on GitHub

view this job

[MelvinBot]

Triggered auto assignment to @CortneyOfstad (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[adeel0202]

Proposal (If considered external)

We can remove the margin below the checkbox by removing styles.mb4 on line 307

App/src/pages/settings/Payments/AddDebitCardPage.js

Line 307 in d9355db

style={[styles.mt4, styles.mb4]}

Result

[CortneyOfstad]

Sorry, was out last week sick — updating now!

[MelvinBot]

Triggered auto assignment to @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @jliexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[jboniface]

job post is here

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @luacmartins (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[luacmartins]

Thanks for the review @parasharrajat! Cool, just waiting on confirmation from the design team before we move on.

[adeel0202]

There are total 11 usages of CheckboxWithLabel and out of those, 6 usages have marginBottom added. If we are to remove marginBottom from all those 6 usages then these pages will be modified: TermsStep, ACHContractStep, BankAccountStep & AddDebitCardPage.

[shawnborton]

From a visual design perspective, I agree that the error message should look like this.

[luacmartins]

Thanks @shawnborton! @adeel0202 let's continue by removing margingBottom from any CheckboxWithLabel.

[MelvinBot]

📣 @adeel0202 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 📖

[adeel0202]

Thanks. I have applied on Upwork.

[adeel0202]

@luacmartins, when I select Wells Fargo bank as you mentioned here, I'm redirected to Well Fargo's web login page and when I enter the test credentials there, I get invalid credentials error 😐
I need to access TermsStep and ACHContractStep pages as I'm going to make changes in these files too.

[luacmartins]

Weird. Are you doing that in dev? I just tried it and it seems to work fine (check video below).

web.mov

[adeel0202]

Yes, I'm on dev. Please check the video @luacmartins

dev.mp4

[luacmartins]

Can you navigate straight to the step on web? e.g. /bank-account/contract?

[adeel0202]

Yes @luacmartins, just checked that I can navigate to that step directly.

[adeel0202]

@parasharrajat, just checked that we don't need to make any changes in ACHContractStep. There is bottom margin in the top two checkboxes of that component and those are necessary margins so can't remove those.

Also, can you please let me the know the url to access TermsStep directly?
cc: @luacmartins

[parasharrajat]

try any of these keyboards in the URL based on the step you are looking.

        case 'new':
                return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
            case 'company':
                return CONST.BANK_ACCOUNT.STEP.COMPANY;
            case 'personal-information':
                return CONST.BANK_ACCOUNT.STEP.REQUESTOR;
            case 'contract':
                return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
            case 'validate':
                return CONST.BANK_ACCOUNT.STEP.VALIDATION;
            case 'enable':
                return CONST.BANK_ACCOUNT.STEP.ENABLE;
            default:
                return '';
        }

[adeel0202]

Thanks @parasharrajat, I have already tried all those in the URL but no luck. I have also managed to add a test bank account on staging (thanks to this slack thread), went through all the steps but still couldn't access TermsStep component 😐

[luacmartins]

I'd hard-code currentStep here to show termsStep for testing purposes and navigate to /settings/payments/enable-payments. You can find these routes in linkingConfig.js.

The other alternative is to go through the Onfido flow, which might be problematic.

[adeel0202]

I have raised the PR, but just to inform, I'm still not hired on Upwork for this job 😄

[adeel0202]

The PR was deployed on production 8 days ago so this should be paid by now but I'm not even hired on Upwork yet. What is going on here? 👀😄
cc: @luacmartins

[luacmartins]

Pinging @jboniface for payment.

[jboniface]

@adeel0202 sorry, it looks like the original post expired. can you apply here?

[adeel0202]

Thanks @jboniface, I have applied on Upwork.

[jboniface]

paid with bonus

[parasharrajat]

@jboniface I have also applied for C+.

[jboniface]

yeah, i saw, i've been trying to pay it but upwork is erroring for some reason @parasharrajat

[jboniface]

ok, should be all set now