@paypal/checkout-components 5.0.310 → 5.0.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.310",
+  "version": "5.0.312",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -119,6 +119,6 @@
     "@paypal/sdk-logos": "^2.2.6"
   },
   "lint-staged": {
-    "**/{src,test,scripts}/**/*.{js,jsx,json,sh}": "prettier --write"
+    "**/*": "prettier --write --ignore-unknown"
   }
 }

package/src/hosted-buttons/index.test.js

@@ -55,6 +55,14 @@ const getHostedButtonDetailsResponse = {
           name: "button_type",
           value: "FIXED_PRICE",
         },
+        {
+          name: "tagline",
+          value: "true",
+        },
+        {
+          name: "height",
+          value: "40",
+        },
       ],
     },
   },
@@ -78,6 +86,7 @@ describe("HostedButtons", () => {
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
         hostedButtonId: "B1234567890",
+        style: expect.objectContaining({ tagline: true }),
       })
     );
     expect(Buttons).toHaveBeenCalledTimes(1);
@@ -150,5 +159,65 @@ describe("HostedButtons", () => {
     expect(renderMock).toHaveBeenCalledTimes(0);
     expect.assertions(3);
   });
+
+  test("tagline is rendered based on hosted button response", async () => {
+    const renderMock = vi.fn();
+
+    const Buttons = vi.fn(() => ({
+      render: renderMock,
+      isEligible: vi.fn(() => false),
+    }));
+    // $FlowIssue
+    getButtonsComponent.mockImplementationOnce(() => Buttons);
+    const HostedButtons = getHostedButtonsComponent();
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          button_details: {
+            link_variables: [
+              {
+                name: "shape",
+                value: "rect",
+              },
+              {
+                name: "layout",
+                value: "vertical",
+              },
+              {
+                name: "color",
+                value: "gold",
+              },
+              {
+                name: "button_text",
+                value: "paypal",
+              },
+              {
+                name: "button_type",
+                value: "FIXED_PRICE",
+              },
+              {
+                name: "tagline",
+                value: "false",
+              },
+            ],
+          },
+        },
+      })
+    );
+    await HostedButtons({
+      hostedButtonId: "B1234567890",
+    }).render("#example");
+    expect(Buttons).toHaveBeenCalledWith(
+      expect.objectContaining({
+        hostedButtonId: "B1234567890",
+        style: expect.objectContaining({ tagline: false }),
+      })
+    );
+    expect(Buttons).toHaveBeenCalledTimes(1);
+    expect(renderMock).toHaveBeenCalledTimes(1);
+    expect.assertions(3);
+  });
 });
 /* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -21,7 +21,7 @@ export interface BuildButtonContainerArgs {
 
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
-  fundingSources: $ReadOnlyArray<FundingSources>,
+  fundingSources?: $ReadOnlyArray<FundingSources>,
 |};
 
 export type GetCallbackProps = {|
@@ -34,6 +34,13 @@ export type HostedButtonsInstance = {|
   render: (string | HTMLElement) => Promise<void>,
 |};
 
+export type EligibleHostedButtons = "paypal" | "venmo" | "paylater";
+
+export type HostedButtonPreferences = {|
+  buttonPreferences: $ReadOnlyArray<EligibleHostedButtons & "default">,
+  eligibleFundingMethods: $ReadOnlyArray<EligibleHostedButtons>,
+|};
+
 export type HostedButtonDetailsParams =
   (HostedButtonsComponentProps) => Promise<{|
     html: string,
@@ -43,7 +50,12 @@ export type HostedButtonDetailsParams =
       shape: string,
       color: string,
       label: string,
+      height: ?number,
+      tagline: boolean,
     |},
+    version: ?string,
+    buttonContainerId: ?string,
+    preferences?: HostedButtonPreferences,
   |}>;
 
 export type ButtonVariables = $ReadOnlyArray<{|

package/src/hosted-buttons/utils.js

@@ -90,16 +90,27 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
 
   // $FlowIssue request returns ZalgoPromise
   const { body } = response;
-  const variables = body.button_details.link_variables;
+  const { link_variables: variables, preferences } = body.button_details;
+
   return {
     style: {
       layout: getButtonVariable(variables, "layout"),
       shape: getButtonVariable(variables, "shape"),
       color: getButtonVariable(variables, "color"),
       label: getButtonVariable(variables, "button_text"),
+      tagline: getButtonVariable(variables, "tagline") === "true",
+      height: parseInt(getButtonVariable(variables, "height"), 10) || undefined,
     },
+    version: body.version,
+    buttonContainerId: body.button_container_id,
     html: body.html,
     htmlScript: body.html_script,
+    ...(preferences && {
+      preferences: {
+        buttonPreferences: preferences.button_preferences,
+        eligibleFundingMethods: preferences.eligible_funding_methods,
+      },
+    }),
   };
 };
 

package/src/hosted-buttons/utils.test.js

@@ -37,35 +37,6 @@ const merchantId = "M1234567890";
 const orderID = "EC-1234567890";
 const clientId = "C1234567890";
 
-const getHostedButtonDetailsResponse = {
-  body: {
-    button_details: {
-      link_variables: [
-        {
-          name: "business",
-          value: merchantId,
-        },
-        {
-          name: "shape",
-          value: "rect",
-        },
-        {
-          name: "layout",
-          value: "vertical",
-        },
-        {
-          name: "color",
-          value: "gold",
-        },
-        {
-          name: "button_text",
-          value: "paypal",
-        },
-      ],
-    },
-  },
-};
-
 const mockCreateAccessTokenRequest = () =>
   // eslint-disable-next-line compat/compat
   Promise.resolve({
@@ -74,24 +45,245 @@ const mockCreateAccessTokenRequest = () =>
     },
   });
 
-test("getHostedButtonDetails", async () => {
-  // $FlowIssue
-  request.mockImplementationOnce(() =>
-    // eslint-disable-next-line compat/compat
-    Promise.resolve(getHostedButtonDetailsResponse)
-  );
-  await getHostedButtonDetails({
-    hostedButtonId,
-    fundingSources: [],
-  }).then(({ style }) => {
-    expect(style).toEqual({
-      layout: "vertical",
-      shape: "rect",
-      color: "gold",
-      label: "paypal",
+describe("getHostedButtonDetails", () => {
+  const getHostedButtonDetailsResponse = {
+    v1: {
+      body: {
+        button_details: {
+          link_variables: [
+            {
+              name: "business",
+              value: merchantId,
+            },
+            {
+              name: "shape",
+              value: "rect",
+            },
+            {
+              name: "layout",
+              value: "vertical",
+            },
+            {
+              name: "color",
+              value: "gold",
+            },
+            {
+              name: "button_text",
+              value: "paypal",
+            },
+            {
+              name: "tagline",
+              value: "true",
+            },
+          ],
+        },
+      },
+    },
+
+    v2: {
+      body: {
+        button_details: {
+          link_variables: [
+            {
+              name: "height",
+              value: "50",
+            },
+            {
+              name: "tagline",
+              value: "true",
+            },
+          ],
+          preferences: {
+            button_preferences: ["paypal", "paylater"],
+            eligible_funding_methods: ["paypal", "venmo", "paylater"],
+          },
+        },
+        version: "2",
+      },
+    },
+  };
+
+  test("version 1", async () => {
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse.v1)
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+      fundingSources: [],
+    }).then(({ style }) => {
+      expect(style).toEqual({
+        layout: "vertical",
+        shape: "rect",
+        color: "gold",
+        label: "paypal",
+        tagline: true,
+      });
     });
+    expect.assertions(1);
+  });
+
+  test("version 2", async () => {
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse.v2)
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+      fundingSources: [],
+    }).then(({ style, preferences, version }) => {
+      expect(style.height).toEqual(50);
+      expect(style.tagline).toEqual(true);
+      expect(preferences).toEqual({
+        buttonPreferences: ["paypal", "paylater"],
+        eligibleFundingMethods: ["paypal", "venmo", "paylater"],
+      });
+      expect(version).toEqual("2");
+    });
+    expect.assertions(4);
+  });
+
+  test("handles false tagline values", async () => {
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          button_details: {
+            link_variables: [
+              {
+                name: "business",
+                value: merchantId,
+              },
+              {
+                name: "layout",
+                value: "horizontal",
+              },
+              {
+                name: "tagline",
+                value: "false",
+              },
+            ],
+          },
+        },
+      })
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+    }).then(({ style }) => {
+      expect(style).toEqual(
+        expect.objectContaining({
+          tagline: false,
+        })
+      );
+    });
+
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          button_details: {
+            link_variables: [
+              {
+                name: "height",
+                value: 50,
+              },
+              {
+                name: "tagline",
+                value: "false",
+              },
+            ],
+            preferences: {
+              button_preferences: ["paypal", "paylater"],
+              eligible_funding_methods: ["paypal", "venmo", "paylater"],
+            },
+          },
+          version: "2",
+        },
+      })
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+    }).then(({ style, preferences, version }) => {
+      expect(style.height).toEqual(50);
+      expect(style.tagline).toEqual(false);
+      expect(preferences).toEqual({
+        buttonPreferences: ["paypal", "paylater"],
+        eligibleFundingMethods: ["paypal", "venmo", "paylater"],
+      });
+      expect(version).toEqual("2");
+    });
+    expect.assertions(5);
+  });
+
+  test("handles undefined tagline values", async () => {
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          button_details: {
+            link_variables: [
+              {
+                name: "business",
+                value: merchantId,
+              },
+              {
+                name: "layout",
+                value: "horizontal",
+              },
+            ],
+          },
+        },
+      })
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+    }).then(({ style }) => {
+      expect(style).toEqual(
+        expect.objectContaining({
+          tagline: false,
+        })
+      );
+    });
+
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          button_details: {
+            link_variables: [
+              {
+                name: "height",
+                value: 50,
+              },
+            ],
+            preferences: {
+              button_preferences: ["paypal", "paylater"],
+              eligible_funding_methods: ["paypal", "venmo", "paylater"],
+            },
+          },
+          version: "2",
+        },
+      })
+    );
+    await getHostedButtonDetails({
+      hostedButtonId,
+    }).then(({ style, preferences, version }) => {
+      expect(style.height).toEqual(50);
+      expect(style.tagline).toEqual(false);
+      expect(preferences).toEqual({
+        buttonPreferences: ["paypal", "paylater"],
+        eligibleFundingMethods: ["paypal", "venmo", "paylater"],
+      });
+      expect(version).toEqual("2");
+    });
+    expect.assertions(5);
   });
-  expect.assertions(1);
 });
 
 describe("createAccessToken", () => {

package/src/ui/buttons/button.jsx

@@ -54,6 +54,7 @@ type IndividualButtonProps = {|
   i: number,
   nonce: string,
   userIDToken: ?string,
+  customerId: ?string,
   personalization: ?Personalization,
   content: ?ContentType,
   tagline: ?boolean,
@@ -78,6 +79,7 @@ export function Button({
   flow,
   vault,
   userIDToken,
+  customerId,
   personalization,
   onClick = noop,
   content,
@@ -206,7 +208,7 @@ export function Button({
       flow === BUTTON_FLOW.VAULT_WITHOUT_PURCHASE) &&
     (instrument ||
       (__WEB__ &&
-        userIDToken &&
+        (userIDToken || customerId) &&
         (fundingSource === FUNDING.PAYPAL || fundingSource === FUNDING.VENMO)))
   ) {
     labelNode = (

package/src/ui/buttons/buttons.jsx

@@ -172,6 +172,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     onShippingOptionsChange,
     personalization,
     userIDToken,
+    customerId,
     content,
     flow,
     experiment,
@@ -291,6 +292,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
           onShippingOptionsChange={onShippingOptionsChange}
           onClick={onClick}
           userIDToken={userIDToken}
+          customerId={customerId}
           personalization={personalization}
           tagline={tagline}
           commit={commit}

package/src/ui/buttons/props.js

@@ -467,6 +467,7 @@ export type RenderButtonProps = {|
   onShippingOptionsChange: ?OnShippingOptionsChange,
   personalization: ?Personalization,
   clientAccessToken: ?string,
+  customerId: ?string,
   content?: ContentType,
   flow: $Values<typeof BUTTON_FLOW>,
   experiment: Experiment,
@@ -521,6 +522,7 @@ export type ButtonProps = {|
   onShippingAddressChange: ?OnShippingAddressChange,
   onShippingOptionsChange: ?OnShippingOptionsChange,
   clientAccessToken?: ?string,
+  customerId?: ?string,
   nonce: string,
   merchantID?: $ReadOnlyArray<string>,
   merchantRequestedPopupsDisabled: ?boolean,
@@ -568,6 +570,7 @@ export type ButtonPropsInputs = {
   onShippingOptionsChange: ?Function,
   personalization?: Personalization,
   clientAccessToken?: ?string,
+  customerId?: ?string,
   wallet?: ?Wallet,
   csp: {|
     nonce: string,
@@ -842,6 +845,7 @@ export function normalizeButtonProps(
     onShippingOptionsChange,
     personalization,
     clientAccessToken,
+    customerId,
     content,
     wallet,
     flow = BUTTON_FLOW.PURCHASE,
@@ -947,6 +951,7 @@ export function normalizeButtonProps(
     experiment,
     vault,
     userIDToken,
+    customerId,
     applePay,
     applePaySupport,
     supportsPopups,

package/src/zoid/buttons/component.jsx

@@ -19,6 +19,7 @@ import {
   getCSPNonce,
   getBuyerCountry,
   getClientAccessToken,
+  getCustomerId,
   getPlatform,
   getPartnerAttributionID,
   getCorrelationID,
@@ -336,6 +337,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getClientAccessToken,
       },
 
+      customerId: {
+        type: "string",
+        required: false,
+        queryParam: true,
+        value: getCustomerId,
+      },
+
       clientID: {
         type: "string",
         value: getClientID,