@paypal/checkout-components 5.0.330 → 5.0.331

package/package.json

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

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>,
@@ -782,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(
@@ -802,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(
@@ -815,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)) {

package/src/ui/buttons/util.js

@@ -2,7 +2,6 @@
 import { COUNTRY, FUNDING } from "@paypal/sdk-constants/src";
 
 import { BUTTON_LABEL, BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
-import { ValidationError } from "../../lib";
 
 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."
     );
   }
 

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/venmo/component.jsx

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