From a68f19d5ea1df33527f8ffffa53b703bfb73a6f6 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 22 Jan 2024 09:52:12 +0000 Subject: [PATCH 1/3] [TS Migration] Adjusted KYCWall based on some regressions --- src/components/KYCWall/BaseKYCWall.tsx | 15 ++++++++------- src/components/KYCWall/types.ts | 8 ++++---- src/libs/actions/PaymentMethods.ts | 6 +++--- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index 04c8397bc33b..7ebf6e9cd0a3 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; -import type {SyntheticEvent} from 'react'; import {Dimensions} from 'react-native'; -import type {EmitterSubscription, NativeTouchEvent} from 'react-native'; +import type {EmitterSubscription, GestureResponderEvent} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu'; @@ -68,8 +67,8 @@ function KYCWall({ walletTerms, shouldShowPersonalBankAccountOption = false, }: BaseKYCWallProps) { - const anchorRef = useRef(null); - const transferBalanceButtonRef = useRef(null); + const anchorRef = useRef(null); + const transferBalanceButtonRef = useRef(null); const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false); @@ -146,7 +145,7 @@ function KYCWall({ * */ const continueAction = useCallback( - (event?: SyntheticEvent, iouPaymentType?: TransferMethod) => { + (event?: GestureResponderEvent | KeyboardEvent | undefined, iouPaymentType?: TransferMethod) => { const currentSource = walletTerms?.source ?? source; /** @@ -160,8 +159,10 @@ function KYCWall({ return; } + // Use event target as fallback if anchorRef is null for safety - const targetElement = anchorRef.current ?? (event?.nativeEvent.target as HTMLDivElement); + const targetElement = anchorRef.current ?? (event?.currentTarget as HTMLElement); + transferBalanceButtonRef.current = targetElement; @@ -203,7 +204,7 @@ function KYCWall({ Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them'); - onSuccessfulKYC(currentSource, iouPaymentType); + onSuccessfulKYC(iouPaymentType, currentSource); }, [ bankAccountList, diff --git a/src/components/KYCWall/types.ts b/src/components/KYCWall/types.ts index aee5b569cc46..1fe16d4a17c3 100644 --- a/src/components/KYCWall/types.ts +++ b/src/components/KYCWall/types.ts @@ -1,5 +1,5 @@ -import type {ForwardedRef, SyntheticEvent} from 'react'; -import type {NativeTouchEvent} from 'react-native'; +import type {ForwardedRef} from 'react'; +import type {GestureResponderEvent} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import type CONST from '@src/CONST'; @@ -64,10 +64,10 @@ type KYCWallProps = { shouldShowPersonalBankAccountOption?: boolean; /** Callback for the end of the onContinue trigger on option selection */ - onSuccessfulKYC: (currentSource?: Source, iouPaymentType?: TransferMethod) => void; + onSuccessfulKYC: (iouPaymentType?: TransferMethod, currentSource?: Source) => void; /** Children to build the KYC */ - children: (continueAction: (event: SyntheticEvent, method: TransferMethod) => void, anchorRef: ForwardedRef) => void; + children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method: TransferMethod) => void, anchorRef: ForwardedRef) => void; }; export type {AnchorPosition, KYCWallProps, PaymentMethod, TransferMethod, DomRect}; diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts index 7e91c3531b3a..f78a7ab43f6e 100644 --- a/src/libs/actions/PaymentMethods.ts +++ b/src/libs/actions/PaymentMethods.ts @@ -1,6 +1,6 @@ import {createRef} from 'react'; -import type {MutableRefObject, SyntheticEvent} from 'react'; -import type {NativeTouchEvent} from 'react-native'; +import type {MutableRefObject} from 'react'; +import type {GestureResponderEvent} from 'react-native'; import type {OnyxUpdate} from 'react-native-onyx'; import Onyx from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx/lib/types'; @@ -17,7 +17,7 @@ import type PaymentMethod from '@src/types/onyx/PaymentMethod'; import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer'; type KYCWallRef = { - continueAction?: (event?: SyntheticEvent, iouPaymentType?: TransferMethod) => void; + continueAction?: (event?: GestureResponderEvent | KeyboardEvent | undefined, iouPaymentType?: TransferMethod) => void; }; /** From 459a9f87910fb0e0095e26871d2e882e5099e17e Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 22 Jan 2024 10:38:31 +0000 Subject: [PATCH 2/3] [TS migration] BaseKYCWall code improvements --- src/components/KYCWall/BaseKYCWall.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index 7ebf6e9cd0a3..65c10674fb35 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -159,11 +159,9 @@ function KYCWall({ return; } - // Use event target as fallback if anchorRef is null for safety const targetElement = anchorRef.current ?? (event?.currentTarget as HTMLElement); - transferBalanceButtonRef.current = targetElement; const isExpenseReport = ReportUtils.isExpenseReport(iouReport ?? null); From f4b8565983bd8a4f9c22688fae8862d8f56a7787 Mon Sep 17 00:00:00 2001 From: ruben-rebelo Date: Mon, 22 Jan 2024 17:07:15 +0000 Subject: [PATCH 3/3] [TS migration] KYCWall addressed suggestion --- src/components/KYCWall/BaseKYCWall.tsx | 2 +- src/libs/actions/PaymentMethods.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index 65c10674fb35..89cceadc0fb0 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -145,7 +145,7 @@ function KYCWall({ * */ const continueAction = useCallback( - (event?: GestureResponderEvent | KeyboardEvent | undefined, iouPaymentType?: TransferMethod) => { + (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: TransferMethod) => { const currentSource = walletTerms?.source ?? source; /** diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts index f78a7ab43f6e..b9632d05d581 100644 --- a/src/libs/actions/PaymentMethods.ts +++ b/src/libs/actions/PaymentMethods.ts @@ -17,7 +17,7 @@ import type PaymentMethod from '@src/types/onyx/PaymentMethod'; import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer'; type KYCWallRef = { - continueAction?: (event?: GestureResponderEvent | KeyboardEvent | undefined, iouPaymentType?: TransferMethod) => void; + continueAction?: (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: TransferMethod) => void; }; /**