Merge pull request #1208 from paypal/develop

Author: surekhaw

content/modals/US/v2_long_term_xo.json

@@ -1,7 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
-        "useV4Design": "true",
+        "useV5Design": "true",
         "offerCountry": "US",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
@@ -28,11 +28,14 @@
             "genericError": "Something went wrong. Please try again later."
         },
         "genericDisclaimer": "Terms vary based on purchase amount and your credit.",
-        "instructions": [
-            "Explore plan options. No sign-up fees or late fees.",
-            "Choose a plan and pay nothing today.",
-            "Use autopay for your payments. It's easy!"
-        ],
+        "instructions": {
+            "instructionsHeadline": "How it works",
+            "instructionsSubHeadline": [
+                "Explore plan options. No sign-up fees or late fees.",
+                "Choose a plan and pay nothing today.",
+                "Use autopay for your payments. It's easy!"
+            ]
+        },
         "cta": {
             "buttonTextEligible": "Continue with Pay Monthly",
             "buttonTextIneligible": "Back to Checkout",

content/modals/US/v2_short_term_xo.json

@@ -7,7 +7,7 @@
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
         "apr": "{apr}",
-        "useV4Design": "true",
+        "useV5Design": "true",
         "preapproved": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

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

@@ -69,6 +69,7 @@ const Calculator = ({
     setExpandedState,
     calculator,
     aprDisclaimer,
+    cta,
     useV4Design,
     useV5Design,
     use5Dot1Design,
@@ -194,16 +195,22 @@ const Calculator = ({
         <div
             className={`calculator ${useNewCheckoutDesign === 'true' ? 'checkout' : ''} ${
                 useV5Design === 'true' ? 'v5Design' : ''
-            }`}
+            } ${cta ? 'border-checkout' : ''}`}
         >
             <form
                 className={`form ${useV4Design === 'true' ? 'v4Design' : ''} ${
                     useV5Design === 'true' ? 'v5Design' : ''
                 } ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
                 onSubmit={submit}
             >
-                <h3 className="title">{!hasInitialAmount ? genericTitle || title : title}</h3>
-                <div className={`input__wrapper transitional ${useV5Design === 'true' ? 'v5Design' : ''}`}>
+                <h3 className={`title ${cta ? 'checkout-title' : ''}`}>
+                    {!hasInitialAmount ? genericTitle || title : title}
+                </h3>
+                <div
+                    className={`input__wrapper transitional ${useV5Design === 'true' ? 'v5Design' : ''} ${
+                        cta ? 'checkout' : ''
+                    }`}
+                >
                     <label htmlFor="purchase-amount" className={`input__label ${country}`}>
                         {renderInputLabelOnEmptyField(country)}
                     </label>

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

@@ -10,7 +10,6 @@ const CheckoutHeader = ({
     isQualifying = 'false',
     qualifyingSubheadline,
     closeButtonLabel = 'Close',
-    viewName,
     preapprovalHeadline,
     preapprovalSubHeadline,
     preapprovalLabel,
@@ -34,13 +33,6 @@ const CheckoutHeader = ({
     // Used to specifically target styles to a specific country
     const countryClassName = country?.toLowerCase();
 
-    const getCardArt = (view, countryName) => {
-        if (countryName === 'GB') {
-            return 'pay-in-3-card';
-        }
-        return view === 'PAY_LATER_LONG_TERM' ? 'pay-monthly-card' : 'pay-in-4-card';
-    };
-
     // 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
@@ -73,7 +65,7 @@ const CheckoutHeader = ({
             </div>
             <div className="checkout header__content">
                 <div className="header__card-container">
-                    <Icon name={getCardArt(viewName, country)} />
+                    <Icon name="logo" />
                 </div>
                 <div className="preapproved">
                     <h2

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

@@ -55,7 +55,7 @@ const Header = ({
             <div className="header__icons">
                 <div className={`logo__wrapper ${isScrolled ? 'logo__wrapper--scroll' : ''}`}>
                     <div className="pp-logo">
-                        <Icon name={useV5Design ? 'logo_v5' : 'logo'} />
+                        <Icon name="logo" />
                     </div>
                 </div>
                 {!isLander && (
@@ -69,7 +69,7 @@ const Header = ({
                         aria-keyshortcuts="escape"
                         onClick={() => handleClose('Close Button')}
                     >
-                        <Icon name={useV5Design ? 'close_v5' : 'close'} />
+                        <Icon name="close" />
                     </button>
                 )}
                 <div className="header__fixed-wrapper header__fixed-wrapper--front">

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

@@ -1,40 +1,14 @@
 /** @jsx h */
 import { h } from 'preact';
 
-const Icon = ({ name = '', color, content }) => {
+const Icon = ({ name = '', content }) => {
     if (content) {
         // eslint-disable-next-line react/no-danger
         return <div aria-hidden="true" className="icon__wrapper" dangerouslySetInnerHTML={{ __html: content }} />;
     }
 
     switch (name) {
         case 'logo':
-            return (
-                <svg
-                    role="img"
-                    aria-label="PayPal"
-                    width="45"
-                    height="45"
-                    viewBox="0 0 258 258"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <title>PayPal</title>
-                    <path
-                        d="M190.709 84.0373C191.182 59.4578 170.902 40.5938 143.016 40.5938H85.3376C83.9939 40.594 82.6944 41.0737 81.6729 41.9467C80.6514 42.8197 79.975 44.0286 79.7654 45.3558L56.6551 189.763C56.5517 190.418 56.5913 191.086 56.7713 191.724C56.9513 192.361 57.2673 192.952 57.6976 193.456C58.1278 193.96 58.6622 194.364 59.2638 194.641C59.8654 194.919 60.5199 195.062 61.1823 195.062H95.353L90.0133 228.507C89.9103 229.161 89.9502 229.83 90.1303 230.467C90.3105 231.104 90.6265 231.695 91.0568 232.198C91.487 232.702 92.0212 233.106 92.6227 233.383C93.2241 233.66 93.8784 233.804 94.5406 233.804H122.377C123.72 233.804 124.918 233.324 125.939 232.451C126.961 231.578 127.127 230.369 127.336 229.042L135.506 180.965C135.715 179.638 136.391 177.918 137.413 177.044C138.434 176.171 139.326 175.691 140.67 175.69H157.705C185.013 175.69 208.185 156.28 212.421 129.283C215.418 110.118 207.202 92.6834 190.709 84.0373Z"
-                        fill="#001C64"
-                    />
-                    <path
-                        d="M102.745 141.81L94.2348 195.776L88.8951 229.629C88.792 230.283 88.8319 230.952 89.0121 231.589C89.1922 232.227 89.5083 232.817 89.9385 233.321C90.3688 233.824 90.903 234.228 91.5044 234.505C92.1058 234.783 92.7601 234.926 93.4223 234.926H122.881C124.225 234.926 125.524 234.446 126.546 233.573C127.567 232.7 128.244 231.491 128.453 230.164L136.215 180.964C136.424 179.637 137.1 178.427 138.122 177.554C139.143 176.681 140.443 176.2 141.787 176.2H159.129C186.437 176.2 209.608 156.279 213.844 129.282C216.848 110.119 207.202 92.6847 190.709 84.0387C190.669 86.0796 190.49 88.1155 190.174 90.1322C185.94 117.127 162.765 137.05 135.459 137.05H108.318C106.974 137.05 105.674 137.53 104.653 138.403C103.631 139.276 102.955 140.483 102.745 141.81Z"
-                        fill="#0070E0"
-                    />
-                    <path
-                        d="M94.2305 195.776H59.9576C59.2953 195.776 58.6408 195.633 58.0392 195.356C57.4376 195.079 56.9032 194.675 56.4729 194.171C56.0426 193.668 55.7265 193.077 55.5466 192.44C55.3666 191.802 55.3269 191.133 55.4304 190.479L78.5407 43.927C78.7503 42.5998 79.4267 41.3909 80.4482 40.5179C81.4697 39.645 82.7692 39.1652 84.1129 39.165H143.017C170.903 39.165 191.183 59.4588 190.709 84.0384C183.77 80.4003 175.618 78.3172 166.685 78.3172H117.576C116.231 78.3175 114.932 78.7976 113.91 79.671C112.889 80.5444 112.212 81.7538 112.003 83.0815L102.75 141.81L94.2305 195.776Z"
-                        fill="#003087"
-                    />
-                </svg>
-            );
-        case 'logo_v5':
             return (
                 <svg
                     role="img"
@@ -189,32 +163,6 @@ const Icon = ({ name = '', color, content }) => {
                 </svg>
             );
         case 'close':
-            return (
-                <svg
-                    aria-hidden="true"
-                    width="36"
-                    height="36"
-                    viewBox="0 0 36 36"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M12 0L0 12"
-                        transform="translate(12 12)"
-                        stroke={color || '#2C2E2F'}
-                        stroke-width="2"
-                        stroke-linecap="round"
-                    />
-                    <path
-                        d="M0 0L12 12"
-                        transform="translate(12 12)"
-                        stroke={color || '#2C2E2F'}
-                        stroke-width="2"
-                        stroke-linecap="round"
-                    />
-                </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
@@ -227,12 +175,11 @@ const Icon = ({ name = '', color, content }) => {
             );
         case 'chevron-left':
             return (
-                <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg width="24" height="24" viewBox="0 0 48 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" width="40" height="40" rx="20" fill="#EDF0F2" />
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M16.203 4.793a1 1 0 0 1 0 1.414L9.91 12.5l6.293 6.293a1 1 0 0 1-1.414 1.414l-6.993-6.993a1.01 1.01 0 0 1 0-1.428l6.993-6.993a1 1 0 0 1 1.414 0Z"
-                        fill="#545D68"
+                        d="M26.5005 13.1245C26.6662 13.1246 26.8247 13.1909 26.9419 13.3081C27.0591 13.4253 27.1254 13.5838 27.1255 13.7495C27.1255 13.9154 27.0592 14.0746 26.9419 14.1919L21.1333 19.9995L26.9419 25.8081C26.9999 25.8661 27.0462 25.9345 27.0776 26.0103C27.109 26.086 27.1254 26.1675 27.1255 26.2495C27.1255 26.3315 27.109 26.413 27.0776 26.4888C27.0462 26.5646 27 26.6338 26.9419 26.6919C26.8839 26.7498 26.8155 26.7962 26.7397 26.8276C26.664 26.859 26.5825 26.8754 26.5005 26.8755C26.4185 26.8755 26.337 26.859 26.2612 26.8276C26.1854 26.7962 26.1162 26.75 26.0581 26.6919L19.8081 20.4419C19.7501 20.384 19.7038 20.3154 19.6724 20.2397C19.6409 20.1639 19.6245 20.0816 19.6245 19.9995C19.6246 19.9175 19.641 19.836 19.6724 19.7603C19.7038 19.6845 19.7501 19.616 19.8081 19.5581L26.0581 13.3081C26.1754 13.1908 26.3346 13.1245 26.5005 13.1245Z"
+                        fill="black"
                     />
                 </svg>
             );

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

@@ -4,6 +4,7 @@ import { currencyFormat } from '../lib';
 
 const Instructions = ({
     instructions,
+    cta,
     expandedState = false,
     className = '',
     useV4Design,
@@ -111,7 +112,7 @@ const Instructions = ({
                 useNewCheckoutDesign === 'true' ? 'checkout' : ''
             }`}
         >
-            {renderInstructionsContent()}
+            <div className={`${cta ? 'instructions__border-checkout' : ''}`}>{renderInstructionsContent()}</div>
         </div>
     );
 };

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

@@ -162,6 +162,7 @@ export const LongTerm = ({
                     <Calculator
                         setExpandedState={setExpandedState}
                         calculator={calculator}
+                        cta={cta}
                         aprDisclaimer={offerAPRDisclaimers}
                         useV4Design={useV4Design}
                         useV5Design={useV5Design}
@@ -176,6 +177,7 @@ export const LongTerm = ({
                 </div>
                 <Instructions
                     instructions={instructions}
+                    cta={cta}
                     useV4Design={useV4Design}
                     useV5Design={useV5Design}
                     useNewCheckoutDesign={useNewCheckoutDesign}

src/components/modal/v2/parts/views/LongTerm/styles.scss

@@ -82,5 +82,5 @@
 }
 
 .checkout {
-    background: $ql-gray;
-}
+    background: $white;
+}

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

@@ -140,9 +140,11 @@ export const ShortTerm = ({
                                             timeStamp={installment?.payment_date ?? donutTimestamps[index]}
                                             numOfPayments={elements.length}
                                         />
-                                        {useV5Design === 'true' && useNewCheckoutDesign === 'true' && (
-                                            <span className={`dashed-line-${index}`} />
-                                        )}
+                                        {country === 'GB' &&
+                                            useV5Design === 'true' &&
+                                            useNewCheckoutDesign === 'true' && (
+                                                <span className={`dashed-line-${index}`} />
+                                            )}
                                     </Fragment>
                                 ))}
                             </div>
@@ -157,6 +159,7 @@ export const ShortTerm = ({
                         )}
                         <Instructions
                             instructions={instructions}
+                            cta={cta}
                             useV4Design={useV4Design}
                             useV5Design={useV5Design}
                             useNewCheckoutDesign={useNewCheckoutDesign}