Marcin/fix vbba cr bugs (Expensify#10)

* fix: ubo list hover, incorp state hover * feat: improved return type for getFieldRequiredErrors
MrMuzyk · Jan 25, 2024 · 9fc619f · 9fc619f
1 parent 95ba920
commit 9fc619f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts
@@ -87,17 +87,22 @@ function isRequiredFulfilled(value: string | Date | unknown[] | Record<string, u
     return Boolean(value);
 }
 
+type GetFieldRequiredErrorsReturn<K extends string[]> = {[P in K[number]]: string};
+
 /**
  * Used to add requiredField error to the fields passed.
  */
-function getFieldRequiredErrors(values: OnyxCommon.Errors, requiredFields: string[]) {
-    const errors: OnyxCommon.Errors = {};
-    requiredFields.forEach((fieldKey) => {
+function getFieldRequiredErrors<T extends OnyxCommon.Errors, K extends string[]>(values: T, requiredFields: K): GetFieldRequiredErrorsReturn<K> {
+    const errors: GetFieldRequiredErrorsReturn<K> = {} as GetFieldRequiredErrorsReturn<K>;
+
+    requiredFields.forEach((fieldKey: K[number]) => {
         if (isRequiredFulfilled(values[fieldKey])) {
             return;
         }
+
         errors[fieldKey] = 'common.error.fieldRequired';
     });
+
     return errors;
 }
 

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -89,7 +89,7 @@ function CompanyOwnersListUBO({
                     key={ownerKey}
                     title={`${beneficialOwnerData.firstName} ${beneficialOwnerData.lastName}`}
                     description={`${beneficialOwnerData.street}, ${beneficialOwnerData.city}, ${beneficialOwnerData.state} ${beneficialOwnerData.zipCode}`}
-                    wrapperStyle={[styles.ph0]}
+                    wrapperStyle={[styles.ph5]}
                     icon={Expensicons.FallbackAvatar}
                     onPress={() => {
                         handleUBOEdit(ownerKey);
@@ -107,16 +107,16 @@ function CompanyOwnersListUBO({
             testID={CompanyOwnersListUBO.displayName}
             style={[styles.pt0]}
         >
-            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph5]}>
-                <Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
-                <Text style={styles.pv5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
+                <Text style={[styles.textHeadline, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={styles.p5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <View>
-                    <Text style={[styles.textLabelSupporting, styles.pv1]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
+                    <Text style={[styles.textLabelSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
                     {isUserUBO && (
                         <MenuItem
                             title={`${requestorData.firstName} ${requestorData.lastName}`}
                             description={`${requestorData.requestorAddressStreet}, ${requestorData.requestorAddressCity}, ${requestorData.requestorAddressState} ${requestorData.requestorAddressZipCode}`}
-                            wrapperStyle={[styles.ph0]}
+                            wrapperStyle={[styles.ph5]}
                             icon={Expensicons.FallbackAvatar}
                             iconWidth={40}
                             iconHeight={40}
@@ -139,7 +139,7 @@ function CompanyOwnersListUBO({
                 <Button
                     success
                     isLoading={isLoading}
-                    style={[styles.w100, styles.mt2, styles.pb5]}
+                    style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
                     onPress={handleUBOsConfirmation}
                     text={translate('common.confirm')}
                 />

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx
@@ -46,10 +46,10 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I
             submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
             validate={validate}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-            submitButtonStyles={[styles.pb5, styles.mb0]}
+            style={[styles.mh0, styles.flexGrow1]}
+            submitButtonStyles={[styles.ph5, styles.pb5, styles.mb0]}
         >
-            <Text style={styles.textHeadline}>{translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')}</Text>
+            <Text style={[styles.textHeadline, styles.ph5]}>{translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')}</Text>
             <InputWrapper
                 // @ts-expect-error TODO: Remove this once InputWrapper (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript.
                 InputComponent={StatePicker}
@@ -58,7 +58,7 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I
                 label={translate('businessInfoStep.incorporationState')}
                 defaultValue={defaultCompanyIncorporationState}
                 shouldSaveDraft={!isEditing}
-                wrapperStyle={[styles.ph0, styles.mt4]}
+                wrapperStyle={[styles.ph5, styles.mt4]}
             />
         </FormProvider>
     );