Merge branch 'vit-tieredBankAccountFlow' into nat-vbbaordernpolicy

barttom · Jan 22, 2024 · 0ca217c · 0ca217c
2 parents 2408f45 + 997149f
commit 0ca217c
Show file tree

Hide file tree

Showing 30 changed files with 326 additions and 191 deletions.
diff --git a/src/hooks/useReimbursementAccountStepFormSubmit.ts b/src/hooks/useReimbursementAccountStepFormSubmit.ts
@@ -0,0 +1,32 @@
+import {useCallback} from 'react';
+import * as FormActions from '@userActions/FormActions';
+import type {OnyxFormKeyWithoutDraft} from '@userActions/FormActions';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {FormValues} from '@src/types/onyx/Form';
+import type {SubStepProps} from './useSubStep/types';
+
+type UseReimbursementAccountStepFormSubmitParams = Pick<SubStepProps, 'isEditing' | 'onNext'> & {
+    formId?: OnyxFormKeyWithoutDraft;
+    fieldIds: Array<keyof FormValues>;
+};
+
+export default function useReimbursementAccountStepFormSubmit({formId = ONYXKEYS.REIMBURSEMENT_ACCOUNT, isEditing, onNext, fieldIds}: UseReimbursementAccountStepFormSubmitParams) {
+    return useCallback(
+        (values: FormValues) => {
+            if (isEditing) {
+                const stepValues = fieldIds.reduce(
+                    (acc, key) => ({
+                        ...acc,
+                        [key]: values[key],
+                    }),
+                    {},
+                );
+
+                FormActions.setDraftValues(formId, stepValues);
+            }
+
+            onNext();
+        },
+        [isEditing, onNext, formId, fieldIds],
+    );
+}
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
@@ -138,14 +138,6 @@ function addBusinessWebsiteForDraft(website: string) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {website});
 }
 
-function addBusinessAddressForDraft(businessAddress: BusinessAddress) {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, businessAddress);
-}
-
-function addPersonalAddressForDraft(personalAddress: {requestorAddressStreet?: string; requestorAddressCity?: string; requestorAddressState?: string; requestorAddressZipCode?: string}) {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, personalAddress);
-}
-
 /**
  * Submit Bank Account step with Plaid data so php can perform some checks.
  */
@@ -543,8 +535,6 @@ function setReimbursementAccountLoading(isLoading: boolean) {
 export {
     acceptACHContractForBankAccount,
     addBusinessWebsiteForDraft,
-    addBusinessAddressForDraft,
-    addPersonalAddressForDraft,
     addPersonalBankAccount,
     clearOnfidoToken,
     clearPersonalBankAccount,

diff --git a/src/libs/actions/FormActions.ts b/src/libs/actions/FormActions.ts
@@ -31,4 +31,5 @@ function clearDraftValues(formID: OnyxFormKeyWithoutDraft) {
     Onyx.merge(FormUtils.getDraftKey(formID), undefined);
 }
 
+export type {OnyxFormKeyWithoutDraft};
 export {setDraftValues, setErrorFields, setErrors, setIsLoading, clearDraftValues};
diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -36,7 +36,7 @@ type BankInfoProps = BankInfoOnyxProps & {
     onBackButtonPress: () => void;
 };
 
-const bankInfoStepKeys = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
+const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
 const manualSubsteps: Array<React.ComponentType<SubStepProps>> = [Manual, Confirmation];
 const plaidSubsteps: Array<React.ComponentType<SubStepProps>> = [Plaid, Confirmation];
 const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI();
@@ -46,7 +46,7 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok
     const styles = useThemeStyles();
 
     const [redirectedFromPlaidToManual, setRedirectedFromPlaidToManual] = React.useState(false);
-    const values = useMemo(() => getSubstepValues(bankInfoStepKeys, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
+    const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
 
     let setupType = reimbursementAccount?.achData?.subStep ?? '';
 
@@ -61,20 +61,20 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok
         if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
             BankAccounts.connectBankAccountManually(
                 bankAccountID,
-                values[bankInfoStepKeys.ACCOUNT_NUMBER],
-                values[bankInfoStepKeys.ROUTING_NUMBER],
-                values[bankInfoStepKeys.PLAID_MASK],
+                values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER],
+                values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER],
+                values[BANK_INFO_STEP_KEYS.PLAID_MASK],
                 policyID,
             );
         } else if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
             BankAccounts.connectBankAccountWithPlaid(
                 bankAccountID,
                 {
-                    [bankInfoStepKeys.ROUTING_NUMBER]: values[bankInfoStepKeys.ROUTING_NUMBER] ?? '',
-                    [bankInfoStepKeys.ACCOUNT_NUMBER]: values[bankInfoStepKeys.ACCOUNT_NUMBER] ?? '',
-                    [bankInfoStepKeys.BANK_NAME]: values[bankInfoStepKeys.BANK_NAME] ?? '',
-                    [bankInfoStepKeys.PLAID_ACCOUNT_ID]: values[bankInfoStepKeys.PLAID_ACCOUNT_ID] ?? '',
-                    [bankInfoStepKeys.PLAID_ACCESS_TOKEN]: values[bankInfoStepKeys.PLAID_ACCESS_TOKEN] ?? '',
+                    [bankInfoStepKeys.ROUTING_NUMBER]: values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '',
+                    [bankInfoStepKeys.ACCOUNT_NUMBER]: values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '',
+                    [bankInfoStepKeys.BANK_NAME]: values[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '',
+                    [bankInfoStepKeys.PLAID_ACCOUNT_ID]: values[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '',
+                    [bankInfoStepKeys.PLAID_ACCESS_TOKEN]: values[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '',
                 },
                 policyID,
             );

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -26,7 +26,7 @@ type ConfirmationOnyxProps = {
 
 type ConfirmationProps = ConfirmationOnyxProps & SubStepProps;
 
-const bankInfoStepKeys = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
+const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
 
 function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) {
     const {translate} = useLocalize();
@@ -35,7 +35,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
     const isLoading = reimbursementAccount?.isLoading ?? false;
     const setupType = reimbursementAccount?.achData?.subStep ?? '';
     const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0');
-    const values = useMemo(() => getSubstepValues(bankInfoStepKeys, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
+    const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
 
     const handleModifyAccountNumbers = () => {
@@ -56,22 +56,22 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                     <View style={[styles.mb5]}>
                         <MenuItemWithTopDescription
                             description={translate('bankAccount.routingNumber')}
-                            title={values[bankInfoStepKeys.ROUTING_NUMBER]}
+                            title={values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
                             shouldShowRightIcon={!bankAccountID}
                             onPress={handleModifyAccountNumbers}
                         />
 
                         <MenuItemWithTopDescription
                             description={translate('bankAccount.accountNumber')}
-                            title={values[bankInfoStepKeys.ACCOUNT_NUMBER]}
+                            title={values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
                             shouldShowRightIcon={!bankAccountID}
                             onPress={handleModifyAccountNumbers}
                         />
                     </View>
                 )}
                 {setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && (
                     <MenuItemWithTopDescription
-                        description={values[bankInfoStepKeys.BANK_NAME]}
+                        description={values[BANK_INFO_STEP_KEYS.BANK_NAME]}
                         title={`${translate('bankAccount.accountEnding')} ${(values[bankInfoStepKeys.ACCOUNT_NUMBER] ?? '').slice(-4)}`}
                         shouldShowRightIcon={!bankAccountID}
                         onPress={handleModifyAccountNumbers}

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
@@ -23,15 +23,16 @@ type ManualProps = ManualOnyxProps & SubStepProps;
 
 type FormValues = {routingNumber: string; accountNumber: string};
 
-const bankInfoStepKeys = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
+const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
+const STEP_FIELDS = [BANK_INFO_STEP_KEYS.ROUTING_NUMBER, BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER];
 
 function Manual({reimbursementAccount, onNext}: ManualProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     const defaultValues: FormValues = {
-        [bankInfoStepKeys.ROUTING_NUMBER]: reimbursementAccount?.achData?.[bankInfoStepKeys.ROUTING_NUMBER] ?? '',
-        [bankInfoStepKeys.ACCOUNT_NUMBER]: reimbursementAccount?.achData?.[bankInfoStepKeys.ACCOUNT_NUMBER] ?? '',
+        [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: reimbursementAccount?.achData?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '',
+        [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: reimbursementAccount?.achData?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '',
     };
 
     /**
@@ -40,8 +41,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
      */
     const validate = useCallback(
         (values: FormValues) => {
-            const requiredFields = [bankInfoStepKeys.ROUTING_NUMBER, bankInfoStepKeys.ACCOUNT_NUMBER];
-            const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);
+            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
             const routingNumber = values.routingNumber?.trim();
 
             if (
@@ -80,11 +80,11 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
             <InputWrapper
                 // @ts-expect-error TODO: Remove this once InputWrapper (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript.
                 InputComponent={TextInput}
-                inputID={bankInfoStepKeys.ROUTING_NUMBER}
+                inputID={BANK_INFO_STEP_KEYS.ROUTING_NUMBER}
                 label={translate('bankAccount.routingNumber')}
                 aria-label={translate('bankAccount.routingNumber')}
                 role={CONST.ROLE.PRESENTATION}
-                defaultValue={defaultValues[bankInfoStepKeys.ROUTING_NUMBER]}
+                defaultValue={defaultValues[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
                 inputMode={CONST.INPUT_MODE.NUMERIC}
                 disabled={shouldDisableInputs}
                 shouldSaveDraft
@@ -93,12 +93,12 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
             <InputWrapper
                 // @ts-expect-error TODO: Remove this once InputWrapper (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript.
                 InputComponent={TextInput}
-                inputID={bankInfoStepKeys.ACCOUNT_NUMBER}
+                inputID={BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER}
                 containerStyles={[styles.mt4]}
                 label={translate('bankAccount.accountNumber')}
                 aria-label={translate('bankAccount.accountNumber')}
                 role={CONST.ROLE.PRESENTATION}
-                defaultValue={defaultValues[bankInfoStepKeys.ACCOUNT_NUMBER]}
+                defaultValue={defaultValues[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
                 inputMode={CONST.INPUT_MODE.NUMERIC}
                 disabled={shouldDisableInputs}
                 shouldSaveDraft

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
@@ -31,7 +31,7 @@ type ValuesToValidate = {
     acceptTerms: boolean;
 };
 
-const bankInfoStepKeys = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
+const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
 
 function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidData}: PlaidProps) {
     const {translate} = useLocalize();
@@ -56,24 +56,26 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
     }, [isFocused, plaidData]);
 
     const handleNextPress = useCallback(() => {
-        const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find((account) => account.plaidAccountID === reimbursementAccountDraft?.[bankInfoStepKeys.PLAID_ACCOUNT_ID] ?? null);
+        const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find(
+            (account) => account.plaidAccountID === reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? null,
+        );
 
         const bankAccountData = {
-            [bankInfoStepKeys.ROUTING_NUMBER]: selectedPlaidBankAccount?.[bankInfoStepKeys.ROUTING_NUMBER],
-            [bankInfoStepKeys.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[bankInfoStepKeys.ACCOUNT_NUMBER],
-            [bankInfoStepKeys.PLAID_MASK]: selectedPlaidBankAccount?.mask,
-            [bankInfoStepKeys.IS_SAVINGS]: selectedPlaidBankAccount?.[bankInfoStepKeys.IS_SAVINGS],
-            [bankInfoStepKeys.BANK_NAME]: plaidData?.[bankInfoStepKeys.BANK_NAME] ?? '',
-            [bankInfoStepKeys.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[bankInfoStepKeys.PLAID_ACCOUNT_ID],
-            [bankInfoStepKeys.PLAID_ACCESS_TOKEN]: plaidData?.[bankInfoStepKeys.PLAID_ACCESS_TOKEN] ?? '',
+            [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER],
+            [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER],
+            [BANK_INFO_STEP_KEYS.PLAID_MASK]: selectedPlaidBankAccount?.mask,
+            [BANK_INFO_STEP_KEYS.IS_SAVINGS]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.IS_SAVINGS],
+            [BANK_INFO_STEP_KEYS.BANK_NAME]: plaidData?.[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '',
+            [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID],
+            [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '',
         };
 
         ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);
         onNext();
     }, [plaidData, reimbursementAccountDraft, onNext]);
 
     const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0');
-    const selectedPlaidAccountID = reimbursementAccountDraft?.[bankInfoStepKeys.PLAID_ACCOUNT_ID] ?? '';
+    const selectedPlaidAccountID = reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '';
 
     return (
         // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript.

diff --git a/...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import FormProvider from '@components/Form/FormProvider';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -27,51 +28,57 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const INPUT_KEYS: Record<string, keyof FormValues> = {
+    const inputKeys: Record<string, keyof FormValues> = {
         street: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.STREET}`,
         city: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.CITY}`,
         state: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.STATE}`,
         zipCode: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.ZIP_CODE}`,
     };
 
-    const REQUIRED_FIELDS = [INPUT_KEYS.street, INPUT_KEYS.city, INPUT_KEYS.state, INPUT_KEYS.zipCode];
+    const stepFields = [inputKeys.street, inputKeys.city, inputKeys.state, inputKeys.zipCode];
 
     const defaultValues = {
-        street: reimbursementAccountDraft?.[INPUT_KEYS.street] ?? '',
-        city: reimbursementAccountDraft?.[INPUT_KEYS.city] ?? '',
-        state: reimbursementAccountDraft?.[INPUT_KEYS.state] ?? '',
-        zipCode: reimbursementAccountDraft?.[INPUT_KEYS.zipCode] ?? '',
+        street: reimbursementAccountDraft?.[inputKeys.street] ?? '',
+        city: reimbursementAccountDraft?.[inputKeys.city] ?? '',
+        state: reimbursementAccountDraft?.[inputKeys.state] ?? '',
+        zipCode: reimbursementAccountDraft?.[inputKeys.zipCode] ?? '',
     };
 
     const validate = (values: FormValues) => {
-        const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
+        const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
 
-        if (values[INPUT_KEYS.street] && !ValidationUtils.isValidAddress(values[INPUT_KEYS.street])) {
-            errors[INPUT_KEYS.street] = 'bankAccount.error.addressStreet';
+        if (values[inputKeys.street] && !ValidationUtils.isValidAddress(values[inputKeys.street])) {
+            errors[inputKeys.street] = 'bankAccount.error.addressStreet';
         }
 
-        if (values[INPUT_KEYS.zipCode] && !ValidationUtils.isValidZipCode(values[INPUT_KEYS.zipCode])) {
-            errors[INPUT_KEYS.zipCode] = 'bankAccount.error.zipCode';
+        if (values[inputKeys.zipCode] && !ValidationUtils.isValidZipCode(values[inputKeys.zipCode])) {
+            errors[inputKeys.zipCode] = 'bankAccount.error.zipCode';
         }
 
         return errors;
     };
 
+    const handleSubmit = useReimbursementAccountStepFormSubmit({
+        fieldIds: stepFields,
+        isEditing,
+        onNext,
+    });
+
     return (
         // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript
         <FormProvider
             formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
             submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
             validate={validate}
-            onSubmit={onNext}
+            onSubmit={handleSubmit}
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
             <Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
             <Text>{translate('common.noPO')}</Text>
             <AddressForm
-                inputKeys={INPUT_KEYS}
-                shouldSaveDraft
+                inputKeys={inputKeys}
+                shouldSaveDraft={!isEditing}
                 translate={translate}
                 defaultValues={defaultValues}
                 streetTranslationKey="common.streetAddress"