22875 Add API Calls when clicking “Reveal details” buttons

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
+import React, {useReducer} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -18,6 +18,10 @@ import styles from '../../../styles/styles';
 import * as CardUtils from '../../../libs/CardUtils';
 import Button from '../../../components/Button';
 import CardDetails from './WalletPage/CardDetails';
+// eslint-disable-next-line rulesdir/no-api-in-views
+import * as API from '../../../libs/API';
+import CONST from '../../../CONST';
+import * as revealCardDetailsUtils from './revealCardDetailsUtils';
 
 const propTypes = {
     /* Onyx Props */
@@ -47,7 +51,7 @@ function ExpensifyCardPage({
     const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
     const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
 
-    const [shouldShowCardDetails, setShouldShowCardDetails] = useState(false);
+    const [{isLoading, details, error}, dispatch] = useReducer(revealCardDetailsUtils.reducer, revealCardDetailsUtils.initialState);
 
     if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
         return <NotFoundPage />;
@@ -56,7 +60,19 @@ function ExpensifyCardPage({
     const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard.availableSpend || virtualCard.availableSpend || 0);
 
     const handleRevealDetails = () => {
-        setShouldShowCardDetails(true);
+        dispatch({type: revealCardDetailsUtils.ACTION_TYPES.start});
+        // eslint-disable-next-line rulesdir/no-api-in-views,rulesdir/no-api-side-effects-method
+        API.makeRequestWithSideEffects('RevealVirtualCardDetails', {cardID: virtualCard.cardID})
+            .then((response) => {
+                if (response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
+                    dispatch({type: revealCardDetailsUtils.ACTION_TYPES.FAIL, payload: response.message});
+                    return;
+                }
+                dispatch({type: revealCardDetailsUtils.ACTION_TYPES.SUCCESS, payload: response});
+            })
+            .catch((err) => {
+                dispatch({type: revealCardDetailsUtils.ACTION_TYPES.FAIL, payload: err.message});
+            });
     };
 
     return (
@@ -83,12 +99,12 @@ function ExpensifyCardPage({
                         />
                         {!_.isEmpty(virtualCard) && (
                             <>
-                                {shouldShowCardDetails ? (
+                                {details.pan ? (
                                     <CardDetails
-                                        // This is just a temporary mock, it will be replaced in this issue https://github.com/orgs/Expensify/projects/58?pane=issue&itemId=33286617
-                                        pan="1234123412341234"
-                                        expiration="11/02/2024"
-                                        cvv="321"
+                                        pan={details.pan}
+                                        expiration={details.expiration}
+                                        cvv={details.cvv}
+                                        privatePersonalDetails={{address: details.address}}
                                     />
                                 ) : (
                                     <MenuItemWithTopDescription
@@ -97,11 +113,14 @@ function ExpensifyCardPage({
                                         interactive={false}
                                         titleStyle={styles.walletCardNumber}
                                         shouldShowRightComponent
+                                        error={error}
                                         rightComponent={
                                             <Button
                                                 medium
                                                 text={translate('cardPage.cardDetails.revealDetails')}
                                                 onPress={handleRevealDetails}
+                                                isDisabled={isLoading}
+                                                isLoading={isLoading}
                                             />
                                         }
                                     />

src/pages/settings/Wallet/revealCardDetailsUtils.ts

@@ -0,0 +1,59 @@
+const ACTION_TYPES = {
+    START: 'START',
+    SUCCESS: 'SUCCESS',
+    FAIL: 'FAIL',
+} as const;
+
+type State = {
+    details: {
+        pan: string;
+        expiration: string;
+        cvv: string;
+        address: {
+            street: string;
+            street2: string;
+            city: string;
+            state: string;
+            zip: string;
+            country: string;
+        };
+    };
+    isLoading: boolean;
+    error: string;
+};
+
+type Action = {type: typeof ACTION_TYPES.START} | {type: typeof ACTION_TYPES.SUCCESS; payload: State['details']} | {type: typeof ACTION_TYPES.FAIL; payload: string};
+
+const initialState: State = {
+    details: {
+        pan: '',
+        expiration: '',
+        cvv: '',
+        address: {
+            street: '',
+            street2: '',
+            city: '',
+            state: '',
+            zip: '',
+            country: '',
+        },
+    },
+    isLoading: false,
+    error: '',
+};
+
+const reducer = (state: State, action: Action): State => {
+    switch (action.type) {
+        case ACTION_TYPES.START:
+            return {...state, isLoading: true};
+        case ACTION_TYPES.SUCCESS:
+            return {details: action.payload, isLoading: false, error: ''};
+        case ACTION_TYPES.FAIL: {
+            return {...state, error: action.payload, isLoading: false};
+        }
+        default:
+            return state;
+    }
+};
+
+export {initialState, reducer, ACTION_TYPES};