Merge pull request Expensify#33866 from ZhenjaHorbach/migrate-settlem…

…entbutton-component-to-ts

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

src/ONYXKEYS.ts

@@ -408,7 +408,7 @@ type OnyxValues = {
     [ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID]: string;
     [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
-    [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: Record<string, string>;
+    [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: OnyxTypes.LastPaymentMethod;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];
     [ONYXKEYS.NVP_HAS_DISMISSED_IDLE_PANEL]: boolean;
     [ONYXKEYS.NVP_INTRO_SELECTED]: OnyxTypes.IntroSelected;

src/components/ButtonWithDropdownMenu.tsx

@@ -9,15 +9,18 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
-import type {AnchorAlignment} from './Popover/types';
 import PopoverMenu from './PopoverMenu';
 
+type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
+
 type DropdownOption = {
-    value: string;
+    value: PaymentType;
     text: string;
     icon: IconAsset;
     iconWidth?: number;
@@ -30,7 +33,7 @@ type ButtonWithDropdownMenuProps = {
     menuHeaderText?: string;
 
     /** Callback to execute when the main button is pressed */
-    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: string) => void;
+    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: PaymentType) => void;
 
     /** Callback to execute when a dropdown option is selected */
     onOptionSelected?: (option: DropdownOption) => void;

src/components/KYCWall/BaseKYCWall.tsx

@@ -17,7 +17,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
-import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod, TransferMethod} from './types';
+import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
+import viewRef from '@src/types/utils/viewRef';
+import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types';
 
 // This sets the Horizontal anchor position offset for POPOVER MENU.
 const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20;
@@ -67,7 +69,7 @@ function KYCWall({
     walletTerms,
     shouldShowPersonalBankAccountOption = false,
 }: BaseKYCWallProps) {
-    const anchorRef = useRef<HTMLElement>(null);
+    const anchorRef = useRef<HTMLDivElement>(null);
     const transferBalanceButtonRef = useRef<HTMLElement | null>(null);
 
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
@@ -145,7 +147,7 @@ function KYCWall({
      *
      */
     const continueAction = useCallback(
-        (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: TransferMethod) => {
+        (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType) => {
             const currentSource = walletTerms?.source ?? source;
 
             /**
@@ -259,7 +261,7 @@ function KYCWall({
                 }}
                 shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
             />
-            {children(continueAction, anchorRef)}
+            {children(continueAction, viewRef(anchorRef))}
         </>
     );
 }

src/components/KYCWall/types.ts

@@ -1,24 +1,20 @@
-import type {ForwardedRef} from 'react';
-import type {GestureResponderEvent} from 'react-native';
+import type {RefObject} from 'react';
+import type {GestureResponderEvent, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type {Route} from '@src/ROUTES';
 import type {Report} from '@src/types/onyx';
+import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type Source = ValueOf<typeof CONST.KYC_WALL_SOURCE>;
 
-type TransferMethod = ValueOf<typeof CONST.WALLET.TRANSFER_METHOD_TYPE>;
-
 type DOMRectProperties = 'top' | 'bottom' | 'left' | 'right' | 'height' | 'x' | 'y';
 
 type DomRect = Pick<DOMRect, DOMRectProperties>;
 
-type AnchorAlignment = {
-    horizontal: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
-    vertical: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_VERTICAL>;
-};
-
 type AnchorPosition = {
     anchorPositionVertical: number;
     anchorPositionHorizontal: number;
@@ -49,7 +45,7 @@ type KYCWallProps = {
     chatReportID?: string;
 
     /** The IOU/Expense report we are paying */
-    iouReport?: OnyxEntry<Report>;
+    iouReport?: OnyxEntry<Report> | EmptyObject;
 
     /** Where the popover should be positioned relative to the anchor points. */
     anchorAlignment?: AnchorAlignment;
@@ -64,10 +60,10 @@ type KYCWallProps = {
     shouldShowPersonalBankAccountOption?: boolean;
 
     /** Callback for the end of the onContinue trigger on option selection */
-    onSuccessfulKYC: (iouPaymentType?: TransferMethod, currentSource?: Source) => void;
+    onSuccessfulKYC: (iouPaymentType?: PaymentMethodType, currentSource?: Source) => void;
 
     /** Children to build the KYC */
-    children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method: TransferMethod) => void, anchorRef: ForwardedRef<HTMLElement>) => void;
+    children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method: PaymentMethodType) => void, anchorRef: RefObject<View>) => void;
 };
 
-export type {AnchorPosition, KYCWallProps, PaymentMethod, TransferMethod, DomRect};
+export type {AnchorPosition, KYCWallProps, PaymentMethod, DomRect};

src/components/MoneyReportHeader.tsx

@@ -128,7 +128,6 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 {shouldShowSettlementButton && !isSmallScreenWidth && (
                     <View style={styles.pv2}>
                         <SettlementButton
-                            // @ts-expect-error TODO: Remove this once SettlementButton (https://github.com/Expensify/App/issues/25100) is migrated to TypeScript.
                             currency={moneyRequestReport.currency}
                             policyID={moneyRequestReport.policyID}
                             chatReportID={chatReport?.reportID}
@@ -161,7 +160,6 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 {shouldShowSettlementButton && isSmallScreenWidth && (
                     <View style={[styles.ph5, styles.pb2]}>
                         <SettlementButton
-                            // @ts-expect-error TODO: Remove this once SettlementButton (https://github.com/Expensify/App/issues/25100) is migrated to TypeScript.
                             currency={moneyRequestReport.currency}
                             policyID={moneyRequestReport.policyID}
                             chatReportID={moneyRequestReport.chatReportID}

src/components/Popover/types.ts

@@ -1,20 +1,11 @@
 import type {RefObject} from 'react';
 import type {View} from 'react-native';
-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';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-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>;
-};
-
 type PopoverDimensions = {
     width: number;
     height: number;
@@ -49,4 +40,4 @@ type PopoverProps = BaseModalProps &
 
 type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
 
-export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment};
+export type {PopoverProps, PopoverWithWindowDimensionsProps};

src/components/PopoverMenu.tsx

@@ -9,9 +9,9 @@ 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/utils/AnchorAlignment';
 import type IconAsset from '@src/types/utils/IconAsset';
 import MenuItem from './MenuItem';
-import type {AnchorAlignment} from './Popover/types';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
 import Text from './Text';
 

src/components/ProcessMoneyRequestHoldMenu.tsx

@@ -3,11 +3,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/utils/AnchorAlignment';
 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/ReportActionItem/ReportPreview.tsx

@@ -290,12 +290,11 @@ function ReportPreview({
                             )}
                             {shouldShowSettlementButton && (
                                 <SettlementButton
-                                    // @ts-expect-error TODO: Remove this once SettlementButton (https://github.com/Expensify/App/issues/25100) is migrated to TypeScript.
                                     currency={iouReport?.currency}
                                     policyID={policyID}
                                     chatReportID={chatReportID}
                                     iouReport={iouReport}
-                                    onPress={(paymentType: PaymentMethodType) => chatReport && iouReport && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
+                                    onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)}
                                     enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
                                     addBankAccountRoute={bankAccountRoute}
                                     shouldHidePaymentOptions={!shouldShowPayButton}