feat: message hover and click behavior and modal

src/ui/buttons/props.js

@@ -760,7 +760,7 @@ export function normalizeButtonMessage(
     }
   }
 
-  if (offer) {
+  if (offer || typeof offer === "string") {
     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 (color === "" || (color && !values(MESSAGE_COLOR).includes(color))) {
     throw new Error(`Invalid color: ${color}`);
   }
 
-  if (position && !values(MESSAGE_POSITION).includes(position)) {
+  if (
+    position === "" ||
+    (position && !values(MESSAGE_POSITION).includes(position))
+  ) {
     throw new Error(`Invalid position: ${position}`);
   }
 
-  if (align && !values(MESSAGE_ALIGN).includes(align)) {
+  if (align === "" || (align && !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,84 @@
         },
       },
 
+      onMessageHover: {
+        type: "function",
+        required: false,
+        value: ({ props, state }) => {
+          return async ({ offerType }) => {
+            if (!window.paypal.MessagesModal.show && !state.isModalFetching) {
+              state.isModalFetching = true;
+              await getModal();
+              state.isModalFetching = false;
+
+              if (state.isAwaitingShow === true) {
+                const { message, clientID, merchantID } = props;
+                const amount = message?.amount;
+
+                window.paypal
+                  .MessagesModal({
+                    onReady: ({ show }) => {
+                      show({
+                        amount,
+                        offer: offerType,
+                        account: clientID,
+                        merchantId: merchantID,
+                      });
+                    },
+                  })
+                  .render("body");
+
+                state.isAwaitingShow = false;
+              }
+            }
+          };
+        },
+      },
+
+      onMessageClick: {
+        type: "function",
+        required: false,
+        value: ({ props, state }) => {
+          return async ({ offerType, messageType }) => {
+            if (window.paypal.MessagesModal) {
+              const { message, clientID, merchantID, buttonSessionID } = props;
+              const amount = message?.amount || undefined;
+
+              window.paypal
+                .MessagesModal({
+                  onReady: ({ show }) => {
+                    show({
+                      amount,
+                      offer: offerType,
+                      account: clientID,
+                      merchantId: merchantID,
+                    });
+                  },
+                })
+                .render("body");
+
+              getLogger()
+                .info("button_message_clicked")
+                .track({
+                  [FPTI_KEY.MESSAGE_TYPE]: messageType,
+                  [FPTI_KEY.MESSAGE_STYLE_POSITION]: message.position,
+                  [FPTI_KEY.MESSAGE_STYLE_TEXT_ALIGN]: message.align,
+                  [FPTI_KEY.MESSAGE_STYLE_COLOR]: message.color,
+                  [FPTI_KEY.MESSAGE_OFFER]: offerType,
+                  [FPTI_KEY.AMOUNT]: amount,
+                  [FPTI_KEY.BUTTON_MESSAGE_ID]: buttonSessionID,
+                });
+            } else if (!state.isModalFetching) {
+              state.isModalFetching = true;
+              await getModal();
+              state.isModalFetching = false;
+            } else {
+              state.isAwaitingShow = true;
+            }
+          };
+        },
+      },
+
       onShippingAddressChange: {
         type: "function",
         required: false,

src/zoid/buttons/util.js

@@ -22,6 +22,7 @@
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +358,45 @@
     }
   }
 }
+
+// eslint-disable-next-line promise/no-native, no-restricted-globals
+export async function getModal(): string | Promise<Object> | void {
+  const modalBundleUrl = {
+    local:
+      "https://www.paypalobjects.com/upstream/bizcomponents/stage/modal.js",
+    test: "https://www.paypalobjects.com/upstream/bizcomponents/stage/modal.js",
+    stage:
+      "https://www.paypalobjects.com/upstream/bizcomponents/stage/modal.js",
+    sandbox:
+      "https://www.paypalobjects.com/upstream/bizcomponents/sandbox/modal.js",
+    production:
+      "https://www.paypalobjects.com/upstream/bizcomponents/js/modal.js",
+  };
+  const env = getEnv();
+
+  try {
+    return await new Promise((resolve) => {
+      const script = document.createElement("script");
+      script.src = modalBundleUrl[env];
+      script.addEventListener("load", () => {
+        document.body.removeChild(script);
+        resolve();
+      });
+      if (document.readyState === "loading") {
+        window.addEventListener("DOMContentLoaded", () => {
+          document.body.appendChild(script);
+        });
+      } else {
+        document.body.appendChild(script);
+      }
+    });
+  } 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),
+      });
+  }
+}