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}