feat: final refactor tweaks (Expensify#7)

* feat: Added missing validation and QOL change on UBO confirm step * fix: add missing prop
MrMuzyk · Jan 24, 2024 · dbc5dd3 · dbc5dd3
1 parent a48104e
commit dbc5dd3
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 11 deletions.
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -74,6 +74,7 @@ function CompanyOwnersListUBO({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const isLoading = reimbursementAccount?.isLoading ?? false;
     const requestorData = getSubstepValues(REQUESTOR_PERSONAL_INFO_KEYS, {}, reimbursementAccount);
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount);
 
@@ -137,6 +138,7 @@ function CompanyOwnersListUBO({
                 </View>
                 <Button
                     success
+                    isLoading={isLoading}
                     style={[styles.w100, styles.mt2, styles.pb5]}
                     onPress={handleUBOsConfirmation}
                     text={translate('common.confirm')}

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
@@ -40,6 +40,10 @@ const validate = (values: FormValues): OnyxCommon.Errors => {
         errors.addressStreet = 'bankAccount.error.addressStreet';
     }
 
+    if (values.addressCity && !ValidationUtils.isValidAddress(values.addressCity)) {
+        errors.addressCity = 'bankAccount.error.addressCity';
+    }
+
     if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
         errors.addressZipCode = 'bankAccount.error.zipCode';
     }

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx
@@ -26,7 +26,15 @@ type NameBusinessProps = NameBusinessOnyxProps & SubStepProps;
 const COMPANY_NAME_KEY = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME;
 const STEP_FIELDS = [COMPANY_NAME_KEY];
 
-const validate = (values: FormValues): OnyxCommon.Errors => ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+const validate = (values: FormValues): OnyxCommon.Errors => {
+    const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+
+    if (values.companyName && !ValidationUtils.isValidCompanyName(values.companyName)) {
+        errors.companyName = 'bankAccount.error.companyName';
+    }
+
+    return errors;
+};
 
 function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessProps) {
     const {translate} = useLocalize();

diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx
@@ -63,6 +63,7 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount}
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const policyID = reimbursementAccount?.achData?.policyID ?? '';
     const submit = useCallback(
         (values: FormValues) => {
             const amount1 = filterInput(values.amount1);
@@ -122,7 +123,7 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount}
             </View>
             {!requiresTwoFactorAuth && (
                 <View style={[styles.mln5, styles.mrn5, styles.mt3]}>
-                    <Enable2FACard />
+                    <Enable2FACard policyID={policyID} />
                 </View>
             )}
         </FormProvider>

diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx
@@ -6,14 +6,14 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Link from '@userActions/Link';
+import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 
-const secureYourAccountUrl = encodeURI(
-    `settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute()}","isFromNewDot":"true"}`,
-);
+type Enable2FACardProps = {
+    policyID: string;
+};
 
-function Enable2FACard() {
+function Enable2FACard({policyID}: Enable2FACardProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -26,13 +26,12 @@ function Enable2FACard() {
                 {
                     title: translate('validationStep.secureYourAccount'),
                     onPress: () => {
-                        Link.openOldDotLink(secureYourAccountUrl);
+                        Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID)));
                     },
                     icon: Expensicons.Shield,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
                     wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOldDotURL(secureYourAccountUrl),
                 },
             ]}
         >

diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
@@ -25,6 +25,7 @@ type FinishChatCardProps = {
 function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishChatCardProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const policyID = reimbursementAccount?.achData?.policyID ?? '';
     const shouldShowResetModal = reimbursementAccount.shouldShowResetModal ?? false;
     const handleNavigateToConciergeChat = () => Report.navigateToConciergeChat();
 
@@ -54,7 +55,7 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
                     wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                 />
             </Section>
-            {!requiresTwoFactorAuth && <Enable2FACard />}
+            {!requiresTwoFactorAuth && <Enable2FACard policyID={policyID} />}
             {shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={reimbursementAccount} />}
         </ScrollView>
     );

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
@@ -28,7 +28,17 @@ type FullNameProps = FullNameOnyxProps & SubStepProps;
 const PERSONAL_INFO_STEP_KEY = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.FIRST_NAME, PERSONAL_INFO_STEP_KEY.LAST_NAME];
 
-const validate = (values: FormValues): OnyxCommon.Errors => ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+const validate = (values: FormValues): OnyxCommon.Errors => {
+    const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+    if (values.firstName && !ValidationUtils.isValidPersonName(values.firstName)) {
+        errors.firstName = 'bankAccount.error.firstName';
+    }
+
+    if (values.lastName && !ValidationUtils.isValidPersonName(values.lastName)) {
+        errors.lastName = 'bankAccount.error.lastName';
+    }
+    return errors;
+};
 
 function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
     const {translate} = useLocalize();