From a880c3778e551167ab3645ace548be4e1a01da7e Mon Sep 17 00:00:00 2001 From: suweinberg Date: Mon, 24 Mar 2025 19:07:41 -0700 Subject: [PATCH 1/7] US modal 5.1 rebrand --- content/modals/US/PL2GO/pl2go_long_term.json | 3 +- content/modals/US/PL2GO/pl2go_short_term.json | 3 +- content/modals/US/PLHub/plhub_long_term.json | 3 +- content/modals/US/PLHub/plhub_short_term.json | 5 ++- content/modals/US/long_term_df.json | 1 + content/modals/US/v2_long_term.json | 3 +- content/modals/US/v2_ppc_ni.json | 4 +- content/modals/US/v2_product_list.json | 3 +- content/modals/US/v2_short_term.json | 5 ++- demo/index.html | 19 +++++----- demo/standalone-modal.html | 16 +++++++- demo/standalone.html | 38 +++++++++++++------ src/components/modal/v2/parts/BodyContent.jsx | 19 ++++++++-- src/components/modal/v2/parts/Calculator.jsx | 2 + src/components/modal/v2/parts/Donut.jsx | 12 ++++-- src/components/modal/v2/parts/Header.jsx | 7 +++- src/components/modal/v2/parts/OfferCard.jsx | 10 +++-- src/components/modal/v2/parts/TermsTable.jsx | 2 + src/components/modal/v2/parts/Tile.jsx | 12 ++++-- .../modal/v2/parts/views/LongTerm/Content.jsx | 4 +- .../v2/parts/views/NoInterest/Content.jsx | 15 +++++--- .../v2/parts/views/NoInterest/styles.scss | 12 ++++++ .../v2/parts/views/ProductList/Content.jsx | 15 +++++++- .../v2/parts/views/ShortTerm/Content.jsx | 4 +- .../modal/v2/styles/components/_button.scss | 4 ++ .../modal/v2/styles/components/_content.scss | 6 +++ .../modal/v2/styles/components/_donut.scss | 5 ++- .../modal/v2/styles/components/_header.scss | 3 +- .../v2/styles/components/_offer-card.scss | 15 ++++++++ .../modal/v2/styles/components/_tile.scss | 8 +++- 30 files changed, 197 insertions(+), 61 deletions(-) diff --git a/content/modals/US/PL2GO/pl2go_long_term.json b/content/modals/US/PL2GO/pl2go_long_term.json index 4b980ad628..3923a923b0 100644 --- a/content/modals/US/PL2GO/pl2go_long_term.json +++ b/content/modals/US/PL2GO/pl2go_long_term.json @@ -2,7 +2,8 @@ "meta": { "product": "PAY_LATER_LONG_TERM", "offerCountry": "US", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/content/modals/US/PL2GO/pl2go_short_term.json b/content/modals/US/PL2GO/pl2go_short_term.json index e75134bbf1..3736e27b7d 100644 --- a/content/modals/US/PL2GO/pl2go_short_term.json +++ b/content/modals/US/PL2GO/pl2go_short_term.json @@ -7,7 +7,8 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/content/modals/US/PLHub/plhub_long_term.json b/content/modals/US/PLHub/plhub_long_term.json index 2c4440c7bf..27fd0dc378 100644 --- a/content/modals/US/PLHub/plhub_long_term.json +++ b/content/modals/US/PLHub/plhub_long_term.json @@ -2,7 +2,8 @@ "meta": { "product": "PAY_LATER_LONG_TERM", "offerCountry": "US", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/content/modals/US/PLHub/plhub_short_term.json b/content/modals/US/PLHub/plhub_short_term.json index 30681fc115..7e601d628b 100644 --- a/content/modals/US/PLHub/plhub_short_term.json +++ b/content/modals/US/PLHub/plhub_short_term.json @@ -7,7 +7,8 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", @@ -36,6 +37,6 @@ "disclosure": [ "Pay in 4 is available to consumers upon approval for purchases of {formattedMinAmount} to {formattedMaxAmount}. Pay in 4 is not currently available to residents of Missouri, Nevada, or New Mexico. 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. Loans to California residents are made or arranged pursuant to a California Financing Law License. PayPal, Inc. is a Georgia Installment Lender Licensee, NMLS #910457. Rhode Island Small Loan Lender Licensee." ], - "linkToProductList": "See other ways to pay later" + "linkToProductList": "See other ways to pay over time" } } diff --git a/content/modals/US/long_term_df.json b/content/modals/US/long_term_df.json index 0a9ab08873..3784d74b85 100644 --- a/content/modals/US/long_term_df.json +++ b/content/modals/US/long_term_df.json @@ -3,6 +3,7 @@ "product": "PAY_LATER_LONG_TERM", "offerCountry": "US", "useV5Design": "true", + "v5.1": "true", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}", diff --git a/content/modals/US/v2_long_term.json b/content/modals/US/v2_long_term.json index dd61b4c027..53fc61d715 100644 --- a/content/modals/US/v2_long_term.json +++ b/content/modals/US/v2_long_term.json @@ -1,7 +1,8 @@ { "meta": { "product": "PAY_LATER_LONG_TERM", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "offerCountry": "US", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", diff --git a/content/modals/US/v2_ppc_ni.json b/content/modals/US/v2_ppc_ni.json index b148f68548..810fa6a2e6 100644 --- a/content/modals/US/v2_ppc_ni.json +++ b/content/modals/US/v2_ppc_ni.json @@ -2,6 +2,8 @@ "meta": { "offerCountry": "US", "product": "PAYPAL_CREDIT_NO_INTEREST", + "useV5Design": "true", + "v5.1": "true", "periodicPayment": "{formattedPeriodicPayment}", "minAmount": "{minAmount}", "maxAmount": "{maxAmount}", @@ -49,6 +51,6 @@ ], ["Copyright {fullYear} Bill Me Later, Inc. All rights reserved."] ], - "linkToProductList": "See other ways to pay later" + "linkToProductList": "See other ways to pay over time" } } diff --git a/content/modals/US/v2_product_list.json b/content/modals/US/v2_product_list.json index fadcc7daa9..cf8a103cb2 100644 --- a/content/modals/US/v2_product_list.json +++ b/content/modals/US/v2_product_list.json @@ -1,7 +1,8 @@ { "meta": { "product": "PRODUCT_LIST", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "offerCountry": "US" }, "content": { diff --git a/content/modals/US/v2_short_term.json b/content/modals/US/v2_short_term.json index 1146b4a829..261aaffdfc 100644 --- a/content/modals/US/v2_short_term.json +++ b/content/modals/US/v2_short_term.json @@ -1,7 +1,8 @@ { "meta": { "product": "PAY_LATER_SHORT_TERM", - "useV5Design": "false", + "useV5Design": "true", + "v5.1": "true", "periodicPayment": "{formattedPeriodicPayment}", "minAmount": "{minAmount}", "maxAmount": "{maxAmount}", @@ -36,6 +37,6 @@ "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 Missouri, Nevada, or New Mexico. 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 California residents are made or arranged pursuant to California Financing Law License.​ Georgia Installment Lender Licensee, NMLS #910457.​ Rhode Island Small Loan Lender Licensee." ], - "linkToProductList": "See other ways to pay later" + "linkToProductList": "See other ways to pay over time" } } diff --git a/demo/index.html b/demo/index.html index 98302d6958..89c06a60dc 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,20 +4,19 @@ Messages Dev Sandbox - + +
diff --git a/demo/standalone-modal.html b/demo/standalone-modal.html index 9113afe10c..ed69c62918 100644 --- a/demo/standalone-modal.html +++ b/demo/standalone-modal.html @@ -4,13 +4,25 @@ Standalone Modal Sandbox - + + + + + -
+
diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx index 342c8d36b7..6a8246c36e 100644 --- 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 @@ -101,12 +102,15 @@ const BodyContent = () => { // Add views to viewComponents object where the keys are the product name and the values are the view component const viewComponents = { - [VIEW_IDS.PAYPAL_CREDIT_NO_INTEREST]: , + [VIEW_IDS.PAYPAL_CREDIT_NO_INTEREST]: ( + + ), [VIEW_IDS.PAY_LATER_LONG_TERM]: ( ), @@ -118,10 +122,18 @@ const BodyContent = () => { content={content} productMeta={productMeta} useNewCheckoutDesign={useNewCheckoutDesign} + use5Dot1Design={use5Dot1Design} openProductList={openProductList} /> ), - [VIEW_IDS.PRODUCT_LIST]: + [VIEW_IDS.PRODUCT_LIST]: ( + + ) }; // IMPORTANT: These elements cannot be nested inside of other elements. @@ -154,12 +166,13 @@ const BodyContent = () => { viewName={viewName} useV4Design={useV4Design} useV5Design={useV5Design} + use5Dot1Design={use5Dot1Design} /> )}
{viewComponents[viewName]}
diff --git a/src/components/modal/v2/parts/Calculator.jsx b/src/components/modal/v2/parts/Calculator.jsx index e41aa53ed6..500acf95f0 100644 --- a/src/components/modal/v2/parts/Calculator.jsx +++ b/src/components/modal/v2/parts/Calculator.jsx @@ -71,6 +71,7 @@ const Calculator = ({ aprDisclaimer, useV4Design, useV5Design, + use5Dot1Design, useNewCheckoutDesign }) => { const { view, value, isLoading, submit, changeInput } = useCalculator({ autoSubmit: true }); @@ -229,6 +230,7 @@ const Calculator = ({ aprDisclaimer={aprDisclaimer} useV4Design={useV4Design} useV5Design={useV5Design} + use5Dot1Design={use5Dot1Design} useNewCheckoutDesign={useNewCheckoutDesign} />
diff --git a/src/components/modal/v2/parts/Donut.jsx b/src/components/modal/v2/parts/Donut.jsx index cff14f3c96..976629807e 100644 --- a/src/components/modal/v2/parts/Donut.jsx +++ b/src/components/modal/v2/parts/Donut.jsx @@ -18,6 +18,7 @@ const Donut = ({ qualifying, useV4Design, useV5Design, + use5Dot1Design, useNewCheckoutDesign }) => { const percentage = (currentNum / numOfPayments) * 100; @@ -63,7 +64,8 @@ const Donut = ({ /> {segments} @@ -77,7 +79,9 @@ const Donut = ({ {isQualifying && periodicPayment !== '-' && ( )}