Skip to content

Commit c03a1a2

Browse files
barttombarttom
authored
fix: added minWIdth styels and variables for substep index (#19)
* fix: added minWIdth styels and variables for substep index * fix: fix ssn variable name
1 parent 9f060e6 commit c03a1a2

7 files changed

Lines changed: 59 additions & 19 deletions

File tree

‎src/CONST.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3261,6 +3261,34 @@ const CONST = {
32613261
},
32623262

32633263
REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
3264+
3265+
REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX: {
3266+
BANK_ACCOUNT: {
3267+
ACCOUNT_NUMBERS: 0,
3268+
},
3269+
PERSONAL_INFO: {
3270+
LEGAL_NAME: 0,
3271+
DATE_OF_BIRTH: 1,
3272+
SSN: 2,
3273+
ADDRESS: 3,
3274+
},
3275+
BUSINESS_INFO: {
3276+
BUSINESS_NAME: 0,
3277+
TAX_ID_NUMBER: 1,
3278+
COMPANY_WEBSITE: 2,
3279+
PHONE_NUMBER: 3,
3280+
COMPANY_ADDRESS: 4,
3281+
COMPANY_TYPE: 5,
3282+
INCORPORATION_DATE: 6,
3283+
INCORPORATION_STATE: 7,
3284+
},
3285+
UBO: {
3286+
LEGAL_NAME: 0,
3287+
DATE_OF_BIRTH: 1,
3288+
SSN: 2,
3289+
ADDRESS: 3,
3290+
},
3291+
},
32643292
} as const;
32653293

32663294
type Country = keyof typeof CONST.ALL_COUNTRIES;

‎src/components/InteractiveStepSubHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const MIN_AMOUNT_OF_STEPS = 2;
3232

3333
function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected}: InteractiveStepSubHeaderProps, ref: ForwardedRef<InteractiveStepSubHeaderHandle>) {
3434
const styles = useThemeStyles();
35-
const containerWidthStyle: ViewStyle = {minWidth: stepNames.length < MIN_AMOUNT_FOR_EXPANDING ? '60%' : '100%'};
35+
const containerWidthStyle: ViewStyle = stepNames.length < MIN_AMOUNT_FOR_EXPANDING ? styles.mnw60 : styles.mnw100;
3636

3737
if (stepNames.length < MIN_AMOUNT_OF_STEPS) {
3838
throw new Error(`stepNames list must have at least ${MIN_AMOUNT_OF_STEPS} elements.`);

‎src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type ConfirmationOnyxProps = {
2727
type ConfirmationProps = ConfirmationOnyxProps & SubStepProps;
2828

2929
const BANK_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BANK_INFO_STEP.INPUT_KEY;
30+
const BANK_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.BANK_ACCOUNT;
3031

3132
function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) {
3233
const {translate} = useLocalize();
@@ -42,7 +43,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
4243
if (bankAccountID) {
4344
return;
4445
}
45-
onMove(0);
46+
onMove(BANK_INFO_STEP_INDEXES.ACCOUNT_NUMBERS);
4647
};
4748

4849
return (

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ type ConfirmationUBOOnyxProps = {
2626
};
2727
type ConfirmationUBOProps = SubStepProps & ConfirmationUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
2828

29+
const UBO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.UBO;
30+
2931
function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNext, onMove, beneficialOwnerBeingModifiedID}: ConfirmationUBOProps) {
3032
const {translate} = useLocalize();
3133
const styles = useThemeStyles();
@@ -45,31 +47,31 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
4547
title={`${values.firstName} ${values.lastName}`}
4648
shouldShowRightIcon
4749
onPress={() => {
48-
onMove(0);
50+
onMove(UBO_STEP_INDEXES.LEGAL_NAME);
4951
}}
5052
/>
5153
<MenuItemWithTopDescription
5254
description={translate('common.dob')}
5355
title={values.dob}
5456
shouldShowRightIcon
5557
onPress={() => {
56-
onMove(1);
58+
onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
5759
}}
5860
/>
5961
<MenuItemWithTopDescription
6062
description={translate('beneficialOwnerInfoStep.last4SSN')}
6163
title={values.ssnLast4}
6264
shouldShowRightIcon
6365
onPress={() => {
64-
onMove(2);
66+
onMove(UBO_STEP_INDEXES.SSN);
6567
}}
6668
/>
6769
<MenuItemWithTopDescription
6870
description={translate('beneficialOwnerInfoStep.address')}
6971
title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
7072
shouldShowRightIcon
7173
onPress={() => {
72-
onMove(3);
74+
onMove(UBO_STEP_INDEXES.ADDRESS);
7375
}}
7476
/>
7577

‎src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ type ConfirmationBusinessProps = ConfirmationBusinessOnyxProps & SubStepProps;
3535
type States = keyof typeof COMMON_CONST.STATES;
3636

3737
const BUSINESS_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY;
38+
const BUSINESS_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.BUSINESS_INFO;
3839

3940
const validate = (values: ReimbursementAccountDraftValues): OnyxCommon.Errors => {
4041
const errors = ValidationUtils.getFieldRequiredErrors(values, [BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS]);
@@ -66,15 +67,15 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
6667
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
6768
shouldShowRightIcon
6869
onPress={() => {
69-
onMove(0);
70+
onMove(BUSINESS_INFO_STEP_INDEXES.BUSINESS_NAME);
7071
}}
7172
/>
7273
<MenuItemWithTopDescription
7374
description={translate('businessInfoStep.taxIDNumber')}
7475
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_TAX_ID]}
7576
shouldShowRightIcon
7677
onPress={() => {
77-
onMove(1);
78+
onMove(BUSINESS_INFO_STEP_INDEXES.TAX_ID_NUMBER);
7879
}}
7980
/>
8081
<MenuItemWithTopDescription
@@ -84,47 +85,47 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
8485
}`}
8586
shouldShowRightIcon
8687
onPress={() => {
87-
onMove(4);
88+
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_ADDRESS);
8889
}}
8990
/>
9091
<MenuItemWithTopDescription
9192
description={translate('common.phoneNumber')}
9293
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_PHONE]}
9394
shouldShowRightIcon
9495
onPress={() => {
95-
onMove(3);
96+
onMove(BUSINESS_INFO_STEP_INDEXES.PHONE_NUMBER);
9697
}}
9798
/>
9899
<MenuItemWithTopDescription
99100
description={translate('businessInfoStep.companyWebsite')}
100101
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_WEBSITE]}
101102
shouldShowRightIcon
102103
onPress={() => {
103-
onMove(2);
104+
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_WEBSITE);
104105
}}
105106
/>
106107
<MenuItemWithTopDescription
107108
description={translate('businessInfoStep.companyType')}
108109
title={translate(`businessInfoStep.incorporationType.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_TYPE]}` as TranslationPaths)}
109110
shouldShowRightIcon
110111
onPress={() => {
111-
onMove(5);
112+
onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_TYPE);
112113
}}
113114
/>
114115
<MenuItemWithTopDescription
115116
description={translate('businessInfoStep.incorporationDate')}
116117
title={values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_DATE]}
117118
shouldShowRightIcon
118119
onPress={() => {
119-
onMove(6);
120+
onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_DATE);
120121
}}
121122
/>
122123
<MenuItemWithTopDescription
123124
description={translate('businessInfoStep.incorporationState')}
124125
title={translate(`allStates.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_STATE] as States}.stateName`)}
125126
shouldShowRightIcon
126127
onPress={() => {
127-
onMove(7);
128+
onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_STATE);
128129
}}
129130
/>
130131
<FormProvider

‎src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type ConfirmationOnyxProps = {
2828
type ConfirmationProps = ConfirmationOnyxProps & SubStepProps;
2929

3030
const PERSONAL_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
31+
const PERSONAL_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.PERSONAL_INFO;
3132

3233
function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) {
3334
const {translate} = useLocalize();
@@ -49,23 +50,23 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
4950
title={`${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
5051
shouldShowRightIcon
5152
onPress={() => {
52-
onMove(0);
53+
onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
5354
}}
5455
/>
5556
<MenuItemWithTopDescription
5657
description={translate('common.dob')}
5758
title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
5859
shouldShowRightIcon
5960
onPress={() => {
60-
onMove(1);
61+
onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
6162
}}
6263
/>
6364
<MenuItemWithTopDescription
6465
description={translate('personalInfoStep.last4SSN')}
6566
title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
6667
shouldShowRightIcon
6768
onPress={() => {
68-
onMove(2);
69+
onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
6970
}}
7071
/>
7172
<MenuItemWithTopDescription
@@ -75,7 +76,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
7576
}`}
7677
shouldShowRightIcon
7778
onPress={() => {
78-
onMove(3);
79+
onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
7980
}}
8081
/>
8182

‎src/styles/utils/sizing.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@ export default {
3434
minWidth: '25%',
3535
},
3636

37+
mnw60: {
38+
minWidth: '60%',
39+
},
40+
41+
mnw100: {
42+
minWidth: '100%',
43+
},
44+
3745
mnw120: {
3846
minWidth: 120,
3947
},
@@ -69,7 +77,6 @@ export default {
6977
mw100: {
7078
maxWidth: '100%',
7179
},
72-
7380
wAuto: {
7481
width: 'auto',
7582
},

0 commit comments

Comments
 (0)