support visibility change for manual app switch flow

Author: wsbrunson

src/ui/buttons/props.js

@@ -510,6 +510,10 @@ export type ButtonProps = {|
   // change any to HashChangeEvent when we move to typescript
   // eslint-disable-next-line flowtype/no-weak-types
   hashChangeHandler: (event: any) => void,
+  listenForVisibilityChange: () => void,
+  removeListenerForVisibilityChanges: () => void,
+  // Not passed to child iframe
+  visibilityChangeHandler: () => void,
 
   fundingSource?: ?$Values<typeof FUNDING>,
   intent: $Values<typeof INTENT>,

src/zoid/buttons/component.jsx

@@ -50,7 +50,6 @@ import {
 } from "@paypal/funding-components/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { create, EVENT, type ZoidComponent } from "@krakenjs/zoid/src";
-import { send as postRobotSend } from "@krakenjs/post-robot/src";
 import {
   uniqueID,
   memoize,
@@ -98,6 +97,7 @@ import {
   getButtonSize,
   getButtonExperiments,
   getModal,
+  sendPostRobotMessageToButtonIframe,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<
@@ -305,27 +305,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         type: "function",
         sendToChild: false,
         queryParam: false,
-        required: false,
         value: () => (event) => {
-          const iframes = document.querySelectorAll("iframe");
-
-          // I don't understand why but trying to make iframes which is a NodeList
-          // into an Iterable (so we could do a for..of loop or .forEach) is not
-          // working. It ends up iterating over itself so instead of looping over the contents
-          // of the NodeList you loop over the NodeList itself which is extremely unexpected
-          // for..in works though :shrug: - Shane 11 Dec 2024
-          for (let i = 0; i < iframes.length; i++) {
-            if (iframes[i].name.includes("zoid__paypal_buttons")) {
-              postRobotSend(
-                iframes[i].contentWindow,
-                "paypal-hashchange",
-                {
-                  url: event.newURL,
-                },
-                { domain: getPayPalDomain() }
-              );
-            }
-          }
+          sendPostRobotMessageToButtonIframe({
+            eventName: "paypal-hashchange",
+            payload: {
+              url: event.newURL,
+            },
+          });
         },
       },
 
@@ -349,6 +335,48 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           },
       },
 
+      visibilityChangeHandler: {
+        type: "function",
+        sendToChild: false,
+        queryParam: false,
+        value: () => () => {
+          sendPostRobotMessageToButtonIframe({
+            eventName: "paypal-visibilitychange",
+            payload: {
+              url: window.location.href,
+              // eslint-disable-next-line compat/compat
+              visibilityState: document.visibilityState,
+            },
+          });
+        },
+      },
+
+      listenForVisibilityChange: {
+        type: "function",
+        queryParam: false,
+        value:
+          ({ props }) =>
+          () => {
+            window.addEventListener(
+              "visibilitychange",
+              props.hashChangeHandler
+            );
+          },
+      },
+
+      removeListenerForVisibilityChanges: {
+        type: "function",
+        queryParam: false,
+        value:
+          ({ props }) =>
+          () => {
+            window.removeEventListener(
+              "visibilitychange",
+              props.hashChangeHandler
+            );
+          },
+      },
+
       // allowBillingPayments prop is used by Honey Extension to render the one-click button
       // with payment methods & to use the payment methods instead of the Billing Agreement
       allowBillingPayments: {

src/zoid/buttons/util.js

@@ -14,6 +14,7 @@ import {
   once,
   memoize,
 } from "@krakenjs/belter/src";
+import { send as postRobotSend } from "@krakenjs/post-robot/src";
 import {
   getEnableFunding,
   getLogger,
@@ -23,6 +24,7 @@ import {
   getComponents,
   getEnv,
   getNamespace,
+  getPayPalDomain,
   getFirstRenderExperiments,
 } from "@paypal/sdk-client/src";
 import { FUNDING, FPTI_KEY } from "@paypal/sdk-constants/src";
@@ -424,3 +426,27 @@ export const getModal: (
       });
   }
 });
+
+export const sendPostRobotMessageToButtonIframe = ({
+  eventName,
+  payload,
+}: // eslint-disable-next-line flowtype/require-exact-type
+{
+  eventName: string,
+  payload: Object,
+}) => {
+  const iframes = document.querySelectorAll("iframe");
+
+  // I don't understand why but trying to make iframes which is a NodeList
+  // into an Iterable (so we could do a for..of loop or .forEach) is not
+  // working. It ends up iterating over itself so instead of looping over the contents
+  // of the NodeList you loop over the NodeList itself which is extremely unexpected
+  // for..in works though :shrug: - Shane 11 Dec 2024
+  for (let i = 0; i < iframes.length; i++) {
+    if (iframes[i].name.includes("zoid__paypal_buttons")) {
+      postRobotSend(iframes[i].contentWindow, eventName, payload, {
+        domain: getPayPalDomain(),
+      });
+    }
+  }
+};