diff --git a/content/modals/AU/short_term.json b/content/modals/AU/short_term.json index 58ed85b02e..d96447b76e 100644 --- a/content/modals/AU/short_term.json +++ b/content/modals/AU/short_term.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV5Design": "false", "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/DE/long_term.json b/content/modals/DE/long_term.json index 336c380a18..5badc419f3 100644 --- a/content/modals/DE/long_term.json +++ b/content/modals/DE/long_term.json @@ -2,7 +2,7 @@ "meta": { "product": "PAY_LATER_LONG_TERM", "offerCountry": "DE", - "useV4Design": "false", + "useV5Design": "false", "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/DE/long_term_en.json b/content/modals/DE/long_term_en.json index f18e771c60..f582879127 100644 --- a/content/modals/DE/long_term_en.json +++ b/content/modals/DE/long_term_en.json @@ -3,7 +3,7 @@ "product": "PAY_LATER_LONG_TERM", "offerCountry": "DE", "language": "en-DE", - "useV4Design": "false", + "useV5Design": "false", "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/DE/pay_in_1.json b/content/modals/DE/pay_in_1.json index 186e6cc007..bf327c8746 100644 --- a/content/modals/DE/pay_in_1.json +++ b/content/modals/DE/pay_in_1.json @@ -1,7 +1,7 @@ { "meta": { "offerCountry": "DE", - "useV4Design": "false", + "useV5Design": "false", "periodicPayment": "{formattedPeriodicPayment}", "product": "PAY_LATER_PAY_IN_1", "minAmount": "{minAmount}", diff --git a/content/modals/DE/pay_in_1_en.json b/content/modals/DE/pay_in_1_en.json index b22810fff5..a4ad9c38b0 100644 --- a/content/modals/DE/pay_in_1_en.json +++ b/content/modals/DE/pay_in_1_en.json @@ -2,7 +2,7 @@ "meta": { "offerCountry": "DE", "language": "en-DE", - "useV4Design": "false", + "useV5Design": "false", "periodicPayment": "{formattedPeriodicPayment}", "product": "PAY_LATER_PAY_IN_1", "minAmount": "{minAmount}", diff --git a/content/modals/DE/product_list.json b/content/modals/DE/product_list.json index a26b347c4c..f4a11d3eae 100644 --- a/content/modals/DE/product_list.json +++ b/content/modals/DE/product_list.json @@ -1,26 +1,27 @@ -{ - "meta": { - "product": "PRODUCT_LIST" - }, - "content": { - "headline": "Jetzt kaufen, später bezahlen", - "disclosure": "Es gelten die Nutzungsbedingungen. Vorbehaltlich Kreditwürdigkeitsprüfung. Für weitere Informationen zur Bezahlung nach 30 Tagen oder PayPal Ratenzahlung wählen Sie eine der obigen Optionen.", - "instructions": { - "payLater": "Wählen Sie PayPal, um “Später Bezahlen” zu nutzen." - }, - "productTiles": { - "payLater": [ - { - "header": "Bezahlen Sie nach 30 Tagen", - "body": "Erhalten Sie mehr Zeit, um Ihren Einkauf zu bezahlen.", - "viewName": "PAY_LATER_PAY_IN_1" - }, - { - "header": "PayPal Ratenzahlung", - "body": "Zahlen Sie Ihren Einkauf in monatlichen Raten.", - "viewName": "PAY_LATER_LONG_TERM" - } - ] - } - } -} +{ + "meta": { + "product": "PRODUCT_LIST", + "useV5Design": "false" + }, + "content": { + "headline": "Jetzt kaufen, später bezahlen", + "disclosure": "Es gelten die Nutzungsbedingungen. Vorbehaltlich Kreditwürdigkeitsprüfung. Für weitere Informationen zur Bezahlung nach 30 Tagen oder PayPal Ratenzahlung wählen Sie eine der obigen Optionen.", + "instructions": { + "payLater": "Wählen Sie PayPal, um “Später Bezahlen” zu nutzen." + }, + "productTiles": { + "payLater": [ + { + "header": "Bezahlen Sie nach 30 Tagen", + "body": "Erhalten Sie mehr Zeit, um Ihren Einkauf zu bezahlen.", + "viewName": "PAY_LATER_PAY_IN_1" + }, + { + "header": "PayPal Ratenzahlung", + "body": "Zahlen Sie Ihren Einkauf in monatlichen Raten.", + "viewName": "PAY_LATER_LONG_TERM" + } + ] + } + } +} diff --git a/content/modals/ES/short_term.json b/content/modals/ES/short_term.json index 8467cfc1a2..25fba1f19b 100644 --- a/content/modals/ES/short_term.json +++ b/content/modals/ES/short_term.json @@ -7,6 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", + "useV5Design": "false", "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/ES/short_term_en.json b/content/modals/ES/short_term_en.json index 9f1c852b14..bd8e21cf14 100644 --- a/content/modals/ES/short_term_en.json +++ b/content/modals/ES/short_term_en.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV5Design": "false", "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/FR/short_term.json b/content/modals/FR/short_term.json index 682e837f28..700d85ff2b 100644 --- a/content/modals/FR/short_term.json +++ b/content/modals/FR/short_term.json @@ -7,6 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", + "useV5Design": "false", "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/FR/short_term_en.json b/content/modals/FR/short_term_en.json index 393b3395fd..0fba516b56 100644 --- a/content/modals/FR/short_term_en.json +++ b/content/modals/FR/short_term_en.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV5Design": "false", "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/GB/short_term.json b/content/modals/GB/short_term.json index d93f3d1004..9a7afd95d9 100644 --- a/content/modals/GB/short_term.json +++ b/content/modals/GB/short_term.json @@ -7,7 +7,6 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", "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/IT/short_term.json b/content/modals/IT/short_term.json index 4d8426c243..aefb784462 100644 --- a/content/modals/IT/short_term.json +++ b/content/modals/IT/short_term.json @@ -10,6 +10,7 @@ "offerCountry": "IT", "creditProductIdentifier": "{credit_product_identifier}", "creditType": "{credit_type}", + "useV5Design": "false", "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/IT/short_term_en.json b/content/modals/IT/short_term_en.json index c11ba70d65..ee7ccb3cbe 100644 --- a/content/modals/IT/short_term_en.json +++ b/content/modals/IT/short_term_en.json @@ -10,6 +10,7 @@ "offerCountry": "IT", "creditProductIdentifier": "{credit_product_identifier}", "creditType": "{credit_type}", + "useV5Design": "false", "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_long_term.json b/content/modals/US/PL2GO/pl2go_long_term.json index 2fcf2f5727..6a80c9ae94 100644 --- a/content/modals/US/PL2GO/pl2go_long_term.json +++ b/content/modals/US/PL2GO/pl2go_long_term.json @@ -2,7 +2,7 @@ "meta": { "product": "PAY_LATER_LONG_TERM", "offerCountry": "US", - "useV4Design": "false", + "useV5Design": "false", "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 4ab1ec386b..e75134bbf1 100644 --- a/content/modals/US/PL2GO/pl2go_short_term.json +++ b/content/modals/US/PL2GO/pl2go_short_term.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV5Design": "false", "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 da5921f569..86076b1818 100644 --- a/content/modals/US/PLHub/plhub_long_term.json +++ b/content/modals/US/PLHub/plhub_long_term.json @@ -2,7 +2,7 @@ "meta": { "product": "PAY_LATER_LONG_TERM", "offerCountry": "US", - "useV4Design": "false", + "useV5Design": "false", "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 68db43ad53..30681fc115 100644 --- a/content/modals/US/PLHub/plhub_short_term.json +++ b/content/modals/US/PLHub/plhub_short_term.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV5Design": "false", "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 428371f1ff..3b4f9fd059 100644 --- a/content/modals/US/v2_long_term.json +++ b/content/modals/US/v2_long_term.json @@ -1,7 +1,7 @@ { "meta": { "product": "PAY_LATER_LONG_TERM", - "useV4Design": "false", + "useV5Design": "false", "offerCountry": "US", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", diff --git a/content/modals/US/v2_long_term_xo.json b/content/modals/US/v2_long_term_xo.json index e54014eb41..cf9e688043 100644 --- a/content/modals/US/v2_long_term_xo.json +++ b/content/modals/US/v2_long_term_xo.json @@ -1,7 +1,7 @@ { "meta": { "product": "PAY_LATER_LONG_TERM", - "useV4Design": "false", + "useV4Design": "true", "offerCountry": "US", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", diff --git a/content/modals/US/v2_product_list.json b/content/modals/US/v2_product_list.json index 6fb7c407a1..d5aee35808 100644 --- a/content/modals/US/v2_product_list.json +++ b/content/modals/US/v2_product_list.json @@ -1,7 +1,7 @@ { "meta": { "product": "PRODUCT_LIST", - "useV4Design": "false", + "useV5Design": "false", "offerCountry": "US" }, "content": { diff --git a/content/modals/US/v2_short_term.json b/content/modals/US/v2_short_term.json index 9b77dfc0c6..1146b4a829 100644 --- a/content/modals/US/v2_short_term.json +++ b/content/modals/US/v2_short_term.json @@ -1,7 +1,7 @@ { "meta": { "product": "PAY_LATER_SHORT_TERM", - "useV4Design": "false", + "useV5Design": "false", "periodicPayment": "{formattedPeriodicPayment}", "minAmount": "{minAmount}", "maxAmount": "{maxAmount}", diff --git a/content/modals/US/v2_short_term_xo.json b/content/modals/US/v2_short_term_xo.json index 700d04fb25..5c2fada86d 100644 --- a/content/modals/US/v2_short_term_xo.json +++ b/content/modals/US/v2_short_term_xo.json @@ -7,7 +7,7 @@ "qualifying": "{qualifying_offer}", "amount": "{transaction_amount}", "apr": "{apr}", - "useV4Design": "false", + "useV4Design": "true", "preapproved": "false", "variables": { "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}", diff --git a/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx index 55402d96a1..342c8d36b7 100644 --- a/src/components/modal/v2/parts/BodyContent.jsx +++ b/src/components/modal/v2/parts/BodyContent.jsx @@ -62,13 +62,17 @@ const BodyContent = () => { const isQualifying = productMeta?.qualifying; const useV4Design = productMeta?.useV4Design === 'true'; + const useV5Design = productMeta?.useV5Design === 'true'; const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false'; - // add v4Design class to root html to update lander specific styles to v4 + // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively const documentClassName = document.documentElement.className; if (useV4Design && isLander) { document.documentElement.className = `${documentClassName} v4Design`; } + if (useV5Design && isLander) { + document.documentElement.className = `${documentClassName} v5Design`; + } const isPreapproved = productMeta?.preapproved; const preapprovalHeadline = content?.preapproval?.preapprovalHeadline; const preapprovalSubHeadline = content?.preapproval?.preapprovalSubHeadline; @@ -117,8 +121,9 @@ const BodyContent = () => { openProductList={openProductList} /> ), - [VIEW_IDS.PRODUCT_LIST]: + [VIEW_IDS.PRODUCT_LIST]: }; + // IMPORTANT: These elements cannot be nested inside of other elements. // They are using very precise CSS position sticky rules that require this // specific adjacent DOM structure @@ -148,10 +153,11 @@ const BodyContent = () => { closeButtonLabel={closeButtonLabel} viewName={viewName} useV4Design={useV4Design} + useV5Design={useV5Design} /> )}
diff --git a/src/components/modal/v2/parts/Calculator.jsx b/src/components/modal/v2/parts/Calculator.jsx index 1ea3c14bde..51c1b880a9 100644 --- a/src/components/modal/v2/parts/Calculator.jsx +++ b/src/components/modal/v2/parts/Calculator.jsx @@ -65,7 +65,14 @@ const getError = ({ offers, error = '' }, isLoading, calculator, amount, country return null; }; -const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design, useNewCheckoutDesign }) => { +const Calculator = ({ + setExpandedState, + calculator, + aprDisclaimer, + useV4Design, + useV5Design, + useNewCheckoutDesign +}) => { const { view, value, isLoading, submit, changeInput } = useCalculator({ autoSubmit: true }); const { amount } = useXProps(); const { country, views } = useServerData(); @@ -183,15 +190,19 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design, }; return ( -
+

{title}

-
+
@@ -217,6 +228,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design, isLoading={isLoading} aprDisclaimer={aprDisclaimer} useV4Design={useV4Design} + useV5Design={useV5Design} useNewCheckoutDesign={useNewCheckoutDesign} />
@@ -225,7 +237,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
{aprDisclaimer[0].aprDisclaimer}
diff --git a/src/components/modal/v2/parts/Donut.jsx b/src/components/modal/v2/parts/Donut.jsx index 5943a9c283..4cb376a2c3 100644 --- a/src/components/modal/v2/parts/Donut.jsx +++ b/src/components/modal/v2/parts/Donut.jsx @@ -7,7 +7,7 @@ const Donut = ({ cx = 21, cy = 21, radius = 15.91549430918954, - radiusV4 = 5.5, + radiusV4andV5 = 5.5, viewBox = `0 0 ${2 * cx} ${2 * cy}`, style = { fontSize: '0.375rem' }, segmentStrokeWidth = 5.8, @@ -16,18 +16,20 @@ const Donut = ({ timeStamp, periodicPayment, qualifying, - useV4Design + useV4Design, + useV5Design }) => { const percentage = (currentNum / numOfPayments) * 100; const segStrokeWidth = segmentStrokeWidth ?? strokeWidth; const strokeDasharray = `${percentage} ${100 - percentage}`; - const isV4Design = useV4Design === 'true'; + const isV4OrV5Design = useV4Design === 'true' || useV5Design === 'true'; + const isV5Design = useV5Design === 'true'; const segments = ( - + {segments} @@ -70,7 +74,7 @@ const Donut = ({ {isQualifying && periodicPayment !== '-' && ( )}