feat: message hover and click behavior and modal

src/zoid/buttons/component.jsx

@@ -697,28 +697,15 @@
         type: "function",
         required: false,
         value: ({ props }) => {
           return async ({ offerType, messageType }) => {
-            const {
-              message,
-              clientID,
-              merchantID,
-              currency,
-              locale: { lang, country },
-              buttonSessionID,
-            } = props;
+            const { message, clientID, merchantID, currency, buttonSessionID } =
+              props;
             const amount = message?.amount || undefined;
 
-            const modal = await getModal();
-            const modalInstance = modal({
-              account: `client-id:${clientID}`,
-            });
+            const modalInstance = await getModal(clientID, merchantID);
             modalInstance.show({
               amount,
               offer: offerType?.join(",") || undefined,
-              account: `client-id:${clientID}`,
-              merchantId: merchantID?.join(",") || undefined,
-              language: `${lang}-${country}`,
-              buyerCountry: getBuyerCountry(),
               currency,
             });
 

src/zoid/buttons/util.js

@@ -1,5 +1,5 @@
 /* eslint-disable compat/compat */
 /* eslint-disable promise/no-native */
 /* @flow */
 import {
   supportsPopups as userAgentSupportsPopups,
@@ -26,6 +26,7 @@
   getPlatform,
   getComponents,
   getEnv,
+  getNamespace,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -362,9 +363,18 @@
   }
 }
 
-export const getModal: () => Object = memoize(() => {
-  if (window.paypal?.MessagesModal) {
-    return window.paypal.MessagesModal;
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize((clientID, merchantID) => {
+  const namespace = getNamespace();
+
+  if (window[namespace]?.MessagesModal) {
+    const modal = window[namespace].MessagesModal;
+    return modal({
+      account: `client-id:${clientID}`,
+      merchantId: merchantID?.join(",") || undefined,
+    });
   } else {
     const modalBundleUrl = () => {
       let envPiece;
@@ -389,10 +399,18 @@
       return new Promise((resolve) => {
         const script = document.createElement("script");
         script.src = modalBundleUrl();
+        script.setAttribute("data-namespace", namespace);
+        script.setAttribute("data-pp-namespace", namespace);
         document.body?.appendChild(script);
         script.addEventListener("load", () => {
           document.body?.removeChild(script);
-          resolve(window.paypal.MessagesModal);
+          const modal = window[namespace].MessagesModal;
+          resolve(() =>
+            modal({
+              account: `client-id:${clientID}`,
+              merchantId: merchantID?.join(",") || undefined,
+            })
+          );
         });
       });
     } catch (err) {