feat: Update PL HUB learn more modals to use QL style (paypal#1027)

grablack · Dec 13, 2023 · 4bc21eb · 4bc21eb
1 parent fa0bca8
commit 4bc21eb
Show file tree

Hide file tree

Showing 28 changed files with 188 additions and 32 deletions.
diff --git a/content/modals/AU/short_term.json b/content/modals/AU/short_term.json
@@ -7,6 +7,7 @@
         "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/ES/short_term_en.json b/content/modals/ES/short_term_en.json
@@ -7,6 +7,7 @@
         "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/FR/short_term_en.json b/content/modals/FR/short_term_en.json
@@ -7,6 +7,7 @@
         "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/GB/short_term.json b/content/modals/GB/short_term.json
@@ -7,6 +7,7 @@
         "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/US/PLHub/plhub_long_term.json b/content/modals/US/PLHub/plhub_long_term.json
@@ -2,6 +2,7 @@
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
         "offerCountry": "US",
+        "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/US/PLHub/plhub_short_term.json b/content/modals/US/PLHub/plhub_short_term.json
@@ -7,6 +7,7 @@
         "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/src/components/modal/v2/parts/BodyContent.jsx b/src/components/modal/v2/parts/BodyContent.jsx
@@ -8,7 +8,8 @@ import {
     useXProps,
     useScroll,
     useDidUpdateEffect,
-    useTransitionState
+    useTransitionState,
+    isLander
 } from '../lib';
 import Header from './Header';
 import { LongTerm, ShortTerm, NoInterest, ProductList, PayIn1 } from './views';
@@ -58,6 +59,14 @@ const BodyContent = () => {
     const { headline, subheadline, qualifyingSubheadline = '', closeButtonLabel } = content;
 
     const isQualifying = productMeta?.qualifying;
+
+    const useV4Design = productMeta?.useV4Design === 'true';
+
+    // add v4Design class to root html to update lander specific styles to v4
+    const documentClassName = document.documentElement.className;
+    if (useV4Design && isLander) {
+        document.documentElement.className = `${documentClassName} v4Design`;
+    }
     const isPreapproved = productMeta?.preapproved;
     const preapprovalHeadline = content?.preapproval?.preapprovalHeadline;
     const preapprovalSubHeadline = content?.preapproval?.preapprovalSubHeadline;
@@ -86,7 +95,9 @@ 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]: <NoInterest content={content} openProductList={openProductList} />,
-        [VIEW_IDS.PAY_LATER_LONG_TERM]: <LongTerm content={content} openProductList={openProductList} />,
+        [VIEW_IDS.PAY_LATER_LONG_TERM]: (
+            <LongTerm content={content} productMeta={productMeta} openProductList={openProductList} />
+        ),
         [VIEW_IDS.PAY_LATER_PAY_IN_1]: <PayIn1 content={content} openProductList={openProductList} />,
         [VIEW_IDS.PAY_LATER_SHORT_TERM]: (
             <ShortTerm content={content} productMeta={productMeta} openProductList={openProductList} />
@@ -106,11 +117,12 @@ const BodyContent = () => {
                 qualifyingSubheadline={qualifyingSubheadline}
                 closeButtonLabel={closeButtonLabel}
                 viewName={viewName}
+                useV4Design={useV4Design}
                 preapprovalHeadline={preapprovalHeadline}
                 preapprovalSubHeadline={preapprovalSubHeadline}
                 isPreapproved={isPreapproved ?? 'false'}
             />
-            <div className="content__container">
+            <div className={`content__container ${useV4Design ? 'v4Design' : ''}`}>
                 <main className="main">
                     <div className="content__body">{viewComponents[viewName]}</div>
                 </main>

diff --git a/src/components/modal/v2/parts/Calculator.jsx b/src/components/modal/v2/parts/Calculator.jsx
@@ -65,7 +65,7 @@ const getError = ({ offers, error = '' }, isLoading, calculator, amount, country
     return null;
 };
 
-const Calculator = ({ setExpandedState, calculator, aprDisclaimer }) => {
+const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design }) => {
     const { view, value, isLoading, submit, changeInput } = useCalculator({ autoSubmit: true });
     const { amount } = useXProps();
     const { country, views } = useServerData();
@@ -184,7 +184,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer }) => {
 
     return (
         <div className="calculator">
-            <form className="form" onSubmit={submit}>
+            <form className={`form ${useV4Design === 'true' ? 'v4Design' : ''}`} onSubmit={submit}>
                 <h4 className="title">{title}</h4>
                 <div className="input__wrapper transitional">
                     <div className={`input__label ${country}`}>{renderInputLabelOnEmptyField(country)}</div>
@@ -204,7 +204,12 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer }) => {
             </form>
             {hasInitialAmount || hasUsedInputField ? (
                 <div aria-live="polite" className="content-column">
-                    <TermsTable view={view} isLoading={isLoading} aprDisclaimer={aprDisclaimer} />
+                    <TermsTable
+                        view={view}
+                        isLoading={isLoading}
+                        aprDisclaimer={aprDisclaimer}
+                        useV4Design={useV4Design}
+                    />
                 </div>
             ) : null}
             {country === 'US' && (

diff --git a/src/components/modal/v2/parts/Donut.jsx b/src/components/modal/v2/parts/Donut.jsx
@@ -7,48 +7,57 @@ const Donut = ({
     cx = 21,
     cy = 21,
     radius = 15.91549430918954,
+    radiusV4 = 5.5,
     viewBox = `0 0 ${2 * cx} ${2 * cy}`,
     style = { fontSize: '0.375rem' },
     segmentStrokeWidth = 5.8,
     currentNum = 0,
     numOfPayments = 4,
     timeStamp,
     periodicPayment,
-    qualifying
+    qualifying,
+    useV4Design
 }) => {
     const percentage = (currentNum / numOfPayments) * 100;
     const segStrokeWidth = segmentStrokeWidth ?? strokeWidth;
-
     const strokeDasharray = `${percentage} ${100 - percentage}`;
+    const isV4Design = useV4Design === 'true';
+
     const segments = (
         <circle
             cx={cx}
             cy={cy}
-            r={radius}
+            r={isV4Design ? radiusV4 : radius}
             className="donut__percent"
             stroke-dasharray={strokeDasharray}
             stroke-dashoffset={25}
         />
     );
 
     const isQualifying = qualifying === 'true';
+    const isPi3 = numOfPayments === 3 ? 'donut__single_payment_line__3' : 'donut__single_payment_line';
+    const isBelowNumOfPayments = currentNum < numOfPayments;
 
     return (
         <div
             className={`donut__single_payment ${
                 isQualifying ? 'donut__qualifying_payment' : 'donut__non_qualifying_payment'
-            }`}
+            } ${isV4Design && isBelowNumOfPayments ? isPi3 : ''} `}
         >
             <svg aria-hidden viewBox={viewBox} className="donut" style={style} xmlns="http://www.w3.org/2000/svg">
                 <circle
                     cx={cx}
                     cy={cy}
                     r={radius}
                     fill="transparent"
-                    className="donut__background"
+                    className={isV4Design ? 'donut__background__line' : 'donut__background'}
                     stroke-width={strokeWidth}
                 />
-                <g stroke-width={segStrokeWidth} fill="transparent" stroke-linecap={strokeLinecap}>
+                <g
+                    stroke-width={isV4Design ? 0 : segStrokeWidth}
+                    fill={isV4Design ? '#bdbdbd' : 'transparent'}
+                    stroke-linecap={strokeLinecap}
+                >
                     {segments}
                 </g>
                 <text x={cx} y={cy} text-anchor="middle">
@@ -58,11 +67,19 @@ const Donut = ({
             {/* eslint-disable-next-line jsx-a11y/aria-role */}
             <span aria-labelledby={`donut__payment__${currentNum} donut__timestamp__${currentNum}`} role="text">
                 {isQualifying && periodicPayment !== '-' && (
-                    <span className="donut__payment" id={`donut__payment__${currentNum}`} aria-hidden="true">
+                    <span
+                        className={isV4Design ? 'donut__payment_v4' : 'donut__payment'}
+                        id={`donut__payment__${currentNum}`}
+                        aria-hidden="true"
+                    >
                         {periodicPayment}
                     </span>
                 )}
-                <span className="donut__timestamp" id={`donut__timestamp__${currentNum}`} aria-hidden="true">
+                <span
+                    className={isV4Design ? 'donut__timestamp_v4' : 'donut__timestamp'}
+                    id={`donut__timestamp__${currentNum}`}
+                    aria-hidden="true"
+                >
                     {timeStamp}
                 </span>
             </span>

diff --git a/src/components/modal/v2/parts/Header.jsx b/src/components/modal/v2/parts/Header.jsx
@@ -12,6 +12,7 @@ const Header = ({
     qualifyingSubheadline,
     closeButtonLabel = 'Close',
     viewName,
+    useV4Design,
     preapprovalHeadline,
     preapprovalSubHeadline,
     isPreapproved = 'false'
@@ -40,10 +41,14 @@ const Header = ({
     return (
         <Fragment>
             <div aria-hidden="true" className="header__fixed-wrapper header__fixed-wrapper--front">
-                <div className="header__background-wrapper header__background-wrapper--gradient" />
+                <div
+                    className={`header__background-wrapper header__background-wrapper--gradient ${
+                        useV4Design ? 'v4Design' : ''
+                    }`}
+                />
             </div>
             <div aria-hidden="true" className="header__fixed-wrapper">
-                <div className="header__background-wrapper" />
+                <div className={`header__background-wrapper ${useV4Design ? 'v4Design' : ''}`} />
             </div>
             <div className="header__icons">
                 <div className={`logo__wrapper ${isScrolled ? 'logo__wrapper--scroll' : ''}`}>
@@ -66,7 +71,11 @@ const Header = ({
                     </button>
                 )}
                 <div className="header__fixed-wrapper header__fixed-wrapper--front">
-                    <div className="header__background-wrapper header__background-wrapper--sticky" />
+                    <div
+                        className={`header__background-wrapper header__background-wrapper--sticky ${
+                            useV4Design ? 'v4Design' : ''
+                        }`}
+                    />
                 </div>
             </div>
             <div className="header__content">

diff --git a/src/components/modal/v2/parts/Instructions.jsx b/src/components/modal/v2/parts/Instructions.jsx
@@ -2,7 +2,7 @@
 import { Fragment, h } from 'preact';
 import { currencyFormat } from '../lib';
 
-const Instructions = ({ instructions, expandedState = false, className = '' }) => {
+const Instructions = ({ instructions, expandedState = false, className = '', useV4Design }) => {
     const renderBullet = index => {
         return (
             <div className="instructions__bullet">
@@ -14,7 +14,13 @@ const Instructions = ({ instructions, expandedState = false, className = '' }) =
     return (
         <div className="content__row instructions">
             {Array.isArray(instructions) ? (
-                <ol className={(`${expandedState ? '' : 'collapsed'}`, className)}>
+                <ol
+                    className={
+                        (`${expandedState ? '' : 'collapsed'}`,
+                        className,
+                        `${useV4Design === 'true' ? 'v4Design' : ''}`)
+                    }
+                >
                     {instructions.map((instruction, index) => {
                         return (
                             <li className="instructions__item-wrapper">

diff --git a/src/components/modal/v2/parts/OfferCard.jsx b/src/components/modal/v2/parts/OfferCard.jsx
@@ -1,7 +1,7 @@
 /** @jsx h */
 import { h } from 'preact';
 
-const OfferCard = ({ offer: { content, meta } }) => {
+const OfferCard = ({ offer: { content, meta }, useV4Design }) => {
     const { termsLabel } = content;
     const aprRemoveTrailingZeros = meta?.apr.replace(/\D00$/, '');
     const aprFieldTitle = aprRemoveTrailingZeros === '0' ? termsLabel?.zeroApr : termsLabel?.nonZeroApr;
@@ -24,7 +24,9 @@ const OfferCard = ({ offer: { content, meta } }) => {
                     <p className="offer__field-value">{meta?.formattedTotalInterest}</p>
                 </div>
                 <div className="offer__field-col">
-                    <strong className="offer__field-title">{termsLabel?.total}</strong>
+                    <strong className={`offer__field-title ${useV4Design === 'true' ? 'v4Design' : ''}`}>
+                        {termsLabel?.total}
+                    </strong>
                     <strong className="offer__field-value">{meta?.formattedTotalCost}</strong>
                 </div>
             </div>

diff --git a/src/components/modal/v2/parts/TermsTable.jsx b/src/components/modal/v2/parts/TermsTable.jsx
@@ -5,7 +5,7 @@ import OfferCard from './OfferCard';
 import OfferAccordion from './OfferAccordion';
 import LoadingShimmer from './LoadingShimmer';
 
-const TermsTable = ({ isLoading, view: { meta, offers }, aprDisclaimer }) => {
+const TermsTable = ({ isLoading, view: { meta, offers }, aprDisclaimer, useV4Design }) => {
     const { offerCountry } = meta;
     /**
      * numOffers/setNumOffers is used to dynamically change the number of loading shimmers that are rendered
@@ -27,7 +27,7 @@ const TermsTable = ({ isLoading, view: { meta, offers }, aprDisclaimer }) => {
         .map((offer, idx) => {
             // Only DE uses the accordion style for presentation of offers in the modal.
             if (offerCountry !== 'DE') {
-                return <OfferCard offer={offer} index={idx} />;
+                return <OfferCard offer={offer} index={idx} useV4Design={useV4Design} />;
             }
             const disclaimer =
                 aprDisclaimer.length < offers.length

diff --git a/src/components/modal/v2/parts/views/LongTerm/Content.jsx b/src/components/modal/v2/parts/views/LongTerm/Content.jsx
@@ -78,6 +78,7 @@ export const LongTerm = ({
         linkToProductList,
         cta
     },
+    productMeta: { useV4Design },
     openProductList
 }) => {
     const [expandedState, setExpandedState] = useState(false);
@@ -152,14 +153,15 @@ export const LongTerm = ({
                         setExpandedState={setExpandedState}
                         calculator={calculator}
                         aprDisclaimer={offerAPRDisclaimers}
+                        useV4Design={useV4Design}
                     />
                     <div className={`content__col ${expandedState ? '' : 'collapsed'}`}>
                         <div className="branded-image">
                             {/* TODO: include Icon component when desktop images are final */}
                         </div>
                     </div>
                 </div>
-                <Instructions instructions={instructions} expandedState={expandedState} />
+                <Instructions instructions={instructions} useV4Design={useV4Design} expandedState={expandedState} />
             </div>
             <div className={`content__row disclosure ${expandedState ? '' : 'collapsed'}`}>
                 {typeof disclosure === 'string' || Array.isArray(disclosure) ? (

diff --git a/src/components/modal/v2/parts/views/ShortTerm/Content.jsx b/src/components/modal/v2/parts/views/ShortTerm/Content.jsx
@@ -24,7 +24,7 @@ export const ShortTerm = ({
         learnMoreLink,
         cta
     },
-    productMeta: { qualifying, periodicPayment, preapproved },
+    productMeta: { qualifying, periodicPayment, useV4Design, preapproved },
     openProductList
 }) => {
     const { views, country } = useServerData();
@@ -112,6 +112,7 @@ export const ShortTerm = ({
                                 {elements.map((installment, index) => (
                                     <Donut
                                         key={index}
+                                        useV4Design={useV4Design}
                                         qualifying={qualifying}
                                         // regex replaces EUR with the euro symbol €
                                         periodicPayment={
@@ -126,7 +127,7 @@ export const ShortTerm = ({
                                 ))}
                             </div>
                         </div>
-                        <Instructions instructions={instructions} />
+                        <Instructions instructions={instructions} useV4Design={useV4Design} />
                         {isPreapproved && (
                             <PreapprovalDisclaimer
                                 preapprovalDisclaimerBody={preapprovalDisclaimerBody}

diff --git a/src/components/modal/v2/styles/components/_calculator.scss b/src/components/modal/v2/styles/components/_calculator.scss
@@ -97,6 +97,12 @@
         }
     }
 
+    .v4Design {
+        h4 {
+            font-weight: 700;
+        }
+    }
+
     &__error {
         color: $text-main;
         font-size: 14px;

diff --git a/src/components/modal/v2/styles/components/_content.scss b/src/components/modal/v2/styles/components/_content.scss
@@ -134,4 +134,8 @@
             }
         }
     }
+
+    &.v4Design {
+        background: $v4-gray;
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -134,4 +134,8 @@ @@
                 }
             }
         }
+        &.v4Design {
+            background: $v4-gray;
+        }
     }