feat: supports v6 custom close button (#1190)

Author: danzhaaspaypal

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

@@ -8,7 +8,7 @@ const POSTMESSENGER_EVENT_TYPES = {
 const POSTMESSENGER_ACK_PAYLOAD = {
     ok: 'true'
 };
-
+// these constants should maintain parity with MESSAGE_MODAL_EVENT_NAMES in core-web-sdk
 export const POSTMESSENGER_EVENT_NAMES = {
     CALCULATE: 'paypal-messages-modal-calculate',
     CLOSE: 'paypal-messages-modal-close',

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

@@ -6,7 +6,6 @@ import { sendEvent, createPostMessengerEvent, POSTMESSENGER_EVENT_NAMES } from '
 
 const IOS_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
 const ANDROID_INTERFACE_NAME = 'paypalMessageModalCallbackHandler';
-// these constants should maintain parity with MESSAGE_MODAL_EVENT_NAMES in core-web-sdk
 
 function updateProps(newProps, propListeners) {
     Array.from(propListeners.values()).forEach(listener => {
@@ -15,20 +14,43 @@ function updateProps(newProps, propListeners) {
     Object.assign(window.xprops, newProps);
 }
 
-export function handleBrowserEvents(trustedOrigin, propListeners, updatedPropsEvent) {
+export function handlePropsUpdateEvent(propListeners, updatedPropsEvent) {
     const {
-        origin: eventOrigin,
-        data: { eventName, id, eventPayload: newProps }
+        data: { eventPayload: newProps }
     } = updatedPropsEvent;
-
-    if (eventOrigin === trustedOrigin && eventName === 'PROPS_UPDATE' && newProps && typeof newProps === 'object') {
-        // send event ack with original event id so PostMessenger will stop reposting event
-        sendEvent(createPostMessengerEvent('ack', id), trustedOrigin);
+    if (newProps && typeof newProps === 'object') {
         const validProps = validateProps(newProps);
         updateProps(validProps, propListeners);
     }
 }
 
+export function logModalClose(linkName) {
+    logger.track({
+        index: '1',
+        et: 'CLICK',
+        event_type: 'modal_close',
+        page_view_link_name: linkName
+    });
+}
+
+export function handleBrowserEvents(clientOrigin, propListeners, event) {
+    const {
+        origin: eventOrigin,
+        data: { eventName, id }
+    } = event;
+    if (eventOrigin !== clientOrigin) {
+        return;
+    }
+    if (eventName === 'PROPS_UPDATE') {
+        handlePropsUpdateEvent(propListeners, event);
+    }
+    if (eventName === 'MODAL_CLOSED') {
+        logModalClose(event.data.eventPayload.linkName);
+    }
+    // send event ack with original event id so PostMessenger will stop reposting event
+    sendEvent(createPostMessengerEvent('ack', id), clientOrigin);
+}
+
 const getAccount = (merchantId, clientId, payerId) => {
     if (merchantId) {
         return merchantId;
@@ -144,12 +166,7 @@ const setupBrowser = props => {
                 createPostMessengerEvent('message', POSTMESSENGER_EVENT_NAMES.CLOSE, eventPayload),
                 trustedOrigin
             );
-            logger.track({
-                index: '1',
-                et: 'CLICK',
-                event_type: 'modal_close',
-                page_view_link_name: linkName
-            });
+            logModalClose(linkName);
         },
         // Overridable defaults
         integrationType: __MESSAGES__.__TARGET__,

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

@@ -45,8 +45,6 @@ const Container = ({ children }) => {
     useEffect(() => {
         if (transitionState === 'CLOSED') {
             contentWrapperRef.current.scrollTop = 0;
-        } else if (transitionState === 'OPEN') {
-            window.focus();
         }
     }, [transitionState]);
 

tests/unit/spec/src/components/modal/v2/lib/zoid-polyfill.test.js

@@ -448,7 +448,7 @@ describe('zoidPollyfill', () => {
                 expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
                 expect(addEventListenerSpy).toHaveBeenCalledWith('message', expect.any(Function), false);
             });
-            test('handleBrowserEvents updates props when values are valid', () => {
+            test('handleBrowserEvents handles PROPS_UPDATE and updates props when values are valid', () => {
                 // jest doesn't support calling postMessage, so we cannot use the event listener above
                 // instead we will manually verify that handleBrowserEvents works as intended
                 const clientOrigin = 'http://example.com';
@@ -479,6 +479,36 @@ describe('zoidPollyfill', () => {
                     })
                 );
             });
+            test('handleBrowserEvents handles MODAL_CLOSE and logs close method', () => {
+                // jest doesn't support calling postMessage, so we cannot use the event listener above
+                // instead we will manually verify that handleBrowserEvents works as intended
+                const clientOrigin = 'http://example.com';
+
+                const newPropsEvent = {
+                    origin: clientOrigin,
+                    data: {
+                        eventName: 'MODAL_CLOSED',
+                        eventPayload: {
+                            linkName: 'Custom Close Button'
+                        }
+                    }
+                };
+
+                const propListeners = new Set();
+                const onPropsCallback = jest.fn();
+                propListeners.add(onPropsCallback);
+                handleBrowserEvents(clientOrigin, propListeners, newPropsEvent);
+
+                expect(logger.track).toHaveBeenCalledTimes(1);
+                expect(logger.track).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        index: '1',
+                        et: 'CLICK',
+                        event_type: 'modal_close',
+                        page_view_link_name: 'Custom Close Button'
+                    })
+                );
+            });
             test('handleBrowserEvents handles unrelated events with no data', () => {
                 const unrelatedEvent = {
                     data: {}