From c03a1a2a28caeab970c2aa447a87e7cb7fe4613f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Tomczyk?= Date: Wed, 7 Feb 2024 14:31:43 +0100 Subject: [PATCH] fix: added minWIdth styels and variables for substep index (#19) * fix: added minWIdth styels and variables for substep index * fix: fix ssn variable name --- src/CONST.ts | 28 +++++++++++++++++++ src/components/InteractiveStepSubHeader.tsx | 2 +- .../BankInfo/substeps/Confirmation.tsx | 3 +- .../ConfirmationUBO.tsx | 10 ++++--- .../substeps/ConfirmationBusiness.tsx | 17 +++++------ .../PersonalInfo/substeps/Confirmation.tsx | 9 +++--- src/styles/utils/sizing.ts | 9 +++++- 7 files changed, 59 insertions(+), 19 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index fa3bdb756059..6dd89ba4f224 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3261,6 +3261,34 @@ const CONST = { }, REPORT_FIELD_TITLE_FIELD_ID: 'text_title', + + REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX: { + BANK_ACCOUNT: { + ACCOUNT_NUMBERS: 0, + }, + PERSONAL_INFO: { + LEGAL_NAME: 0, + DATE_OF_BIRTH: 1, + SSN: 2, + ADDRESS: 3, + }, + BUSINESS_INFO: { + BUSINESS_NAME: 0, + TAX_ID_NUMBER: 1, + COMPANY_WEBSITE: 2, + PHONE_NUMBER: 3, + COMPANY_ADDRESS: 4, + COMPANY_TYPE: 5, + INCORPORATION_DATE: 6, + INCORPORATION_STATE: 7, + }, + UBO: { + LEGAL_NAME: 0, + DATE_OF_BIRTH: 1, + SSN: 2, + ADDRESS: 3, + }, + }, } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx index 69c97b9a389c..074e10d521cf 100644 --- a/src/components/InteractiveStepSubHeader.tsx +++ b/src/components/InteractiveStepSubHeader.tsx @@ -32,7 +32,7 @@ const MIN_AMOUNT_OF_STEPS = 2; function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected}: InteractiveStepSubHeaderProps, ref: ForwardedRef) { const styles = useThemeStyles(); - const containerWidthStyle: ViewStyle = {minWidth: stepNames.length < MIN_AMOUNT_FOR_EXPANDING ? '60%' : '100%'}; + const containerWidthStyle: ViewStyle = stepNames.length < MIN_AMOUNT_FOR_EXPANDING ? styles.mnw60 : styles.mnw100; if (stepNames.length < MIN_AMOUNT_OF_STEPS) { throw new Error(`stepNames list must have at least ${MIN_AMOUNT_OF_STEPS} elements.`); diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx index 6b071bfe13c6..1df1ad4580b4 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx @@ -27,6 +27,7 @@ type ConfirmationOnyxProps = { type ConfirmationProps = ConfirmationOnyxProps & SubStepProps; const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY; +const BANK_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.BANK_ACCOUNT; function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) { const {translate} = useLocalize(); @@ -42,7 +43,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, if (bankAccountID) { return; } - onMove(0); + onMove(BANK_INFO_STEP_INDEXES.ACCOUNT_NUMBERS); }; return ( diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx index 47bb0246a4f6..6c9c82679e56 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx +++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx @@ -26,6 +26,8 @@ type ConfirmationUBOOnyxProps = { }; type ConfirmationUBOProps = SubStepProps & ConfirmationUBOOnyxProps & {beneficialOwnerBeingModifiedID: string}; +const UBO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.UBO; + function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNext, onMove, beneficialOwnerBeingModifiedID}: ConfirmationUBOProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -45,7 +47,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex title={`${values.firstName} ${values.lastName}`} shouldShowRightIcon onPress={() => { - onMove(0); + onMove(UBO_STEP_INDEXES.LEGAL_NAME); }} /> { - onMove(1); + onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH); }} /> { - onMove(2); + onMove(UBO_STEP_INDEXES.SSN); }} /> { - onMove(3); + onMove(UBO_STEP_INDEXES.ADDRESS); }} /> diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx index 6bd9b67dcfed..9628d905fcbb 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx @@ -35,6 +35,7 @@ type ConfirmationBusinessProps = ConfirmationBusinessOnyxProps & SubStepProps; type States = keyof typeof COMMON_CONST.STATES; const BUSINESS_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; +const BUSINESS_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.BUSINESS_INFO; const validate = (values: ReimbursementAccountDraftValues): OnyxCommon.Errors => { const errors = ValidationUtils.getFieldRequiredErrors(values, [BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS]); @@ -66,7 +67,7 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft, title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]} shouldShowRightIcon onPress={() => { - onMove(0); + onMove(BUSINESS_INFO_STEP_INDEXES.BUSINESS_NAME); }} /> { - onMove(1); + onMove(BUSINESS_INFO_STEP_INDEXES.TAX_ID_NUMBER); }} /> { - onMove(4); + onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_ADDRESS); }} /> { - onMove(3); + onMove(BUSINESS_INFO_STEP_INDEXES.PHONE_NUMBER); }} /> { - onMove(2); + onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_WEBSITE); }} /> { - onMove(5); + onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_TYPE); }} /> { - onMove(6); + onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_DATE); }} /> { - onMove(7); + onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_STATE); }} /> { - onMove(0); + onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME); }} /> { - onMove(1); + onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH); }} /> { - onMove(2); + onMove(PERSONAL_INFO_STEP_INDEXES.SSN); }} /> { - onMove(3); + onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS); }} /> diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index e7273f7b2b18..b48fa0099f8a 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -34,6 +34,14 @@ export default { minWidth: '25%', }, + mnw60: { + minWidth: '60%', + }, + + mnw100: { + minWidth: '100%', + }, + mnw120: { minWidth: 120, }, @@ -69,7 +77,6 @@ export default { mw100: { maxWidth: '100%', }, - wAuto: { width: 'auto', },