adds onMessageHover and onMessageClick props and loads modal

Author: danzhaaspaypal

Diff for: src/zoid/buttons/component.jsx

@@ -90,6 +90,7 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
+  getModal,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -681,6 +682,84 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      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,

Diff for: src/zoid/buttons/util.js

@@ -22,6 +22,7 @@ import {
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +358,45 @@ export function getButtonSize(
     }
   }
 }
+
+// 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),
+      });
+  }
+}