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,59 @@ export function getButtonSize(
     }
   }
 }
+
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize((clientID, merchantID) => {
+  const namespace = getNamespace();
+
+  if (!window[namespace]?.MessagesModal) {
+    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(() => {
+        const script = document.createElement("script");
+        script.src = modalBundleUrl();
+        script.setAttribute("data-pp-namespace", namespace);
+        script.addEventListener("error", (err: Event) => {
+          throw err;
+        });
+        document.body?.appendChild(script);
+        script.addEventListener("load", () => {
+          document.body?.removeChild(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),
+        });
+    }
+  }
+  const modal = window[namespace].MessagesModal;
+  return modal({
+    account: `client-id:${clientID}`,
+    merchantId: merchantID?.join(",") || undefined,
+  });
+});

test/integration/tests/button/index.js

@@ -6,6 +6,7 @@ import "./error";
 import "./drivers";
 import "./frame";
 import "./size";
+import "./message";
 import "./multiple";
 import "./layout";
 import "./style";

test/integration/tests/button/message.js

@@ -378,4 +378,85 @@ describe(`paypal button message`, () => {
       });
     });
   });
+
+  describe("modal", () => {
+    const messageMarkup = `
+      <div className=".message__container locale__en" role="button">
+          <div className="message__content" >
+              <div className="message__logo-container">
+                  <div className="message__logo--svg"></div>
+              </div>
+              <div className=".message__messaging text__content--black">
+                  <div className="message__headline">
+                      <span style="font-size: 16px">Paypal Pay Later</span>
+                  </div>
+                  <p className="message__disclaimer">
+                      <span></span>
+                  </p>
+              </div>
+          </div>
+      </div>`;
+
+    it("should load modal on message hover when window.paypal.MessagesModal is not present", async (done) => {
+      window.paypal
+        .Buttons({
+          message: {},
+          messageMarkup,
+          test: {
+            onRender() {
+              const message = document.querySelector(".message__container");
+              message?.focus();
+              setTimeout(() => assert.ok(window.paypal.MessagesModal), 1000);
+              done();
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+    it.skip("should utilize existing MessagesModal on message hover when window.paypal.MessagesModal is present", () => {});
+    it("should open modal on message click", (done) => {
+      window.paypal.Buttons({
+        message: {},
+        messageMarkup,
+        test: {
+          onRender() {
+            const message = document.querySelector(".message__container");
+            message?.focus();
+            message?.click();
+
+            const modalWrapper = document.querySelector(".modal-wrapper");
+            assert.ok(modalWrapper);
+            done();
+          },
+        },
+      });
+    });
+    it("should show passed-in amount in modal's pay in 4 view", (done) => {
+      window.paypal
+        .Buttons({
+          message: {
+            amount: 100,
+          },
+          messageMarkup,
+          test: {
+            onRender() {
+              const message = document.querySelector(".message__container");
+              message?.focus();
+
+              const payIn4Button =
+                document.querySelector(".content__col")?.childNodes[1];
+              if (payIn4Button instanceof HTMLElement) {
+                payIn4Button.click();
+              }
+
+              const payIn4Amount =
+                document.querySelector("#donut__payment__1")?.innerHTML;
+              assert.equal(payIn4Amount, "$25.00");
+              done();
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+  });
 });