[TS migration] Migrate 'SettlementButton.js' component to TypeScript

src/components/KYCWall/kycWallPropTypes.js

@@ -65,6 +65,11 @@ const propTypes = {
 
     /** Whether the personal bank account option should be shown */
     shouldShowPersonalBankAccountOption: PropTypes.bool,
+
+    /** Callback to execute when KYC is successful */
+    onSuccessfulKYC: PropTypes.func.isRequired,
+
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 };
 
 const defaultProps = {

src/components/Popover/types.ts

@@ -1,16 +1,7 @@
-import type {ValueOf} from 'type-fest';
 import type {PopoverAnchorPosition} from '@components/Modal/types';
 import type BaseModalProps from '@components/Modal/types';
 import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
-import type CONST from '@src/CONST';
-
-type AnchorAlignment = {
-    /** The horizontal anchor alignment of the popover */
-    horizontal: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
-
-    /** The vertical anchor alignment of the popover */
-    vertical: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_VERTICAL>;
-};
+import type {AnchorAlignment} from '@src/types/onyx';
 
 type PopoverDimensions = {
     width: number;
@@ -48,4 +39,4 @@ type PopoverProps = BaseModalProps & {
 
 type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
 
-export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment};
+export type {PopoverProps, PopoverWithWindowDimensionsProps};

src/components/PopoverMenu.tsx

@@ -10,8 +10,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
+import type {AnchorAlignment} from '@src/types/onyx';
 import MenuItem from './MenuItem';
-import type {AnchorAlignment} from './Popover/types';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
 import Text from './Text';
 

src/components/ProcessMoneyRequestHoldMenu.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {AnchorAlignment} from '@src/types/onyx';
 import Button from './Button';
 import HoldMenuSectionList from './HoldMenuSectionList';
 import type {PopoverAnchorPosition} from './Modal/types';
 import Popover from './Popover';
-import type {AnchorAlignment} from './Popover/types';
 import Text from './Text';
 import TextPill from './TextPill';
 

src/components/SettlementButton.js → src/components/SettlementButton.tsx

@@ -1,143 +1,125 @@
-import PropTypes from 'prop-types';
+import type {MutableRefObject} from 'react';
 import React, {useEffect, useMemo} from 'react';
+import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import compose from '@libs/compose';
 import * as ReportUtils from '@libs/ReportUtils';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as IOU from '@userActions/IOU';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {ButtonSizeValue} from '@src/styles/utils/types';
+import type {AnchorAlignment, LastPaymentMethod, Report} from '@src/types/onyx';
+import type DeepValueOf from '@src/types/utils/DeepValueOf';
+import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import * as Expensicons from './Icon/Expensicons';
 import KYCWall from './KYCWall';
-import withNavigation from './withNavigation';
 
-const propTypes = {
+type KYCFlowEvent = GestureResponderEvent | KeyboardEvent;
+
+type TriggerKYCFlow = (event: KYCFlowEvent, iouPaymentType: string) => void;
+
+type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
+
+type SettlementButtonOnyxProps = {
+    /** The last payment method used per policy */
+    nvpLastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
+};
+
+type SettlementButtonProps = SettlementButtonOnyxProps & {
     /** Callback to execute when this button is pressed. Receives a single payment type argument. */
-    onPress: PropTypes.func.isRequired,
+    onPress: (paymentType: PaymentType) => void;
+
+    /** The route to redirect if user does not have a payment method setup */
+    enablePaymentsRoute: typeof ROUTES.ENABLE_PAYMENTS | typeof ROUTES.IOU_SEND_ENABLE_PAYMENTS | typeof ROUTES.SETTINGS_ENABLE_PAYMENTS;
 
     /** Call the onPress function on main button when Enter key is pressed */
-    pressOnEnter: PropTypes.bool,
+    pressOnEnter?: boolean;
 
     /** Settlement currency type */
-    currency: PropTypes.string,
+    currency?: string;
 
     /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
-    chatReportID: PropTypes.string,
+    chatReportID?: string;
 
     /** The IOU/Expense report we are paying */
-    iouReport: iouReportPropTypes,
-
-    /** The route to redirect if user does not have a payment method setup */
-    enablePaymentsRoute: PropTypes.string.isRequired,
-
-    /** Should we show the approve button? */
-    shouldHidePaymentOptions: PropTypes.bool,
+    iouReport?: OnyxEntry<Report> | EmptyObject;
 
     /** Should we show the payment options? */
-    shouldShowApproveButton: PropTypes.bool,
+    shouldHidePaymentOptions?: boolean;
 
-    /** The last payment method used per policy */
-    nvp_lastPaymentMethod: PropTypes.objectOf(PropTypes.string),
+    /** Should we show the payment options? */
+    shouldShowApproveButton?: boolean;
 
     /** The policyID of the report we are paying */
-    policyID: PropTypes.string,
+    policyID?: string;
 
     /** Additional styles to add to the component */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    style?: StyleProp<ViewStyle>;
 
     /** Total money amount in form <currency><amount> */
-    formattedAmount: PropTypes.string,
+    formattedAmount?: string;
 
     /** The size of button size */
-    buttonSize: PropTypes.oneOf(_.values(CONST.DROPDOWN_BUTTON_SIZE)),
+    buttonSize?: ButtonSizeValue;
 
     /** Route for the Add Bank Account screen for a given navigation stack */
-    addBankAccountRoute: PropTypes.string,
+    addBankAccountRoute?: string;
 
     /** Route for the Add Debit Card screen for a given navigation stack */
-    addDebitCardRoute: PropTypes.string,
+    addDebitCardRoute?: string;
 
     /** Whether the button should be disabled */
-    isDisabled: PropTypes.bool,
+    isDisabled?: boolean;
 
     /** Whether we should show a loading state for the main button */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 
     /** The anchor alignment of the popover menu for payment method dropdown */
-    paymentMethodDropdownAnchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
+    paymentMethodDropdownAnchorAlignment?: AnchorAlignment;
 
     /** The anchor alignment of the popover menu for KYC wall popover */
-    kycWallAnchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
+    kycWallAnchorAlignment?: AnchorAlignment;
 
     /** Whether the personal bank account option should be shown */
-    shouldShowPersonalBankAccountOption: PropTypes.bool,
+    shouldShowPersonalBankAccountOption?: boolean;
 };
 
-const defaultProps = {
-    isLoading: false,
-    isDisabled: false,
-    pressOnEnter: false,
-    addBankAccountRoute: '',
-    addDebitCardRoute: '',
-    currency: CONST.CURRENCY.USD,
-    chatReportID: '',
-
-    // The "iouReport" and "nvp_lastPaymentMethod" objects needs to be stable to prevent the "useMemo"
-    // hook from being recreated unnecessarily, hence the use of CONST.EMPTY_ARRAY and CONST.EMPTY_OBJECT
-    iouReport: CONST.EMPTY_OBJECT,
-    nvp_lastPaymentMethod: CONST.EMPTY_OBJECT,
-    shouldHidePaymentOptions: false,
-    shouldShowApproveButton: false,
-    style: [],
-    policyID: '',
-    formattedAmount: '',
-    buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
-    kycWallAnchorAlignment: {
+function SettlementButton({
+    addDebitCardRoute = '',
+    addBankAccountRoute = '',
+    kycWallAnchorAlignment = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, // button is at left, so horizontal anchor is at LEFT
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
-    paymentMethodDropdownAnchorAlignment: {
+    paymentMethodDropdownAnchorAlignment = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, // caret for dropdown is at right, so horizontal anchor is at RIGHT
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
-    shouldShowPersonalBankAccountOption: false,
-};
-
-function SettlementButton({
-    addDebitCardRoute,
-    addBankAccountRoute,
-    kycWallAnchorAlignment,
-    paymentMethodDropdownAnchorAlignment,
-    buttonSize,
-    chatReportID,
-    currency,
+    buttonSize = CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
+    chatReportID = '',
+    currency = CONST.CURRENCY.USD,
     enablePaymentsRoute,
-    iouReport,
-    isDisabled,
-    isLoading,
-    formattedAmount,
-    nvp_lastPaymentMethod,
+    // The "iouReport" and "nvpLastPaymentMethod" objects needs to be stable to prevent the "useMemo"
+    // hook from being recreated unnecessarily, hence the use of CONST.EMPTY_ARRAY and CONST.EMPTY_OBJECT
+    iouReport = CONST.EMPTY_OBJECT,
+    nvpLastPaymentMethod = CONST.EMPTY_OBJECT,
+    isDisabled = false,
+    isLoading = false,
+    formattedAmount = '',
     onPress,
-    pressOnEnter,
-    policyID,
-    shouldHidePaymentOptions,
-    shouldShowApproveButton,
+    pressOnEnter = false,
+    policyID = '',
+    shouldHidePaymentOptions = false,
+    shouldShowApproveButton = false,
     style,
-    shouldShowPersonalBankAccountOption,
-}) {
+    shouldShowPersonalBankAccountOption = false,
+}: SettlementButtonProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -179,7 +161,7 @@ function SettlementButton({
 
         // To achieve the one tap pay experience we need to choose the correct payment type as default,
         // if user already paid for some request or expense, let's use the last payment method or use default.
-        const paymentMethod = nvp_lastPaymentMethod[policyID] || '';
+        const paymentMethod = nvpLastPaymentMethod?.[policyID] ?? '';
         if (canUseWallet) {
             buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
         }
@@ -194,12 +176,12 @@ function SettlementButton({
 
         // Put the preferred payment method to the front of the array so its shown as default
         if (paymentMethod) {
-            return _.sortBy(buttonOptions, (method) => (method.value === paymentMethod ? 0 : 1));
+            return buttonOptions.sort((method) => (method.value === paymentMethod ? 0 : 1));
         }
         return buttonOptions;
-    }, [currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, translate, shouldHidePaymentOptions, shouldShowApproveButton]);
+    }, [currency, formattedAmount, iouReport, nvpLastPaymentMethod, policyID, translate, shouldHidePaymentOptions, shouldShowApproveButton]);
 
-    const selectPaymentType = (event, iouPaymentType, triggerKYCFlow) => {
+    const selectPaymentType = (event: KYCFlowEvent, iouPaymentType: PaymentType, triggerKYCFlow: TriggerKYCFlow) => {
         if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
             triggerKYCFlow(event, iouPaymentType);
             BankAccounts.setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS);
@@ -227,14 +209,15 @@ function SettlementButton({
             anchorAlignment={kycWallAnchorAlignment}
             shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
         >
-            {(triggerKYCFlow, buttonRef) => (
+            {(triggerKYCFlow: TriggerKYCFlow, buttonRef: MutableRefObject<HTMLDivElement | View | null>) => (
                 <ButtonWithDropdownMenu
                     buttonRef={buttonRef}
                     isDisabled={isDisabled}
                     isLoading={isLoading}
-                    onPress={(event, iouPaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)}
+                    onPress={(event: KYCFlowEvent, iouPaymentType: PaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)}
                     pressOnEnter={pressOnEnter}
                     options={paymentButtonOptions}
+                    // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/25065) is migrated to TypeScript.
                     style={style}
                     buttonSize={buttonSize}
                     anchorAlignment={paymentMethodDropdownAnchorAlignment}
@@ -244,15 +227,11 @@ function SettlementButton({
     );
 }
 
-SettlementButton.propTypes = propTypes;
-SettlementButton.defaultProps = defaultProps;
 SettlementButton.displayName = 'SettlementButton';
 
-export default compose(
-    withNavigation,
-    withOnyx({
-        nvp_lastPaymentMethod: {
-            key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
-        },
-    }),
-)(SettlementButton);
+export default withOnyx<SettlementButtonProps, SettlementButtonOnyxProps>({
+    nvpLastPaymentMethod: {
+        key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
+        selector: (paymentMethod) => paymentMethod ?? {},
+    },
+})(SettlementButton);

src/types/onyx/AnchorAlignment.ts

@@ -0,0 +1,12 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type AnchorAlignment = {
+    /** The horizontal anchor alignment of the popover */
+    horizontal: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
+
+    /** The vertical anchor alignment of the popover */
+    vertical: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_VERTICAL>;
+};
+
+export default AnchorAlignment;

src/types/onyx/LastPaymentMethod.ts

@@ -0,0 +1,3 @@
+type LastPaymentMethod = Record<string, string>;
+
+export default LastPaymentMethod;

src/types/onyx/index.ts

@@ -1,5 +1,6 @@
 import type Account from './Account';
 import type AccountData from './AccountData';
+import type AnchorAlignment from './AnchorAlignment';
 import type {BankAccountList} from './BankAccount';
 import type BankAccount from './BankAccount';
 import type Beta from './Beta';
@@ -15,6 +16,7 @@ import type FrequentlyUsedEmoji from './FrequentlyUsedEmoji';
 import type {FundList} from './Fund';
 import type Fund from './Fund';
 import type IOU from './IOU';
+import type LastPaymentMethod from './LastPaymentMethod';
 import type Locale from './Locale';
 import type {LoginList} from './Login';
 import type Login from './Login';
@@ -137,4 +139,6 @@ export type {
     ReportUserIsTyping,
     PolicyReportField,
     RecentlyUsedReportFields,
+    LastPaymentMethod,
+    AnchorAlignment,
 };