feat: message hover and click behavior and modal

globals.js

@@ -32,6 +32,7 @@ module.exports = {
       __CARD_FIELD__: "/smart/card-field",
       __WALLET__: "/smart/wallet",
       __PAYMENT_FIELDS__: "/altpayfields",
+      __MESSAGE_MODAL__: "https://www.paypalobjects.com/upstream/bizcomponents/js/modal.js",
     },
   },
 };

src/declarations.js

@@ -18,6 +18,7 @@ declare var __PAYPAL_CHECKOUT__: {|
     __VENMO__: string,
     __WALLET__: string,
     __PAYMENT_FIELDS__: string,
+    __MESSAGE_MODAL__: string,
   |},
 |};
 

src/ui/buttons/message.jsx

@@ -21,7 +21,7 @@ export function Message({ markup, position }: MessageProps): ChildType {
   if (typeof markup !== "string") {
     return (
       <div
-        className={`${messageClassNames} ${CLASS.BUTTON_MESSAGE_RESERVE}`}
+        class={`${messageClassNames} ${CLASS.BUTTON_MESSAGE_RESERVE}`}
         style={`height:${INITIAL_RESERVED_HEIGHT}`}
       />
     );

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,101 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      onMessageClick: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return async ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            const { message, clientID, merchantID, currency, buttonSessionID } =
+              props;
+            const amount = message?.amount;
+
+            getLogger()
+              .info("button_message_click")
+              .track({
+                [FPTI_KEY.TRANSITION]: "button_message_click",
+                [FPTI_KEY.STATE]: "BUTTON_MESSAGE",
+                [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+                [FPTI_KEY.EVENT_NAME]: "message_click",
+                // adding temp string here for our sdk constants
+                button_message_offer_type: offerType,
+                button_message_credit_product_identifier:
+                  creditProductIdentifier,
+                button_message_type: messageType,
+                button_message_position: message?.position,
+                button_message_align: message?.align,
+                button_message_color: message?.color,
+                button_message_offer_country: offerCountryCode,
+                button_message_amount: amount,
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+              });
+
+            const modalInstance = await getModal(clientID, merchantID);
+            return modalInstance?.show({
+              amount,
+              offer: offerType,
+              currency,
+            });
+          };
+        },
+      },
+
+      onMessageHover: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return () => {
+            // offerType, messageType, offerCountryCode, and creditProductIdentifier are passed in and may be used in an upcoming message hover logging feature
+
+            // lazy loads the modal, to be memoized and executed onMessageClick
+            const { clientID, merchantID } = props;
+            return getModal(clientID, merchantID);
+          };
+        },
+      },
+
+      onMessageReady: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            const { message, buttonSessionID } = props;
+
+            getLogger()
+              .info("button_message_render")
+              .track({
+                [FPTI_KEY.TRANSITION]: "button_message_render",
+                [FPTI_KEY.STATE]: "BUTTON_MESSAGE",
+                [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+                [FPTI_KEY.EVENT_NAME]: "message_render",
+                // adding temp string here for our sdk constants
+                button_message_offer_type: offerType,
+                button_message_credit_product_identifier:
+                  creditProductIdentifier,
+                button_message_type: messageType,
+                button_message_posiiton: message?.position,
+                button_message_align: message?.align,
+                button_message_color: message?.color,
+                button_message_offer_country: offerCountryCode,
+                button_message_amount: message?.amount,
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+              });
+          };
+        },
+      },
+
       onShippingAddressChange: {
         type: "function",
         required: false,

src/zoid/buttons/util.js

@@ -13,6 +13,7 @@ import {
   getElement,
   isStandAlone,
   once,
+  memoize,
 } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
 import {
@@ -22,6 +23,8 @@ import {
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
+  getNamespace,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +360,53 @@ export function getButtonSize(
     }
   }
 }
+
+function buildModalBundleUrl(): string {
+  let url = __PAYPAL_CHECKOUT__.__URI__.__MESSAGE_MODAL__;
+  if (getEnv() === "sandbox") {
+    url = url.replace("/js/", "/sandbox/");
+  } else if (getEnv() === "stage" || getEnv() === "local") {
+    url = url.replace("/js/", "/stage/");
+  }
+  return url;
+}
+
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize(async (clientID, merchantID) => {
+  try {
+    const namespace = getNamespace();
+    if (!window[namespace].MessagesModal) {
+      // eslint-disable-next-line no-restricted-globals, promise/no-native
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.setAttribute("data-pp-namespace", namespace);
+        script.src = buildModalBundleUrl();
+        script.addEventListener("error", (err: Event) => {
+          reject(err);
+        });
+        script.addEventListener("load", () => {
+          document.body?.removeChild(script);
+          resolve();
+        });
+        document.body?.appendChild(script);
+      });
+    }
+
+    return window[namespace].MessagesModal({
+      account: `client-id:${clientID}`,
+      merchantId: merchantID?.join(",") || undefined,
+    });
+  } catch (err) {
+    // $FlowFixMe flow doesn't seem to understand that the reset function property exists on the function object itself
+    getModal.reset();
+    getLogger()
+      .error("button_message_modal_fetch_error", { err })
+      .track({
+        err: err.message || "BUTTON_MESSAGE_MODAL_FETCH_ERROR",
+        details: err.details,
+        stack: JSON.stringify(err.stack || err),
+      });
+  }
+});

test/globals.js

@@ -118,6 +118,7 @@ function getTestGlobals(productionGlobals) {
         __CARD_FIELD__: `/base/test/integration/windows/card-field/index.htm`,
         __WALLET__: `/base/test/integration/windows/wallet/index.htm`,
         __PAYMENT_FIELDS__: `/base/test/integration/windows/paymentfields/index.htm`,
+        __MESSAGE_MODAL__: `/base/test/integration/windows/button/modal.js`,
       },
     },
 

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

@@ -3,6 +3,7 @@
 
 import { wrapPromise, getElement } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
+import { getNamespace } from "@paypal/sdk-client/src";
 
 import { CLASS } from "../../../../src/constants";
 import {
@@ -378,4 +379,111 @@ describe(`paypal button message`, () => {
       });
     });
   });
+
+  describe("modal", () => {
+    it("should ensure data-pp-namespace passes in the namespace", (done) => {
+      window.paypal
+        .Buttons({
+          message: {},
+          test: {
+            onRender({ hoverMessage }) {
+              hoverMessage()
+                .then(() => {
+                  assert.equal(getNamespace(), window.namespace);
+                  done();
+                })
+                .catch(done);
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+    it("should ensure getModal callback with clientID and merchantID is called on hover", (done) => {
+      window.paypal
+        .Buttons({
+          message: {},
+          test: {
+            onRender({ hoverMessage }) {
+              hoverMessage()
+                .then(() => {
+                  assert.ok(
+                    Object.keys(window.paypal.MessagesModal.mock.calledWith)
+                      .length === 2
+                  );
+                  assert.ok(
+                    typeof window.paypal.MessagesModal.mock.calledWith
+                      .account === "string"
+                  );
+                  assert.ok(
+                    typeof window.paypal.MessagesModal.mock.calledWith
+                      .merchantId === "undefined"
+                  );
+                  done();
+                })
+                .catch(done);
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+    it("should ensure getModal calls create a script with modal data and called with amount, offer, and currency from props", (done) => {
+      const props = { offerType: "PAY_LATER", messageType: "GPL" };
+      window.paypal
+        .Buttons({
+          message: {
+            amount: 101,
+          },
+          test: {
+            onRender({ clickMessage, hoverMessage }) {
+              hoverMessage()
+                .then(() => {
+                  return clickMessage(props).then(() => {
+                    assert.equal(
+                      window.paypal.MessagesModal.mock.show.calledWith.amount,
+                      101
+                    );
+                    assert.equal(
+                      window.paypal.MessagesModal.mock.show.calledWith.offer,
+                      "PAY_LATER"
+                    );
+                    assert.equal(
+                      window.paypal.MessagesModal.mock.show.calledWith.currency,
+                      "USD"
+                    );
+                    done();
+                  });
+                })
+                .catch(done);
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+    it("should ensure getModal calls utilize a single modal instance, not creating multiple modals", (done) => {
+      const props = { offerType: "PAY_LATER", messageType: "GPL" };
+      window.paypal
+        .Buttons({
+          message: {
+            amount: 101,
+          },
+          test: {
+            onRender({ clickMessage, hoverMessage }) {
+              hoverMessage()
+                .then(() => {
+                  return clickMessage(props).then(() => {
+                    return hoverMessage().then(() => {
+                      return clickMessage(props).then(() => {
+                        assert.equal(window.paypal.MessagesModal.mock.calls, 1);
+                        done();
+                      });
+                    });
+                  });
+                })
+                .catch(done);
+            },
+          },
+        })
+        .render("#testContainer");
+    });
+  });
 });

test/integration/windows/button/index.jsx

@@ -236,5 +236,11 @@ if (onRender) {
     click() {
       getElement(".paypal-button", document).click();
     },
+    hoverMessage(): ZalgoPromise<void> | void {
+      return window.xprops.onMessageHover();
+    },
+    clickMessage({ offerType, messageType }): ZalgoPromise<void> | void {
+      return window.xprops.onMessageClick({ offerType, messageType });
+    },
   });
 }