feat: support US onboarding modals (#1185)

yeul · web-flow · commit a7f7b54e1100 · 2025-03-31T10:59:47.000-04:00
diff --git a/content/modals/US/v2_long_term-onboarding.json b/content/modals/US/v2_long_term-onboarding.json
@@ -0,0 +1,44 @@
+{
+    "meta": {
+        "product": "PAY_LATER_LONG_TERM",
+        "useV5Design": "true",
+        "v5.1": "true",
+        "offerCountry": "US",
+        "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": {
+        "headline": "Pay Monthly",
+        "subheadline": "Get more time to pay, with no down payment or late fees.",
+        "calculator": {
+            "title": "How much is your purchase?",
+            "inputLabel": "Purchase amount",
+            "inputPlaceholder": "Enter amount",
+            "genericError": "Something went wrong. Please try again later."
+        },
+        "genericDisclaimer": "Terms vary based on purchase amount and your credit.",
+        "instructions": [
+            "Create your PayPal account, then choose <strong>Pay Monthly</strong>.",
+            "Get a decision in seconds and complete your purchase.",
+            "Use autopay for your payments. It's easy!"
+        ],
+        "disclosure": [
+            "Pay Monthly is subject to consumer credit approval and eligibility. Payments may change based on shipping, taxes, updates to your purchase, or missed payments. Availability depends on the merchant and may not be available for subscriptions or recurring payments. Pay Monthly is currently not available to residents of <span aria-hidden='true'>AK, HI, or NV</span><span class='sr-only'>Alaska, Hawaii, or Nevada</span>. You must be 18 years old or older to apply. Missed payments may have an impact on your credit score. The lender for Pay Monthly is WebBank. PayPal, Inc. (NMLS #910457): <span aria-hidden='true'>CT</span><span class='sr-only'>Connecticut</span> Small Loan Licensee. <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Loan Broker Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> Loan Solicitation Licensee. <span aria-hidden='true'>VT</span><span class='sr-only'>Vermont</span> residents:",
+            ["Find more disclosures ", "https://www.paypal.com/us/digital-wallet/ways-to-pay/buy-now-pay-later"],
+            "by going to PayPal's page on Pay Later."
+        ],
+        "linkToProductList": "See other ways to pay over time"
+    }
+}
diff --git a/content/modals/US/v2_short_term-onboarding.json b/content/modals/US/v2_short_term-onboarding.json
@@ -0,0 +1,42 @@
+{
+    "meta": {
+        "product": "PAY_LATER_SHORT_TERM",
+        "useV5Design": "true",
+        "v5.1": "true",
+        "periodicPayment": "{formattedPeriodicPayment}",
+        "minAmount": "{minAmount}",
+        "maxAmount": "{maxAmount}",
+        "qualifying": "{qualifying_offer}",
+        "amount": "{transaction_amount}",
+        "apr": "{apr}",
+        "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": {
+        "headline": "Pay in 4 interest-free payments",
+        "subheadline": "No impact on credit score and no late fees. Available for purchases of {formattedMinAmount} to {formattedMaxAmount}.",
+        "qualifyingSubheadline": "Split your purchase of {formattedTotalCost} into {total_payments} with no impact on credit score and no late fees.",
+        "donutTimestamps": ["Today", "2 weeks", "4 weeks", "6 weeks"],
+        "instructions": [
+            "Create your PayPal account, then choose <strong>Pay in 4</strong>. ",
+            "Complete your purchase with a 25% down payment.",
+            "Use autopay for the rest of your payments. It's easy!"
+        ],
+        "disclosure": [
+            "Pay in 4 is available to consumers upon approval for purchases of {formattedMinAmount} to {formattedMaxAmount}. Pay in 4 is currently not available to residents of <span aria-hidden='true'>MO, NV, or NM</span><span class='sr-only'>Missouri, Nevada, or New Mexico</span>. Offer availability depends on the merchant and also may not be available for certain recurring, subscription services.​ When applying, a soft credit check may be needed, but will not affect your credit score.​ You must be of legal age in your U.S. state of residence to use Pay in 4.​ PayPal, Inc.: Loans to <span aria-hidden='true'>CA</span><span class='sr-only'>California</span> residents are made or arranged pursuant to <span aria-hidden='true'>CA</span><span class='sr-only'>California</span> Financing Law License.​ <span aria-hidden='true'>GA</span><span class='sr-only'>Georgia</span> Installment Lender Licensee, NMLS #910457.​ <span aria-hidden='true'>RI</span><span class='sr-only'>Rhode Island</span> Small Loan Lender Licensee."
+        ],
+        "linkToProductList": "See other ways to pay later"
+    }
+}
diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx
@@ -63,6 +63,7 @@ const BodyContent = () => {
 
     const useV4Design = productMeta?.useV4Design === 'true';
     const useV5Design = productMeta?.useV5Design === 'true';
+    const use5Dot1Design = productMeta?.['v5.1'];
     const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false';
 
     // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively
@@ -154,6 +155,7 @@ const BodyContent = () => {
                     viewName={viewName}
                     useV4Design={useV4Design}
                     useV5Design={useV5Design}
+                    use5Dot1Design={use5Dot1Design}
                 />
             )}
             <div
diff --git a/src/components/modal/v2/parts/Header.jsx b/src/components/modal/v2/parts/Header.jsx
@@ -12,7 +12,8 @@ const Header = ({
     closeButtonLabel = 'Close',
     viewName,
     useV4Design,
-    useV5Design
+    useV5Design,
+    use5Dot1Design
 }) => {
     const { country } = useServerData();
     const [, handleClose] = useTransitionState();
@@ -61,14 +62,14 @@ const Header = ({
                     // We don't need to render an 'x' button if the target is a lander since you will close via a
                     // merchant-provided close button from their own iframe, or by closing the window in the case of a webpage.
                     <button
-                        className="close"
+                        className={`close ${useV5Design ? 'v5Design' : ''}`}
                         aria-label={closeButtonLabel}
                         type="button"
                         id="close-btn"
                         aria-keyshortcuts="escape"
                         onClick={() => handleClose('Close Button')}
                     >
-                        <Icon name="close" />
+                        <Icon name={useV5Design ? 'close_v5' : 'close'} />
                     </button>
                 )}
                 <div className="header__fixed-wrapper header__fixed-wrapper--front">
@@ -90,7 +91,9 @@ const Header = ({
                 <h2
                     // id used for aria-labelleby on modal container element
                     id="header__headline"
-                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''}`}
+                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''} ${
+                        use5Dot1Design ? 'headline-new' : ''
+                    }`}
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: headline }}
                 />
diff --git a/src/components/modal/v2/parts/Icon.jsx b/src/components/modal/v2/parts/Icon.jsx
@@ -214,6 +214,17 @@ const Icon = ({ name = '', color, content }) => {
                     />
                 </svg>
             );
+        case 'close_v5':
+            return (
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M14.7674 13.7707C14.729 13.6782 14.6728 13.5941 14.602 13.5232L10.0782 9.00012L14.602 4.47701C14.7451 4.33395 14.8254 4.13993 14.8254 3.93762C14.8254 3.73531 14.7451 3.54128 14.602 3.39823C14.459 3.25517 14.2649 3.1748 14.0626 3.1748C13.8603 3.1748 13.6663 3.25518 13.5232 3.39824L9.00012 7.92202L4.47701 3.39823C4.33395 3.25517 4.13993 3.1748 3.93762 3.1748C3.73531 3.1748 3.54128 3.25517 3.39823 3.39823C3.25517 3.54128 3.1748 3.73531 3.1748 3.93762C3.1748 4.13993 3.25518 4.33396 3.39824 4.47702L7.92202 9.00012L3.39823 13.5232C3.25517 13.6663 3.1748 13.8603 3.1748 14.0626C3.1748 14.2649 3.25517 14.459 3.39823 14.602C3.54128 14.7451 3.73531 14.8254 3.93762 14.8254C4.13993 14.8254 4.33396 14.7451 4.47702 14.602L9.00012 10.0782L13.5232 14.602C13.5941 14.6728 13.6782 14.729 13.7707 14.7674C13.8632 14.8057 13.9624 14.8254 14.0626 14.8254C14.1628 14.8254 14.262 14.8057 14.3545 14.7674C14.4471 14.729 14.5312 14.6728 14.602 14.602C14.6728 14.5312 14.729 14.4471 14.7674 14.3545C14.8057 14.262 14.8254 14.1628 14.8254 14.0626C14.8254 13.9624 14.8057 13.8632 14.7674 13.7707Z"
+                        fill="#696969"
+                    />
+                </svg>
+            );
         case 'chevron-left':
             return (
                 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/modal/v2/styles/components/_header.scss b/src/components/modal/v2/styles/components/_header.scss
@@ -187,6 +187,16 @@
                     stroke-width: 2.2;
                 }
             }
+
+            &.v5Design {
+                height: 50px;
+                width: 50px;
+
+                svg {
+                    height: 30px;
+                    width: 30px;
+                }
+            }
         }
 
         &.checkout {
@@ -323,7 +333,8 @@
             }
 
             &.v5Design {
-                &.headline-gb {
+                &.headline-gb,
+                &.headline-new {
                     font-family: $paypal-pro;
                     font-weight: bold;
                     font-size: 32px;
diff --git a/utils/devServerProxy/config/US/index.js b/utils/devServerProxy/config/US/index.js
@@ -244,6 +244,43 @@ export default {
             ]
         }
     },
+    DEV_US_SHORT_TERM_ONBOARDING: {
+        country: 'US',
+        modalViews: [
+            {
+                template: 'v2_short_term-onboarding.json',
+                product: OFFER.PAY_LATER_SHORT_TERM
+            }
+        ],
+        messageThresholds: [
+            {
+                amount: 0,
+                template: 'short_term_nq.json',
+                product: OFFER.PAY_LATER_SHORT_TERM
+            },
+            {
+                amount: 30,
+                template: 'short_term_q.json',
+                product: OFFER.PAY_LATER_SHORT_TERM
+            },
+            {
+                amount: 1500.01,
+                template: 'short_term_nq.json',
+                product: OFFER.PAY_LATER_SHORT_TERM
+            }
+        ],
+        offers: {
+            [OFFER.PAY_LATER_SHORT_TERM]: [
+                {
+                    totalPayments: 4,
+                    apr: 0,
+                    nominalRate: 0,
+                    minAmount: 30,
+                    maxAmount: 1500
+                }
+            ]
+        }
+    },
     DEV_US_NO_INTEREST: {
         country: 'US',
         modalViews: [
@@ -522,6 +559,70 @@ export default {
             ]
         }
     },
+    DEV_US_LONG_TERM_ONBOARDING: {
+        country: 'US',
+        modalViews: [
+            {
+                template: 'v2_long_term-onboarding.json',
+                offersTemplate: 'v2_long_term.json',
+                product: OFFER.PAY_LATER_LONG_TERM
+            }
+        ],
+        messageThresholds: [
+            {
+                amount: 0,
+                template: 'generic.json',
+                product: 'PRODUCT_LIST'
+            },
+            {
+                amount: 0.01,
+                template: 'long_term_nq_eqz.json',
+                product: OFFER.PAY_LATER_LONG_TERM
+            },
+            {
+                amount: 199,
+                template: 'long_term_single_eqz.json',
+                product: OFFER.PAY_LATER_LONG_TERM
+            },
+            {
+                amount: 10000.01,
+                template: 'long_term_nq_eqz.json',
+                product: OFFER.PAY_LATER_LONG_TERM
+            }
+        ],
+        offers: {
+            [OFFER.PAY_LATER_LONG_TERM]: [
+                {
+                    totalPayments: 6,
+                    apr: 0,
+                    nominalRate: 0,
+                    minAmount: 199,
+                    maxAmount: 2999.99
+                },
+                {
+                    totalPayments: 12,
+                    apr: 0,
+                    nominalRate: 0,
+                    minAmount: 199,
+                    maxAmount: 20000
+                },
+                {
+                    totalPayments: 24,
+                    apr: 0,
+                    nominalRate: 0,
+                    minAmount: 500,
+                    maxAmount: 20000
+                },
+                {
+                    totalPayments: 36,
+                    apr: 0,
+                    nominalRate: 0,
+                    minAmount: 3000,
+                    maxAmount: 20000
+                }
+            ]
+        }
+    },
     DEV_US_LONG_TERM_DF: {
         country: 'US',
         modalViews: [

Original file line number	Diff line number	Diff line change
`@@ -187,6 +187,16 @@`
`187`	`187`	`stroke-width: 2.2;`
`188`	`188`	`}`
`189`	`189`	`}`
	`190`	`+`
	`191`	`+ &.v5Design {`
	`192`	`+ height: 50px;`
	`193`	`+ width: 50px;`
	`194`	`+`
	`195`	`+ svg {`
	`196`	`+ height: 30px;`
	`197`	`+ width: 30px;`
	`198`	`+ }`
	`199`	`+ }`
`190`	`200`	`}`
`191`	`201`
`192`	`202`	`&.checkout {`
`@@ -323,7 +333,8 @@`
`323`	`333`	`}`
`324`	`334`
`325`	`335`	`&.v5Design {`
`326`		`- &.headline-gb {`
	`336`	`+ &.headline-gb,`
	`337`	`+ &.headline-new {`
`327`	`338`	`font-family: $paypal-pro;`
`328`	`339`	`font-weight: bold;`
`329`	`340`	`font-size: 32px;`