diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 88b740e0e6c8..4d2004e6d4c2 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -492,8 +492,8 @@ type OnyxValues = { [ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM_DRAFT]: OnyxTypes.WorkspaceSettingsForm; [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM_DRAFT]: OnyxTypes.Form; - [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: OnyxTypes.Form; - [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form; + [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: OnyxTypes.CloseAccountForm; + [ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM_DRAFT]: OnyxTypes.CloseAccountForm; [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM_DRAFT]: OnyxTypes.Form; [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: OnyxTypes.DisplayNameForm; diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index 7313bb4aa7bb..48e9aa49d0de 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -45,7 +45,7 @@ type LocaleContextProps = { /** Returns a locally converted phone number for numbers from the same region * and an internationally converted phone number with the country code for numbers from other regions */ - formatPhoneNumber: (phoneNumber: string) => string; + formatPhoneNumber: (phoneNumber: string | undefined) => string; /** Gets the locale digit corresponding to a standard digit */ toLocaleDigit: (digit: string) => string; diff --git a/src/libs/LocalePhoneNumber.ts b/src/libs/LocalePhoneNumber.ts index 933aa7937560..9aacc6968e1e 100644 --- a/src/libs/LocalePhoneNumber.ts +++ b/src/libs/LocalePhoneNumber.ts @@ -13,7 +13,7 @@ Onyx.connect({ * Returns a locally converted phone number for numbers from the same region * and an internationally converted phone number with the country code for numbers from other regions */ -function formatPhoneNumber(number: string): string { +function formatPhoneNumber(number: string | undefined): string { if (!number) { return ''; } diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.tsx similarity index 63% rename from src/pages/settings/Security/CloseAccountPage.js rename to src/pages/settings/Security/CloseAccountPage.tsx index 073788867aca..b3a7e3cae3a0 100644 --- a/src/pages/settings/Security/CloseAccountPage.js +++ b/src/pages/settings/Security/CloseAccountPage.tsx @@ -1,45 +1,41 @@ +import type {StackScreenProps} from '@react-navigation/stack'; import Str from 'expensify-common/lib/str'; -import PropTypes from 'prop-types'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import ConfirmModal from '@components/ConfirmModal'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; +import type {OnyxFormValuesFields} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; +import type {SettingsNavigatorParamList} from '@navigation/types'; import * as CloseAccount from '@userActions/CloseAccount'; import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type SCREENS from '@src/SCREENS'; +import type {Session} from '@src/types/onyx'; +import type {Errors} from '@src/types/onyx/OnyxCommon'; -const propTypes = { +type CloseAccountPageOnyxProps = { /** Session of currently logged in user */ - session: PropTypes.shape({ - /** Email address */ - email: PropTypes.string.isRequired, - }), - - ...windowDimensionsPropTypes, - ...withLocalizePropTypes, + session: OnyxEntry; }; -const defaultProps = { - session: { - email: null, - }, -}; +type CloseAccountPageProps = CloseAccountPageOnyxProps & StackScreenProps; -function CloseAccountPage(props) { +function CloseAccountPage({session}: CloseAccountPageProps) { const styles = useThemeStyles(); + const {translate, formatPhoneNumber} = useLocalize(); + const [isConfirmModalVisible, setConfirmModalVisibility] = useState(false); const [reasonForLeaving, setReasonForLeaving] = useState(''); @@ -58,21 +54,21 @@ function CloseAccountPage(props) { hideConfirmModal(); }; - const showConfirmModal = (values) => { + const showConfirmModal = (values: OnyxFormValuesFields) => { setConfirmModalVisibility(true); setReasonForLeaving(values.reasonForLeaving); }; /** * Removes spaces and transform the input string to lowercase. - * @param {String} phoneOrEmail - The input string to be sanitized. - * @returns {String} The sanitized string + * @param phoneOrEmail - The input string to be sanitized. + * @returns The sanitized string */ - const sanitizePhoneOrEmail = (phoneOrEmail) => phoneOrEmail.replace(/\s+/g, '').toLowerCase(); + const sanitizePhoneOrEmail = (phoneOrEmail: string): string => phoneOrEmail.replace(/\s+/g, '').toLowerCase(); - const validate = (values) => { + const validate = (values: OnyxFormValuesFields): Errors => { const requiredFields = ['phoneOrEmail']; - const userEmailOrPhone = props.formatPhoneNumber(props.session.email); + const userEmailOrPhone = formatPhoneNumber(session?.email); const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields); if (values.phoneOrEmail && sanitizePhoneOrEmail(userEmailOrPhone) !== sanitizePhoneOrEmail(values.phoneOrEmail)) { @@ -81,7 +77,7 @@ function CloseAccountPage(props) { return errors; }; - const userEmailOrPhone = props.formatPhoneNumber(props.session.email); + const userEmailOrPhone = formatPhoneNumber(session?.email); return ( Navigation.goBack()} /> - {props.translate('closeAccountPage.reasonForLeavingPrompt')} + {translate('closeAccountPage.reasonForLeavingPrompt')} - {props.translate('closeAccountPage.enterDefaultContactToConfirm')} {userEmailOrPhone} + {translate('closeAccountPage.enterDefaultContactToConfirm')} {userEmailOrPhone} @@ -143,16 +139,10 @@ function CloseAccountPage(props) { ); } -CloseAccountPage.propTypes = propTypes; -CloseAccountPage.defaultProps = defaultProps; CloseAccountPage.displayName = 'CloseAccountPage'; -export default compose( - withLocalize, - withWindowDimensions, - withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, - }), -)(CloseAccountPage); +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, +})(CloseAccountPage); diff --git a/src/types/onyx/Form.ts b/src/types/onyx/Form.ts index 3235f340e723..48f386afcbb0 100644 --- a/src/types/onyx/Form.ts +++ b/src/types/onyx/Form.ts @@ -63,6 +63,11 @@ type WorkspaceSettingsForm = Form<{ type ReportFieldEditForm = Form>; +type CloseAccountForm = Form<{ + reasonForLeaving: string; + phoneOrEmail: string; +}>; + export default Form; export type { @@ -78,4 +83,5 @@ export type { PersonalBankAccountForm, WorkspaceSettingsForm, ReportFieldEditForm, + CloseAccountForm, }; diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index 939793b3b4a8..d0ac2ce395fa 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -11,6 +11,7 @@ import type CustomStatusDraft from './CustomStatusDraft'; import type Download from './Download'; import type { AddDebitCardForm, + CloseAccountForm, DateOfBirthForm, DisplayNameForm, IKnowATeacherForm, @@ -92,6 +93,7 @@ export type { Credentials, Currency, CustomStatusDraft, + CloseAccountForm, DateOfBirthForm, Download, Form,