22875 Add API Calls when clicking “Reveal details” buttons

src/languages/en.ts

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

src/languages/es.ts

@@ -875,6 +875,7 @@ export default {
             copyCardNumber: 'Copiar número de la tarjeta',
             updateAddress: 'Actualizar dirección',
         },
+        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.js

@@ -1,7 +1,8 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as API from '../API';
-
+import CONST from '../../CONST';
+import * as Localize from '../Localize';
 /**
  * @param {Number} cardID
  */
@@ -146,4 +147,31 @@ function clearCardListErrors(cardID) {
     Onyx.merge(ONYXKEYS.CARD_LIST, {[cardID]: {errors: null, isLoading: false}});
 }
 
-export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud};
+/**
+ * Makes an API call to get virtual card details (pan, cvv, expiration date, address)
+ * This function purposefully uses `makeRequestWithSideEffects` method. For security reason
+ * card details cannot be persisted in Onyx and have to be asked for each time a user want's to
+ * reveal them.
+ *
+ * @param {String} cardID - virtual card ID
+ *
+ * @returns {Promise<Object>} - promise with card details object
+ */
+function revealVirtualCardDetails(cardID) {
+    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(Localize.translateLocal('cardPage.cardDetailsLoadingFailure'));
+                    return;
+                }
+                resolve(response);
+            })
+            .catch((err) => {
+                reject(err.message);
+            });
+    });
+}
+
+export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud, revealVirtualCardDetails};

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -18,9 +18,11 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as CardUtils from '../../../libs/CardUtils';
 import Button from '../../../components/Button';
 import CardDetails from './WalletPage/CardDetails';
+import * as Card from '../../../libs/actions/Card';
 import MenuItem from '../../../components/MenuItem';
 import CONST from '../../../CONST';
 import assignedCardPropTypes from './assignedCardPropTypes';
+import useNetwork from '../../../hooks/useNetwork';
 
 const propTypes = {
     /* Onyx Props */
@@ -46,12 +48,15 @@ function ExpensifyCardPage({
         params: {domain},
     },
 }) {
+    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const domainCards = CardUtils.getDomainCards(cardList)[domain];
     const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
     const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
 
-    const [shouldShowCardDetails, setShouldShowCardDetails] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [details, setDetails] = useState({});
+    const [errorMessage, setErrorMessage] = useState('');
 
     if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
         return <NotFoundPage />;
@@ -60,7 +65,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 (
@@ -87,12 +100,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}}
                                         domain={domain}
                                     />
                                 ) : (
@@ -102,11 +115,14 @@ function ExpensifyCardPage({
                                         interactive={false}
                                         titleStyle={styles.walletCardNumber}
                                         shouldShowRightComponent
+                                        error={errorMessage}
                                         rightComponent={
                                             <Button
                                                 medium
                                                 text={translate('cardPage.cardDetails.revealDetails')}
                                                 onPress={handleRevealDetails}
+                                                isDisabled={isLoading || isOffline}
+                                                isLoading={isLoading}
                                             />
                                         }
                                     />

src/types/onyx/Card.ts

@@ -19,4 +19,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};