Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[No QA] Add BeneficialOwnersStep (UI Only) #3585

Merged
merged 14 commits into from
Jun 18, 2021
Merged

Conversation

marcaaron
Copy link
Contributor

@marcaaron marcaaron commented Jun 14, 2021

cc @NikkiWines since this might affect validation stuff for the RequestorStep and builds on your work there

Details

Hooking up the UI for the ACHContractStep. We will test the API flow in another PR.

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/166920

Tests

  1. Force the ACHContractStep to show by modifying the logic here
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 101079b76..248fe10c8 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -139,7 +139,7 @@ class ReimbursementAccountPage extends React.Component {
         // allows us to continue the flow from various points depending on where the user left off. We can also
         // specify a specific step to navigate to by using route params.
         const achData = this.props.reimbursementAccount.achData;
-        const currentStep = this.getStepToOpenFromRouteParams() || achData.currentStep;
+        const currentStep = CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
         return (
             <ScreenWrapper>
                 <KeyboardAvoidingView>
  1. Try to add a beneficial owner
  2. Remove a beneficial owner
  3. Verify you cannot add more than three beneficial owners if you have also checked that you own 25%
  4. Verify you cannot remove the last beneficial owner unless you check the box that there are no more owners

QA Steps

No QA

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

2021-06-17_10-39-36
2021-06-17_10-42-17

Mobile Web

Desktop

iOS

Android

@marcaaron marcaaron self-assigned this Jun 14, 2021
@marcaaron marcaaron changed the title [WIP] Add BeneficialOwnersStep [No QA] Add BeneficialOwnersStep (UI Only) Jun 17, 2021
@marcaaron marcaaron marked this pull request as ready for review June 17, 2021 21:00
@marcaaron marcaaron requested a review from a team as a code owner June 17, 2021 21:00
@MelvinBot MelvinBot requested review from AndrewGable and removed request for a team June 17, 2021 21:01
Copy link
Contributor

@NikkiWines NikkiWines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, a little weirdness with the styling of the links on the requestor page:

image

Also I appear to be able to add 4 beneficial owners, not 3.

@@ -304,6 +304,19 @@ export default {
noPhoneNumber: 'Por favor escribe un número de teléfono que incluya el código de país e.g +447814266907',
maxParticipantsReached: 'Has llegado al número máximo de participantes para un grupo.',
},
beneficialOwnersStep: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's occurred to me that I forgot to add the requestorStep values to this file 🙈

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this left in english if this is the spanish file?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we started this there was pressure to get it finished within 2 weeks so we moved very quickly and Spanish translations were not prioritized.

@marcaaron
Copy link
Contributor Author

Ah sorry you can actually add 4 owners, but only if you do not check that you own more than 25%

It does look like there is a way to add 5 if you get creative and first add 4 then check the box 😅 - but we are not doing anything about this in Web-Secure so I think maybe it's an edge case.

@marcaaron
Copy link
Contributor Author

Not really sure what is up with that text hmm... was it working before? First guess is we should not be nesting a Pressable instead a Text

@marcaaron
Copy link
Contributor Author

Ah no it's actually a change in TextLink here

@marcaaron
Copy link
Contributor Author

Updated + fixed the text issue

2021-06-17_16-00-49

@marcaaron
Copy link
Contributor Author

Alright, I think after this is merged we will be able to unblock hooking the RequestorStep up to the API. Lemme know if there are any additional changes to make here so we can get started on that.

Copy link
Contributor

@NikkiWines NikkiWines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, minor question about size="micro" for TextLink

<Text style={[styles.mt3, styles.textMicroSupporting]}>
{this.props.translate('requestorStep.onFidoConditions')}
<TextLink
size="micro"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just pass styles.textMicroSupporting in the style prop instead of introducing a new propType?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you move styles.link to the end of the array of styles in TextLink.js then you can just pass style={styles.textMicroSupporting} here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple reasons, but I did have a similar idea initially...

  • the additionalStyles are added after everything else so the color in textMicroSupporting would overwrite the link styles (which is undesirable since they lose the blue color and appearance as links)

https://github.com/Expensify/Expensify.cash/blob/be71feb42287a5753b2755a7975d4679baefdbc8/src/components/TextLink.js#L34

  • since this needed to be added a handful of things it seemed like a good idea to just bake it into the component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That said, we could undo this and add it with a style like textMicroSupportingLink or remove the "color" from textMicroSupporting and add it in with another style. But not really sure what is best here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you move styles.link to the end of the array of styles in TextLink.js then you can just pass style={styles.textMicroSupporting} here

Right that just undoes what we did here, but I think the change @roryabraham made makes sense. Styles passed in as props should overwrite some base style and not come before the base styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one sec, I think I've got a solution

Copy link
Contributor

@NikkiWines NikkiWines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@NikkiWines NikkiWines merged commit 16e9ef0 into main Jun 18, 2021
@NikkiWines NikkiWines deleted the marcaaron-beneficialOwners branch June 18, 2021 19:14
@OSBotify
Copy link
Contributor

🚀 Deployed to staging in version: 1.0.71-2🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production in version: 1.0.73-3🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants