@paypal/checkout-components 5.0.316 → 5.0.317

package/src/hosted-buttons/utils.js

@@ -2,12 +2,17 @@
 
 import { request, memoize } from "@krakenjs/belter/src";
 import {
+  getLogger,
   buildDPoPHeaders,
   getSDKHost,
   getClientID,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
+import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+
+import { getButtonsComponent, type ButtonsComponent } from "../zoid/buttons";
 
 import type {
   ButtonVariables,
@@ -19,9 +24,15 @@ import type {
   RenderForm,
   GetFlexDirectionArgs,
   GetFlexDirection,
-  BuildButtonContainerArgs,
   Color,
   FundingSources,
+  ApplyButtonStylesProps,
+  HostedButtonPreferences,
+  NcpResponsePreferences,
+  ButtonPreferences,
+  GetButtonsProps,
+  RenderStandaloneButtonProps,
+  RenderDefaultButtonProps,
 } from "./types";
 
 const entryPoint = "SDK";
@@ -41,6 +52,7 @@ export const getMerchantID = (): string | void => {
   // https://developer.paypal.com/docs/multiparty/checkout/multiseller-payments/
   const merchantIds = getSDKMerchantID();
   if (merchantIds.length > 1) {
+    getLogger().error("ncps_multiple_merchant_ids", { merchantIds });
     throw new Error("Multiple merchant-ids are not supported.");
   }
   return merchantIds[0];
@@ -77,6 +89,41 @@ export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
   }
 );
 
+export const getButtonPreferences = ({
+  button_preferences: buttonPreferences,
+  eligible_funding_methods: eligibleFundingMethods,
+}: NcpResponsePreferences): HostedButtonPreferences => {
+  if (!buttonPreferences?.length || !eligibleFundingMethods?.length) {
+    const preferences = {
+      buttonPreferences,
+      eligibleFundingMethods,
+    };
+
+    getLogger().error("ncps_missing_preferences", { preferences });
+
+    throw new Error(
+      `Expected preferences to be populated, received: ${JSON.stringify({
+        preferences,
+      })}`
+    );
+  }
+
+  return {
+    // Remove any buttons that are not included in eligibleFundingMethods.
+    // If the funding method is "default", we want to keep it in the preferences, and decide which
+    // button should be rendered in its place in renderStandaloneButton()
+    buttonPreferences: buttonPreferences.filter(
+      (fundingMethod) =>
+        eligibleFundingMethods.includes(fundingMethod) ||
+        fundingMethod === "default"
+    ),
+    // Sort the eligible funding methods returned from /ncp/api/form-fields in the order that they would appear in the smart stack.
+    eligibleFundingMethods: SUPPORTED_FUNDING_SOURCES.filter((fundingMethod) =>
+      eligibleFundingMethods.includes(fundingMethod)
+    ),
+  };
+};
+
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables?.find((variable) => variable.name === key)?.value ?? "";
 
@@ -90,7 +137,13 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
 
   // $FlowIssue request returns ZalgoPromise
   const { body } = response;
-  const { link_variables: variables, preferences } = body.button_details;
+  const {
+    link_variables: variables,
+    js_sdk_container_id: buttonContainerId,
+    preferences,
+  } = body.button_details;
+
+  const shouldIncludePreferences = preferences && body.version === "2";
 
   return {
     style: {
@@ -102,14 +155,11 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
       height: parseInt(getButtonVariable(variables, "height"), 10) || undefined,
     },
     version: body.version,
-    buttonContainerId: body.button_container_id,
+    buttonContainerId: buttonContainerId || "spb-container",
     html: body.html,
     htmlScript: body.html_script,
-    ...(preferences && {
-      preferences: {
-        buttonPreferences: preferences.button_preferences,
-        eligibleFundingMethods: preferences.eligible_funding_methods,
-      },
+    ...(shouldIncludePreferences && {
+      preferences: getButtonPreferences(preferences),
     }),
   };
 };
@@ -250,16 +300,16 @@ export const buildHostedButtonOnApprove = ({
   };
 };
 
-export function getFlexDirection({
+export const getFlexDirection = ({
   layout,
-}: GetFlexDirectionArgs): GetFlexDirection {
-  return { flexDirection: layout === "horizontal" ? "row" : "column" };
-}
+}: GetFlexDirectionArgs): GetFlexDirection => ({
+  flexDirection: layout === "horizontal" ? "row" : "column",
+});
 
-export function getButtonColor(
+export const getButtonColor = (
   color: Color,
   fundingSource: FundingSources
-): Color {
+): Color => {
   const colorMap = {
     gold: {
       paypal: "gold",
@@ -289,41 +339,110 @@ export function getButtonColor(
   };
 
   return colorMap[color][fundingSource];
-}
-
-export function shouldRenderSDKButtons(
-  fundingSources: $ReadOnlyArray<FundingSources>
-): boolean {
-  return Boolean(fundingSources.length);
-}
+};
 
-export function appendButtonContainer({
+export const applyContainerStyles = ({
   flexDirection,
-  selector,
-}: BuildButtonContainerArgs) {
-  const elm = getElementFromSelector(selector);
+  buttonContainerId,
+}: ApplyButtonStylesProps): void => {
+  const buttonContainer = document.querySelector(`#${buttonContainerId}`);
 
-  if (!elm) {
-    throw new Error("PayPal button container selector was not found");
+  if (!buttonContainer) {
+    getLogger().error("ncps_button_container_missing", {
+      buttonContainerId,
+    });
+
+    throw new Error(`Element with id ${buttonContainerId} not found.`);
   }
 
-  const buttonContainer = document.createElement("div");
+  buttonContainer.style.flexDirection = flexDirection;
+};
 
-  buttonContainer.setAttribute(
-    "style",
-    `display: flex; flex-wrap: nowrap; gap: 16px; max-width: 750px; flex-direction: ${flexDirection}`
+/**
+ * Filters out all eligible funding methods that are already specified in button preferences
+ */
+export const getDefaultButtonOptions = ({
+  buttonPreferences,
+  eligibleFundingMethods,
+}: HostedButtonPreferences): ButtonPreferences => {
+  return eligibleFundingMethods.filter(
+    (fundingSource: string) => !buttonPreferences.includes(fundingSource)
   );
+};
 
-  const primaryButton = document.createElement("div");
-  primaryButton.setAttribute("id", `ncp-primary-button`);
-  primaryButton.setAttribute("style", "flex-grow: 1");
+/**
+ * Gets buttons component instance.
+ */
+export const getButtons = ({
+  fundingSource,
+  buttonOptions,
+}: GetButtonsProps): ButtonsComponent => {
+  const Buttons = getButtonsComponent();
 
-  const secondaryButton = document.createElement("div");
-  secondaryButton.setAttribute("id", `ncp-secondary-button`);
-  secondaryButton.setAttribute("style", "flex-grow: 1");
+  const { style } = buttonOptions;
 
-  buttonContainer.appendChild(primaryButton);
-  buttonContainer.appendChild(secondaryButton);
+  // $FlowFixMe
+  return Buttons({
+    ...buttonOptions,
+    fundingSource,
+    style: {
+      ...style,
+      // $FlowFixMe
+      color: getButtonColor(style.color, fundingSource),
+    },
+  });
+};
 
-  elm?.appendChild(buttonContainer);
-}
+/**
+ * Handles logic for each specified button preference.
+ */
+export const renderStandaloneButton = ({
+  fundingSource,
+  buttonContainerId,
+  buttonOptions,
+}: RenderStandaloneButtonProps): ZalgoPromise<void> | void => {
+  const standaloneButton = getButtons({
+    fundingSource,
+    buttonOptions,
+  });
+
+  // $FlowFixMe
+  if (standaloneButton.isEligible()) {
+    // $FlowFixMe
+    return standaloneButton.render(`#${buttonContainerId}`);
+  }
+
+  getLogger().error(`ncps_standalone_${fundingSource}_ineligible`);
+};
+
+/**
+ * Handles logic for "default" button preference.
+ */
+export const renderDefaultButton = ({
+  eligibleDefaultButtons,
+  buttonContainerId,
+  buttonOptions,
+}: RenderDefaultButtonProps): void => {
+  const eligibleButtons = [...eligibleDefaultButtons];
+
+  // If we exhaust all default options, we don't render any button.
+  while (eligibleButtons.length) {
+    const fundingSource = eligibleButtons[0];
+
+    const standaloneButton = getButtons({
+      fundingSource,
+      buttonOptions,
+    });
+
+    // If the funding source is eligible, render button & return to end loop.
+    // $FlowFixMe
+    if (standaloneButton.isEligible()) {
+      // $FlowFixMe
+      return standaloneButton.render(`#${buttonContainerId}`);
+    }
+
+    // If funding source is ineligible, log error and move to next funding option.
+    getLogger().error(`ncps_standalone_${fundingSource}_ineligible`);
+    eligibleButtons.shift();
+  }
+};

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

@@ -2,6 +2,9 @@
 /* eslint-disable no-restricted-globals, promise/no-native */
 import { test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
+import { getLogger } from "@paypal/sdk-client/src";
+
+import { getButtonsComponent } from "../zoid/buttons";
 
 import {
   buildHostedButtonCreateOrder,
@@ -10,9 +13,11 @@ import {
   getHostedButtonDetails,
   getFlexDirection,
   getButtonColor,
-  shouldRenderSDKButtons,
-  appendButtonContainer,
   getElementFromSelector,
+  getButtonPreferences,
+  renderStandaloneButton,
+  applyContainerStyles,
+  renderDefaultButton,
 } from "./utils";
 
 vi.mock("@krakenjs/belter/src", async () => {
@@ -28,6 +33,16 @@ vi.mock("@paypal/sdk-client/src", async () => {
     getSDKHost: () => "example.com",
     getClientID: () => "client_id_123",
     getMerchantID: () => ["merchant_id_123"],
+    getLogger: vi.fn(() => ({
+      error: vi.fn(),
+    })),
+  };
+});
+
+vi.mock("../zoid/buttons", async () => {
+  return {
+    ...(await vi.importActual("../zoid/buttons")),
+    getButtonsComponent: vi.fn(),
   };
 });
 
@@ -97,6 +112,7 @@ describe("getHostedButtonDetails", () => {
             button_preferences: ["paypal", "paylater"],
             eligible_funding_methods: ["paypal", "venmo", "paylater"],
           },
+          js_sdk_container_id: "spb-container",
         },
         version: "2",
       },
@@ -556,38 +572,8 @@ test("getButtonColor", () => {
   });
 });
 
-test("shouldRenderSDKButtons", () => {
-  expect(shouldRenderSDKButtons([])).toBe(false);
-  expect(shouldRenderSDKButtons(["paypal"])).toBe(true);
-  expect(shouldRenderSDKButtons(["paypal", "venmo"])).toBe(true);
-});
-
-test("buildButtonContainer", () => {
-  const containerId = "#container-id";
-  const selector = document.createElement("div");
-
-  selector.setAttribute("id", containerId.slice(1));
-
-  vi.spyOn(document, "querySelector").mockReturnValueOnce(selector);
-
-  expect(() =>
-    appendButtonContainer({ flexDirection: "row", selector: containerId })
-  ).not.toThrow();
-
-  expect(() =>
-    appendButtonContainer({ flexDirection: "row", selector })
-  ).not.toThrow();
-
-  expect(() =>
-    appendButtonContainer({
-      flexDirection: "row",
-      selector: `${containerId}-not-found`,
-    })
-  ).toThrow("PayPal button container selector was not found");
-});
-
 test("getElementFromSelector", () => {
-  const containerId = "#container-id";
+  const containerId = "container-id";
   const selector = document.createElement("div");
 
   selector.setAttribute("id", containerId.slice(1));
@@ -602,4 +588,234 @@ test("getElementFromSelector", () => {
   expect(mockQuerySelector).toHaveBeenCalledWith(containerId);
 });
 
+describe("getButtonPreferences", () => {
+  test("returns all button preferences if all are eligible", () => {
+    const params = {
+      button_preferences: ["paypal", "venmo"],
+      eligible_funding_methods: ["paypal", "venmo", "paylater"],
+    };
+
+    const preferences = getButtonPreferences(params);
+
+    expect(preferences.buttonPreferences).toEqual(["paypal", "venmo"]);
+  });
+
+  test("removes any button preferences not in the eligible funding methods", () => {
+    const params = {
+      button_preferences: ["paypal", "venmo"],
+      eligible_funding_methods: ["paypal", "paylater"],
+    };
+
+    const preferences = getButtonPreferences(params);
+
+    expect(preferences.buttonPreferences).toEqual(["paypal"]);
+  });
+  test("sorts eligible funding methods according to SUPPORTED_FUNDING_SOURCES", () => {
+    const params = {
+      button_preferences: ["paypal", "venmo"],
+      eligible_funding_methods: ["paylater", "venmo", "paypal"],
+    };
+
+    const preferences = getButtonPreferences(params);
+
+    expect(preferences.eligibleFundingMethods).toEqual([
+      "paypal",
+      "venmo",
+      "paylater",
+    ]);
+  });
+
+  test("doesn't filter out 'default' in button preferences", () => {
+    const params = {
+      button_preferences: ["paypal", "default"],
+      eligible_funding_methods: ["paylater", "venmo", "paypal"],
+    };
+
+    const preferences = getButtonPreferences(params);
+
+    expect(preferences.buttonPreferences).toEqual(["paypal", "default"]);
+  });
+
+  test("logs & throws error if the input is bad", () => {
+    const errorMock = vi.fn();
+
+    // $FlowIssue
+    getLogger.mockImplementation(() => ({ error: errorMock }));
+
+    const params = {
+      button_preferences: [],
+      eligible_funding_methods: [],
+    };
+
+    const shouldThrowError = () => getButtonPreferences(params);
+
+    expect(shouldThrowError).toThrowError();
+    expect(errorMock).toBeCalledTimes(1);
+  });
+});
+
+describe("applyContainerStyles", () => {
+  const buttonContainerId = "button-container";
+  const params = { flexDirection: "vertical", buttonContainerId };
+
+  test("successfully applies styles to container", () => {
+    const buttonContainer = document.createElement("div");
+    buttonContainer.id = buttonContainerId;
+    vi.spyOn(document, "querySelector").mockReturnValueOnce(buttonContainer);
+
+    applyContainerStyles(params);
+
+    expect(buttonContainer?.style.length).toBeTruthy();
+  });
+
+  test("throws error if button container cannot be found", () => {
+    // Intentionally not setting up the button container to throw the error
+    const shouldThrowError = () => applyContainerStyles(params);
+    expect(shouldThrowError).toThrowError(
+      `Element with id ${buttonContainerId} not found.`
+    );
+  });
+});
+
+describe("render buttons", () => {
+  const containerId = "container-id";
+  const expectedContainerId = `#${containerId}`;
+  const renderMock = vi.fn();
+  const errorMock = vi.fn();
+  const baseParams = {
+    buttonContainerId: containerId,
+    buttonOptions: {
+      createOrder: vi.fn(),
+      onApprove: vi.fn(),
+      onClick: vi.fn(),
+      onInit: vi.fn(),
+      style: {
+        color: "gold",
+        layout: "",
+        shape: "",
+        height: 40,
+        label: "",
+        tagline: true,
+      },
+      hostedButtonId: "",
+    },
+  };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    // $FlowIssue
+    getLogger.mockImplementation(() => ({ error: errorMock }));
+  });
+
+  describe("renderStandaloneButton", () => {
+    test("renders button if eligible", () => {
+      const Buttons = vi.fn(() => ({
+        render: renderMock,
+        isEligible: vi.fn(() => true),
+      }));
+
+      // $FlowIssue
+      getButtonsComponent.mockImplementationOnce(() => Buttons);
+
+      renderStandaloneButton({
+        ...baseParams,
+        fundingSource: "paypal",
+      });
+
+      expect(renderMock).toHaveBeenCalledTimes(1);
+      expect(renderMock).toHaveBeenCalledWith(expectedContainerId);
+      expect(Buttons).toHaveBeenCalledWith(
+        expect.objectContaining({
+          fundingSource: "paypal",
+        })
+      );
+    });
+
+    test("does not render button if button is ineligible", () => {
+      const Buttons = vi.fn(() => ({
+        render: renderMock,
+        isEligible: vi.fn(() => false),
+      }));
+
+      // $FlowIssue
+      getButtonsComponent.mockImplementationOnce(() => Buttons);
+
+      renderStandaloneButton({
+        ...baseParams,
+        fundingSource: "venmo",
+      });
+
+      expect(renderMock).toHaveBeenCalledTimes(0);
+      expect(errorMock).toHaveBeenCalledWith(
+        "ncps_standalone_venmo_ineligible"
+      );
+    });
+  });
+
+  describe("renderDefaultButton", () => {
+    test("renders the first eligible button", () => {
+      const Buttons = vi.fn(() => ({
+        render: renderMock,
+        isEligible: vi.fn(() => true),
+      }));
+
+      // $FlowIssue
+      getButtonsComponent.mockImplementation(() => Buttons);
+
+      renderDefaultButton({
+        ...baseParams,
+        eligibleDefaultButtons: ["venmo", "paylater"],
+      });
+
+      expect(renderMock).toHaveBeenCalledWith(expectedContainerId);
+      expect(errorMock).toHaveBeenCalledTimes(0);
+    });
+
+    test("renders the next eligible button if button fails Buttons().isEligible() check", () => {
+      const Buttons = vi.fn(({ fundingSource }) => ({
+        render: renderMock,
+        isEligible: vi.fn(() => fundingSource === "paylater"),
+      }));
+
+      // $FlowIssue
+      getButtonsComponent.mockImplementation(() => Buttons);
+
+      renderDefaultButton({
+        ...baseParams,
+        eligibleDefaultButtons: ["venmo", "paylater"],
+      });
+
+      expect(errorMock).toHaveBeenCalledTimes(1);
+      expect(errorMock).toHaveBeenCalledWith(
+        "ncps_standalone_venmo_ineligible"
+      );
+      expect(renderMock).toHaveBeenCalledWith(expectedContainerId);
+    });
+
+    test("does not render any button if all fail Buttons().isEligible()", () => {
+      const Buttons = vi.fn(() => ({
+        render: renderMock,
+        isEligible: vi.fn(() => false),
+      }));
+
+      // $FlowIssue
+      getButtonsComponent.mockImplementation(() => Buttons);
+
+      renderDefaultButton({
+        ...baseParams,
+        eligibleDefaultButtons: ["venmo", "paylater"],
+      });
+
+      expect(errorMock).toHaveBeenCalledTimes(2);
+      expect(errorMock).toHaveBeenCalledWith(
+        "ncps_standalone_venmo_ineligible"
+      );
+      expect(errorMock).toHaveBeenCalledWith(
+        "ncps_standalone_paylater_ineligible"
+      );
+      expect(renderMock).toHaveBeenCalledTimes(0);
+    });
+  });
+});
+
 /* eslint-enable no-restricted-globals, promise/no-native */