chore: cut release

.github/workflows/snapshotCommit.yml

@@ -10,7 +10,7 @@ jobs:
     commit:
         name: Commit Snapshots
         if: github.event.workflow_run.conclusion == 'success'
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         permissions:
           contents: write
         steps:

.github/workflows/snapshotCompare.yml

@@ -11,7 +11,7 @@ on:
 jobs:
     getMatrix:
         name: Get Matrix
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         outputs:
             testPathPatterns: ${{ steps.setTestPathPatterns.outputs.testPathPatterns }}
             testConfigs: ${{ steps.setTestConfigs.outputs.testConfigs }}
@@ -33,7 +33,7 @@ jobs:
 
     compareSnapshots:
         name: Compare
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         needs: getMatrix
         strategy:
             fail-fast: false
@@ -70,7 +70,7 @@ jobs:
 
     compareSnapshotsV2:
         name: Compare V2
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         needs: getMatrix
         strategy:
             fail-fast: false

.github/workflows/snapshotUpdate.yml

@@ -9,7 +9,7 @@ jobs:
     getMatrix:
         name: Get Matrix
         if: github.event.label.name == 'snapshots' || github.event_name == 'workflow_dispatch'
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         outputs:
             testPathPatterns: ${{ steps.setTestPathPatterns.outputs.testPathPatterns }}
             testConfigs: ${{ steps.setTestConfigs.outputs.testConfigs }}
@@ -31,7 +31,7 @@ jobs:
     captureMetadata:
         name: Capture Metadata
         if: github.event_name == 'pull_request'
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         needs: getMatrix
         steps:
             - name: Capture PR Number
@@ -47,7 +47,7 @@ jobs:
 
     updateSnapshots:
         name: Update
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         needs: getMatrix
         strategy:
             matrix:
@@ -128,7 +128,7 @@ jobs:
 
     updateSnapshotsV2:
         name: Update V2
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         needs: getMatrix
         strategy:
             matrix:

content/modals/GB/short_term.json

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

content/modals/GB/short_term_xo.json

@@ -6,8 +6,8 @@
         "maxAmount": "{maxAmount}",
         "qualifying": "{qualifying_offer}",
         "amount": "{transaction_amount}",
+        "useV5Design": "true",
         "apr": "{apr}",
-        "preapproved": "false",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",
             "qualifying_offer": "${eval(CREDIT_OFFERS_DS.qualifying_offer ? CREDIT_OFFERS_DS.qualifying_offer : 'false')}",
@@ -36,17 +36,22 @@
             ]
         },
         "instructions": {
-            "instructionsHeadline": "How to use Pay in 3",
-            "instructionsSubHeadline": "Confirm your info and apply, set up autopay, and review your purchase."
+            "instructionsHeadline": "How it works",
+            "instructionsSubHeadline": [
+                "Choose PayPal at checkout to pay later with Pay in 3. ",
+                "Complete your purchase with the first payment today.",
+                "Remaining payments are taken automatically."
+            ]
         },
         "preapproval": {
-            "preapprovalHeadline": "Pre-approved to Pay in 3 on this purchase ",
+            "preapprovalHeadline": "Pay in 3 interest-free payments",
+            "preapprovalLabel": "Pre-approved",
             "preapprovalSubHeadline": "Pay {formattedTotalCost} in {total_payments} interest-free payments.",
             "preapprovalDisclaimerHeadline": "What to know about pre-approval",
             "preapprovalDisclaimerBody": "Pre-approval may not be valid if you make another Pay in 3 purchase before the session expires."
         },
         "cta": {
-            "buttonTextEligible": "Continue with Pay in 3",
+            "buttonTextEligible": "Continue",
             "buttonTextIneligible": "Back to Checkout",
             "link": "https://www.paypal.com/link/to/short-term-application"
         },

src/components/message/Message.js

@@ -176,7 +176,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     treatments: treatmentsHash,
                     disableSetCookie,
                     features,
-                    pageType
+                    page_type: pageType
                 })
                     .filter(([, val]) => Boolean(val))
                     .reduce(

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

@@ -34,6 +34,13 @@ 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
@@ -66,7 +73,7 @@ const CheckoutHeader = ({
             </div>
             <div className="checkout header__content">
                 <div className="header__card-container">
-                    <Icon name={viewName === 'PAY_LATER_LONG_TERM' ? 'pay-monthly-card' : 'pay-in-4-card'} />
+                    <Icon name={getCardArt(viewName, country)} />
                 </div>
                 <div className="preapproved">
                     <h2

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

@@ -17,7 +17,8 @@ const Donut = ({
     periodicPayment,
     qualifying,
     useV4Design,
-    useV5Design
+    useV5Design,
+    useNewCheckoutDesign
 }) => {
     const percentage = (currentNum / numOfPayments) * 100;
     const segStrokeWidth = segmentStrokeWidth ?? strokeWidth;
@@ -48,7 +49,9 @@ const Donut = ({
                 isV4OrV5Design && currentNum === numOfPayments ? 'donut__single_payment_line__end' : ''
             }`}
         >
-            <span className={`${isV5Design ? 'v5Design' : ''} svg`}>
+            <span
+                className={`${isV5Design ? 'v5Design' : ''} ${useNewCheckoutDesign === 'true' ? 'checkout' : ''} svg`}
+            >
                 <svg aria-hidden viewBox={viewBox} className="donut" style={style} xmlns="http://www.w3.org/2000/svg">
                     <circle
                         cx={cx}

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

@@ -90,7 +90,7 @@ const Header = ({
                 <h2
                     // id used for aria-labelleby on modal container element
                     id="header__headline"
-                    className={`headline-${countryClassName}`}
+                    className={`headline-${countryClassName} ${useV5Design ? 'v5Design' : ''}`}
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: headline }}
                 />

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

@@ -144,6 +144,50 @@ const Icon = ({ name = '', color, content }) => {
                     />
                 </svg>
             );
+        case 'pay-in-3-card':
+            return (
+                <svg width="96" height="60" viewBox="0 0 96 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect width="96" height="60" rx="4" fill="#003087" />
+                    <rect x="19.2" y="13" width="57.6" height="33.75" rx="4" fill="#003087" />
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M39.9334 22.8002C40.3334 20.5335 39.9334 18.9335 38.6667 17.5335C37.4 16.0002 34.9334 15.3335 31.7334 15.3335H22.7334C22.0667 15.3335 21.5334 15.8002 21.4 16.4668L17.6 40.5335C17.5334 41.0002 17.8667 41.4002 18.3334 41.4002H23.9334L23.5334 43.8668C23.4667 44.3335 23.8 44.6668 24.2 44.6668H28.9334C29.5334 44.6668 30 44.2002 30.0667 43.7335L30.1334 43.5335L31 37.9335L31.0667 37.6668C31.1334 37.1335 31.6667 36.7335 32.2 36.7335H32.9334C37.5334 36.7335 41.1334 34.8668 42.2 29.4668C42.6667 27.2668 42.4 25.3335 41.2667 24.0002C40.9334 23.4002 40.4667 23.0668 39.9334 22.8002Z"
+                        fill="white"
+                        fill-opacity="0.68"
+                    />
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M39.9334 22.8002C40.3334 20.5335 39.9334 18.9335 38.6667 17.5335C37.4 16.0002 34.9334 15.3335 31.7334 15.3335H22.7334C22.0667 15.3335 21.5334 15.8002 21.4 16.4668L17.6 40.5335C17.5334 41.0002 17.8667 41.4002 18.3334 41.4002H23.9334L25.3334 32.4668L25.2667 32.7335C25.4 32.0668 26 31.6002 26.6 31.6002H29.2667C34.5334 31.6002 38.6 29.4668 39.8667 23.3335C39.8667 23.1335 39.9334 22.9335 39.9334 22.8002Z"
+                        fill="white"
+                        fill-opacity="0.7"
+                    />
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M26.9334 22.8002C27 22.4002 27.2 22.1335 27.6 21.9335C27.7334 21.8668 27.8667 21.8002 28.1334 21.8002H35.2667C36.0667 21.8668 36.8667 21.9335 37.6667 22.0002C37.8667 22.0002 38.0667 22.0668 38.2667 22.1335C38.4667 22.2002 38.6667 22.2002 38.8667 22.2668C38.9334 22.2668 39 22.3335 39.1334 22.3335C39.5334 22.4668 39.8 22.5335 40.0667 22.8002C40.4667 20.5335 40.0667 18.9335 38.8 17.5335C37.4667 16.0002 35 15.3335 31.8 15.3335H22.7334C22.0667 15.3335 21.5334 15.8002 21.4 16.4668L17.6 40.5335C17.5334 41.0002 17.8667 41.4002 18.3334 41.4002H23.9334L26.9334 22.8002Z"
+                        fill="white"
+                    />
+                    <g style={{ 'mix-blend-mode': 'soft-light' }}>
+                        <path
+                            d="M66 46C74.8366 46 82 38.8366 82 30C82 21.1634 74.8366 14 66 14C57.1634 14 50 21.1634 50 30C50 38.8366 57.1634 46 66 46Z"
+                            stroke="white"
+                            stroke-width="3"
+                        />
+                    </g>
+                    <path
+                        d="M82 30C82 21.1634 74.8366 14 66 14"
+                        stroke="#3ABBA1"
+                        stroke-width="3"
+                        stroke-linecap="round"
+                    />
+                    <path
+                        d="M66.464 36.474C64.08 36.474 62.704 35.162 62.512 32.938H64.272C64.4 34.25 65.184 35.018 66.496 35.018C67.808 35.018 68.608 34.058 68.608 32.874C68.608 31.37 67.536 30.778 66.128 30.778H65.76V29.386C67.104 29.386 68.096 28.938 68.096 27.642C68.096 26.57 67.328 26.074 66.464 26.074C65.456 26.074 64.816 26.666 64.736 27.674H63.056C63.104 25.834 64.368 24.586 66.512 24.586C68.56 24.586 69.888 25.706 69.888 27.418C69.888 28.73 69.168 29.546 68.064 29.978C69.6 30.362 70.48 31.354 70.48 32.938C70.48 35.018 68.896 36.474 66.464 36.474Z"
+                        fill="white"
+                    />
+                </svg>
+            );
         case 'close':
             return (
                 <svg

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

@@ -37,6 +37,7 @@ export const ShortTerm = ({
 
     const preapprovalDisclaimerHeadline = preapproval?.preapprovalDisclaimerHeadline;
     const preapprovalDisclaimerBody = preapproval?.preapprovalDisclaimerBody;
+    const countryClassName = country?.toLowerCase();
 
     const renderCheckoutCtaButton = () => {
         /**
@@ -49,7 +50,11 @@ export const ShortTerm = ({
         if (typeof cta !== 'undefined') {
             return (
                 <div className="button__fixed-wrapper">
-                    <div className={`button__container ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
+                    <div
+                        className={`button__container ${
+                            useNewCheckoutDesign === 'true' ? 'checkout' : ''
+                        } ${countryClassName}`}
+                    >
                         {isQualifying ? (
                             <Button
                                 onClick={() => {
@@ -107,26 +112,36 @@ export const ShortTerm = ({
         <Fragment>
             <style>{styles._getCss()}</style>
             <div className="dynamic__container">
-                <div className={`content__row dynamic ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
+                <div
+                    className={`content__row dynamic ${
+                        useNewCheckoutDesign === 'true' ? 'checkout' : ''
+                    } ${countryClassName}`}
+                >
                     <div className="content__col">
                         <div className={`content__row donuts ${useNewCheckoutDesign === 'true' ? 'checkout' : ''}`}>
                             <div className="donuts__container">
                                 {elements.map((installment, index) => (
-                                    <Donut
-                                        key={index}
-                                        useV4Design={useV4Design}
-                                        useV5Design={useV5Design}
-                                        qualifying={qualifying}
-                                        // regex replaces EUR with the euro symbol €
-                                        periodicPayment={
-                                            installment?.total_payment
-                                                ? installment.total_payment.replace(/(\s?EUR)/g, ' €')
-                                                : localeFormattedPayment
-                                        }
-                                        currentNum={index + 1}
-                                        timeStamp={installment?.payment_date ?? donutTimestamps[index]}
-                                        numOfPayments={elements.length}
-                                    />
+                                    <Fragment>
+                                        <Donut
+                                            key={index}
+                                            useV4Design={useV4Design}
+                                            useV5Design={useV5Design}
+                                            useNewCheckoutDesign={useNewCheckoutDesign}
+                                            qualifying={qualifying}
+                                            // regex replaces EUR with the euro symbol €
+                                            periodicPayment={
+                                                installment?.total_payment
+                                                    ? installment.total_payment.replace(/(\s?EUR)/g, ' €')
+                                                    : localeFormattedPayment
+                                            }
+                                            currentNum={index + 1}
+                                            timeStamp={installment?.payment_date ?? donutTimestamps[index]}
+                                            numOfPayments={elements.length}
+                                        />
+                                        {useV5Design === 'true' && useNewCheckoutDesign === 'true' && (
+                                            <span className={`dashed-line-${index}`} />
+                                        )}
+                                    </Fragment>
                                 ))}
                             </div>
                         </div>

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

@@ -35,6 +35,7 @@
 
             @include mobile {
                 padding: 0 0 15px;
+                justify-content: space-between;
             }
 
             @include smallMobile {
@@ -43,19 +44,74 @@
 
             .checkout & {
                 padding: 0px;
+                justify-content: space-between;
             }
-            
+
             .v5Design & {
                 @include tablet {
                     margin-top: 20px;
                     margin-bottom: 20px;
                 }
             }
         }
+    }
 
-        &.checkout {
-            margin-bottom: 20px;
+    .dashed-line-0 {
+        border-bottom: 1px dashed $dark-gray;
+        width: 100%;
+        max-width: 115px;
+        height: 1px;
+        position: absolute;
+        left: 33%;
+        top: 2.75%;
+        transform: translate(-50%, -50%);
+
+        @include lander {
+            max-width: 130px;
+            left: 37%;
+            top: 3.5%;
+        }
+
+        @include mobile {
+            z-index: 9;
+            max-width: 105px;
+            height: 1px;
+            left: 33%;
+            top: 2.75%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .dashed-line-1 {
+        border-bottom: 1px dashed $dark-gray;
+        width: 100%;
+        max-width: 115px;
+        height: 1px;
+        position: absolute;
+        left: 67%;
+        top: 2.75%;
+        transform: translate(-50%, -50%);
+
+        @include lander {
+            max-width: 130px;
+            left: 63%;
+            top: 3.5%;
         }
+
+        @include mobile {
+            border-bottom: 1px dashed $dark-gray;
+            width: 100%;
+            max-width: 103px;
+            height: 1px;
+            position: absolute;
+            left: 67%;
+            top: 2.75%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .dashed-line-2 {
+        display: none;
     }
 
     .learnMoreLink__container {
@@ -157,7 +213,7 @@
             padding-top: 24px;
             margin-top: auto !important;
         }
-        
+
         &.checkout {
             padding-bottom: 60px;
             @include mobile {