chore: cut release (#1045)

.nvmrc

@@ -1 +1 @@
-16
+18

content/modals/US/v2_long_term.json

@@ -1,6 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_LONG_TERM",
+        "useV4Design": "false",
         "offerCountry": "US",
         "variables": {
             "transaction_amount": "${eval(transaction_amount ? transaction_amount : '-')}",

content/modals/US/v2_product_list.json

@@ -1,6 +1,7 @@
 {
     "meta": {
         "product": "PRODUCT_LIST",
+        "useV4Design": "false",
         "offerCountry": "US"
     },
     "content": {

content/modals/US/v2_short_term.json

@@ -1,6 +1,7 @@
 {
     "meta": {
         "product": "PAY_LATER_SHORT_TERM",
+        "useV4Design": "false",
         "periodicPayment": "{formattedPeriodicPayment}",
         "minAmount": "{minAmount}",
         "maxAmount": "{maxAmount}",

src/components/message/Message.js

@@ -125,6 +125,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     style,
                     merchantConfigHash,
                     channel,
+                    contextualComponent,
                     treatmentsHash,
                     disableSetCookie,
                     features
@@ -142,6 +143,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     merchantId,
                     merchantConfigHash,
                     channel,
+                    contextualComponent,
                     disableSetCookie,
                     features
                 });
@@ -165,6 +167,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     stageTag,
                     merchant_config: merchantConfigHash,
                     channel,
+                    contextualComponent,
                     deviceID: getOrCreateDeviceID(),
                     treatments: treatmentsHash,
                     disableSetCookie,

src/components/modal/v2/lib/hooks/calculator.js

@@ -65,6 +65,7 @@ export default function useCalculator({ autoSubmit = false } = {}) {
         integrationType,
         channel,
         ecToken,
+        contextualComponent,
         devTouchpoint,
         disableSetCookie,
         features
@@ -93,6 +94,7 @@ export default function useCalculator({ autoSubmit = false } = {}) {
             integrationType,
             channel,
             ecToken,
+            contextualComponent,
             devTouchpoint,
             deviceID: getOrCreateDeviceID(),
             disableSetCookie,

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

@@ -21,6 +21,7 @@ export const getContent = memoize(
         integrationType,
         channel,
         ecToken,
+        contextualComponent,
         devTouchpoint,
         disableSetCookie,
         features
@@ -42,6 +43,7 @@ export const getContent = memoize(
             integrationType,
             channel,
             ec_token: ecToken,
+            contextual_component: contextualComponent,
             devTouchpoint,
             disableSetCookie,
             features
@@ -93,6 +95,10 @@ export function setupTabTrap() {
                 e.preventDefault();
                 tabArray[0].focus();
             }
+            // auto scroll into view for focused element
+            setTimeout(() => {
+                document.activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 0);
         }
     }
     window.addEventListener('keydown', trapTabKey);

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

@@ -34,6 +34,7 @@ const Container = ({ children }) => {
         stageTag,
         channel,
         ecToken,
+        contextualComponent,
         disableSetCookie,
         features
     } = useXProps();
@@ -77,6 +78,7 @@ const Container = ({ children }) => {
             stageTag,
             channel,
             ecToken,
+            contextualComponent,
             deviceID: getOrCreateDeviceID(),
             disableSetCookie,
             features

src/library/controllers/message/interface.js

@@ -90,6 +90,7 @@ export default (options = {}) => ({
                                     onApply,
                                     channel,
                                     ecToken,
+                                    contextualComponent,
                                     cspNonce
                                 } = merchantOptions;
 
@@ -105,6 +106,7 @@ export default (options = {}) => ({
                                     ignoreCache,
                                     channel,
                                     ecToken,
+                                    contextualComponent,
                                     cspNonce
                                 };
                                 const modalProps = {
@@ -146,24 +148,25 @@ export default (options = {}) => ({
 
                                     ppDebug(
                                         `{
-                            clientID: ${account},
-                            merchantID: ${merchantId},
-                            customerID: ${customerId},
-                            offer: ${offer},
-                            currency: ${currency},
-                            ignoreCache: ${ignoreCache},
-                            channel: ${channel},
-                            ecToken: ${ecToken},
+                                    clientID: ${account},
+                                    merchantID: ${merchantId},
+                                    customerID: ${customerId},
+                                    offer: ${offer},
+                                    currency: ${currency},
+                                    ignoreCache: ${ignoreCache},
+                                    channel: ${channel},
+                                    ecToken: ${ecToken},
+                                    contextualComponent: ${contextualComponent},
                     
-                            index: data-pp-id="${index}",
-                            style: ${JSON.stringify(style)},
-                            amount: ${amount},
-                            buyerCountry: ${buyerCountry},
-                            placement: ${placement},
+                                    index: data-pp-id="${index}",
+                                    style: ${JSON.stringify(style)},
+                                    amount: ${amount},
+                                    buyerCountry: ${buyerCountry},
+                                    placement: ${placement},
                     
-                            renderStart: ${new Date(renderStart).toLocaleString()},
-                            renderMessageTime: ${new Date().toLocaleString()}
-                            }`
+                                    renderStart: ${new Date(renderStart).toLocaleString()},
+                                    renderMessageTime: ${new Date().toLocaleString()}
+                                    }`
                                     );
 
                                     return render(container)

src/library/controllers/modal/interface.js

@@ -38,6 +38,7 @@ const memoizedModal = memoizeOnProps(
         onClose,
         channel,
         ecToken,
+        contextualComponent,
         cspNonce,
         integrationIdentifier
     }) => {
@@ -61,6 +62,7 @@ const memoizedModal = memoizeOnProps(
             onClose,
             channel,
             ecToken,
+            contextualComponent,
             cspNonce,
             integrationIdentifier
         });

src/library/zoid/message/component.js

@@ -126,6 +126,12 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                 required: false,
                 value: validate.ecToken
             },
+            contextualComponent: {
+                type: 'string',
+                queryParam: 'contextual_component',
+                required: false,
+                value: validate.contextualComponent
+            },
             // Callbacks
             onClick: {
                 type: 'function',

src/library/zoid/message/validation.js

@@ -52,6 +52,9 @@ const logInvalidType = (location, expectedType, val) => {
 const logInvalidOption = (location, options, val) =>
     logInvalid(location, `Expected one of ["${options.join('", "').replace(/\|[\w|]+/g, '')}"] but received "${val}".`);
 
+const logInvalidCombination = (location, expectation, val) =>
+    logInvalid(location, `Invalid ${location} combination. ${expectation} but received "${val}"`);
+
 export default {
     account: ({ props: { account } }) => {
         if (!validateType(Types.STRING, account)) {
@@ -234,6 +237,35 @@ export default {
 
         return undefined;
     },
+    contextualComponent: ({ props: { contextualComponent } }) => {
+        if (typeof contextualComponent !== 'undefined') {
+            if (!validateType(Types.STRING, contextualComponent)) {
+                logInvalidType('contextualComponent', Types.STRING, contextualComponent);
+                return undefined;
+            }
+
+            // contextualComponent values can either be a single string value or a comma-separated string of values
+            const typesArray = contextualComponent.toUpperCase().split(',');
+
+            // Check if values are of the same type (all buttons or all marks)
+            const allButtons = typesArray.every(type => type.endsWith('_BUTTON'));
+            const allMarks = typesArray.every(type => type.endsWith('_MARK'));
+
+            if (!allButtons && !allMarks) {
+                logInvalidCombination(
+                    'contextualComponent',
+                    "Expected all contextualComponent values to be either of type '_button' or '_mark'",
+                    contextualComponent
+                );
+            } else if (typesArray.filter(type => type.endsWith('_mark')).length > 1) {
+                logInvalid('contextualComponent', 'Ensure only one type of _mark value is provided.');
+            } else {
+                return contextualComponent.toUpperCase().split(',').sort().join(',');
+            }
+        }
+
+        return undefined;
+    },
     cspNonce: ({ props: { cspNonce } }) => {
         if (typeof cspNonce !== 'undefined') {
             if (!validateType(Types.STRING, cspNonce)) {

src/library/zoid/modal/component.js

@@ -136,6 +136,12 @@ export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
                 required: false,
                 value: validate.ecToken
             },
+            contextualComponent: {
+                type: 'string',
+                queryParam: 'contextual_component',
+                required: false,
+                value: validate.contextualComponent
+            },
 
             // Callbacks
             onClick: {

src/utils/elements.js

@@ -43,6 +43,7 @@ export function getInlineOptions(container) {
         merchantid: 'merchantId',
         cspnonce: 'cspNonce',
         ectoken: 'ecToken',
+        contextualcomponent: 'contextualComponent',
         customerid: 'customerId',
         fontfamily: 'fontFamily',
         fontsource: 'fontSource',