@paypal/checkout-components 5.0.329 → 5.0.331

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.329",
+  "version": "5.0.331",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/funding/common.jsx

@@ -136,6 +136,7 @@ export type FundingSourceConfig = {|
   labelText?:
     | string
     | (({|
+        buyerCountry: $Values<typeof COUNTRY>,
         content: ?ContentType,
         fundingEligibility: ?FundingEligibilityType,
         label?: string,

package/src/funding/paypal/config.jsx

@@ -45,18 +45,21 @@ export function getPayPalConfig(): FundingSourceConfig {
 
     labelText: ({ content, label, period }) => {
       let text = `${FUNDING_BRAND_LABEL.PAYPAL}`;
+
       if (content && label === BUTTON_LABEL.INSTALLMENT) {
         if (period) {
-          text = content["label.installment.withPeriod"].replace(
-            "{period}",
-            String(period)
-          );
+          const rawLabel = content["label.installment.withPeriod"];
+
+          if (typeof rawLabel === "string") {
+            text = rawLabel.replace("{period}", String(period));
+          }
         } else {
           text = content["label.installment.withoutPeriod"];
         }
       } else if (content && label && content[`label.${label}`]) {
         text = content[`label.${label}`];
       }
+
       return text;
     },
     Logo,

package/src/ui/buttons/button.jsx

@@ -2,7 +2,12 @@
 /** @jsx node */
 
 import type { FundingEligibilityType } from "@paypal/sdk-client/src";
-import { FUNDING, ENV, type LocaleType } from "@paypal/sdk-constants/src";
+import {
+  COUNTRY,
+  FUNDING,
+  ENV,
+  type LocaleType,
+} from "@paypal/sdk-constants/src";
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 import { LOGO_COLOR, LOGO_CLASS } from "@paypal/sdk-logos/src";
 import {
@@ -37,12 +42,13 @@ import type {
 } from "./props";
 import { Spinner } from "./spinner";
 import { MenuButton } from "./menu-button";
-import { isBorderRadiusNumber } from "./util";
+import { isBorderRadiusNumber, checkLabelEligibility } from "./util";
 
 type IndividualButtonProps = {|
   style: ButtonStyle,
   fundingSource: $Values<typeof FUNDING>,
   multiple: boolean,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale: LocaleType,
   onClick?: Function,
   env: $Values<typeof ENV>,
@@ -68,26 +74,27 @@ type IndividualButtonProps = {|
 |};
 
 export function Button({
-  fundingSource,
-  style,
-  multiple,
-  locale,
+  buyerCountry,
+  commit,
+  content,
+  customerId,
   env,
+  experiment,
+  flow,
   fundingEligibility,
+  fundingSource,
   i,
+  instrument,
+  locale,
+  multiple,
   nonce,
-  flow,
-  vault,
-  userIDToken,
-  customerId,
-  personalization,
   onClick = noop,
-  content,
-  tagline,
-  commit,
-  experiment,
-  instrument,
+  personalization,
   showPayLabel,
+  style,
+  tagline,
+  userIDToken,
+  vault,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
 
@@ -142,13 +149,16 @@ export function Button({
     }
   };
 
+  const eligibleLabel = checkLabelEligibility(label, buyerCountry);
+
   function getAriaLabel(): string {
     let labelText =
       typeof fundingConfig.labelText === "function"
         ? fundingConfig.labelText({
+            buyerCountry,
             content,
             fundingEligibility,
-            label,
+            label: eligibleLabel,
             period,
           })
         : fundingConfig.labelText || fundingSource;
@@ -166,7 +176,7 @@ export function Button({
 
   const logoNode = (
     <Logo
-      label={label}
+      label={eligibleLabel}
       locale={locale}
       logoColor={logoColor}
       fundingEligibility={fundingEligibility}
@@ -182,7 +192,7 @@ export function Button({
     <Label
       i={i}
       logo={logoNode}
-      label={label}
+      label={eligibleLabel}
       nonce={nonce}
       locale={locale}
       logoColor={logoColor}

package/src/ui/buttons/buttons.jsx

@@ -136,36 +136,37 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 export function Buttons(props: ButtonsProps): ElementNode {
   const { onClick = noop } = props;
   const {
-    wallet,
-    fundingSource,
-    style,
-    locale,
-    remembered,
+    applePaySupport,
+    buyerCountry,
+    commit,
+    components,
+    content,
+    customerId,
+    displayOnly,
+    enableFunding,
     env,
+    experiment,
+    flow,
     fundingEligibility,
-    platform,
-    commit,
-    vault,
+    fundingSource,
+    hasShippingCallback,
+    locale,
+    message,
+    messageMarkup,
     nonce,
-    enableFunding,
-    components,
-    onShippingChange,
     onShippingAddressChange,
+    onShippingChange,
     onShippingOptionsChange,
-    hasShippingCallback,
     personalization,
-    userIDToken,
-    customerId,
-    content,
-    flow,
-    experiment,
-    applePaySupport,
-    supportsPopups,
-    supportedNativeBrowser,
+    platform,
+    remembered,
     showPayLabel,
-    displayOnly,
-    message,
-    messageMarkup,
+    style,
+    supportedNativeBrowser,
+    supportsPopups,
+    userIDToken,
+    vault,
+    wallet,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -268,6 +269,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
           fundingSource={source}
           multiple={multiple}
           env={env}
+          buyerCountry={buyerCountry}
           locale={locale}
           nonce={nonce}
           fundingEligibility={fundingEligibility}

package/src/ui/buttons/props.js

@@ -433,7 +433,7 @@ export type ApplePaySessionConfigRequest = (
 
 export type ButtonMessage = {|
   amount?: number,
-  offer?: $ReadOnlyArray<$Values<typeof MESSAGE_OFFER>>,
+  offer?: string,
   color: $Values<typeof MESSAGE_COLOR>,
   position: $Values<typeof MESSAGE_POSITION>,
   align: $Values<typeof MESSAGE_ALIGN>,
@@ -450,6 +450,7 @@ export type ButtonMessageInputs = {|
 export type RenderButtonProps = {|
   style: ButtonStyle,
   locale: LocaleType,
+  buyerCountry: $Values<typeof COUNTRY>,
   commit: boolean,
   fundingSource: ?$Values<typeof FUNDING>,
   env: $Values<typeof ENV>,
@@ -555,6 +556,7 @@ export type ButtonPropsInputs = {
   clientID: string,
   fundingSource?: ?$Values<typeof FUNDING>,
   style?: ButtonStyleInputs | void,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale?: $PropertyType<ButtonProps, "locale"> | void,
   commit?: $PropertyType<ButtonProps, "commit"> | void,
   env?: $PropertyType<ButtonProps, "env"> | void,
@@ -780,12 +782,11 @@ export function normalizeButtonMessage(
 ): ButtonMessage {
   const {
     amount,
-    offer,
     color = MESSAGE_COLOR.BLACK,
     position,
     align = MESSAGE_ALIGN.CENTER,
   } = message;
-
+  let offer = message.offer;
   if (typeof amount !== "undefined") {
     if (typeof amount !== "number") {
       throw new TypeError(
@@ -800,6 +801,9 @@ export function normalizeButtonMessage(
   }
 
   if (typeof offer !== "undefined") {
+    if (typeof offer === "string") {
+      offer = offer.split(",");
+    }
     if (!Array.isArray(offer)) {
       throw new TypeError(
         `Expected message.offer to be an array of strings, got: ${String(
@@ -813,6 +817,7 @@ export function normalizeButtonMessage(
     if (invalidOffers.length > 0) {
       throw new Error(`Invalid offer(s): ${invalidOffers.join(",")}`);
     }
+    offer = offer.join(",");
   }
 
   if (typeof color !== "undefined" && !values(MESSAGE_COLOR).includes(color)) {
@@ -868,6 +873,7 @@ export function normalizeButtonProps(
   );
 
   let {
+    buyerCountry,
     clientID,
     fundingSource,
     style = getDefaultStyle(),
@@ -970,6 +976,7 @@ export function normalizeButtonProps(
     : undefined;
 
   return {
+    buyerCountry,
     clientID,
     fundingSource,
     style,

package/src/ui/buttons/util.js

@@ -1,8 +1,7 @@
 /* @flow */
-import { FUNDING } from "@paypal/sdk-constants/src";
+import { COUNTRY, FUNDING } from "@paypal/sdk-constants/src";
 
-import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
-import { ValidationError } from "../../lib";
+import { BUTTON_LABEL, BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
 
 export function isBorderRadiusNumber(borderRadius?: number): boolean {
   return typeof borderRadius === "number";
@@ -25,8 +24,9 @@ export function calculateMessagePosition(
   const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
 
   if (showPoweredBy && position === MESSAGE_POSITION.BOTTOM) {
-    throw new ValidationError(
-      "Message position must be 'top' when Debit and/or Credit Card button is present"
+    // eslint-disable-next-line no-console
+    console.warn(
+      "PayPal Button Message cannot be positioned at bottom when displaying the Debit or Credit Card button."
     );
   }
 
@@ -39,3 +39,20 @@ export function calculateMessagePosition(
   }
   return MESSAGE_POSITION.BOTTOM;
 }
+
+export function checkLabelEligibility(
+  label?: $Values<typeof BUTTON_LABEL>,
+  buyerCountry: $Values<typeof COUNTRY>
+): $Values<typeof BUTTON_LABEL> | typeof undefined {
+  const eligibleCountriesForInstallmentLabel = ["BR", "MX"];
+
+  // Don't render the installment label if buyerCountry is not eligible for installment product
+  if (
+    label === BUTTON_LABEL.INSTALLMENT &&
+    !eligibleCountriesForInstallmentLabel.includes(buyerCountry)
+  ) {
+    return BUTTON_LABEL.PAYPAL;
+  }
+
+  return label;
+}

package/src/zoid/buttons/component.jsx

@@ -743,7 +743,11 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
               })
               .flush();
 
-            const modalInstance = await getModal(clientID, merchantID);
+            const modalInstance = await getModal(
+              clientID,
+              merchantID,
+              buttonSessionID
+            );
             return modalInstance?.show({
               amount,
               offer: offerType,
@@ -758,11 +762,10 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         value: ({ props }) => {
           return () => {
-            const { clientID, merchantID } = props;
             // 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
-            return getModal(clientID, merchantID);
+            const { buttonSessionID, clientID, merchantID } = props;
+            return getModal(clientID, merchantID, buttonSessionID);
           };
         },
       },

package/src/zoid/buttons/util.js

@@ -14,7 +14,6 @@ import {
   once,
   memoize,
 } from "@krakenjs/belter/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
 import {
   getEnableFunding,
   getLogger,
@@ -25,6 +24,7 @@ import {
   getEnv,
   getNamespace,
 } from "@paypal/sdk-client/src";
+import { FUNDING, FPTI_KEY } from "@paypal/sdk-constants/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
 import type { Experiment as EligibilityExperiment } from "../../types";
@@ -371,8 +371,9 @@ function buildModalBundleUrl(): string {
 
 export const getModal: (
   clientID: string,
-  merchantID?: $ReadOnlyArray<string> | void
-) => Object = memoize(async (clientID, merchantID) => {
+  merchantID: $ReadOnlyArray<string> | void,
+  buttonSessionID: string
+) => Object = memoize(async (clientID, merchantID, buttonSessionID) => {
   try {
     const namespace = getNamespace();
     if (!window[namespace].MessagesModal) {
@@ -393,6 +394,19 @@ export const getModal: (
     }
 
     return window[namespace].MessagesModal({
+      buttonSessionId: buttonSessionID,
+      onApply: () =>
+        getLogger()
+          .info("button_message_modal_apply")
+          .track({
+            [FPTI_KEY.TRANSITION]: "button_message_modal_apply",
+            [FPTI_KEY.STATE]: "BUTTON_MESSAGE",
+            [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+            [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
+            [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+            [FPTI_KEY.EVENT_NAME]: "modal_apply",
+          })
+          .flush(),
       account: `client-id:${clientID}`,
       merchantId: merchantID?.join(",") || undefined,
     });

package/src/zoid/card-fields/component.jsx

@@ -50,6 +50,7 @@ type CardFieldsProps = {|
   clientID: string,
   style?: {|
     height: number,
+    input: {| height: number |},
   |},
   env?: string,
   locale?: string,
@@ -128,9 +129,10 @@ const url = () =>
   `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__CARD_FIELD__}`;
 
 const prerenderTemplate = ({ props, doc }) => {
-  return (
-    <CardPrerender nonce={props.nonce} height={props.style?.height} />
-  ).render(dom({ doc }));
+  const height = props.style?.height ?? props.style?.input?.height ?? null;
+  return (<CardPrerender nonce={props.nonce} height={height} />).render(
+    dom({ doc })
+  );
 };
 
 export type CardFieldsComponent = ZoidComponent<

package/src/zoid/venmo/component.jsx

@@ -295,6 +295,12 @@ export function getVenmoCheckoutComponent(): VenmoCheckoutComponent {
           queryParam: true,
           required: false,
         },
+
+        venmoVaultEnabled: {
+          type: "boolean",
+          queryParam: true,
+          required: false,
+        },
       },
 
       dimensions: ({ props }) => {