refactor: support APR disclaimer from modal offers content (#911)

content/modals/DE/long_term.json

@@ -27,10 +27,6 @@
             "inputCurrencySymbol": "€",
             "genericError": "Etwas ist schief gelaufen. Versuchen Sie es später erneut."
         },
-        "disclaimer": {
-            "nonZeroAPR": "Eff. Jahreszins 9,99% p.a., <br/> fester Sollzinssatz 9,51% p.a.",
-            "zeroAPR": "Eff. Jahreszins 0,00% p.a., <br/> fester Sollzinssatz 0,00% p.a."
-        },
         "instructions": [
             "Wählen Sie PayPal als Bezahlmethode aus, um später mit <strong>PayPal Ratenzahlung</strong> zu bezahlen.",
             "Schließen Sie Ihren Einkauf in wenigen Schritten ab.",

content/modals/US/v2_long_term.json

@@ -26,11 +26,7 @@
             "inputPlaceholder": "Enter amount",
             "genericError": "Something went wrong. Please try again later."
         },
-        "disclaimer": {
-            "zeroAPR": "Terms may vary based on purchase amount.",
-            "mixedAPR": "*APR is 0% to 29.99% based on your credit. Terms and 0% APR may vary based on purchase amount.",
-            "nonZeroAPR": "*APR is 9.99% to 29.99% based on your credit. Terms may vary based on purchase amount."
-        },
+        "genericDisclaimer": "Terms may vary based on purchase amount.",
         "instructions": [
             "Choose PayPal at checkout to pay later with <strong>Pay Monthly</strong>.",
             "Get a decision in seconds and complete your purchase.",

content/modals/US/v2_long_term_xo.json

@@ -26,11 +26,7 @@
             "inputPlaceholder": "Enter amount",
             "genericError": "Something went wrong. Please try again later."
         },
-        "disclaimer": {
-            "zeroAPR": "Terms may vary based on purchase amount.",
-            "mixedAPR": "*APR is 0% to 29.99% based on your credit. Terms and 0% APR may vary based on purchase amount.",
-            "nonZeroAPR": "*APR is 9.99% to 29.99% based on your credit. Terms may vary based on purchase amount."
-        },
+        "genericDisclaimer": "Terms may vary based on purchase amount.",
         "instructions": [
             "Explore plan options. No sign-up fees or late fees.",
             "Choose a plan and pay nothing today.",

content/offers/DE/long_term.json

@@ -33,6 +33,10 @@
             "belowThreshold": "Geben Sie einen Betrag größer als {formattedMinAmount} ein.",
             "aboveThreshold": "Geben Sie einen Betrag geringer als {formattedMaxAmount} ein. "
         },
+        "disclaimer": {
+            "nonZeroAPR": "Eff. Jahreszins 9,99% p.a., <br/> fester Sollzinssatz {nominal_rate}% p.a.",
+            "zeroAPR": "Eff. Jahreszins 0,00% p.a., <br/> fester Sollzinssatz 0,00% p.a."
+        },
         "termsLabel": {
             "offerPayment": "{formattedPeriodicPayment}/Monat",
             "offerNumInstallments": "{total_payments} Raten",

content/offers/US/v2_long_term.json

@@ -33,6 +33,11 @@
             "belowThreshold": "Enter an amount of {formattedMinAmount} or more.",
             "aboveThreshold": "Enter an amount no larger than {formattedMaxAmount}."
         },
+        "disclaimer": {
+            "zeroAPR": "Terms may vary based on purchase amount.",
+            "mixedAPR": "*APR is 0% to 29.99% based on your credit. Terms and 0% APR may vary based on purchase amount.",
+            "nonZeroAPR": "*APR is 9.99% to 29.99% based on your credit. Terms may vary based on purchase amount."
+        },
         "termsLabel": {
             "offerHeader": "{formattedPeriodicPayment}/mo. for {total_payments} months",
             "zeroApr": "APR",

src/components/modal/v2/parts/Calculator.jsx

@@ -204,7 +204,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer }) => {
                         !(hasInitialAmount || hasUsedInputField) || error ? 'no-amount' : ''
                     }`}
                 >
-                    {aprDisclaimer}
+                    {aprDisclaimer[0].aprDisclaimer}
                 </div>
             )}
         </div>

src/components/modal/v2/parts/TermsTable.jsx

@@ -29,11 +29,15 @@ const TermsTable = ({ isLoading, view: { meta, offers }, aprDisclaimer }) => {
             if (offerCountry !== 'DE') {
                 return <OfferCard offer={offer} index={idx} />;
             }
+            const disclaimer =
+                aprDisclaimer.length < offers.length
+                    ? aprDisclaimer[aprDisclaimer.length - 1].aprDisclaimer
+                    : aprDisclaimer[idx].aprDisclaimer;
             return (
                 <OfferAccordion
                     offer={offer}
                     index={idx}
-                    aprDisclaimer={aprDisclaimer}
+                    aprDisclaimer={disclaimer}
                     activeSelection={activeSelection}
                     setActiveSelection={setActiveSelection}
                 />

src/components/modal/v2/parts/views/LongTerm/Content.jsx

@@ -12,66 +12,80 @@ import styles from './styles.scss';
 /**
  * Checks qualifying offer APRs in order to determine which APR disclaimer to render.
  */
-const getAPRDetails = ({ offers, disclaimer: { zeroAPR, mixedAPR, nonZeroAPR } }) => {
+const getAPRDetails = ({ offers, genericDisclaimer, disclaimer: { zeroAPR, mixedAPR, nonZeroAPR } = {} }) => {
     const qualifyingOffers = offers.filter(offer => offer?.meta?.qualifying === 'true');
 
-    if (qualifyingOffers.length > 0) {
-        let totalNonZero = 0;
-        let totalZero = 0;
+    let totalNonZero = 0;
+    let totalZero = 0;
 
-        qualifyingOffers.forEach(offer => {
-            if (offer?.meta?.apr?.replace?.('.00', '') === '0') {
-                totalZero += 1;
-            } else {
-                totalNonZero += 1;
+    qualifyingOffers.forEach(offer => {
+        if (offer?.meta?.apr?.replace?.('.00', '') === '0') {
+            totalZero += 1;
+        } else {
+            totalNonZero += 1;
+        }
+    });
+
+    if (qualifyingOffers.length === 0) {
+        return [
+            {
+                /**
+                 * Specifically, this impacts US Long Term and which legal disclaimer shows underneath the offer cards.
+                 * If no initial amount is passed in or there is an error, we default to a generic disclaimer.
+                 * i.e. Terms may vary based on purchase amount.
+                 */
+                aprDisclaimer: genericDisclaimer ?? zeroAPR,
+                /**
+                 * Used by DE Long Term to determine which legal disclosure shows at the bottom of the modal.
+                 * If no initial amount is passed in, set the default legal disclosure to the nonZeroAPR disclosure.
+                 */
+                aprType: 'nonZeroAPR'
             }
-        });
+        ];
+    }
 
+    // TODO: Clean up backwards compatible code after release and content updates.
+    return qualifyingOffers.map(({ content: { disclaimer } }) => {
         if (qualifyingOffers.length === totalNonZero) {
             return {
-                aprDisclaimer: nonZeroAPR,
+                aprDisclaimer: disclaimer?.nonZeroAPR ?? nonZeroAPR,
                 aprType: 'nonZeroAPR'
             };
         }
 
         if (qualifyingOffers.length === totalZero) {
             return {
-                aprDisclaimer: zeroAPR,
+                aprDisclaimer: disclaimer?.zeroAPR ?? zeroAPR,
                 aprType: 'zeroAPR'
             };
         }
 
         return {
-            aprDisclaimer: mixedAPR,
+            aprDisclaimer: disclaimer?.mixedAPR ?? mixedAPR,
             aprType: 'mixedAPR'
         };
-    }
-
-    return {
-        /**
-         * Specifically, this impacts US Long Term and which legal disclaimer shows underneath the offer cards.
-         * If no initial amount is passed in or there is an error, we default to the zeroAPR disclaimer as it is more
-         * generic. i.e. Terms may vary based on purchase amount.
-         */
-        aprDisclaimer: zeroAPR,
-        /**
-         * Used by DE Long Term to determine which legal disclosure shows at the bottom of the modal.
-         * If no initial amount is passed in, set the default legal disclosure to the nonZeroAPR disclosure.
-         */
-        aprType: 'nonZeroAPR'
-    };
+    });
 };
 
 export const LongTerm = ({
-    content: { calculator, disclaimer, instructions, disclosure, navLinkPrefix, linkToProductList, cta },
+    content: {
+        calculator,
+        disclaimer,
+        genericDisclaimer,
+        instructions,
+        disclosure,
+        navLinkPrefix,
+        linkToProductList,
+        cta
+    },
     openProductList
 }) => {
     const [expandedState, setExpandedState] = useState(false);
     const { amount, onClick, onClose } = useXProps();
     const { views, country } = useServerData();
     const { offers } = views.find(view => view.offers);
     const { minAmount, maxAmount } = getComputedVariables(offers);
-    const { aprDisclaimer, aprType } = getAPRDetails({ offers, disclaimer });
+    const offerAPRDisclaimers = getAPRDetails({ offers, disclaimer, genericDisclaimer });
 
     const isQualifyingAmount = amount >= minAmount && amount <= maxAmount;
 
@@ -139,7 +153,7 @@ export const LongTerm = ({
                     <Calculator
                         setExpandedState={setExpandedState}
                         calculator={calculator}
-                        aprDisclaimer={aprDisclaimer}
+                        aprDisclaimer={offerAPRDisclaimers}
                     />
                     <div className={`content__col ${expandedState ? '' : 'collapsed'}`}>
                         <div className="branded-image">
@@ -153,7 +167,9 @@ export const LongTerm = ({
                 {typeof disclosure === 'string' || Array.isArray(disclosure) ? (
                     <InlineLinks text={disclosure} />
                 ) : (
-                    <InlineLinks text={(disclosure?.[aprType] ?? '').replace(/\D00\s?EUR/g, ' €')} />
+                    <InlineLinks
+                        text={(disclosure?.[offerAPRDisclaimers[0].aprType] ?? '').replace(/\D00\s?EUR/g, ' €')}
+                    />
                 )}
             </div>
             {renderCheckoutCtaButton()}

utils/devServerProxy/config/DE/index.js

@@ -39,28 +39,28 @@ export default {
                 {
                     totalPayments: 3,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.48,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 6,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.48,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 12,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.5,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 24,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.51,
                     minAmount: 99,
                     maxAmount: 5000
                 }
@@ -135,28 +135,28 @@ export default {
                 {
                     totalPayments: 3,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.48,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 6,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.48,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 12,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.5,
                     minAmount: 99,
                     maxAmount: 5000
                 },
                 {
                     totalPayments: 24,
                     apr: 9.99,
-                    nominalRate: 0,
+                    nominalRate: 9.51,
                     minAmount: 99,
                     maxAmount: 5000
                 }