chore: cut release

.eslintrc

@@ -7,7 +7,8 @@
     },
     "globals": {
         "__MESSAGES__": true,
-        "__MESSAGING_GLOBALS__": true
+        "__MESSAGING_GLOBALS__": true,
+        "__ENV__": true
     },
     "plugins": ["prettier"],
     "rules": {

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,24 @@
+<!--
+    PLEASE REVIEW BEFORE OPENING
+    PR guidelines:
+    - Please fill out all sections where applicable!
+    - PR title should be in the format <prefix>: <short description>
+        - for a reminder of what prefixes are available, see here: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines
+    - Add your tester as a reviewer and let them know when changes are ready for them to start looking at
+    - Add "N/A" under any sections that are not applicable
+-->
+
+## Description
+
+<!-- Describe your changes and what problem they solve -->
+
+## Screenshots
+
+<!-- Add any relevant screenshots of the change or fix -->
+
+## Testing instructions
+
+<!--
+    Include any useful information that will help with testing this change specifically, if applicable
+    General testing setup can be omitted - this should focus on setup unique to this PR
+-->

README.md

@@ -132,6 +132,15 @@ Alternatively, you can remove `-- --testPathPattern {integrationType}` and just
 CONFIG_PATH={locale}/{account} npm run test:func:snapshots
 ```
 
+### Stage
+
+If you are looking to run against an alternative environment, set the `window.__TEST_ENV__` global to override the environment. **Please note, this is only available in development environments.**
+
+```javascript
+//Change the value of the test environment
+<script>window.__TEST_ENV__ = "https://www.te-test-env.com"</script>
+```
+
 ## Releasing
 
 This package is published weekly, **Every Wednesday**. Please [view our Changelog](CHANGELOG.md) to stay updated with bug fixes and new features.

content/modals/DE/long_term.json

@@ -33,7 +33,7 @@
             "Das war’s! Falls Sie möchten, können Sie auch früher bezahlen. Ohne Zusatzkosten."
         ],
         "disclosure": {
-            "nonZeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung. Laufzeiten von 3, 6, 12 oder 24 Monaten. Ab {formattedMinAmount} und bis zu {formattedMaxAmount} Bestellwert. Für die Laufzeiten 3, 6 und 12 Monate gilt ein effektiver Jahreszins von 11,99%, p.a. zu einem festen Sollzinssatz von 11,30% p.a. bei 3 Monaten, von 11,31% p.a. bei 6 Monaten, von 11,32% p.a. bei 12 Monaten. Für die Laufzeit 24 Monate gilt ein effektiver Jahreszins von 9,99% p.a. zu einem festen Sollzinssatz von 9,51% p.a. Repräsentatives Beispiel gem. § 17(4) PAngV: Nettodarlehensbetrag 1.000 €, Gesamtbetrag 1.062,54 €, 12 monatliche Raten à 62,54 €, fester Sollzinssatz 11,32% p.a., eff. Jahreszins 11.99% p.a. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg.",
+            "nonZeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung. Laufzeiten von 3, 6, 12 oder 24 Monaten. Ab {formattedMinAmount} und bis zu {formattedMaxAmount} Bestellwert. Für die Laufzeiten 3, 6 und 12 Monate gilt ein effektiver Jahreszins von 11,99%, p.a. zu einem festen Sollzinssatz von 11,30% p.a. bei 3 Monaten, von 11,31% p.a. bei 6 Monaten, von 11,32% p.a. bei 12 Monaten. Für die Laufzeit von 24 Monaten gilt ein effektiver Jahreszins von 10,99% p.a. zu einem festen Sollzinssatz von 10,42% p.a. Repräsentatives Beispiel gem. § 17 (4) PAngV: Nettodarlehensbetrag 1.000 €, Gesamtbetrag 1.062,54 €, 12 monatliche Raten à 88,55 €, fester Sollzinssatz 11,32% p.a., eff. Jahreszins 11.99% p.a. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg.",
             "zeroAPR": "Vorbehaltlich Kreditwürdigkeitsprüfung und nur für Transaktionen in Euro. Ab einem Bestellwert von {formattedMinAmount} bis {formattedMaxAmount} mit einem eff. Jahreszins von {apr}% p.a. und einem festen Sollzinssatz von {nominal_rate}% p.a. für Darlehensverträge, die im Angebotszeitraum abgeschlossen werden. Laufzeit 3, 6, 12 oder 24 Monate. Der Kreditgeber ist PayPal (Europe) S.à r.l. et Cie, S.C.A., 22-24 Boulevard Royal, L-2449 Luxembourg. Als Verbraucher steht Ihnen gemäß § 514 BGB bei unentgeltlichen Darlehensverträgen ab einem Finanzierungsbetrag von 200 € ein Widerrufsrecht zu. Anspruchsberechtigte Kunden müssen PayPal ein SEPA Lastschriftmandat erteilen sowie über ein deutsches PayPal Privat-Konto mit bestätigtem Bankkonto als Zahlungsquelle"
         },
         "navLinkPrefix": "Für andere Später Bezahlen Optionen wählen Sie",

scripts/semantic-release/assets.sh

@@ -37,7 +37,7 @@ if [ ! -z "$tag" ]; then
     version=$version-$(echo $tag | sed "s/_/-/g" | sed -E "s/-([0-9]+)$/.\1/")
     # Check if the CDN tag has already been used before spending time on the webpack build
     tagStatus=$(web status $tag 2>&1)
-    if [[ $tagStatus =~ "✔ Complete" ]]; then
+    if [[ $tagStatus =~ "staged" ]]; then
         printf "Stage tag already exists and must be unique ($tag)\n\n"
         exit 1
     fi

src/components/message/Message.js

@@ -6,24 +6,14 @@ import {
     getActiveTags,
     ppDebug,
     createState,
-    isStorageFresh,
-    getDeviceID,
     parseObjFromEncoding,
     getRequestDuration,
-    getTsCookieFromStorage
+    getTsCookieFromStorage,
+    getOrCreateDeviceID
 } from '../../utils';
 
 const Message = function ({ markup, meta, parentStyles, warnings }) {
-    const {
-        onClick,
-        onReady,
-        onHover,
-        onMarkup,
-        onProps,
-        resize,
-        deviceID: parentDeviceID,
-        messageRequestId
-    } = window.xprops;
+    const { onClick, onReady, onHover, onMarkup, onProps, resize, messageRequestId } = window.xprops;
 
     const dimensionsRef = { current: { width: 0, height: 0 } };
 
@@ -84,8 +74,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
         meta: serverData.meta,
         activeTags: getActiveTags(button),
         messageRequestId,
-        // Utility will create iframe deviceID/ts_cookie values if it doesn't exist.
-        deviceID: isStorageFresh() ? parentDeviceID : getDeviceID(),
+        // Utility will create iframe ts_cookie values if it doesn't exist.
         ts: getTsCookieFromStorage(),
         // getRequestDuration runs in the child component (iframe/banner message),
         // passing a value to onReady and up to the parent component to go out with
@@ -176,6 +165,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     stageTag,
                     merchant_config: merchantConfigHash,
                     channel,
+                    deviceID: getOrCreateDeviceID(),
                     treatments: treatmentsHash,
                     disableSetCookie,
                     features
@@ -216,8 +206,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                                 meta: data.meta ?? serverData.meta,
                                 activeTags: getActiveTags(button),
                                 messageRequestId: newMessageRequestId,
-                                // Utility will create iframe deviceID/ts cookie if it doesn't exist.
-                                deviceID: isStorageFresh() ? parentDeviceID : getDeviceID(),
+                                // Utility will create iframe ts cookie if it doesn't exist.
                                 ts: getTsCookieFromStorage(),
                                 // getRequestDuration runs in the child component (iframe/banner message),
                                 // passing a value to onReady and up to the parent component to go out with

src/components/modal/parts/Container.jsx

@@ -1,7 +1,7 @@
 /** @jsx h */
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import { getDeviceID, isStorageFresh, getTsCookieFromStorage } from '../../../utils';
+import { getTsCookieFromStorage } from '../../../utils';
 
 import {
     useTransitionState,
@@ -28,7 +28,6 @@ const Container = ({ children, contentWrapper, contentMaxWidth, contentMaxHeight
         messageRequestId,
         ignoreCache,
         version,
-        deviceID: parentDeviceID,
         stageTag
     } = useXProps();
     const [transitionState] = useTransitionState();
@@ -60,8 +59,6 @@ const Container = ({ children, contentWrapper, contentMaxWidth, contentMaxHeight
                 products: productNames,
                 messageRequestId,
                 meta,
-                // If storage state is brand new, use the parent deviceID/ts cookie, otherwise use child
-                deviceID: isStorageFresh() ? parentDeviceID : getDeviceID(),
                 ts: getTsCookieFromStorage()
             });
         }

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

@@ -2,10 +2,10 @@ import { useReducer, useMemo, useRef } from 'preact/hooks';
 import { debounce } from '@krakenjs/belter/src';
 
 import { useXProps, useServerData } from '../providers';
-import { getOrCreateStorageID } from '../../../../../utils';
 import { useDidUpdateEffect } from './helpers';
 import { getContent } from '../utils';
 import { localize, delocalize } from '../locale';
+import { getOrCreateDeviceID } from '../../../../../utils';
 
 const reducer = (state, action) => {
     switch (action.type) {
@@ -94,7 +94,7 @@ export default function useCalculator({ autoSubmit = false } = {}) {
             channel,
             ecToken,
             devTouchpoint,
-            deviceID: getOrCreateStorageID(),
+            deviceID: getOrCreateDeviceID(),
             disableSetCookie,
             features
         })

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

@@ -1,5 +1,6 @@
 import objectEntries from 'core-js-pure/stable/object/entries';
 import arrayFrom from 'core-js-pure/stable/array/from';
+import { isIosWebview, isAndroidWebview } from '@krakenjs/belter/src';
 import { request, memoize, ppDebug } from '../../../../utils';
 
 export const getContent = memoize(
@@ -64,7 +65,8 @@ export const getContent = memoize(
  * @returns boolean
  */
 export const isLander = __MESSAGES__.__TARGET__ === 'LANDER';
-export const isIframe = window.top !== window;
+const { userAgent } = window.navigator;
+export const isIframe = window.top !== window || isIosWebview(userAgent) || isAndroidWebview(userAgent);
 
 export function setupTabTrap() {
     const focusableElementsString =
@@ -88,3 +90,12 @@ export function setupTabTrap() {
     }
     window.addEventListener('keydown', trapTabKey);
 }
+
+export function formatDateByCountry(country) {
+    const currentDate = new Date();
+    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+    if (country === 'US') {
+        return currentDate.toLocaleDateString('en-US', options);
+    }
+    return currentDate.toLocaleDateString('en-GB', options);
+}

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

@@ -1,26 +1,16 @@
-import { logger } from '../../../../utils';
+/* global Android */
+import { isAndroidWebview, isIosWebview, getPerformance } from '@krakenjs/belter/src';
+import { getOrCreateDeviceID, logger } from '../../../../utils';
 
-export default function polyfillZoid() {
-    const props = window.location.search
-        .slice(1)
-        .split('&')
-        .reduce((acc, query) => {
-            const [key, value] = query.split('=');
-
-            if (value) {
-                const propName = key.replace(/_([a-z])/g, (_, p1) => p1.toUpperCase());
-
-                acc[propName] = value;
-            }
-
-            return acc;
-        }, {});
+const IOS_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
+const ANDROID_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
 
+const setupBrowser = props => {
     window.xprops = {
         // We will never recieve new props via this integration style
         onProps: () => {},
         // TODO: Verify these callbacks are instrumented correctly
-        onReady: ({ products, meta, deviceID }) => {
+        onReady: ({ products, meta }) => {
             const { clientId, payerId, merchantId, offer, partnerAttributionId } = props;
             const { trackingDetails } = meta;
 
@@ -41,7 +31,7 @@ export default function polyfillZoid() {
                         // integration_type needs to be sent or it will default to lander
                         integration_type: props.integrationType ?? __MESSAGES__.__TARGET__,
                         // Device ID should be correctly set during message render
-                        deviceID
+                        deviceID: getOrCreateDeviceID()
                         // sessionID: getSessionID()
                     },
                     1: {
@@ -105,4 +95,125 @@ export default function polyfillZoid() {
         // Specified props via query params
         ...props
     };
+};
+
+const setupWebview = props => {
+    const postMessage = (() => {
+        if (window.webkit?.messageHandlers?.[IOS_INTERFACE_NAME]) {
+            return window.webkit.messageHandlers[IOS_INTERFACE_NAME].postMessage.bind(
+                window.webkit.messageHandlers[IOS_INTERFACE_NAME]
+            );
+        }
+
+        // `Android` is not on the `window` object but rather an adjacent top level object
+        if (typeof Android !== 'undefined') {
+            return Android[ANDROID_INTERFACE_NAME].bind(Android);
+        }
+
+        // This scenario should only ever occur when developing locally
+        return payload => console.warn('postMessage:', JSON.parse(payload));
+    })();
+
+    const propListeners = new Set();
+    const sendCallbackMessage = (name, ...args) => postMessage(JSON.stringify({ name, args }));
+    // Functions called from the native app
+    window.actions = {
+        updateProps: newProps => {
+            if (newProps && typeof newProps === 'object') {
+                Array.from(propListeners.values()).forEach(listener => {
+                    listener({ ...window.xprops, ...newProps });
+                });
+
+                Object.assign(window.xprops, newProps);
+            }
+        }
+    };
+    window.xprops = {
+        onProps: listener => propListeners.add(listener),
+
+        onReady: ({ meta }) => {
+            const { trackingDetails } = meta;
+            const timing = getPerformance()?.getEntriesByType('navigation')[0];
+
+            sendCallbackMessage('onReady', {
+                __shared__: {
+                    // Analytic Details
+                    fdata: trackingDetails.fdata,
+                    experimentation_experience_ids: trackingDetails.experimentation_experience_ids,
+                    experimentation_treatment_ids: trackingDetails.experimentation_treatment_ids,
+                    credit_product_identifiers: trackingDetails.credit_product_identifiers,
+                    offer_country_code: trackingDetails.offer_country_code,
+                    merchant_country_code: trackingDetails.merchant_country_code,
+                    views: trackingDetails.views,
+                    qualified_products: trackingDetails.qualified_products,
+                    debug_id: trackingDetails.debug_id
+                },
+                event_type: 'modal_render',
+                request_duration: timing && timing.responseEnd - timing.requestStart,
+                render_duration: timing && timing.loadEventEnd - timing.responseEnd
+            });
+        },
+
+        onClick: ({ linkName, src = linkName }) => {
+            sendCallbackMessage('onClick', {
+                event_type: 'modal_click',
+                link_name: linkName,
+                link_src: src
+            });
+        },
+
+        onCalculate: ({ value }) => {
+            sendCallbackMessage('onCalculate', {
+                event_type: 'modal_click',
+                link_name: 'Calculator',
+                link_src: 'Calculator',
+                data: value
+            });
+        },
+
+        onShow: () => {
+            sendCallbackMessage('onShow', {
+                event_type: 'modal_open',
+                link_name: 'Show',
+                link_src: 'Show'
+            });
+        },
+
+        onClose: ({ linkName, src = linkName }) => {
+            sendCallbackMessage('onClose', {
+                event_type: 'modal_close',
+                link_name: linkName,
+                link_src: src
+            });
+        },
+        // Overridable defaults
+        integrationType: __MESSAGES__.__TARGET__,
+        // Specified props via query params
+        ...props
+    };
+};
+
+export default function polyfillZoid() {
+    const props = window.location.search
+        .slice(1)
+        .split('&')
+        .reduce((acc, query) => {
+            const [key, value] = query.split('=');
+
+            if (value) {
+                const propName = key.replace(/_([a-z])/g, (_, p1) => p1.toUpperCase());
+
+                acc[propName] = value;
+            }
+
+            return acc;
+        }, {});
+
+    const { userAgent } = window.navigator;
+
+    if (isIosWebview(userAgent) || isAndroidWebview(userAgent)) {
+        setupWebview(props);
+    } else {
+        setupBrowser(props);
+    }
 }