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 @@
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
+  getModal,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -681,6 +682,62 @@
         },
       },
 
+      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,
+              locale: { lang, country },
+              buttonSessionID,
+            } = props;
+            const amount = message?.amount || undefined;
+
+            const modal = await getModal();
+            const modalInstance = modal({
+              account: `client-id:${clientID}`,
+            });
+            modalInstance.show({
+              amount,
+              offer: offerType?.join(",") || undefined,
+              account: `client-id:${clientID}`,
+              merchantId: merchantID?.join(",") || undefined,
+              language: `${lang}-${country}`,
+              buyerCountry: getBuyerCountry(),
+              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 @@
   getElement,
   isStandAlone,
   once,
+  memoize,
 } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
 import {
@@ -22,6 +25,7 @@
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +361,48 @@
     }
   }
 }
+
+export const getModal: () => Object = memoize(() => {
+  if (window.paypal?.MessagesModal) {
+    return window.paypal.MessagesModal;
+  } 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();
+        document.body?.appendChild(script);
+        script.addEventListener("load", () => {
+          document.body?.removeChild(script);
+          resolve(window.paypal.MessagesModal);
+        });
+      });
+    } 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),
+        });
+    }
+  }
+});