refactor: add ignoreCache option to modal (paypal#583)

jadutter · Oct 12, 2021 · 5d8564b · 5d8564b
1 parent 993b6ec
commit 5d8564b
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 30 deletions.
diff --git a/src/components/message/Message.js b/src/components/message/Message.js
@@ -9,6 +9,7 @@ const Message = function({ markup, meta, parentStyles, warnings }) {
         amount: window.xprops.amount ?? null,
         currency: window.xprops.currency ?? null,
         buyerCountry: window.xprops.buyerCountry ?? null,
+        ignoreCache: window.xprops.ignoreCache ?? null,
         style: JSON.stringify(window.xprops.style),
         offer: window.xprops.offer ?? null,
         payerId: window.xprops.payerId ?? null,
@@ -77,6 +78,7 @@ const Message = function({ markup, meta, parentStyles, warnings }) {
                     amount,
                     currency,
                     buyerCountry,
+                    ignoreCache,
                     offer,
                     payerId,
                     clientId,
@@ -92,6 +94,7 @@ const Message = function({ markup, meta, parentStyles, warnings }) {
                     amount,
                     currency,
                     buyerCountry,
+                    ignoreCache,
                     style: JSON.stringify(style),
                     offer,
                     payerId,
@@ -104,6 +107,7 @@ const Message = function({ markup, meta, parentStyles, warnings }) {
                     amount,
                     currency,
                     buyer_country: buyerCountry,
+                    ignore_cache: ignoreCache,
                     style,
                     credit_type: offer,
                     payer_id: payerId,

diff --git a/src/components/modal/lib/hooks/calculator.js b/src/components/modal/lib/hooks/calculator.js
@@ -60,7 +60,17 @@ const localize = (country, amount) => {
 export default function useCalculator({ autoSubmit = false } = {}) {
     const calculateRef = useRef();
     const { terms: initialTerms, country, setServerData } = useServerData();
-    const { currency, payerId, clientId, merchantId, onCalculate, buyerCountry, amount } = useXProps();
+    const {
+        currency,
+        payerId,
+        clientId,
+        merchantId,
+        onCalculate,
+        buyerCountry,
+        ignoreCache,
+        amount,
+        stageTag
+    } = useXProps();
     const [state, dispatch] = useReducer(reducer, {
         inputValue: localize(country, initialTerms.amount),
         prevValue: localize(country, initialTerms.amount),
@@ -77,7 +87,9 @@ export default function useCalculator({ autoSubmit = false } = {}) {
             payerId,
             clientId,
             merchantId,
-            buyerCountry
+            buyerCountry,
+            ignoreCache,
+            stageTag
         })
             .then(data => {
                 setServerData(data);

diff --git a/src/components/modal/lib/utils.js b/src/components/modal/lib/utils.js
@@ -1,28 +1,32 @@
 import objectEntries from 'core-js-pure/stable/object/entries';
 import { request, memoize, ppDebug } from '../../../utils';
 
-export const getContent = memoize(({ currency, amount, payerId, clientId, merchantId, buyerCountry, version, env }) => {
-    const query = objectEntries({
-        currency,
-        amount,
-        payer_id: payerId,
-        client_id: clientId,
-        merchant_id: merchantId,
-        buyer_country: buyerCountry,
-        version,
-        env
-    })
-        .filter(([, val]) => Boolean(val))
-        .reduce(
-            (acc, [key, val]) =>
-                `${acc}&${key}=${encodeURIComponent(typeof val === 'object' ? JSON.stringify(val) : val)}`,
-            ''
-        )
-        .slice(1);
+export const getContent = memoize(
+    ({ currency, amount, payerId, clientId, merchantId, buyerCountry, ignoreCache, version, env, stageTag }) => {
+        const query = objectEntries({
+            currency,
+            amount,
+            payer_id: payerId,
+            client_id: clientId,
+            merchant_id: merchantId,
+            buyer_country: buyerCountry,
+            ignore_cache: ignoreCache,
+            version,
+            env,
+            stageTag
+        })
+            .filter(([, val]) => Boolean(val))
+            .reduce(
+                (acc, [key, val]) =>
+                    `${acc}&${key}=${encodeURIComponent(typeof val === 'object' ? JSON.stringify(val) : val)}`,
+                ''
+            )
+            .slice(1);
 
-    ppDebug('Updating modal with new props...', { inZoid: true });
+        ppDebug('Updating modal with new props...', { inZoid: true });
 
-    return request('GET', `${window.location.origin}/credit-presentment/modalContent?${query}`).then(
-        ({ data }) => data
-    );
-});
+        return request('GET', `${window.location.origin}/credit-presentment/modalContent?${query}`).then(
+            ({ data }) => data
+        );
+    }
+);
diff --git a/src/components/modal/parts/Container.jsx b/src/components/modal/parts/Container.jsx
@@ -8,7 +8,19 @@ import Overlay from './Overlay';
 
 const Container = ({ children, contentWrapper, contentMaxWidth, contentMaxHeight }) => {
     const { type, products, meta, setServerData } = useServerData();
-    const { onReady, currency, amount, payerId, clientId, merchantId, buyerCountry, version, env } = useXProps();
+    const {
+        onReady,
+        currency,
+        amount,
+        payerId,
+        clientId,
+        merchantId,
+        buyerCountry,
+        ignoreCache,
+        version,
+        env,
+        stageTag
+    } = useXProps();
     const [transitionState] = useTransitionState();
     const [loading, setLoading] = useState(false);
 
@@ -41,8 +53,10 @@ const Container = ({ children, contentWrapper, contentMaxWidth, contentMaxHeight
             clientId,
             merchantId,
             buyerCountry,
+            ignoreCache,
             version,
-            env
+            env,
+            stageTag
         }).then(data => {
             setServerData(data);
             setLoading(false);

diff --git a/src/controllers/message/interface.js b/src/controllers/message/interface.js
@@ -90,7 +90,8 @@ export default (options = {}) => ({
                     merchantId,
                     currency,
                     amount,
-                    buyerCountry
+                    buyerCountry,
+                    ignoreCache
                 };
                 const modalProps = {
                     ...commonProps,
@@ -103,7 +104,6 @@ export default (options = {}) => ({
                     style,
                     offer,
                     onClick,
-                    ignoreCache,
                     onReady: (...args) => {
                         if (typeof onRender === 'function') {
                             onRender(...args);

diff --git a/src/controllers/modal/interface.js b/src/controllers/modal/interface.js
@@ -17,7 +17,19 @@ import {
 import { getModalComponent } from '../../zoid/modal';
 
 const memoizedModal = memoizeOnProps(
-    ({ account, merchantId, currency, amount, buyerCountry, offer, onReady, onCalculate, onApply, onClose }) => {
+    ({
+        account,
+        merchantId,
+        currency,
+        amount,
+        buyerCountry,
+        ignoreCache,
+        offer,
+        onReady,
+        onCalculate,
+        onApply,
+        onClose
+    }) => {
         addPerformanceMeasure('firstModalRenderDelay');
 
         const { render, updateProps, state, event } = getModalComponent()({
@@ -26,6 +38,7 @@ const memoizedModal = memoizeOnProps(
             currency,
             amount,
             buyerCountry,
+            ignoreCache,
             offer,
             onReady,
             onCalculate,

diff --git a/src/zoid/modal/component.js b/src/zoid/modal/component.js
@@ -85,6 +85,12 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
                 queryParam: false,
                 required: false
             },
+            ignoreCache: {
+                type: 'boolean',
+                queryParam: 'ignore_cache',
+                required: false,
+                value: validate.ignoreCache
+            },
 
             // Callbacks
             onClick: {