From 2acfed6fb6fa3abd689d37642eb13652ef40a889 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 10 Jan 2024 17:06:44 +0100 Subject: [PATCH 1/5] feat: EnableBankAccount ts migration --- ...leBankAccount.js => EnableBankAccount.tsx} | 52 ++++++++----------- src/types/onyx/ReimbursementAccount.ts | 8 +++ 2 files changed, 31 insertions(+), 29 deletions(-) rename src/pages/ReimbursementAccount/EnableBankAccount/{EnableBankAccount.js => EnableBankAccount.tsx} (78%) diff --git a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.js b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx similarity index 78% rename from src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.js rename to src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx index 998fd67a25b8..abb9f8d28f3d 100644 --- a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.js +++ b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx @@ -1,9 +1,7 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React from 'react'; import {ScrollView} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import Button from '@components/Button'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import getBankIcon from '@components/Icon/BankIcons'; @@ -16,41 +14,39 @@ import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import userPropTypes from '@pages/settings/userPropTypes'; import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal'; import * as Link from '@userActions/Link'; import * as BankAccounts from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {ReimbursementAccount, User} from '@src/types/onyx'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; -const propTypes = { - /** Bank account currently in setup */ - reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired, +type EnableBankAccountOnyxProps = { + /** Object with various information about the user */ + user: OnyxEntry; +}; - /* Onyx Props */ - user: userPropTypes, +type EnableBankAccountProps = EnableBankAccountOnyxProps & { + /** Bank account currently in setup */ + reimbursementAccount: ReimbursementAccount; /** Method to trigger when pressing back button of the header */ - onBackButtonPress: PropTypes.func.isRequired, -}; - -const defaultProps = { - user: {}, + onBackButtonPress: () => void; }; -function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}) { +function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: EnableBankAccountProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const achData = lodashGet(reimbursementAccount, 'achData', {}); - const {icon, iconSize} = getBankIcon({bankName: achData.bankName, styles}); - const isUsingExpensifyCard = user.isUsingExpensifyCard; + const achData = reimbursementAccount?.achData ?? {}; + const {icon, iconSize} = getBankIcon({bankName: achData?.bankName, styles}); + const isUsingExpensifyCard = user?.isUsingExpensifyCard; const formattedBankAccountNumber = achData.accountNumber ? `${translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : ''; - const bankName = achData.addressName; - const errors = lodashGet(reimbursementAccount, 'errors', {}); - const pendingAction = lodashGet(reimbursementAccount, 'pendingAction', null); - const shouldShowResetModal = lodashGet(reimbursementAccount, 'shouldShowResetModal', false); + const bankName = achData?.addressName; + const errors = reimbursementAccount?.errors ?? {}; + const pendingAction = reimbursementAccount?.pendingAction; + const shouldShowResetModal = reimbursementAccount?.shouldShowResetModal ?? false; return ( - {Boolean(user.isCheckingDomain) && {translate('workspace.card.checkingDomain')}} + {Boolean(user?.isCheckingDomain) && {translate('workspace.card.checkingDomain')}} {shouldShowResetModal && } @@ -120,10 +116,8 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}) { } EnableBankAccount.displayName = 'EnableStep'; -EnableBankAccount.propTypes = propTypes; -EnableBankAccount.defaultProps = defaultProps; -export default withOnyx({ +export default withOnyx({ user: { key: ONYXKEYS.USER, }, diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 8cd653065071..98e2fa8fc7b0 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -1,5 +1,6 @@ import type {ValueOf} from 'type-fest'; import type CONST from '@src/CONST'; +import type {BankName} from './Bank'; import type * as OnyxCommon from './OnyxCommon'; import type {BeneficialOwnersStepDraftProps, CompanyStepProps, RequestorStepProps} from './ReimbursementAccountDraft'; @@ -25,6 +26,11 @@ type ACHData = { /** Bank account number */ accountNumber?: string; + + /** Bank account name */ + bankName?: BankName; + + addressName?: string; } & BeneficialOwnersStepDraftProps & CompanyStepProps & RequestorStepProps; @@ -55,6 +61,8 @@ type ReimbursementAccount = { draftStep?: BankAccountStep; pendingAction?: OnyxCommon.PendingAction; + + shouldShowResetModal?: boolean; }; export default ReimbursementAccount; From 20663ac1c84328f12613de42ab4bb0964ff3777f Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Wed, 10 Jan 2024 17:44:53 +0100 Subject: [PATCH 2/5] fix: rebase errors --- .../ReimbursementAccount/BankInfo/substeps/Plaid.tsx | 6 +++--- .../BusinessInfo/substeps/IncorporationStateBusiness.tsx | 6 +++--- .../BusinessInfo/substeps/TypeBusiness.tsx | 6 +++--- src/styles/index.ts | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx index 8d465990126f..ef19df5c1db2 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx/lib/types'; import AddPlaidBankAccount from '@components/AddPlaidBankAccount'; -import Form from '@components/Form'; +import FormProvider from '@components/Form/FormProvider'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -77,7 +77,7 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa return ( // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. -
-
+ ); } diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx index 494860f8a583..6caf4eb5990d 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import Form from '@components/Form'; +import FormProvider from '@components/Form/FormProvider'; import StatePicker from '@components/StatePicker'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -34,7 +34,7 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I return ( // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript -
-
+ ); } diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.tsx index 0b631d330683..deec362a3a12 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import Form from '@components/Form'; +import FormProvider from '@components/Form/FormProvider'; import Picker from '@components/Picker'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -36,7 +36,7 @@ function TypeBusiness({reimbursementAccount, onNext, isEditing}: TypeBusinessPro return ( // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript -
-
+ ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 03626c8dc82c..c0bd84af635f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4178,8 +4178,8 @@ const styles = (theme: ThemeColors) => interactiveStepHeaderStepText: { fontSize: variables.fontSizeLabel, - fontFamily: fontFamily.EXP_NEUE_BOLD, - fontWeight: fontWeightBold, + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, + fontWeight: FontUtils.fontWeight.bold, }, interactiveStepHeaderCompletedStepButton: { @@ -4206,7 +4206,7 @@ const styles = (theme: ThemeColors) => }, confirmBankInfoText: { fontSize: variables.fontSizeNormal, - fontFamily: fontFamily.EXP_NEUE, + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, color: theme.text, }, confirmBankInfoCompanyIcon: { @@ -4223,7 +4223,7 @@ const styles = (theme: ThemeColors) => borderRadius: 50, }, confirmBankInfoNumber: { - fontFamily: fontFamily.MONOSPACE, + fontFamily: FontUtils.fontFamily.platform.MONOSPACE, fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, color: theme.text, From b470e9447a6b879f7dd5526a7f3b039a97247f59 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Thu, 11 Jan 2024 10:02:26 +0100 Subject: [PATCH 3/5] fix: cr fixes --- .../substeps/IncorporationStateBusiness.tsx | 7 +++++-- .../BusinessInfo/substeps/TypeBusiness.tsx | 7 +++++-- .../EnableBankAccount/EnableBankAccount.tsx | 10 +++++----- src/types/onyx/ReimbursementAccount.ts | 2 ++ 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx index 6caf4eb5990d..9def3f200e41 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx @@ -2,6 +2,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import StatePicker from '@components/StatePicker'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -43,8 +44,10 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I submitButtonStyles={[styles.pb5, styles.mb0]} > {translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')} - {translate('businessInfoStep.selectYourCompanysType')} - ({ @@ -53,7 +57,6 @@ function TypeBusiness({reimbursementAccount, onNext, isEditing}: TypeBusinessPro label: translate(`businessInfoStep.incorporationType.${key as IncorporationType}`), }))} placeholder={{value: '', label: '-'}} - // @ts-expect-error TODO: Remove this once Picker (https://github.com/Expensify/App/issues/25091) is migrated to TypeScript defaultValue={defaultIncorporationType} shouldSaveDraft /> diff --git a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx index abb9f8d28f3d..66e62c54ec77 100644 --- a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx +++ b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx @@ -20,7 +20,7 @@ import * as BankAccounts from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccount, User} from '@src/types/onyx'; -import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import {isNotEmptyObject} from '@src/types/utils/EmptyObject'; type EnableBankAccountOnyxProps = { /** Object with various information about the user */ @@ -40,10 +40,10 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: Enab const {translate} = useLocalize(); const achData = reimbursementAccount?.achData ?? {}; - const {icon, iconSize} = getBankIcon({bankName: achData?.bankName, styles}); + const {icon, iconSize} = getBankIcon({bankName: achData.bankName, styles}); const isUsingExpensifyCard = user?.isUsingExpensifyCard; const formattedBankAccountNumber = achData.accountNumber ? `${translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : ''; - const bankName = achData?.addressName; + const bankAccountOwnerName = achData.addressName; const errors = reimbursementAccount?.errors ?? {}; const pendingAction = reimbursementAccount?.pendingAction; const shouldShowResetModal = reimbursementAccount?.shouldShowResetModal ?? false; @@ -73,7 +73,7 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: Enab onClose={BankAccounts.resetReimbursementAccount} > diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 98e2fa8fc7b0..8d549e21599f 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -30,6 +30,7 @@ type ACHData = { /** Bank account name */ bankName?: BankName; + /** Bank account owner name */ addressName?: string; } & BeneficialOwnersStepDraftProps & CompanyStepProps & @@ -62,6 +63,7 @@ type ReimbursementAccount = { pendingAction?: OnyxCommon.PendingAction; + /** Should display modal to reset datq */ shouldShowResetModal?: boolean; }; From bb7abab8fbd834c27d82aa8344da62c3c6860a08 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Thu, 11 Jan 2024 10:10:58 +0100 Subject: [PATCH 4/5] fix: cr --- .../EnableBankAccount/EnableBankAccount.tsx | 4 ++-- src/types/onyx/ReimbursementAccount.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx index 66e62c54ec77..4aacbc341f82 100644 --- a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx +++ b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx @@ -20,7 +20,7 @@ import * as BankAccounts from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccount, User} from '@src/types/onyx'; -import {isNotEmptyObject} from '@src/types/utils/EmptyObject'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; type EnableBankAccountOnyxProps = { /** Object with various information about the user */ @@ -104,7 +104,7 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: Enab icon={Expensicons.Close} onPress={BankAccounts.requestResetFreePlanBankAccount} wrapperStyle={[styles.cardMenuItem, styles.mv3]} - disabled={Boolean(pendingAction) || isNotEmptyObject(errors)} + disabled={Boolean(pendingAction) || !isEmptyObject(errors)} /> diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 8d549e21599f..dff0b201457c 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -63,7 +63,7 @@ type ReimbursementAccount = { pendingAction?: OnyxCommon.PendingAction; - /** Should display modal to reset datq */ + /** Should display modal to reset data */ shouldShowResetModal?: boolean; }; From bccec25b986fb5533ee4eb34f706fd8a75f8857e Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Thu, 11 Jan 2024 10:33:32 +0100 Subject: [PATCH 5/5] fix: fix comment --- src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx | 2 +- src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx | 2 +- .../BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx | 2 +- .../substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx | 2 +- .../BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx | 2 +- .../BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx | 2 +- .../SocialSecurityNumberUBO.tsx | 2 +- .../BusinessInfo/substeps/AddressBusiness.tsx | 2 +- .../BusinessInfo/substeps/ConfirmationBusiness.tsx | 2 +- .../BusinessInfo/substeps/IncorporationDateBusiness.tsx | 2 +- .../BusinessInfo/substeps/IncorporationStateBusiness.tsx | 2 +- .../ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx | 2 +- .../BusinessInfo/substeps/PhoneNumberBusiness.tsx | 2 +- .../BusinessInfo/substeps/TaxIdBusiness.tsx | 2 +- .../ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.tsx | 2 +- .../BusinessInfo/substeps/WebsiteBusiness.tsx | 2 +- .../CompleteVerification/substeps/ConfirmAgreements.tsx | 2 +- .../ReimbursementAccount/PersonalInfo/substeps/Address.tsx | 2 +- .../ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx | 2 +- .../ReimbursementAccount/PersonalInfo/substeps/FullName.tsx | 2 +- .../PersonalInfo/substeps/SocialSecurityNumber.tsx | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx index c6086b856262..dcee4756f81a 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx @@ -65,7 +65,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) { const shouldDisableInputs = Boolean(reimbursementAccount?.achData?.[bankInfoStepKeys.BANK_ACCOUNT_ID] ?? ''); return ( - // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. + // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. - {/* @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. */} + {/* @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. */} ValidationUtils.getFieldRequiredErrors(values, [firstNameInputID, lastNameInputID]); return ( - // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript + // @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript - {/* @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript */} + {/* @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript */} {translate('completeVerificationStep.confirmAgreements')} - {/* @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. */} + {/* @ts-expect-error TODO: Remove this once FormProvider (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript. */}