diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx index c14e4bb7201a..56966bc45887 100644 --- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx @@ -1,14 +1,8 @@ import React, {useMemo} from 'react'; -import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; -import Button from '@components/Button'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; -import SafeAreaConsumer from '@components/SafeAreaConsumer'; -import ScrollView from '@components/ScrollView'; -import Text from '@components/Text'; +import ConfirmationStep from '@components/SubStepForms/ConfirmationStep'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; -import useThemeStyles from '@hooks/useThemeStyles'; import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; @@ -30,9 +24,8 @@ const { OWNS_MORE_THAN_25_PERCENT, } = INPUT_IDS.ADDITIONAL_DATA.CORPAY; -function Confirmation({onNext, onMove, isSecondSigner}: ConfirmationProps) { +function Confirmation({onNext, onMove, isEditing, isSecondSigner}: ConfirmationProps) { const {translate} = useLocalize(); - const styles = useThemeStyles(); const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); @@ -42,70 +35,62 @@ function Confirmation({onNext, onMove, isSecondSigner}: ConfirmationProps) { const IDs = values[isSecondSigner ? SECOND_SIGNER_COPY_OF_ID : SIGNER_COPY_OF_ID]; const proofs = values[isSecondSigner ? SECOND_SIGNER_ADDRESS_PROOF : SIGNER_ADDRESS_PROOF]; + const summaryItems = [ + { + title: values[isSecondSigner ? SECOND_SIGNER_JOB_TITLE : SIGNER_JOB_TITLE], + description: translate('signerInfoStep.jobTitle'), + shouldShowRightIcon: true, + onPress: () => { + onMove(1); + }, + }, + { + title: IDs ? IDs.map((id) => id.name).join(', ') : '', + description: translate('signerInfoStep.id'), + shouldShowRightIcon: true, + onPress: () => { + onMove(3); + }, + }, + { + title: proofs ? proofs.map((proof) => proof.name).join(', ') : '', + description: translate('signerInfoStep.proofOf'), + shouldShowRightIcon: true, + onPress: () => { + onMove(3); + }, + }, + ]; + + if (!isUserOwner) { + summaryItems.unshift({ + title: `${values[isSecondSigner ? SECOND_SIGNER_FULL_NAME : SIGNER_FULL_NAME]}`, + description: translate('signerInfoStep.legalName'), + shouldShowRightIcon: true, + onPress: () => { + onMove(0); + }, + }); + + summaryItems.splice(2, 0, { + title: values[isSecondSigner ? SECOND_SIGNER_DATE_OF_BIRTH : SIGNER_DATE_OF_BIRTH], + description: translate('common.dob'), + shouldShowRightIcon: true, + onPress: () => { + onMove(2); + }, + }); + } + return ( - - {({safeAreaPaddingBottomStyle}) => ( - - {translate('signerInfoStep.letsDoubleCheck')} - {!isUserOwner && ( - { - onMove(0); - }} - /> - )} - { - onMove(1); - }} - /> - {!isUserOwner && ( - { - onMove(2); - }} - /> - )} - id.name).join(', ') : ''} - shouldShowRightIcon - onPress={() => { - onMove(3); - }} - /> - proof.name).join(', ') : ''} - shouldShowRightIcon - onPress={() => { - onMove(3); - }} - /> - -