@paypal/checkout-components 5.0.316 → 5.0.317

package/package.json

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

package/src/hosted-buttons/index.js

@@ -1,7 +1,4 @@
 /* @flow */
-
-import { getLogger } from "@paypal/sdk-client/src";
-
 import { getButtonsComponent } from "../zoid/buttons";
 
 import {
@@ -10,29 +7,36 @@ import {
   getHostedButtonDetails,
   renderForm,
   getMerchantID,
-  shouldRenderSDKButtons,
   getFlexDirection,
-  appendButtonContainer,
-  getButtonColor,
+  applyContainerStyles,
+  renderStandaloneButton,
+  renderDefaultButton,
+  getDefaultButtonOptions,
 } from "./utils";
 import type {
   HostedButtonsComponent,
   HostedButtonsComponentProps,
   HostedButtonsInstance,
+  HostedButtonOptions,
 } from "./types";
 
 export const getHostedButtonsComponent = (): HostedButtonsComponent => {
   function HostedButtons({
     enableDPoP = false,
     hostedButtonId,
-    fundingSources = [],
   }: HostedButtonsComponentProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
     const render = async (selector) => {
       const merchantId = getMerchantID();
-      const { html, htmlScript, style } = await getHostedButtonDetails({
+      const {
+        html,
+        htmlScript,
+        style,
+        version,
+        preferences,
+        buttonContainerId,
+      } = await getHostedButtonDetails({
         hostedButtonId,
-        fundingSources,
       });
 
       const { onInit, onClick } = renderForm({
@@ -47,13 +51,14 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
         hostedButtonId,
         merchantId,
       });
+
       const onApprove = buildHostedButtonOnApprove({
         enableDPoP,
         hostedButtonId,
         merchantId,
       });
 
-      const buttonOptions = {
+      const buttonOptions: HostedButtonOptions = {
         createOrder,
         hostedButtonId,
         merchantId,
@@ -63,30 +68,25 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
         style,
       };
 
-      if (shouldRenderSDKButtons(fundingSources)) {
+      if (version === "2") {
         const { flexDirection } = getFlexDirection({ ...style });
 
-        appendButtonContainer({ flexDirection, selector });
-
-        // Only render 2 buttons max
-        // This will be refactored in https://paypal.atlassian.net/browse/DTPPCPSDK-2112 when NCPS team updates their API response
-        fundingSources.slice(0, 2).forEach((fundingSource, index) => {
-          // $FlowFixMe
-          const standaloneButton = Buttons({
-            ...buttonOptions,
-            fundingSource,
-            style: {
-              ...style,
-              color: getButtonColor(style.color, fundingSource),
-            },
-          });
+        applyContainerStyles({ flexDirection, buttonContainerId });
 
-          if (standaloneButton.isEligible()) {
-            standaloneButton.render(
-              index === 0 ? "#ncp-primary-button" : "#ncp-secondary-button"
-            );
+        preferences?.buttonPreferences.forEach((fundingSource) => {
+          if (fundingSource === "default") {
+            const eligibleDefaultButtons = getDefaultButtonOptions(preferences);
+            renderDefaultButton({
+              eligibleDefaultButtons,
+              buttonContainerId,
+              buttonOptions,
+            });
           } else {
-            getLogger().error(`ncps_standalone_${fundingSource}_ineligible`);
+            renderStandaloneButton({
+              fundingSource,
+              buttonContainerId,
+              buttonOptions,
+            });
           }
         });
       } else {

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

@@ -6,6 +6,8 @@ import { request } from "@krakenjs/belter/src";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
+import { renderDefaultButton, renderStandaloneButton } from "./utils";
+
 import { getHostedButtonsComponent } from ".";
 
 vi.mock("@krakenjs/belter/src", async () => {
@@ -31,44 +33,56 @@ vi.mock("../zoid/buttons", async () => {
   };
 });
 
-const getHostedButtonDetailsResponse = {
-  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: "true",
-        },
-        {
-          name: "height",
-          value: "40",
-        },
-      ],
-    },
+vi.mock("./utils.js", async () => {
+  return {
+    ...(await vi.importActual("./utils.js")),
+    renderStandaloneButton: vi.fn(),
+    renderDefaultButton: vi.fn(),
+  };
+});
+
+const baseLinkVariables = [
+  {
+    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: "true",
+  },
+  {
+    name: "height",
+    value: "40",
+  },
+];
+
+const hostedButtonId = "B1234567890";
+
+describe("HostedButtons v1", () => {
+  const hostedButtonDetailsResponse = {
+    body: {
+      button_details: {
+        link_variables: baseLinkVariables,
+      },
+    },
+  };
 
-describe("HostedButtons", () => {
   test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", async () => {
     const Buttons = vi.fn(() => ({ render: vi.fn() }));
     // $FlowIssue
@@ -77,15 +91,15 @@ describe("HostedButtons", () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
       // eslint-disable-next-line compat/compat
-      Promise.resolve(getHostedButtonDetailsResponse)
+      Promise.resolve(hostedButtonDetailsResponse)
     );
     await HostedButtons({
-      hostedButtonId: "B1234567890",
-      fundingSources: [],
+      hostedButtonId,
     }).render("#example");
+
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
-        hostedButtonId: "B1234567890",
+        hostedButtonId,
         style: expect.objectContaining({ tagline: true }),
       })
     );
@@ -93,44 +107,6 @@ describe("HostedButtons", () => {
     expect.assertions(2);
   });
 
-  describe("NCP V2", () => {
-    beforeEach(() => {
-      const containerId = "#container-id";
-      const selector = document.createElement("div");
-      selector.setAttribute("id", containerId.slice(1));
-      vi.spyOn(document, "querySelector").mockReturnValue(selector);
-    });
-
-    test("paypal.Buttons calls getHostedButtonDetails, invokes v5 of the SDK", async () => {
-      const renderMock = vi.fn();
-
-      const Buttons = vi.fn(() => ({
-        render: renderMock,
-        isEligible: vi.fn(() => true),
-      }));
-      // $FlowIssue
-      getButtonsComponent.mockImplementationOnce(() => Buttons);
-      const HostedButtons = getHostedButtonsComponent();
-      // $FlowIssue
-      request.mockImplementationOnce(() =>
-        // eslint-disable-next-line compat/compat
-        Promise.resolve(getHostedButtonDetailsResponse)
-      );
-      await HostedButtons({
-        hostedButtonId: "B1234567890",
-        fundingSources: ["paypal", "venmo"],
-      }).render("#example");
-      expect(Buttons).toHaveBeenCalledWith(
-        expect.objectContaining({
-          hostedButtonId: "B1234567890",
-        })
-      );
-      expect(Buttons).toHaveBeenCalledTimes(2);
-      expect(renderMock).toHaveBeenCalledTimes(2);
-      expect.assertions(3);
-    });
-  });
-
   test("only eligible buttons are rendered", async () => {
     const renderMock = vi.fn();
 
@@ -144,19 +120,19 @@ describe("HostedButtons", () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
       // eslint-disable-next-line compat/compat
-      Promise.resolve(getHostedButtonDetailsResponse)
+      Promise.resolve(hostedButtonDetailsResponse)
     );
     await HostedButtons({
-      hostedButtonId: "B1234567890",
-      fundingSources: ["paypal", "venmo"],
+      hostedButtonId,
     }).render("#example");
+
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
-        hostedButtonId: "B1234567890",
+        hostedButtonId,
       })
     );
-    expect(Buttons).toHaveBeenCalledTimes(2);
-    expect(renderMock).toHaveBeenCalledTimes(0);
+    expect(Buttons).toHaveBeenCalledTimes(1);
+    expect(renderMock).toHaveBeenCalledTimes(1);
     expect.assertions(3);
   });
 
@@ -207,11 +183,12 @@ describe("HostedButtons", () => {
       })
     );
     await HostedButtons({
-      hostedButtonId: "B1234567890",
+      hostedButtonId,
     }).render("#example");
+
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
-        hostedButtonId: "B1234567890",
+        hostedButtonId,
         style: expect.objectContaining({ tagline: false }),
       })
     );
@@ -220,4 +197,68 @@ describe("HostedButtons", () => {
     expect.assertions(3);
   });
 });
+
+describe("HostedButtons v2", () => {
+  const hostedButtonDetailsResponse = {
+    body: {
+      version: "2",
+      button_details: {
+        link_variables: baseLinkVariables,
+        js_sdk_container_id: "spb-container",
+        preferences: {
+          button_preferences: ["paypal", "default"],
+          eligible_funding_methods: ["paypal", "venmo", "paylater"],
+        },
+      },
+    },
+  };
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+
+    const selector = document.createElement("div");
+    selector.id =
+      hostedButtonDetailsResponse.body.button_details.js_sdk_container_id;
+    vi.spyOn(document, "querySelector").mockReturnValue(selector);
+  });
+
+  test("paypal.HostedButtons calls renderStandaloneButton & renderDefaultButton accordingly", async () => {
+    const renderMock = vi.fn();
+
+    const Buttons = vi.fn(() => ({
+      render: renderMock,
+      isEligible: vi.fn(() => false),
+    }));
+    // $FlowIssue
+    getButtonsComponent.mockImplementation(() => Buttons);
+
+    const HostedButtons = getHostedButtonsComponent();
+
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(hostedButtonDetailsResponse)
+    );
+
+    await HostedButtons({
+      hostedButtonId,
+    }).render("#example");
+
+    expect(renderStandaloneButton).toHaveBeenCalledTimes(1);
+    expect(renderDefaultButton).toHaveBeenCalledTimes(1);
+
+    expect(renderStandaloneButton).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fundingSource: "paypal",
+      })
+    );
+
+    expect(renderDefaultButton).toHaveBeenCalledWith(
+      expect.objectContaining({
+        eligibleDefaultButtons: ["venmo", "paylater"],
+      })
+    );
+  });
+});
+
 /* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -1,10 +1,23 @@
 /* @flow */
 /* eslint-disable no-restricted-globals, promise/no-native */
+import { FUNDING } from "@paypal/sdk-constants/src";
 
 export type Color = string;
 export type FlexDirection = string;
 export type Layout = string;
 
+export type CreateOrder = (data: {|
+  paymentSource: string,
+|}) => Promise<string | void>;
+
+export type OnApprove = (data: {|
+  orderID: string,
+  paymentSource: string,
+|}) => Promise<mixed>;
+
+type OnInit = (data: mixed, actions: mixed) => void;
+type OnClick = (data: mixed, actions: mixed) => void;
+
 export type FundingSources = string;
 export interface GetFlexDirection {
   flexDirection: FlexDirection;
@@ -19,6 +32,61 @@ export interface BuildButtonContainerArgs {
   selector: string | HTMLElement;
 }
 
+export type ApplyButtonStylesProps = {|
+  flexDirection: FlexDirection,
+  buttonContainerId: string,
+|};
+
+export type HostedButtonStyles = {|
+  layout: string,
+  shape: string,
+  color: string,
+  label: string,
+  height: ?number,
+  tagline: boolean,
+|};
+
+export type HostedButtonOptions = {|
+  createOrder: CreateOrder,
+  onApprove: OnApprove,
+  onClick: OnClick,
+  onInit: OnInit,
+  style: HostedButtonStyles,
+  hostedButtonId: string,
+  merchantId?: string,
+|};
+
+export type ButtonPreferences = $ReadOnlyArray<
+  $Values<typeof FUNDING> | "default"
+>;
+
+export type HostedButtonPreferences = {|
+  buttonPreferences: ButtonPreferences,
+  eligibleFundingMethods: $ReadOnlyArray<$Values<typeof FUNDING>>,
+|};
+
+export type NcpResponsePreferences = {|
+  button_preferences: ButtonPreferences,
+  eligible_funding_methods: $ReadOnlyArray<$Values<typeof FUNDING>>,
+|};
+
+export type GetButtonsProps = {|
+  fundingSource: FundingSources,
+  buttonOptions: HostedButtonOptions,
+|};
+
+export type RenderStandaloneButtonProps = {|
+  fundingSource: FundingSources,
+  buttonContainerId: string,
+  buttonOptions: HostedButtonOptions,
+|};
+
+export type RenderDefaultButtonProps = {|
+  eligibleDefaultButtons: $ReadOnlyArray<FundingSources>,
+  buttonContainerId: string,
+  buttonOptions: HostedButtonOptions,
+|};
+
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
   fundingSources?: $ReadOnlyArray<FundingSources>,
@@ -34,27 +102,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,
     htmlScript: string,
-    style: {|
-      layout: string,
-      shape: string,
-      color: string,
-      label: string,
-      height: ?number,
-      tagline: boolean,
-    |},
+    style: HostedButtonStyles,
     version: ?string,
-    buttonContainerId: ?string,
+    buttonContainerId: string,
     preferences?: HostedButtonPreferences,
   |}>;
 
@@ -63,15 +117,6 @@ export type ButtonVariables = $ReadOnlyArray<{|
   value: string,
 |}>;
 
-export type CreateOrder = (data: {|
-  paymentSource: string,
-|}) => Promise<string | void>;
-
-export type OnApprove = (data: {|
-  orderID: string,
-  paymentSource: string,
-|}) => Promise<mixed>;
-
 export type CreateAccessToken = ({|
   clientId: string,
   enableDPoP?: boolean,
@@ -86,8 +131,8 @@ export type RenderForm = ({|
   htmlScript: string,
   selector: string | HTMLElement,
 |}) => {|
-  onInit: (data: mixed, actions: mixed) => void,
-  onClick: (data: mixed, actions: mixed) => void,
+  onInit: OnInit,
+  onClick: OnClick,
 |};
 
 /* eslint-enable no-restricted-globals, promise/no-native */