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

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,62 @@ 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 (offer) {
+    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 (color && !values(MESSAGE_COLOR).includes(color)) {
+    throw new Error(`Invalid color: ${color}`);
+  }
+
+  if (position && !values(MESSAGE_POSITION).includes(position)) {
+    throw new Error(`Invalid position: ${position}`);
+  }
+
+  if (align && !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 +851,8 @@ export function normalizeButtonProps(
     supportedNativeBrowser = false,
     showPayLabel = true,
     displayOnly = [],
+    message,
+    messageMarkup,
   } = props;
 
   const { country, lang } = locale;
@@ -860,5 +944,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";
@@ -887,6 +891,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/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",
-  });