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>
  );