22875 Add API Calls when clicking “Reveal details” buttons

src/pages/settings/InitialSettingsPage.js

@@ -1,11 +1,11 @@
 import lodashGet from 'lodash/get';
-import React, {useState, useEffect, useRef, useMemo, useCallback} from 'react';
-import {View} from 'react-native';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
+import { withOnyx } from 'react-native-onyx';
 import CurrentUserPersonalDetailsSkeletonView from '../../components/CurrentUserPersonalDetailsSkeletonView';
-import {withNetwork} from '../../components/OnyxProvider';
+import { withNetwork } from '../../components/OnyxProvider';
 import styles from '../../styles/styles';
 import Text from '../../components/Text';
 import * as Session from '../../libs/actions/Session';
@@ -18,11 +18,11 @@
 import themeColors from '../../styles/themes/default';
 import SCREENS from '../../SCREENS';
 import ROUTES from '../../ROUTES';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import withLocalize, { withLocalizePropTypes } from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import Permissions from '../../libs/Permissions';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails, { withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes } from '../../components/withCurrentUserPersonalDetails';
 import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
 import cardPropTypes from '../../components/cardPropTypes';
@@ -37,7 +37,7 @@
 import * as UserUtils from '../../libs/UserUtils';
 import policyMemberPropType from '../policyMemberPropType';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
-import {CONTEXT_MENU_TYPES} from '../home/report/ContextMenu/ContextMenuActions';
+import { CONTEXT_MENU_TYPES } from '../home/report/ContextMenu/ContextMenuActions';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback';
 import useLocalize from '../../hooks/useLocalize';
@@ -128,12 +128,13 @@
     allPolicyMembers: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
+window._navigate = () => Navigation.navigate('/settings/wallet/card/Expensify');
 
 function InitialSettingsPage(props) {
-    const {isExecuting, singleExecution} = useSingleExecution();
+    const { isExecuting, singleExecution } = useSingleExecution();
     const waitForNavigate = useWaitForNavigation();
     const popoverAnchor = useRef(null);
-    const {translate} = useLocalize();
+    const { translate } = useLocalize();
 
     const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false);
 
@@ -179,10 +180,10 @@
 
         const policyBrickRoadIndicator =
             !_.isEmpty(props.reimbursementAccount.errors) ||
-            _.chain(props.policies)
-                .filter((policy) => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
-                .some((policy) => PolicyUtils.hasPolicyError(policy) || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, props.allPolicyMembers))
-                .value()
+                _.chain(props.policies)
+                    .filter((policy) => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
+                    .some((policy) => PolicyUtils.hasPolicyError(policy) || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, props.allPolicyMembers))
+                    .value()
                 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
                 : null;
         const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList);

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 [{loading, 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: 'START'});
+        // eslint-disable-next-line
+        API.makeRequestWithSideEffects('RevealVirtualCardDetails')
+            .then((response) => {
+                if (response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
+                    dispatch({type: 'FAIL', payload: response.message});
+                    return;
+                }
+                dispatch({type: 'SUCCESS', payload: response});
+            })
+            .catch((err) => {
+                dispatch({type: '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={details.privatePersonalDetails}
                                     />
                                 ) : (
                                     <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={loading}
+                                                isLoading={loading}
                                             />
                                         }
                                     />

src/pages/settings/Wallet/revealCardDetailsUtils.ts

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