Merge pull request #34718 from VickyStash/ts-migration/settingsSecuri…

…tyCloseAccount-page

[TS migration] Migrate 'SettingsSecurityCloseAccount' page to TypeScript

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;

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;

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 '';
     }

src/pages/settings/Security/CloseAccountPage.js → 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<Session>;
 };
 
-const defaultProps = {
-    session: {
-        email: null,
-    },
-};
+type CloseAccountPageProps = CloseAccountPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.CLOSE>;
 
-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<typeof ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM>) => {
         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<typeof ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM>): 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,59 +77,59 @@ function CloseAccountPage(props) {
         return errors;
     };
 
-    const userEmailOrPhone = props.formatPhoneNumber(props.session.email);
+    const userEmailOrPhone = formatPhoneNumber(session?.email);
 
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             testID={CloseAccountPage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('closeAccountPage.closeAccount')}
+                title={translate('closeAccountPage.closeAccount')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <FormProvider
                 formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
                 validate={validate}
                 onSubmit={showConfirmModal}
-                submitButtonText={props.translate('closeAccountPage.closeAccount')}
+                submitButtonText={translate('closeAccountPage.closeAccount')}
                 style={[styles.flexGrow1, styles.mh5]}
                 isSubmitActionDangerous
             >
                 <View style={[styles.flexGrow1]}>
-                    <Text>{props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
+                    <Text>{translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID="reasonForLeaving"
                         autoGrowHeight
-                        label={props.translate('closeAccountPage.enterMessageHere')}
-                        aria-label={props.translate('closeAccountPage.enterMessageHere')}
+                        label={translate('closeAccountPage.enterMessageHere')}
+                        aria-label={translate('closeAccountPage.enterMessageHere')}
                         role={CONST.ROLE.PRESENTATION}
                         containerStyles={[styles.mt5, styles.autoGrowHeightMultilineInput]}
                     />
                     <Text style={[styles.mt5]}>
-                        {props.translate('closeAccountPage.enterDefaultContactToConfirm')} <Text style={[styles.textStrong]}>{userEmailOrPhone}</Text>
+                        {translate('closeAccountPage.enterDefaultContactToConfirm')} <Text style={[styles.textStrong]}>{userEmailOrPhone}</Text>
                     </Text>
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID="phoneOrEmail"
                         autoCapitalize="none"
-                        label={props.translate('closeAccountPage.enterDefaultContact')}
-                        aria-label={props.translate('closeAccountPage.enterDefaultContact')}
+                        label={translate('closeAccountPage.enterDefaultContact')}
+                        aria-label={translate('closeAccountPage.enterDefaultContact')}
                         role={CONST.ROLE.PRESENTATION}
                         containerStyles={[styles.mt5]}
                         autoCorrect={false}
                         inputMode={Str.isValidEmail(userEmailOrPhone) ? CONST.INPUT_MODE.EMAIL : CONST.INPUT_MODE.TEXT}
                     />
                     <ConfirmModal
                         danger
-                        title={props.translate('closeAccountPage.closeAccountWarning')}
+                        title={translate('closeAccountPage.closeAccountWarning')}
                         onConfirm={onConfirm}
                         onCancel={hideConfirmModal}
                         isVisible={isConfirmModalVisible}
-                        prompt={props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
-                        confirmText={props.translate('common.yesContinue')}
-                        cancelText={props.translate('common.cancel')}
+                        prompt={translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+                        confirmText={translate('common.yesContinue')}
+                        cancelText={translate('common.cancel')}
                         shouldDisableConfirmButtonWhenOffline
                         shouldShowCancelButton
                     />
@@ -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<CloseAccountPageProps, CloseAccountPageOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(CloseAccountPage);

src/types/onyx/Form.ts

@@ -63,6 +63,11 @@ type WorkspaceSettingsForm = Form<{
 
 type ReportFieldEditForm = Form<Record<string, string>>;
 
+type CloseAccountForm = Form<{
+    reasonForLeaving: string;
+    phoneOrEmail: string;
+}>;
+
 export default Form;
 
 export type {
@@ -78,4 +83,5 @@ export type {
     PersonalBankAccountForm,
     WorkspaceSettingsForm,
     ReportFieldEditForm,
+    CloseAccountForm,
 };

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,