modal renders

Author: danzhaaspaypal

src/ui/buttons/props.js

@@ -760,7 +760,7 @@ export function normalizeButtonMessage(
     }
   }
 
-  if (offer || typeof offer === "string") {
+  if (typeof offer !== "undefined") {
     if (!Array.isArray(offer)) {
       throw new TypeError(
         `Expected message.offer to be an array of strings, got: ${String(
@@ -776,18 +776,18 @@ export function normalizeButtonMessage(
     }
   }
 
-  if (color === "" || (color && !values(MESSAGE_COLOR).includes(color))) {
+  if (typeof color !== "undefined" && !values(MESSAGE_COLOR).includes(color)) {
     throw new Error(`Invalid color: ${color}`);
   }
 
   if (
-    position === "" ||
-    (position && !values(MESSAGE_POSITION).includes(position))
+    typeof position !== "undefined" &&
+    !values(MESSAGE_POSITION).includes(position)
   ) {
     throw new Error(`Invalid position: ${position}`);
   }
 
-  if (align === "" || (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

@@ -685,77 +685,55 @@ 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;
-              }
-            }
+        value: () => {
+          return () => {
+            // lazy loads the modal, to be memoized and executed onMessageClick
+            getModal();
           };
         },
       },
 
       onMessageClick: {
         type: "function",
         required: false,
-        value: ({ props, state }) => {
+        value: ({ props }) => {
           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;
-            }
+            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,
+              });
           };
         },
       },

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 {
@@ -359,36 +362,35 @@ 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",
+export const getModal: () => Object = memoize(() => {
+  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`;
   };
-  const env = getEnv();
 
   try {
-    return await new Promise((resolve) => {
+    // eslint-disable-next-line no-restricted-globals
+    return new Promise((resolve) => {
       const script = document.createElement("script");
-      script.src = modalBundleUrl[env];
+      script.src = modalBundleUrl();
+      document.body.appendChild(script);
       script.addEventListener("load", () => {
         document.body.removeChild(script);
-        resolve();
+        resolve(window.paypal.MessagesModal);
       });
-      if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", () => {
-          document.body.appendChild(script);
-        });
-      } else {
-        document.body.appendChild(script);
-      }
     });
   } catch (err) {
     getLogger()
@@ -399,4 +401,4 @@ export async function getModal(): string | Promise<Object> | void {
         stack: JSON.stringify(err.stack || err),
       });
   }
-}
+});