@paypal/checkout-components 5.0.297 → 5.0.298-alpha.3

package/src/ui/buttons/buttons.jsx

@@ -15,6 +15,7 @@ import {
   BUTTON_NUMBER,
   BUTTON_LAYOUT,
   BUTTON_FLOW,
+  MESSAGE_POSITION,
 } from "../../constants";
 import {
   determineEligibleFunding,
@@ -36,6 +37,8 @@ import { Button } from "./button";
 import { TagLine } from "./tagline";
 import { Script } from "./script";
 import { PoweredByPayPal } from "./poweredBy";
+import { Message } from "./message";
+import { calculateMessagePosition } from "./util";
 
 type GetWalletInstrumentOptions = {|
   wallet: ?Wallet,
@@ -179,6 +182,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
     supportedNativeBrowser,
     showPayLabel,
     displayOnly,
+    message,
+    messageMarkup,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -240,6 +245,20 @@ export function Buttons(props: ButtonsProps): ElementNode {
     return i;
   };
 
+  const showTagline =
+    tagline &&
+    layout === BUTTON_LAYOUT.HORIZONTAL &&
+    !fundingSource &&
+    !message;
+  const showPoweredBy =
+    layout === BUTTON_LAYOUT.VERTICAL && fundingSources.includes(FUNDING.CARD);
+
+  const calculatedMessagePosition = calculateMessagePosition({
+    message,
+    showPoweredBy,
+    layout,
+  });
+
   return (
     <div
       class={[
@@ -259,6 +278,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
         fundingEligibility={fundingEligibility}
       />
 
+      {message && calculatedMessagePosition === MESSAGE_POSITION.TOP ? (
+        <Message markup={messageMarkup} position={calculatedMessagePosition} />
+      ) : null}
+
       {fundingSources.map((source, i) => (
         <Button
           content={content}
@@ -288,7 +311,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ))}
 
-      {tagline && layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource ? (
+      {showTagline ? (
         <TagLine
           fundingSource={fundingSources[0]}
           style={style}
@@ -310,9 +333,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ) : null}
 
-      {layout === BUTTON_LAYOUT.VERTICAL &&
-      fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
-        <PoweredByPayPal locale={locale} nonce={nonce} />
+      {showPoweredBy ? <PoweredByPayPal locale={locale} nonce={nonce} /> : null}
+
+      {message && calculatedMessagePosition === MESSAGE_POSITION.BOTTOM ? (
+        <Message markup={messageMarkup} position={calculatedMessagePosition} />
       ) : null}
 
       {buttonDesignScript ? (

package/src/ui/buttons/message.jsx

@@ -0,0 +1,31 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+
+import { CLASS } from "../../constants";
+
+const INITIAL_RESERVED_HEIGHT = "36px";
+
+type MessageProps = {|
+  markup: ?string,
+  position: string,
+|};
+
+export function Message({ markup, position }: MessageProps): ChildType {
+  const messageClassNames = [
+    CLASS.BUTTON_MESSAGE,
+    `${CLASS.BUTTON_MESSAGE}-${position}`,
+  ].join(" ");
+
+  if (typeof markup !== "string") {
+    return (
+      <div
+        className={`${messageClassNames} ${CLASS.BUTTON_MESSAGE_RESERVE}`}
+        style={`height:${INITIAL_RESERVED_HEIGHT}`}
+      />
+    );
+  }
+
+  return <div class={messageClassNames} innerHTML={markup} />;
+}

package/src/ui/buttons/props.js

@@ -40,6 +40,10 @@ import {
   BUTTON_SIZE,
   BUTTON_FLOW,
   MENU_PLACEMENT,
+  MESSAGE_OFFER,
+  MESSAGE_COLOR,
+  MESSAGE_POSITION,
+  MESSAGE_ALIGN,
 } from "../../constants";
 import { getFundingConfig, isFundingEligible } from "../../funding";
 
@@ -432,6 +436,22 @@ export type ApplePaySessionConfigRequest = (
   request: Object
 ) => ApplePaySessionConfig;
 
+export type ButtonMessage = {|
+  amount?: number,
+  offer?: $ReadOnlyArray<$Values<typeof MESSAGE_OFFER>>,
+  color?: $Values<typeof MESSAGE_COLOR>,
+  position?: $Values<typeof MESSAGE_POSITION>,
+  align?: $Values<typeof MESSAGE_ALIGN>,
+|};
+
+export type ButtonMessageInputs = {|
+  amount?: number | void,
+  offer?: $ReadOnlyArray<$Values<typeof MESSAGE_OFFER>> | void,
+  color?: $Values<typeof MESSAGE_COLOR> | void,
+  position?: $Values<typeof MESSAGE_POSITION> | void,
+  align?: $Values<typeof MESSAGE_ALIGN> | void,
+|};
+
 export type RenderButtonProps = {|
   style: ButtonStyle,
   locale: LocaleType,
@@ -466,6 +486,8 @@ export type RenderButtonProps = {|
   supportedNativeBrowser: boolean,
   showPayLabel: boolean,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  message?: ButtonMessage,
+  messageMarkup?: string,
 |};
 
 export type PrerenderDetails = {|
@@ -525,6 +547,8 @@ export type ButtonProps = {|
   createVaultSetupToken: CreateVaultSetupToken,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
   hostedButtonId?: string,
+  message?: ButtonMessage,
+  messageMarkup?: string,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -567,6 +591,8 @@ export type ButtonPropsInputs = {
   supportedNativeBrowser: boolean,
   showPayLabel: boolean,
   displayOnly: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  message?: ButtonMessageInputs | void,
+  messageMarkup?: string | void,
 };
 
 export const DEFAULT_STYLE = {
@@ -715,6 +741,65 @@ export function normalizeButtonStyle(
   };
 }
 
+export function normalizeButtonMessage(
+  props: ?ButtonPropsInputs,
+  message: ButtonMessageInputs
+): ButtonMessage {
+  const { amount, offer, color, position, align } = message;
+
+  if (typeof amount !== "undefined") {
+    if (typeof amount !== "number") {
+      throw new TypeError(
+        `Expected message.amount to be a number, got: ${amount}`
+      );
+    }
+    if (amount < 0) {
+      throw new Error(
+        `Expected message.amount to be a positive number, got: ${amount}`
+      );
+    }
+  }
+
+  if (typeof offer !== "undefined") {
+    if (!Array.isArray(offer)) {
+      throw new TypeError(
+        `Expected message.offer to be an array of strings, got: ${String(
+          offer
+        )}`
+      );
+    }
+    const invalidOffers = offer.filter(
+      (o) => !values(MESSAGE_OFFER).includes(o)
+    );
+    if (invalidOffers.length > 0) {
+      throw new Error(`Invalid offer(s): ${invalidOffers.join(",")}`);
+    }
+  }
+
+  if (typeof color !== "undefined" && !values(MESSAGE_COLOR).includes(color)) {
+    throw new Error(`Invalid color: ${color}`);
+  }
+
+  if (
+    typeof position !== "undefined" &&
+    !values(MESSAGE_POSITION).includes(position)
+  ) {
+    throw new Error(`Invalid position: ${position}`);
+  }
+
+  if (typeof align !== "undefined" && !values(MESSAGE_ALIGN).includes(align)) {
+    throw new Error(`Invalid align: ${align}`);
+  }
+
+  return {
+    amount,
+    offer,
+    color,
+    position,
+    align,
+  };
+}
+
 const COUNTRIES = values(COUNTRY);
 const FUNDING_SOURCES = values(FUNDING);
 const ENVS = values(ENV);
@@ -769,6 +854,8 @@ export function normalizeButtonProps(
     supportedNativeBrowser = false,
     showPayLabel = true,
     displayOnly = [],
+    message,
+    messageMarkup,
   } = props;
 
   const { country, lang } = locale;
@@ -860,5 +947,7 @@ export function normalizeButtonProps(
     supportedNativeBrowser,
     showPayLabel,
     displayOnly,
+    message: message ? normalizeButtonMessage(props, message) : undefined,
+    messageMarkup,
   };
 }

package/src/ui/buttons/util.js

@@ -1,5 +1,41 @@
 /* @flow */
+import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
+import { ValidationError } from "../../lib";
+
+import type { ButtonMessage } from "./props";
 
 export function isBorderRadiusNumber(borderRadius?: number): boolean {
   return typeof borderRadius === "number";
 }
+
+type calculateMessagePositionProps = {|
+  message: ButtonMessage | void,
+  showPoweredBy: boolean,
+  layout: string,
+|};
+
+export function calculateMessagePosition({
+  message,
+  showPoweredBy,
+  layout,
+}: calculateMessagePositionProps): string {
+  if (!message) {
+    return "none";
+  }
+  const { position } = message;
+
+  if (showPoweredBy && position === MESSAGE_POSITION.BOTTOM) {
+    throw new ValidationError(
+      "Message position must be 'top' when Debit and/or Credit Card button is present"
+    );
+  }
+
+  if (
+    showPoweredBy ||
+    position === MESSAGE_POSITION.TOP ||
+    (layout === BUTTON_LAYOUT.VERTICAL && !position)
+  ) {
+    return MESSAGE_POSITION.TOP;
+  }
+  return MESSAGE_POSITION.BOTTOM;
+}

package/src/zoid/buttons/component.jsx

@@ -73,7 +73,11 @@ import {
   logLatencyInstrumentationPhase,
   prepareInstrumentationPayload,
 } from "../../lib";
-import { normalizeButtonStyle, type ButtonProps } from "../../ui/buttons/props";
+import {
+  normalizeButtonStyle,
+  normalizeButtonMessage,
+  type ButtonProps,
+} from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
 
 import { containerTemplate } from "./container";
@@ -86,6 +90,7 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
+  getModal,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -677,6 +682,92 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      onMessageReady: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return async ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            const { message, buttonSessionID } = props;
+            const amount = message?.amount || undefined;
+
+            getLogger()
+              .info("button_message_render")
+              .track({
+                [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,
+                [FPTI_KEY.AMOUNT]: amount,
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+              });
+          };
+        },
+      },
+
+      onMessageHover: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return () => {
+            // lazy loads the modal, to be memoized and executed onMessageClick
+            const { clientID, merchantID } = props;
+            getModal(clientID, merchantID);
+          };
+        },
+      },
+
+      onMessageClick: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return async ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            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",
+                // 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,
+                [FPTI_KEY.AMOUNT]: amount,
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+              });
+          };
+        },
+      },
+
       onShippingAddressChange: {
         type: "function",
         required: false,
@@ -887,6 +978,16 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         default: () => window.__TEST_WALLET__,
       },
+
+      message: {
+        type: "object",
+        queryParam: true,
+        required: false,
+        decorate: ({ props, value }) => {
+          // $FlowFixMe
+          return normalizeButtonMessage(props, value);
+        },
+      },
     },
   });
 });

package/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,60 @@ export function getButtonSize(
     }
   }
 }
+
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize(async (clientID, merchantID) => {
+  try {
+    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`;
+      };
+
+      // eslint-disable-next-line no-restricted-globals
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = modalBundleUrl();
+        script.setAttribute("data-pp-namespace", namespace);
+        script.addEventListener("error", (err: Event) => {
+          reject(err);
+        });
+        script.addEventListener("load", () => {
+          document.body?.removeChild(script);
+          resolve();
+        });
+        document.body?.appendChild(script);
+      });
+    }
+
+    const modal = window[namespace].MessagesModal;
+    return modal({
+      account: `client-id:${clientID}`,
+      merchantId: merchantID?.join(",") || undefined,
+    });
+  } 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),
+      });
+  }
+});

package/src/connect/sendCountMetric.js

@@ -1,25 +0,0 @@
-/* @flow */
-import { getLogger } from "@paypal/sdk-client/src";
-
-// TODO: This will be pulled in to a shared sdk-client util
-export const sendCountMetric = ({
-  dimensions,
-  event = "unused",
-  name,
-  value = 1,
-}: {|
-  event?: string,
-  name: string,
-  value?: number,
-  dimensions: {
-    [string]: mixed,
-  },
-  // $FlowIssue return type
-|}) =>
-  getLogger().metric({
-    dimensions,
-    metricEventName: event,
-    metricNamespace: name,
-    metricValue: value,
-    metricType: "counter",
-  });