feat: message hover and click behavior and modal

src/ui/buttons/props.js

@@ -760,7 +760,7 @@ export function normalizeButtonMessage(
     }
   }
 
-  if (offer) {
+  if (typeof offer !== "undefined") {
     if (!Array.isArray(offer)) {
       throw new TypeError(
         `Expected message.offer to be an array of strings, got: ${String(
@@ -776,15 +776,18 @@ export function normalizeButtonMessage(
     }
   }
 
-  if (color && !values(MESSAGE_COLOR).includes(color)) {
+  if (typeof color !== "undefined" && !values(MESSAGE_COLOR).includes(color)) {
     throw new Error(`Invalid color: ${color}`);
   }
 
-  if (position && !values(MESSAGE_POSITION).includes(position)) {
+  if (
+    typeof position !== "undefined" &&
+    !values(MESSAGE_POSITION).includes(position)
+  ) {
     throw new Error(`Invalid position: ${position}`);
   }
 
-  if (align && !values(MESSAGE_ALIGN).includes(align)) {
+  if (typeof align !== "undefined" && !values(MESSAGE_ALIGN).includes(align)) {
     throw new Error(`Invalid align: ${align}`);
   }
 

src/zoid/buttons/component.jsx

@@ -90,6 +90,7 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
+  getModal,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -681,6 +682,49 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      onMessageHover: {
+        type: "function",
+        required: false,
+        value: () => {
+          return () => {
+            // lazy loads the modal, to be memoized and executed onMessageClick
+            getModal();
+          };
+        },
+      },
+
+      onMessageClick: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return async ({ offerType, messageType }) => {
+            const { message, clientID, merchantID, currency, buttonSessionID } =
+              props;
+            const amount = message?.amount || undefined;
+
+            const modalInstance = await getModal(clientID, merchantID);
+            modalInstance.show({
+              amount,
+              offer: offerType?.join(",") || undefined,
+              currency,
+            });
+
+            getLogger()
+              .info("button_message_clicked")
+              .track({
+                [FPTI_KEY.EVENT_NAME]: "message_click",
+                // [FPTI_KEY.BUTTON_MESSAGE_OFFER_TYPE]: offerType,
+                // [FPTI_KEY.BUTTON_MESSAGE_TYPE]: messageType,
+                // [FPTI_KEY.BUTTON_MESSAGE_POSITION]: message.position,
+                // [FPTI_KEY.BUTTON_MESSAGE_ALIGN]: message.align,
+                // [FPTI_KEY.BUTTON_MESSAGE_COLOR]: message.color,
+                // [FPTI_KEY.AMOUNT]: amount,
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+              });
+          };
+        },
+      },
+
       onShippingAddressChange: {
         type: "function",
         required: false,

src/zoid/buttons/util.js

@@ -1,3 +1,5 @@
+/* eslint-disable compat/compat */
+/* eslint-disable promise/no-native */
 /* @flow */
 import {
   supportsPopups as userAgentSupportsPopups,
@@ -13,6 +15,7 @@ import {
   getElement,
   isStandAlone,
   once,
+  memoize,
 } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
 import {
@@ -22,6 +25,8 @@ import {
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
+  getNamespace,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +362,65 @@ export function getButtonSize(
     }
   }
 }
+
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize((clientID, merchantID) => {
+  const namespace = getNamespace();
+
+  if (window[namespace]?.MessagesModal) {
+    const modal = window[namespace].MessagesModal;
+    return modal({
+      account: `client-id:${clientID}`,
+      merchantId: merchantID?.join(",") || undefined,
+    });
+  } else {
+    const modalBundleUrl = () => {
+      let envPiece;
+      switch (getEnv()) {
+        case "local":
+        case "test":
+        case "stage":
+          envPiece = "stage";
+          break;
+        case "sandbox":
+          envPiece = "sandbox";
+          break;
+        case "production":
+        default:
+          envPiece = "js";
+      }
+      return `https://www.paypalobjects.com/upstream/bizcomponents/${envPiece}/modal.js`;
+    };
+
+    try {
+      // eslint-disable-next-line no-restricted-globals
+      return new Promise((resolve) => {
+        const script = document.createElement("script");
+        script.src = modalBundleUrl();
+        script.setAttribute("data-namespace", namespace);
+        script.setAttribute("data-pp-namespace", namespace);
+        document.body?.appendChild(script);
+        script.addEventListener("load", () => {
+          document.body?.removeChild(script);
+          const modal = window[namespace].MessagesModal;
+          resolve(() =>
+            modal({
+              account: `client-id:${clientID}`,
+              merchantId: merchantID?.join(",") || undefined,
+            })
+          );
+        });
+      });
+    } catch (err) {
+      getLogger()
+        .info("button_message_modal_fetch_error")
+        .track({
+          err: err.message || "BUTTON_MESSAGE_MODAL_FETCH_ERROR",
+          details: err.details,
+          stack: JSON.stringify(err.stack || err),
+        });
+    }
+  }
+});