chore: cut release

content/messages/US/long_term_multi_eqz.json

@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo at 0% APR."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> at 0% APR."
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

content/messages/US/long_term_multi_eqz_mixed.json

@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo or 0% APR."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> or 0% APR."
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

content/messages/US/long_term_multi_gtz.json

@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

content/messages/US/long_term_single_eqz.json

@@ -20,7 +20,9 @@
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
         [
-            ["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo at 0% APR."],
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> at 0% APR."
+            ],
             ["small", "medium", "large", "xlarge"]
         ]
     ],

content/messages/US/long_term_single_eqz_mixed.json

@@ -20,7 +20,9 @@
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
         [
-            ["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo or 0% APR."],
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> or 0% APR."
+            ],
             ["small", "medium", "large", "xlarge"]
         ]
     ],

content/messages/US/long_term_single_gtz.json

@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

content/messages/US/ppc_ezp_multi_eqz.json

@@ -15,11 +15,18 @@
     },
     "headline": [
         [
-            [["As low as", "weak"], "{formattedMonthlyPayment}/mo.", ["at 0% APR.", "weakest"]],
+            [
+                ["As low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>",
+                ["at 0% APR.", "weakest"]
+            ],
             ["default", "small"]
         ],
         [
-            [["Pay as low as", "weak"], "{formattedMonthlyPayment}/mo. at 0% APR"],
+            [
+                ["Pay as low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span> at 0% APR"
+            ],
             ["small.2", "medium", "large", "xlarge"]
         ],
         ["Enjoy Easy Payments.", ["legacy-small"]],

content/messages/US/ppc_ezp_multi_gtz.json

@@ -15,11 +15,17 @@
     },
     "headline": [
         [
-            [["As low as", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["As low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["default", "xsmall"]
         ],
         [
-            [["Pay as low as", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["Pay as low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["small", "medium", "large", "xlarge"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]]

content/messages/US/ppc_ezp_single_eqz.json

@@ -15,7 +15,11 @@
     },
     "headline": [
         [
-            [["Make {total_payments} payments of", "weak"], "{formattedMonthlyPayment}/mo.", ["at 0% APR.", "weakest"]],
+            [
+                ["Make {total_payments} payments of", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>",
+                ["at 0% APR.", "weakest"]
+            ],
             ["default", "small"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]],

content/messages/US/ppc_ezp_single_gtz.json

@@ -15,7 +15,10 @@
     },
     "headline": [
         [
-            [["Make {total_payments} payments of", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["Make {total_payments} payments of", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["default", "small"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]]

content/offers/US/v2_long_term.json

@@ -39,7 +39,7 @@
             "nonZeroAPR": "*APR is 9.99% to 29.99% based on your credit. Terms may vary based on purchase amount."
         },
         "termsLabel": {
-            "offerHeader": "{formattedPeriodicPayment}/mo. for {total_payments} months",
+            "offerHeader": "{formattedPeriodicPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span> for {total_payments} months",
             "zeroApr": "APR",
             "nonZeroApr": "<span aria-hidden='true'>Est. APR*</span><span class='sr-only'>Estimated APR, see star for more details below.</span>",
             "totalInterest": "Interest",

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

@@ -183,10 +183,11 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer }) => {
                         aria-required="true"
                         className={`input ${displayValue === '' && country === 'US' ? 'empty-input' : ''}`}
                         placeholder={currencyFormat(inputPlaceholder).replace(/(\s?€)/g, '')}
-                        type="tel"
+                        type="text"
                         value={displayValue}
                         onInput={onInput}
                         onKeyDown={onKeyDown}
+                        inputmode="tel"
                     />
                 </div>
                 <div aria-live="polite">{renderError(error || emptyState || isLoading)}</div>

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

@@ -5,11 +5,13 @@ const OfferCard = ({ offer: { content, meta } }) => {
     const { termsLabel } = content;
     const aprRemoveTrailingZeros = meta?.apr.replace(/\D00$/, '');
     const aprFieldTitle = aprRemoveTrailingZeros === '0' ? termsLabel?.zeroApr : termsLabel?.nonZeroApr;
+    const offerHeaderField = termsLabel?.offerHeader;
 
     return (
         <div className="offer__container">
             <div className="offer__row">
-                <strong className="offer__field-header">{termsLabel.offerHeader}</strong>
+                {/* eslint-disable-next-line react/no-danger */}
+                <strong className="offer__field-header" dangerouslySetInnerHTML={{ __html: offerHeaderField }} />
             </div>
             <div className="offer__row">
                 <div className="offer__field-col">

src/server/locale/US/PAY_LATER_LONG_TERM/mutations/long_term_multi_gtz.js

@@ -65,7 +65,7 @@ export default {
                 headline: [
                     {
                         tag: 'medium',
-                        br: ['mo.', 'as']
+                        br: ['mo. <span>', 'as']
                     },
                     {
                         tag: 'xsmall'

tests/functional/v2/testFn/longTerm.js

@@ -46,7 +46,8 @@ export const showCorrectOfferInfo = async (contentWindow, modalContent, testName
     await contentWindow.waitForSelector(contentWrapper);
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -79,7 +80,8 @@ export const updateTermsViaCalc = async (contentWindow, modalContent, testName)
 
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.updatedOfferHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -101,7 +103,8 @@ export const showCorrectAPRDisclaimer = async (contentWindow, modalContent, test
     await contentWindow.waitForSelector(contentWrapper);
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -118,7 +121,8 @@ export const showCorrectOfferInfoAccordion = async (contentWindow, modalContent,
     await contentWindow.waitForSelector(openAccordion);
     await contentWindow.waitForSelector(accordionHeaderContainer);
     const accordionOfferFieldHeadline = await contentWindow.$eval(accordionFieldHeader, element => element.innerText);
-    expect(accordionOfferFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = accordionOfferFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -152,6 +156,7 @@ export const updateOfferAccordionTermsViaCalc = async (contentWindow, modalConte
     await contentWindow.waitForSelector(openAccordion);
     await contentWindow.waitForSelector(accordionHeaderContainer);
     const accordionOfferFieldHeadline = await contentWindow.$eval(accordionFieldHeader, element => element.innerText);
-    expect(accordionOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
+    const newOfferFieldHeadline = accordionOfferFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
     await modalSnapshot(testName, contentWindow);
 };