feat: adds prop update listening to modal browser zoid polyfill

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

@@ -2,6 +2,7 @@
 import arrayFrom from 'core-js-pure/stable/array/from';
 import { isIosWebview, isAndroidWebview } from '@krakenjs/belter/src';
 import { request, memoize, ppDebug } from '../../../../utils';
+import validate from '../../../../library/zoid/message/validation';
 
 export const getContent = memoize(
     ({
@@ -112,3 +113,59 @@
     }
     return currentDate.toLocaleDateString('en-GB', options);
 }
+
+export function createUUID() {
+    // crypto.randomUUID() is only available in HTTPS secure environments and modern browsers
+    if (typeof crypto !== 'undefined' && crypto && crypto.randomUUID instanceof Function) {
+        return crypto.randomUUID();
+    }
+
+    const validChars = '0123456789abcdefghijklmnopqrstuvwxyz';
+    const stringLength = 32;
+    let randomId = '';
+    for (let index = 0; index < stringLength; index++) {
+        const randomIndex = Math.floor(Math.random() * validChars.length);
+        randomId += validChars.charAt(randomIndex);
+    }
+    return randomId;
+}
+
+export function validateProps(updatedProps) {
+    const validatedProps = {};
+    Object.entries(updatedProps).forEach(entry => {
+        const [k, v] = entry;
+        if (k === 'offerType') {
+            validatedProps.offer = validate.offer({ props: { offer: v } });
+        } else {
+            validatedProps[k] = validate[k]({ props: { [k]: v } });
+        }
+    });
+    return validatedProps;
+}
+
+export function sendEventAck(eventId) {
+    // skip this step if running in test env because jest's target windows don't support postMessage
+    if (window.process?.env?.NODE_ENV === 'test') {
+        return;
+    }
+
+    // target window selection depends on if checkout window is in popup or modal iframe
+    let targetWindow;
+    const popupCheck = window.parent === window;
+    if (popupCheck) {
+        targetWindow = window.opener;
+    } else {
+        targetWindow = window.parent;
+    }
+
+    targetWindow.postMessage(
+        {
+            // PostMessenger stops reposting an event when it receives an eventName which matches the id in the message it sent and type 'ack'
+            eventName: eventId,
+            type: 'ack',
+            eventPayload: { ok: true },
+            id: createUUID()
+        },
+        '*'
+    );
+}

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

@@ -1,15 +1,64 @@
 /* global Android */
 import { isAndroidWebview, isIosWebview, getPerformance } from '@krakenjs/belter/src';
 import { getOrCreateDeviceID, logger } from '../../../../utils';
-import { isIframe } from './utils';
+import { isIframe, validateProps, sendEventAck } from './utils';
 
 const IOS_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
 const ANDROID_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
 
+function listenAndAssignProps(newProps, propListeners) {
+    Array.from(propListeners.values()).forEach(listener => {
+        listener({ ...window.xprops, ...newProps });
+    });
+    Object.assign(window.xprops, newProps);
+}
+
+export function validateAndUpdateBrowserProps(initialProps, propListeners, updatedPropsEvent) {
+    const {
+        origin,
+        data: { eventName, id, eventPayload: newProps }
+    } = updatedPropsEvent;
+    // verify the event is coming from the merchant page
+    const eventOriginCheck = origin === decodeURIComponent(initialProps.origin);
+    if (eventOriginCheck && eventName === 'PROPS_UPDATE' && newProps && typeof newProps === 'object') {
+        // send event ack so PostMessenger will stop reposting event
+        sendEventAck(id);
+        const validProps = validateProps(newProps);
+        listenAndAssignProps(validProps, propListeners, true);
+    }
+}
+
 const setupBrowser = props => {
+    const propListeners = new Set();
+
+    window.addEventListener(
+        'message',
+        event => {
+            validateAndUpdateBrowserProps(props, propListeners, event);
+        },
+        false
+    );
+
+    // window.addEventListener(
+    //     'message',
+    //     event => {
+    //         const {
+    //             origin,
+    //             data: { eventName, id, eventPayload: newProps }
+    //         } = event;
+    //         // verify the event is coming from the merchant page
+    //         const eventOriginCheck = origin === decodeURIComponent(props.origin);
+    //         if (eventOriginCheck && eventName === 'PROPS_UPDATE' && newProps && typeof newProps === 'object') {
+    //             // send event ack so PostMessenger will stop reposting event
+    //             sendEventAck(id);
+    //             listenAndAssignProps(newProps, propListeners, true);
+    //         }
+    //     },
+    //     false
+    // );
+
     window.xprops = {
-        // We will never recieve new props via this integration style
-        onProps: () => {},
+        onProps: listener => propListeners.add(listener),
         // TODO: Verify these callbacks are instrumented correctly
         onReady: ({ products, meta }) => {
             const { clientId, payerId, merchantId, offer, partnerAttributionId } = props;
@@ -126,11 +175,7 @@ const setupWebview = props => {
     window.actions = {
         updateProps: newProps => {
             if (newProps && typeof newProps === 'object') {
-                Array.from(propListeners.values()).forEach(listener => {
-                    listener({ ...window.xprops, ...newProps });
-                });
-
-                Object.assign(window.xprops, newProps);
+                listenAndAssignProps(newProps, propListeners, false);
             }
         }
     };