22875 Add API Calls when clicking “Reveal details” buttons

src/languages/en.ts

@@ -843,6 +843,7 @@ export default {
             revealDetails: 'Reveal details',
             copyCardNumber: 'Copy card number',
         },
+        cardDetailsLoadingFailure: 'An error occurred loading card details, please try again.',
     },
     reportFraudPage: {
         title: 'Report virtual card fraud',

src/languages/es.ts

@@ -839,6 +839,7 @@ export default {
             revealDetails: 'Revelar detalles',
             copyCardNumber: 'Copiar número de la tarjeta',
         },
+        cardDetailsLoadingFailure: 'Ocurrió un error al cargar los detalles de la tarjeta. Por favor, inténtalo de nuevo.',
     },
     reportFraudPage: {
         title: 'Reportar fraude con la tarjeta virtual',

src/libs/actions/Card.ts

@@ -0,0 +1,23 @@
+import * as API from '../API';
+import CONST from '../../CONST';
+import {TCardDetails} from '../../types/onyx/Card';
+import * as Localize from '../Localize';
+
+function revealVirtualCardDetails(cardID: string): Promise<TCardDetails> {
+    return new Promise((resolve, reject) => {
+        // eslint-disable-next-line rulesdir/no-api-side-effects-method
+        API.makeRequestWithSideEffects('RevealVirtualCardDetails', {cardID})
+            .then((response) => {
+                if (response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
+                    reject(response.message || Localize.translateLocal('cardPage.cardDetailsLoadingFailure'));
+                    return;
+                }
+                resolve(response);
+            })
+            .catch((err) => {
+                reject(err.message);
+            });
+    });
+}
+
+export default {revealVirtualCardDetails};

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -18,6 +18,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as CardUtils from '../../../libs/CardUtils';
 import Button from '../../../components/Button';
 import CardDetails from './WalletPage/CardDetails';
+import Card from '../../../libs/actions/Card';
 import CONST from '../../../CONST';
 import assignedCardPropTypes from './assignedCardPropTypes';
 
@@ -50,7 +51,10 @@ function ExpensifyCardPage({
     const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
     const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
 
-    const [shouldShowCardDetails, setShouldShowCardDetails] = useState(false);
+    // card details state
+    const [isLoading, setIsLoading] = useState(false);
+    const [details, setDetails] = useState({});
+    const [errorMessage, setErrorMessage] = useState('');
 
     if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
         return <NotFoundPage />;
@@ -59,7 +63,15 @@ function ExpensifyCardPage({
     const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard.availableSpend || virtualCard.availableSpend || 0);
 
     const handleRevealDetails = () => {
-        setShouldShowCardDetails(true);
+        setIsLoading(true);
+        // We can't store the response in Onyx for security reasons.
+        // That is this action is handled manually and the response is stored in a local state
+        // Hence the eslint disable here.
+        // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
+        Card.revealVirtualCardDetails(virtualCard.cardID)
+            .then(setDetails)
+            .catch(setErrorMessage)
+            .finally(() => setIsLoading(false));
     };
 
     return (
@@ -86,12 +98,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
@@ -100,11 +112,14 @@ function ExpensifyCardPage({
                                         interactive={false}
                                         titleStyle={styles.walletCardNumber}
                                         shouldShowRightComponent
+                                        error={errorMessage}
                                         rightComponent={
                                             <Button
                                                 medium
                                                 text={translate('cardPage.cardDetails.revealDetails')}
                                                 onPress={handleRevealDetails}
+                                                isDisabled={isLoading}
+                                                isLoading={isLoading}
                                             />
                                         }
                                     />

src/types/onyx/Card.ts

@@ -21,4 +21,19 @@ type Card = {
     isLoading?: boolean;
 };
 
+type TCardDetails = {
+    pan: string;
+    expiration: string;
+    cvv: string;
+    address: {
+        street: string;
+        street2: string;
+        city: string;
+        state: string;
+        zip: string;
+        country: string;
+    };
+};
+
 export default Card;
+export type {TCardDetails};