Merge pull request #33408 from MrMuzyk/feat/bank-info-step-to-ts

feat: BankInfo migration to ts

src/components/MenuItem.tsx

@@ -84,7 +84,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         titleStyle?: ViewStyle;
 
         /** Any adjustments to style when menu item is hovered or pressed */
-        hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
+        hoverAndPressStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
 
         /** Additional styles to style the description text below the title */
         descriptionTextStyle?: StyleProp<TextStyle>;
@@ -174,7 +174,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         isSelected?: boolean;
 
         /** Prop to identify if we should load avatars vertically instead of diagonally */
-        shouldStackHorizontally: boolean;
+        shouldStackHorizontally?: boolean;
 
         /** Prop to represent the size of the avatar images to be shown */
         avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
@@ -219,10 +219,10 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         furtherDetails?: string;
 
         /** The function that should be called when this component is LongPressed or right-clicked. */
-        onSecondaryInteraction: () => void;
+        onSecondaryInteraction?: () => void;
 
         /** Array of objects that map display names to their corresponding tooltip */
-        titleWithTooltips: DisplayNameWithTooltip[];
+        titleWithTooltips?: DisplayNameWithTooltip[];
     };
 
 function MenuItem(

src/hooks/useSubStep.ts → src/hooks/useSubStep/index.ts

@@ -1,12 +1,7 @@
-import {ReactNode, useCallback, useRef, useState} from 'react';
+import {useCallback, useRef, useState} from 'react';
+import {UseSubStep} from './types';
 
-type Props = {
-    bodyContent: ReactNode[];
-    onFinished: () => void;
-    startFrom?: number;
-};
-
-export default function useSubStep({bodyContent, onFinished, startFrom = 0}: Props) {
+export default function useSubStep({bodyContent, onFinished, startFrom = 0}: UseSubStep) {
     const [screenIndex, setScreenIndex] = useState(startFrom);
     const isEditing = useRef(false);
 

src/hooks/useSubStep/types.ts

@@ -0,0 +1,31 @@
+import {ComponentType} from 'react';
+
+type SubStepProps = {
+    /** value indicating whether user is editing one of the sub steps */
+    isEditing: boolean;
+
+    /** continues to next sub step */
+    onNext: () => void;
+
+    /** moves user to passed sub step */
+    onMove: (step: number) => void;
+
+    /** index of currently displayed sub step */
+    screenIndex?: number;
+
+    /** moves user to previous sub step */
+    prevScreen?: () => void;
+};
+
+type UseSubStep = {
+    /** array of components that will become sub steps */
+    bodyContent: Array<ComponentType<SubStepProps>>;
+
+    /** called on last sub step  */
+    onFinished: () => void;
+
+    /** index of initial sub step to display */
+    startFrom?: number;
+};
+
+export type {SubStepProps, UseSubStep};

src/libs/actions/BankAccounts.ts

@@ -41,6 +41,8 @@ type ReimbursementAccountStep = BankAccountStep | '';
 
 type ReimbursementAccountSubStep = BankAccountSubStep | '';
 
+type PlaidBankAccountToConnect = Omit<PlaidBankAccount, 'isSavings' | 'addressName' | 'mask'>;
+
 function clearPlaid(): Promise<void> {
     Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
     Onyx.set(ONYXKEYS.PLAID_CURRENT_EVENT, null);
@@ -142,7 +144,7 @@ function addPersonalAddressForDraft(personalAddress: {requestorAddressStreet?: s
 /**
  * Submit Bank Account step with Plaid data so php can perform some checks.
  */
-function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAccount: PlaidBankAccount) {
+function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAccount: PlaidBankAccountToConnect) {
     const commandName = 'ConnectBankAccountWithPlaid';
 
     type ConnectBankAccountWithPlaidParams = {

src/libs/actions/ReimbursementAccount/index.js

@@ -12,7 +12,7 @@ export {setBankAccountFormValidationErrors, setPersonalBankAccountFormValidation
  * - CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL to ask them to enter their accountNumber and routingNumber
  * - CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID to ask them to login to their bank via Plaid
  *
- * @param {String} subStep
+ * @param {String | null} subStep
  */
 function setBankAccountSubStep(subStep) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {subStep}});