Skip to content

Commit

Permalink
Merge pull request #33866 from ZhenjaHorbach/migrate-settlementbutton…
Browse files Browse the repository at this point in the history
…-component-to-ts

[TS migration] Migrate 'SettlementButton.js' component to TypeScript
  • Loading branch information
AndrewGable authored Feb 6, 2024
2 parents 3523f6a + 056dea9 commit 500dd09
Show file tree
Hide file tree
Showing 18 changed files with 140 additions and 143 deletions.
2 changes: 1 addition & 1 deletion src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 6 additions & 3 deletions src/components/ButtonWithDropdownMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
10 changes: 6 additions & 4 deletions src/components/KYCWall/BaseKYCWall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -145,7 +147,7 @@ function KYCWall({
*
*/
const continueAction = useCallback(
(event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: TransferMethod) => {
(event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType) => {
const currentSource = walletTerms?.source ?? source;

/**
Expand Down Expand Up @@ -259,7 +261,7 @@ function KYCWall({
}}
shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
/>
{children(continueAction, anchorRef)}
{children(continueAction, viewRef(anchorRef))}
</>
);
}
Expand Down
22 changes: 9 additions & 13 deletions src/components/KYCWall/types.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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};
2 changes: 0 additions & 2 deletions src/components/MoneyReportHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
13 changes: 2 additions & 11 deletions src/components/Popover/types.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -49,4 +40,4 @@ type PopoverProps = BaseModalProps &

type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;

export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment};
export type {PopoverProps, PopoverWithWindowDimensionsProps};
2 changes: 1 addition & 1 deletion src/components/PopoverMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/components/ProcessMoneyRequestHoldMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
3 changes: 1 addition & 2 deletions src/components/ReportActionItem/ReportPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}

Check failure on line 297 in src/components/ReportActionItem/ReportPreview.tsx

View workflow job for this annotation

GitHub Actions / typecheck / typecheck

Argument of type 'PaymentMethodType' is not assignable to parameter of type '"Expensify" | "Elsewhere" | "ACH"'.
enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
addBankAccountRoute={bankAccountRoute}
shouldHidePaymentOptions={!shouldShowPayButton}
Expand Down
Loading

0 comments on commit 500dd09

Please sign in to comment.