chore: cut release (#1094)

content/modals/GB/short_term.json

@@ -40,7 +40,7 @@
             "Complete your purchase with the first payment today.",
             "Remaining payments are taken automatically."
         ],
-        "disclosure": "Pay in 3 is a form of credit, so carefully consider whether the purchase is affordable and how you will make the repayments. Be aware of the possible impact of using Pay in 3 and of missing payments, including making other borrowing more difficult or more expensive. Pay in 3 eligibility is subject to status and approval. 18+ UK residents only. Available for purchases of {formattedMinAmount} to {formattedMaxAmount}. Terms and conditions apply. PayPal Pay in 3 is a trading name of PayPal (Europe) S.à r.l. et Cie, S.C.A. 22-24 Boulevard Royal L-2449, Luxembourg.",
+        "disclosure": "Pay in 3 is an unregulated credit agreement, so you will have fewer protections under this agreement than you would under a regulated credit agreement. Carefully consider whether the purchase is affordable and how you will make the repayments. Be aware of the possible impact of using Pay in 3 and of missing payments, including making other borrowing more difficult or more expensive. Pay in 3 eligibility is subject to status and approval. 18+ UK residents only. Available for purchases of {formattedMinAmount} to {formattedMaxAmount}. Terms and conditions apply. PayPal Pay in 3 is a trading name of PayPal UK Ltd, Whittaker House, Whittaker Avenue, Richmond-Upon-Thames, Surrey, United Kingdom, TW9 1EH.",
         "learnMoreLink": [["Learn more about Pay in 3", ["https://www.paypal.com/uk/webapps/mpp/paypal-payin3/faq"]]]
     }
 }

content/modals/GB/short_term_xo.json

@@ -50,7 +50,7 @@
             "buttonTextIneligible": "Back to Checkout",
             "link": "https://www.paypal.com/link/to/short-term-application"
         },
-        "disclosure": "Pay in 3 is a form of credit, so carefully consider whether the purchase is affordable and how you will make the repayments. Be aware of the possible impact of using Pay in 3 and of missing payments, including making other borrowing more difficult or more expensive. Pay in 3 eligibility is subject to status and approval. 18+ UK residents only. Available for purchases of {formattedMinAmount} to {formattedMaxAmount}. Terms and conditions apply. PayPal Pay in 3 is a trading name of PayPal (Europe) S.à r.l. et Cie, S.C.A. 22-24 Boulevard Royal L-2449, Luxembourg.",
+        "disclosure": "Pay in 3 is an unregulated credit agreement, so you will have fewer protections under this agreement than you would under a regulated credit agreement. Carefully consider whether the purchase is affordable and how you will make the repayments. Be aware of the possible impact of using Pay in 3 and of missing payments, including making other borrowing more difficult or more expensive. Pay in 3 eligibility is subject to status and approval. 18+ UK residents only. Available for purchases of {formattedMinAmount} to {formattedMaxAmount}. Terms and conditions apply. PayPal Pay in 3 is a trading name of PayPal UK Ltd, Whittaker House, Whittaker Avenue, Richmond-Upon-Thames, Surrey, United Kingdom, TW9 1EH.",
         "learnMoreLink": [["Learn more about Pay in 3", ["https://www.paypal.com/uk/webapps/mpp/paypal-payin3/faq"]]]
     }
 }

package.json

@@ -51,8 +51,7 @@
         "@paypal/sdk-client": "^4.0.166",
         "@paypal/sdk-constants": "^1.0.118",
         "@paypal/sdk-logos": "^2.0.0",
-        "core-js-pure": "3.31.1",
-        "zalgo-promise": "^1.0.48"
+        "core-js-pure": "3.31.1"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.17.0",

src/components/modal/v2/lib/utils.js

@@ -20,7 +20,6 @@ export const getContent = memoize(
         stageTag,
         integrationType,
         channel,
-        ecToken,
         contextualComponents,
         devTouchpoint,
         disableSetCookie,
@@ -42,7 +41,6 @@ export const getContent = memoize(
             stageTag,
             integrationType,
             channel,
-            ec_token: ecToken,
             contextual_components: contextualComponents,
             devTouchpoint,
             disableSetCookie,

src/components/modal/v2/lib/zoid-polyfill.js

@@ -156,8 +156,8 @@ const setupWebview = props => {
                     debug_id: trackingDetails.debug_id
                 },
                 event_type: 'modal_rendered',
-                request_duration: timing && timing.responseEnd - timing.requestStart,
-                render_duration: timing && performance.now() - timing.responseEnd
+                request_duration: timing && Math.round(timing.responseEnd - timing.requestStart).toString(),
+                render_duration: timing && Math.round(performance.now() - timing.responseEnd).toString()
             });
         },
 

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

@@ -83,14 +83,14 @@ const CheckoutHeader = ({
                     {isPreapproved === 'true' ? <span className="preapproved-label">{preapprovalLabel}</span> : ''}
                 </div>
                 {isQualifying === 'true' && qualifyingSubheadline !== '' ? (
-                    <p className={`subheadline_p subheadline-${countryClassName} qualifying`}>
+                    <p className={`subheadline_p subheadline-${countryClassName} qualifying checkout`}>
                         {isPreapproved === 'true'
                             ? preapprovalSubHeadline
                             : qualifyingSubheadline.replace(/(\s?EUR)/g, ' €')}
                     </p>
                 ) : (
                     <p
-                        className={`subheadline_p subheadline-${countryClassName}`}
+                        className={`subheadline_p subheadline-${countryClassName} checkout`}
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{
                             __html:

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

@@ -44,26 +44,28 @@ const Donut = ({
                 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={isV4Design ? 'donut__background__line' : 'donut__background'}
-                    stroke-width={strokeWidth}
-                />
-                <g
-                    stroke-width={isV4Design ? 0 : segStrokeWidth}
-                    fill={isV4Design ? '#545D68' : 'transparent'}
-                    stroke-linecap={strokeLinecap}
-                >
-                    {segments}
-                </g>
-                <text x={cx} y={cy} text-anchor="middle">
-                    {isQualifying}
-                </text>
-            </svg>
+            <span className="svg">
+                <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={isV4Design ? 'donut__background__line' : 'donut__background'}
+                        stroke-width={strokeWidth}
+                    />
+                    <g
+                        stroke-width={isV4Design ? 0 : segStrokeWidth}
+                        fill={isV4Design ? '#545D68' : 'transparent'}
+                        stroke-linecap={strokeLinecap}
+                    >
+                        {segments}
+                    </g>
+                    <text x={cx} y={cy} text-anchor="middle">
+                        {isQualifying}
+                    </text>
+                </svg>
+            </span>
             {/* eslint-disable-next-line jsx-a11y/aria-role */}
             <span aria-labelledby={`donut__payment__${currentNum} donut__timestamp__${currentNum}`} role="text">
                 {isQualifying && periodicPayment !== '-' && (

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

@@ -4,7 +4,7 @@ import { h } from 'preact';
 import { useXProps } from '../lib';
 
 // Create text with links scattered within it
-const InlineLinks = ({ text }) => {
+const InlineLinks = ({ text, useNewCheckoutDesign }) => {
     const { onClick } = useXProps();
 
     if (!Array.isArray(text)) {
@@ -22,7 +22,8 @@ const InlineLinks = ({ text }) => {
                         // Fallback can be removed after all translations added to the content
                         aria-label={linkLabel ?? `${linkText}, opens new tab.`}
                         target="__blank"
-                        className="inline-link"
+                        // className="inline-link"
+                        className={`inline-link ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}
                         href={linkUrl}
                         onClick={() => {
                             onClick({

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

@@ -184,7 +184,7 @@ export const LongTerm = ({
                 }`}
             >
                 {typeof disclosure === 'string' || Array.isArray(disclosure) ? (
-                    <InlineLinks text={disclosure} />
+                    <InlineLinks text={disclosure} useNewCheckoutDesign={useNewCheckoutDesign} />
                 ) : (
                     <InlineLinks
                         text={(disclosure?.[offerAPRDisclaimers[0].aprType] ?? '').replace(/\D00\s?(EUR|€)/g, ' €')}

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

@@ -130,9 +130,6 @@
         .donuts__container {
             margin-top: -25px;
             padding-bottom: 0px;
-            ::after {
-                margin-top: -30px;
-            }
         }
     }
 

src/components/modal/v2/styles/components/_calculator.scss

@@ -182,5 +182,6 @@
 
     &.checkout {
         width: 100%;
+        margin-top: -6px;
     }
 }

src/components/modal/v2/styles/components/_donut.scss

@@ -128,36 +128,52 @@ $donut-text-v4: #545d68;
             }
         }
 
-        &::after {
-            content: '';
-            flex-grow: 1;
-            border-top: 1px dashed $dark-gray;
-            top: 55px;
-            width: 100%;
-            max-width: 50px;
-            position: absolute;
-            transform: translateX((90%));
-
-            @include mobile {
-                max-width: 45px;
-            }
-            @include smallMobile {
-                max-width: 35px;
-            }
-        }
-        &__3 {
-            @extend .donut__single_payment_line;
+        .svg {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
             &::after {
-                max-width: 85px;
-                transform: translateX((70%));
-
+                content: '';
+                flex-grow: 1;
+                border-top: 1px dashed $dark-gray;
+                width: 100%;
+                max-width: 50px;
+                transform: translateX((97%));
+                margin-top: -50%;
+                margin-bottom: 50%;
+
+                @include smallHeightMobile {
+                    transform: translateX((100%));
+                }
                 @include mobile {
-                    max-width: min(80px, calc(100vw * 0.2));
-                    transform: translateX((67%));
+                    max-width: 45px;
                 }
                 @include smallMobile {
-                    max-width: min(55px, calc(100vw * 0.3));
-                    transform: translateX((75%));
+                    max-width: 35px;
+                }
+            }
+        }    
+
+        &__3 {
+            @extend .donut__single_payment_line;
+            .svg {
+                &::after {
+                    max-width: 85px;
+                    transform: translateX((100%));
+                    margin-left: 50%;
+
+                    @include smallHeightMobile {
+                        transform: translateX((75%));
+                    }
+                    @include mobile {
+                        max-width: min(70px, calc(100vw * 0.2));
+                        transform: translateX((67%));
+                    }
+                    @include smallMobile {
+                        max-width: min(55px, calc(100vw * 0.3));
+                        transform: translateX((57%));
+                    }
                 }
             }
         }

src/components/modal/v2/styles/components/_header.scss

@@ -399,6 +399,7 @@
 
             .subheadline_p {
                 max-width: 400px;
+                margin-top: -1px;
 
                 @include desktop {
                     margin-bottom: 0px;

src/components/modal/v2/styles/components/_inline-links.scss

@@ -6,6 +6,10 @@
     font-family: $paypal-open;
     font-weight: 600;
 
+    &.checkout {
+        font-weight: 400;
+    }
+
     &::before {
         content: ' ';
         visibility: hidden;

src/library/zoid/modal/prerenderTemplate.jsx

@@ -24,7 +24,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
         }
         ${
             useNewCheckoutDesign === 'true'
-                ? ` @media (min-device-width: 640px) {
+                ? ` @media screen and (min-width: 640px) {
                     .overlay {
                         background-color: #f1f2f3;        
                         position: fixed;
@@ -37,7 +37,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
                         border: 1px solid #cdd0d4;
                     }
                 }
-                @media (max-device-width: 639px) {
+                @media screen and (max-width: 639px) {
                     .overlay {
                         background-color: #f1f2f3;
                         position: fixed;
@@ -66,7 +66,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
         ${
             useNewCheckoutDesign === 'true' &&
             `
-                @media screen and (min-device-width: 640px) {
+                @media screen and (min-width: 640px) {
                     #prerender-close-btn {
                         position: relative;
                     }
@@ -80,7 +80,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
                         z-index: 50;
                     }
                 }
-                @media screen and (max-device-width: 639px) {
+                @media screen and (max-width: 639px) {
                     #prerender-close-btn {
                         left: 0;
                     }
@@ -154,7 +154,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
             height: 24px;
         }
 
-        @media (max-device-width: 639px) {
+        @media screen and (max-width: 639px) {
             .close-button > button > svg {
                 margin-top: auto;
                 margin-left: auto;
@@ -172,7 +172,7 @@ export default ({ doc, props: { cspNonce, features, onError }, event, state }) =
         `
         }
 
-        @media (max-width: 639px), (max-height: 539px){
+        @media screen and (max-width: 639px), (max-height: 539px){
             .modal{
                 overflow-y: hidden;
             }

src/utils/logger.js

@@ -3,7 +3,7 @@
 import objectKeys from 'core-js-pure/stable/object/keys';
 import arrayIncludes from 'core-js-pure/stable/array/includes';
 import { Logger, LOG_LEVEL } from '@krakenjs/beaver-logger/src';
-import { ZalgoPromise } from 'zalgo-promise';
+import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
 
 import { getGlobalAPIUrl } from './global';
 import { request } from './miscellaneous';

src/utils/miscellaneous.js

@@ -177,7 +177,9 @@ export const viewportHijack = memoize(() => {
             document.body.style.setProperty('-ms-overflow-style', 'scrollbar');
         },
         () => {
-            viewport.setAttribute('content', viewport.__pp_prev_content__);
+            if (viewport.__pp_prev_content__) {
+                viewport.setAttribute('content', viewport.__pp_prev_content__);
+            }
             delete viewport.__pp_prev_content__;
 
             document.body.style.setProperty('overflow', document.body.__pp_prev_overflow__);