chore: cut release (#1081)

content/messages/US/buttons/purchase_protection.json

@@ -0,0 +1,19 @@
+{
+    "_variables": {
+        "financing_code": "PURCHASE_PROTECTION"
+    },
+    "meta": {
+        "id": "",
+        "offer_country_code": "US",
+        "offerType": "PURCHASE_PROTECTION",
+        "lander": "https://www.paypal.com/us/digital-wallet/buyer-purchase-protection"
+    },
+    "headline": [
+        ["A safer, easier way to pay", ["default", "xsmall"]],
+        ["You're protected on most purchases.", ["small", "medium", "large", "xlarge"]]
+    ],
+    "subHeadline": [],
+    "disclaimer": [
+        ["<span aria-hidden='true'>Terms Apply</span><span class='sr-only'> Terms Apply</span>", ["default"]]
+    ]
+}

content/messages/US/marks/purchase_protection.json

@@ -0,0 +1,19 @@
+{
+    "_variables": {
+        "financing_code": "PURCHASE_PROTECTION"
+    },
+    "meta": {
+        "id": "",
+        "offer_country_code": "US",
+        "offerType": "PURCHASE_PROTECTION",
+        "lander": "https://www.paypal.com/us/digital-wallet/buyer-purchase-protection"
+    },
+    "headline": [
+        ["A safer, easier way to pay", ["default", "xsmall"]],
+        ["You're protected on most purchases.", ["small", "medium", "large", "xlarge"]]
+    ],
+    "subHeadline": [],
+    "disclaimer": [
+        ["<span aria-hidden='true'>Terms Apply</span><span class='sr-only'> Terms Apply</span>", ["default"]]
+    ]
+}

content/modals/DE/long_term.json

@@ -2,6 +2,7 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "DE",
+        "useV4Design": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
@@ -19,7 +20,7 @@
         }
     },
     "content": {
-        "headline": "Später bezahlen in 3, 6, 12 oder 24 monatlichen Raten",
+        "headline": "Später bezahlen in monatlichen Raten",
         "subheadline": "Noch heute kaufen – ohne Anzahlung.",
         "calculator": {
             "title": "Wie viel kostet Ihr Einkauf?",
@@ -29,12 +30,12 @@
             "genericError": "Etwas ist schief gelaufen. Versuchen Sie es später erneut."
         },
         "instructions": [
-            "Wählen Sie PayPal als Bezahlmethode aus, um später mit <strong>PayPal Ratenzahlung</strong> zu bezahlen.",
+            "Wählen Sie PayPal als Bezahlmethode aus, um mit<strong> PayPal Ratenzahlung</strong> zu bezahlen.",
             "Schließen Sie Ihren Einkauf in wenigen Schritten ab.",
             "Das war’s! Falls Sie möchten, können Sie auch früher bezahlen. Ohne Zusatzkosten."
         ],
         "disclosure": {
-            "nonZeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung. Laufzeiten von 3, 6, 12 oder 24 Monaten. Ab {formattedMinAmount} und bis zu {formattedMaxAmount} Bestellwert. Für die Laufzeiten 3, 6 und 12 Monate gilt ein effektiver Jahreszins von 12,99%, p.a. zu einem festen Sollzinssatz von 12,19% p.a. bei 3 Monaten, von 12,21% p.a. bei 6 Monaten, von 12,22% p.a. bei 12 Monaten. Für die Laufzeit von 24 Monaten gilt ein effektiver Jahreszins von 11,99% p.a. zu einem festen Sollzinssatz von 11,33% p.a. Repräsentatives Beispiel gem. § 17 (4) PAngV: Nettodarlehensbetrag 1.000 €, Gesamtbetrag 1.067,79 €, 12 monatliche Raten à 88,98 €, fester Sollzinssatz 12,99% p.a., eff. Jahreszins 12,22% p.a. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg.",
+            "nonZeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung. Laufzeiten von 3, 6, 12 oder 24 Monaten. Ab {formattedMinAmount} und bis zu {formattedMaxAmount} Bestellwert. Für die Laufzeiten 3, 6 und 12 Monate gilt ein effektiver Jahreszins von 12,99%, p.a. zu einem festen Sollzinssatz von 12,19% p.a. bei 3 Monaten, von 12,21% p.a. bei 6 Monaten, von 12,22% p.a. bei 12 Monaten. Für die Laufzeit von 24 Monaten gilt ein effektiver Jahreszins von 11,99% p.a. zu einem festen Sollzinssatz von 11,33% p.a. Repräsentatives Beispiel gem. § 17 (4) PAngV: Nettodarlehensbetrag 1.000 €, Gesamtbetrag 1.067,79 €, 12 monatliche Raten à 88,98 €, fester Sollzinssatz 12,22% p.a., eff. Jahreszins 12,99% p.a. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg.",
             "zeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung und nur für Transaktionen in Euro. Ab einem Bestellwert von {formattedMinAmount} bis {formattedMaxAmount} mit einem eff. Jahreszins von {formattedAPR}% p.a. und einem festen Sollzinssatz von {formattedNominalRatePrecision2}% p.a. für Darlehensverträge, die im Angebotszeitraum abgeschlossen werden. Laufzeit 3, 6, 12 oder 24 Monate. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg. Als Verbraucher steht Ihnen gemäß § 514 BGB bei unentgeltlichen Darlehensverträgen ab einem Finanzierungsbetrag von 200 € ein Widerrufsrecht zu. Anspruchsberechtigte Kunden müssen PayPal ein SEPA Lastschriftmandat erteilen sowie über ein deutsches PayPal Privat-Konto mit bestätigtem Bankkonto als Zahlungsquelle verfügen. Abhängig von der Verfügbarkeit. Laufzeiten können in bestimmten Anwendungsfällen abweichen."
         },
         "navLinkPrefix": "Für andere Später Bezahlen Optionen wählen Sie",

content/modals/DE/long_term_en.json

@@ -0,0 +1,45 @@
+{
+    "meta": {
+        "product": "PAY_LATER_LONG_TERM",
+        "offerCountry": "DE",
+        "language": "en-DE",
+        "useV4Design": "false",
+        "variables": {
+            "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
+            "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
+            "financing_code": "${CREDIT_OFFERS_DS.financing_code}",
+            "formattedPeriodicPayment": "${CREDIT_OFFERS_DS.formattedPeriodicPayment}",
+            "total_payments": "${CREDIT_OFFERS_DS.total_payments}",
+            "formattedMinAmount": "${CREDIT_OFFERS_DS.formattedMinAmount}",
+            "formattedMaxAmount": "${CREDIT_OFFERS_DS.formattedMaxAmount}",
+            "formattedTotalCost": "${CREDIT_OFFERS_DS.formattedTotalCost}",
+            "minAmount": "${CREDIT_OFFERS_DS.minAmount}",
+            "maxAmount": "${CREDIT_OFFERS_DS.maxAmount}",
+            "apr": "${CREDIT_OFFERS_DS.apr}",
+            "nominal_rate": "${CREDIT_OFFERS_DS.nominal_rate}",
+            "formattedNominalRatePrecision2": "${CREDIT_OFFERS_DS.formattedNominalRatePrecision2}"
+        }
+    },
+    "content": {
+        "headline": "Pay later in monthly installments",
+        "subheadline": "Buy today, with no down payment.",
+        "calculator": {
+            "title": "How much is your purchase?",
+            "inputLabel": "Value of goods",
+            "inputPlaceholder": "{formattedMinAmount} - {formattedMaxAmount}",
+            "inputCurrencySymbol": "€",
+            "genericError": "Something went wrong. Please try later."
+        },
+        "instructions": [
+            "Choose PayPal at checkout to pay later with<strong> PayPal Ratenzahlung</strong>.",
+            "Complete your purchase in a few easy steps.",
+            "That’s it! Pay early if you like, with no extra cost."
+        ],
+        "disclosure": {
+            "nonZeroAPR": "Subject to credit approval. Terms of 3, 6, 12, or 24 months. Starting from {formattedMinAmount} up to {formattedMaxAmount} order value. For terms of 3, 6, and 12 months, an annual percentage rate (APR) of 12.99% applies, with a fixed nominal interest rate of 12.19% p.a. for 3 months, 12.21% p.a. for 6 months, and 12.22% p.a. for 12 months. For the 24-month term, an APR of 11.99% applies, with a fixed nominal interest rate of 11.33% p.a. Representative example according to § 17 (4) PAngV: Net loan amount €1,000, total amount €1,067.79, 12 monthly installments of €88.98 each, fixed nominal interest rate 12.22% p.a., effective APR 12.99% p.a. The lender is PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg.",
+            "zeroAPR": "Subject to credit approval and only for transactions in Euro. From an order value of {formattedMinAmount} up to {formattedMaxAmount} with an effective annual percentage rate (APR) of {formattedAPR}% p.a. and a fixed nominal interest rate of {formattedNominalRatePrecision2}% p.a. for loan agreements concluded during the promotional period. Terms of 3, 6, 12, or 24 months. The lender is PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg. As a consumer, you have a right of withdrawal according to § 514 BGB for gratuitous loan agreements from a financing amount of €200. Eligible customers must grant PayPal a SEPA direct debit mandate and have a German PayPal personal account with a confirmed bank account as a payment source. Subject to availability. Terms may vary in certain use cases."
+        },
+        "navLinkPrefix": "For other Pay later options,",
+        "linkToProductList": "select Pay after 30 days."
+    }
+}

content/modals/DE/pay_in_1.json

@@ -1,6 +1,7 @@
 {
     "meta": {
         "offerCountry": "DE",
+        "useV4Design": "false",
         "periodicPayment": "{formattedPeriodicPayment}",
         "product": "PAY_LATER_PAY_IN_1",
         "minAmount": "{minAmount}",

content/modals/DE/pay_in_1_en.json

@@ -0,0 +1,39 @@
+{
+    "meta": {
+        "offerCountry": "DE",
+        "language": "en-DE",
+        "useV4Design": "false",
+        "periodicPayment": "{formattedPeriodicPayment}",
+        "product": "PAY_LATER_PAY_IN_1",
+        "minAmount": "{minAmount}",
+        "maxAmount": "{maxAmount}",
+        "qualifying": "{qualifying_offer}",
+        "amount": "{transaction_amount}",
+        "variables": {
+            "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
+            "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
+            "financing_code": "${CREDIT_OFFERS_DS.financing_code}",
+            "formattedPeriodicPayment": "${CREDIT_OFFERS_DS.formattedPeriodicPayment}",
+            "total_payments": "${CREDIT_OFFERS_DS.total_payments}",
+            "formattedMinAmount": "${CREDIT_OFFERS_DS.formattedMinAmount}",
+            "formattedMaxAmount": "${CREDIT_OFFERS_DS.formattedMaxAmount}",
+            "formattedTotalCost": "${CREDIT_OFFERS_DS.formattedTotalCost}",
+            "minAmount": "${CREDIT_OFFERS_DS.minAmount}",
+            "maxAmount": "${CREDIT_OFFERS_DS.maxAmount}"
+        }
+    },
+    "content": {
+        "headline": "Buy what you love now. Pay in 30 Days.",
+        "subheadline": "Available for purchases of <span>{formattedMinAmount} - {formattedMaxAmount}.</span>",
+        "instructions": [
+            "Choose PayPal at checkout to use <strong> Pay in 30 Days.</strong>",
+            "Complete your purchase in a few quick steps.",
+            "Need more than 30 days? Postpone once for a fee."
+        ],
+        "disclosure": [
+            "Available for purchases of {formattedMinAmount} - {formattedMaxAmount}. Subject to a credit check. Eligible customers must grant PayPal a SEPA direct debit mandate and have a German PayPal private account with a bank account as a funding instrument."
+        ],
+        "navLinkPrefix": "For monthly Pay Later Options,",
+        "linkToProductList": "see PayPal Ratenzahlung."
+    }
+}

content/offers/DE/long_term_en.json

@@ -0,0 +1,48 @@
+{
+    "meta": {
+        "product": "PAY_LATER_LONG_TERM",
+        "offerCountry": "DE",
+        "formattedPeriodicPayment": "{formattedPeriodicPayment}",
+        "minAmount": "{minAmount}",
+        "maxAmount": "{maxAmount}",
+        "qualifying": "{qualifying_offer}",
+        "amount": "{transaction_amount}",
+        "formattedMinAmount": "{formattedMinAmount}",
+        "formattedMaxAmount": "{formattedMaxAmount}",
+        "apr": "{apr}",
+        "total_payments": "{total_payments}",
+        "formattedTotalCost": "{formattedTotalCost}",
+        "formattedTotalInterest": "{formattedTotalInterest}",
+        "variables": {
+            "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
+            "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
+            "financing_code": "${CREDIT_OFFERS_DS.financing_code}",
+            "formattedPeriodicPayment": "${CREDIT_OFFERS_DS.formattedPeriodicPayment}",
+            "total_payments": "${CREDIT_OFFERS_DS.total_payments}",
+            "formattedMinAmount": "${CREDIT_OFFERS_DS.formattedMinAmount}",
+            "formattedMaxAmount": "${CREDIT_OFFERS_DS.formattedMaxAmount}",
+            "formattedTotalCost": "${CREDIT_OFFERS_DS.formattedTotalCost}",
+            "minAmount": "${CREDIT_OFFERS_DS.minAmount}",
+            "maxAmount": "${CREDIT_OFFERS_DS.maxAmount}",
+            "apr": "${CREDIT_OFFERS_DS.apr}",
+            "nominal_rate": "${CREDIT_OFFERS_DS.nominal_rate}"
+        }
+    },
+    "content": {
+        "calculator": {
+            "belowThreshold": "Enter an amount of {formattedMinAmount} or more.",
+            "aboveThreshold": "Enter an amount no larger than {formattedMaxAmount}"
+        },
+        "disclaimer": {
+            "nonZeroAPR": "Eff. Annual interest rate 9,99% p.a., <br/> fixed borrowing rate {nominal_rate}% p.a.",
+            "zeroAPR": "Eff. Annual interest rate 0,00% p.a., <br/> fixed borrowing rate 0,00% p.a."
+        },
+        "termsLabel": {
+            "offerPayment": "{formattedPeriodicPayment} / month",
+            "offerNumInstallments": "{total_payments} installments",
+            "eMoney": "Transaction amount e-money service",
+            "totalInterest": "Interest amount",
+            "total": "Total amount"
+        }
+    }
+}

demo/helpers/accounts.js

@@ -31,6 +31,7 @@ const accounts = [
     // 'DEV0GENERICPL',
     // 'DEV000GENBNPL',
     // 'DEV000GENPYPL',
+    // 'DEV0BTNPYPLPP',
     // 'DEVBTNLTMQGTZ',
     // 'DEVBTNLTMQEQZ',
     // 'DEVBTNLTNQGTZ',
@@ -44,6 +45,7 @@ const accounts = [
     // 'DEV00MRKGENPL',
     // 'DEVMRKGENBNPL',
     // 'DEVMRKGENPYPL',
+    // 'DEV0MRKPYPLPP',
     // 'DEVMRKLTMQGTZ',
     // 'DEVMRKLTMQEQZ',
     // 'DEVMRKLTNQGTZ',

src/components/modal/v2/lib/hooks/calculator.js

@@ -69,7 +69,8 @@ export default function useCalculator({ autoSubmit = false } = {}) {
         contextualComponents,
         devTouchpoint,
         disableSetCookie,
-        features
+        features,
+        language
     } = useXProps();
 
     const [state, dispatch] = useReducer(reducer, {
@@ -99,7 +100,8 @@ export default function useCalculator({ autoSubmit = false } = {}) {
             devTouchpoint,
             deviceID: getOrCreateDeviceID(),
             disableSetCookie,
-            features
+            features,
+            language
         })
             .then(data => {
                 setServerData(data);

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

@@ -106,7 +106,9 @@ const BodyContent = () => {
                 openProductList={openProductList}
             />
         ),
-        [VIEW_IDS.PAY_LATER_PAY_IN_1]: <PayIn1 content={content} openProductList={openProductList} />,
+        [VIEW_IDS.PAY_LATER_PAY_IN_1]: (
+            <PayIn1 productMeta={productMeta} content={content} openProductList={openProductList} />
+        ),
         [VIEW_IDS.PAY_LATER_SHORT_TERM]: (
             <ShortTerm
                 content={content}

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

@@ -9,6 +9,7 @@ import { useServerData } from '../../../lib/providers';
 import { currencyFormat } from '../../../lib/hooks/currency'; // Remove .00 cents from formated min and max
 
 export const PayIn1 = ({
+    productMeta: { useV4Design },
     content: { instructions, linkToProductList, disclosure, navLinkPrefix },
     openProductList
 }) => {
@@ -33,7 +34,7 @@ export const PayIn1 = ({
             <style>{styles._getCss()}</style>
             <div className="content__row dynamic">
                 <div className="content__col">
-                    <Instructions instructions={instructions} />
+                    <Instructions instructions={instructions} useV4Design={useV4Design} />
                 </div>
                 <div className="content__col">
                     <div className="branded-image">

src/library/controllers/modal/interface.js

@@ -74,7 +74,8 @@ const memoizedModal = memoizeOnProps(
         let renderProm;
         // eslint-disable-next-line default-param-last
         const renderModal = (selector = 'body', newProps, options = { intent: 'render' }) => {
-            const context = getTopWindow() === window ? 'iframe' : 'popup';
+            // TODO: determine a more flexible way to handle iframe vs. popup scenarios for our various entrypoints
+            const context = getTopWindow() === window || features === 'new-checkout-design' ? 'iframe' : 'popup';
 
             if (renderProm && context !== 'popup') {
                 return renderProm.then(() => newProps && zoidComponent.updateProps(newProps));

src/library/zoid/message/component.js

@@ -28,7 +28,8 @@ import {
     getDevTouchpoint,
     getMerchantConfig,
     getLocalTreatments,
-    getTsCookieFromStorage
+    getTsCookieFromStorage,
+    getURIPopup
 } from '../../../utils';
 import validate from './validation';
 import containerTemplate from './containerTemplate';
@@ -141,23 +142,26 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
 
                     return ({ meta }) => {
                         const { modal, index, account, merchantId, currency, amount, buyerCountry, onApply } = props;
-                        const { offerType, offerCountry, messageRequestId } = meta;
-
-                        // Avoid spreading message props because both message and modal
-                        // zoid components have an onClick prop that functions differently
-                        modal.show({
-                            account,
-                            merchantId,
-                            currency,
-                            amount,
-                            buyerCountry,
-                            onApply,
-                            offer: offerType,
-                            offerCountry,
-                            refId: messageRequestId,
-                            refIndex: index,
-                            src: 'message_click'
-                        });
+                        const { offerType, offerCountry, messageRequestId, lander } = meta;
+                        if (offerType === 'PURCHASE_PROTECTION') {
+                            getURIPopup(lander, offerType);
+                        } else {
+                            // Avoid spreading message props because both message and modal
+                            // zoid components have an onClick prop that functions differently
+                            modal.show({
+                                account,
+                                merchantId,
+                                currency,
+                                amount,
+                                buyerCountry,
+                                onApply,
+                                offer: offerType,
+                                offerCountry,
+                                refId: messageRequestId,
+                                refIndex: index,
+                                src: 'message_click'
+                            });
+                        }
 
                         logger.track({
                             index,

src/server/locale/AU/validOptions.js

@@ -10,15 +10,15 @@ export default {
             color: [Types.STRING, ['black', 'white', 'monochrome', 'grayscale|greyscale']],
             size: [Types.NUMBER, [12, 10, 11, 13, 14, 15, 16]],
             align: [Types.STRING, ['left', 'right', 'center']],
-            fontFamily: [Types.STRING],
+            fontFamily: [Types.ANY],
             fontSource: [Types.ANY]
         }
     },
     flex: {
         color: [Types.STRING, ['blue', 'black', 'white', 'gray|grey', 'monochrome', 'grayscale|greyscale']],
         ratio: [Types.STRING, ['1x1', '1x4', '8x1', '20x1']],
         text: {
-            fontFamily: [Types.STRING],
+            fontFamily: [Types.ANY],
             fontSource: [Types.ANY]
         }
     }