Skip to content

Commit

Permalink
fix: added minWIdth styels and variables for substep index (Expensify#19
Browse files Browse the repository at this point in the history 
)

* fix: added minWIdth styels and variables for substep index

* fix: fix ssn variable name
  • Loading branch information
@barttom
barttom authored Feb 7, 2024
1 parent 9f060e6 commit c03a1a2
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 19 deletions.
28 changes: 28 additions & 0 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/InteractiveStepSubHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const MIN_AMOUNT_OF_STEPS = 2;

function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected}: InteractiveStepSubHeaderProps, ref: ForwardedRef<InteractiveStepSubHeaderHandle>) {
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.`);
Expand Down
3 changes: 2 additions & 1 deletion src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -42,7 +43,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
if (bankAccountID) {
return;
}
onMove(0);
onMove(BANK_INFO_STEP_INDEXES.ACCOUNT_NUMBERS);
};

return (
Expand Down
10 changes: 6 additions & 4 deletions ...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -45,31 +47,31 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
title={`${values.firstName} ${values.lastName}`}
shouldShowRightIcon
onPress={() => {
onMove(0);
onMove(UBO_STEP_INDEXES.LEGAL_NAME);
}}
/>
<MenuItemWithTopDescription
description={translate('common.dob')}
title={values.dob}
shouldShowRightIcon
onPress={() => {
onMove(1);
onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
}}
/>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.last4SSN')}
title={values.ssnLast4}
shouldShowRightIcon
onPress={() => {
onMove(2);
onMove(UBO_STEP_INDEXES.SSN);
}}
/>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.address')}
title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
shouldShowRightIcon
onPress={() => {
onMove(3);
onMove(UBO_STEP_INDEXES.ADDRESS);
}}
/>

Expand Down
17 changes: 9 additions & 8 deletions src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down Expand Up @@ -66,15 +67,15 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
shouldShowRightIcon
onPress={() => {
onMove(0);
onMove(BUSINESS_INFO_STEP_INDEXES.BUSINESS_NAME);
}}
/>
<MenuItemWithTopDescription
description={translate('businessInfoStep.taxIDNumber')}
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_TAX_ID]}
shouldShowRightIcon
onPress={() => {
onMove(1);
onMove(BUSINESS_INFO_STEP_INDEXES.TAX_ID_NUMBER);
}}
/>
<MenuItemWithTopDescription
Expand All @@ -84,47 +85,47 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
}`}
shouldShowRightIcon
onPress={() => {
onMove(4);
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_ADDRESS);
}}
/>
<MenuItemWithTopDescription
description={translate('common.phoneNumber')}
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_PHONE]}
shouldShowRightIcon
onPress={() => {
onMove(3);
onMove(BUSINESS_INFO_STEP_INDEXES.PHONE_NUMBER);
}}
/>
<MenuItemWithTopDescription
description={translate('businessInfoStep.companyWebsite')}
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_WEBSITE]}
shouldShowRightIcon
onPress={() => {
onMove(2);
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_WEBSITE);
}}
/>
<MenuItemWithTopDescription
description={translate('businessInfoStep.companyType')}
title={translate(`businessInfoStep.incorporationType.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_TYPE]}` as TranslationPaths)}
shouldShowRightIcon
onPress={() => {
onMove(5);
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_TYPE);
}}
/>
<MenuItemWithTopDescription
description={translate('businessInfoStep.incorporationDate')}
title={values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_DATE]}
shouldShowRightIcon
onPress={() => {
onMove(6);
onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_DATE);
}}
/>
<MenuItemWithTopDescription
description={translate('businessInfoStep.incorporationState')}
title={translate(`allStates.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_STATE] as States}.stateName`)}
shouldShowRightIcon
onPress={() => {
onMove(7);
onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_STATE);
}}
/>
<FormProvider
Expand Down
9 changes: 5 additions & 4 deletions src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ type ConfirmationOnyxProps = {
type ConfirmationProps = ConfirmationOnyxProps & SubStepProps;

const PERSONAL_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
const PERSONAL_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.PERSONAL_INFO;

function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) {
const {translate} = useLocalize();
Expand All @@ -49,23 +50,23 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
title={`${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
shouldShowRightIcon
onPress={() => {
onMove(0);
onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
}}
/>
<MenuItemWithTopDescription
description={translate('common.dob')}
title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
shouldShowRightIcon
onPress={() => {
onMove(1);
onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
}}
/>
<MenuItemWithTopDescription
description={translate('personalInfoStep.last4SSN')}
title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
shouldShowRightIcon
onPress={() => {
onMove(2);
onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
}}
/>
<MenuItemWithTopDescription
Expand All @@ -75,7 +76,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
}`}
shouldShowRightIcon
onPress={() => {
onMove(3);
onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
}}
/>

Expand Down
9 changes: 8 additions & 1 deletion src/styles/utils/sizing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ export default {
minWidth: '25%',
},

mnw60: {
minWidth: '60%',
},

mnw100: {
minWidth: '100%',
},

mnw120: {
minWidth: 120,
},
Expand Down Expand Up @@ -69,7 +77,6 @@ export default {
mw100: {
maxWidth: '100%',
},

wAuto: {
width: 'auto',
},
Expand Down

0 comments on commit c03a1a2

Please sign in to comment.