@paypal/checkout-components 5.0.295-alpha.2 → 5.0.295

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.295-alpha.2",
+  "version": "5.0.295",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -102,7 +102,6 @@
     "vitest": "^0.25.3"
   },
   "dependencies": {
-    "@fingerprintjs/fingerprintjs-pro": "^3.8.6",
     "@krakenjs/belter": "^2.0.0",
     "@krakenjs/cross-domain-utils": "^3.0.0",
     "@krakenjs/jsx-pragmatic": "^3",
@@ -110,8 +109,8 @@
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.3.1",
     "@paypal/common-components": "^1.0.35",
-    "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
+    "@paypal/connect-loader-component": "1.1.1",
     "@paypal/sdk-client": "^4.0.179",
     "@paypal/sdk-constants": "^1.0.133",
     "@paypal/sdk-logos": "^2.2.6"

package/src/api/shopper-insights/component.js

@@ -0,0 +1,196 @@
+/* @flow */
+
+import {
+  getUserIDToken,
+  getPageType,
+  getClientToken,
+  getSDKToken,
+  getLogger,
+  getPayPalAPIDomain,
+  getCurrency,
+  getBuyerCountry,
+  getEnv,
+  getSessionState,
+  sendCountMetric,
+} from "@paypal/sdk-client/src";
+import { FPTI_KEY } from "@paypal/sdk-constants/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import { stringifyError } from "@krakenjs/belter/src";
+
+import { callMemoizedRestAPI } from "../api";
+import {
+  ELIGIBLE_PAYMENT_METHODS,
+  FPTI_TRANSITION,
+  SHOPPER_INSIGHTS_METRIC_NAME,
+  type MerchantPayloadData,
+} from "../../constants/api";
+
+import {
+  validateMerchantConfig,
+  validateMerchantPayload,
+  hasEmail,
+  hasPhoneNumber,
+} from "./validation";
+
+type RecommendedPaymentMethods = {|
+  isPayPalRecommended: boolean,
+  isVenmoRecommended: boolean,
+|};
+
+type getRecommendedPaymentMethodsRequestPayload = {|
+  customer: {|
+    country_code?: string,
+    email?: string,
+    phone?: {|
+      country_code: string,
+      national_number: string,
+    |},
+  |},
+  purchase_units: $ReadOnlyArray<{|
+    amount: {|
+      currency_code: string,
+    |},
+  |}>,
+  preferences: {|
+    include_account_details: boolean,
+  |},
+|};
+
+export type ShopperInsightsComponent = {|
+  getRecommendedPaymentMethods: (MerchantPayloadData) => ZalgoPromise<RecommendedPaymentMethods>,
+|};
+
+function createRecommendedPaymentMethodsRequestPayload(
+  merchantPayload: MerchantPayloadData
+): getRecommendedPaymentMethodsRequestPayload {
+  const isNonProdEnvironment = getEnv() !== "production";
+
+  return {
+    customer: {
+      ...(isNonProdEnvironment && {
+        country_code: getBuyerCountry() || "US",
+      }),
+      // $FlowIssue
+      ...(hasEmail(merchantPayload) && {
+        email: merchantPayload?.email,
+      }),
+      ...(hasPhoneNumber(merchantPayload) && {
+        phone: {
+          country_code: merchantPayload?.phone?.countryCode,
+          national_number: merchantPayload?.phone?.nationalNumber,
+        },
+      }),
+    },
+    purchase_units: [
+      {
+        amount: {
+          currency_code: getCurrency(),
+        },
+      },
+    ],
+    // getRecommendedPaymentMethods maps to include_account_details in the API
+    preferences: {
+      include_account_details: true,
+    },
+  };
+}
+
+function setShopperInsightsUsage() {
+  getSessionState((state) => {
+    return {
+      ...state,
+      shopperInsights: {
+        getRecommendedPaymentMethodsUsed: true,
+      },
+    };
+  });
+}
+
+export function getShopperInsightsComponent(): ShopperInsightsComponent {
+  const startTime = Date.now();
+
+  sendCountMetric({
+    name: SHOPPER_INSIGHTS_METRIC_NAME,
+    event: "init",
+    dimensions: {},
+  });
+
+  const sdkToken = getSDKToken();
+  const pageType = getPageType();
+  const clientToken = getClientToken();
+  const userIDToken = getUserIDToken();
+
+  getLogger().track({
+    [FPTI_KEY.TRANSITION]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_INIT,
+    [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_INIT,
+  });
+
+  const shopperInsights = {
+    getRecommendedPaymentMethods: (merchantPayload) => {
+      validateMerchantConfig({ sdkToken, pageType, userIDToken, clientToken });
+      validateMerchantPayload(merchantPayload);
+
+      const requestPayload =
+        createRecommendedPaymentMethodsRequestPayload(merchantPayload);
+
+      return callMemoizedRestAPI({
+        method: "POST",
+        url: `${getPayPalAPIDomain()}/${ELIGIBLE_PAYMENT_METHODS}`,
+        data: requestPayload,
+        accessToken: sdkToken,
+      })
+        .then((body) => {
+          setShopperInsightsUsage();
+
+          const paypal = body?.eligible_methods?.paypal;
+          const venmo = body?.eligible_methods?.venmo;
+
+          const isPayPalRecommended =
+            (paypal?.eligible_in_paypal_network && paypal?.recommended) ||
+            false;
+          const isVenmoRecommended =
+            (venmo?.eligible_in_paypal_network && venmo?.recommended) || false;
+
+          getLogger().track({
+            [FPTI_KEY.TRANSITION]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_SUCCESS,
+            [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_SUCCESS,
+            [FPTI_KEY.RESPONSE_DURATION]: (Date.now() - startTime).toString(),
+          });
+
+          sendCountMetric({
+            name: SHOPPER_INSIGHTS_METRIC_NAME,
+            event: "success",
+            dimensions: {
+              isPayPalRecommended: String(isPayPalRecommended),
+              isVenmoRecommended: String(isVenmoRecommended),
+            },
+          });
+
+          return { isPayPalRecommended, isVenmoRecommended };
+        })
+        .catch((err) => {
+          sendCountMetric({
+            name: SHOPPER_INSIGHTS_METRIC_NAME,
+            event: "error",
+            dimensions: {
+              errorType: "api_error",
+            },
+          });
+
+          getLogger().track({
+            [FPTI_KEY.TRANSITION]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_ERROR,
+            [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_ERROR,
+            [FPTI_KEY.RESPONSE_DURATION]: (Date.now() - startTime).toString(),
+          });
+
+          getLogger().error("shopper_insights_api_error", {
+            err: stringifyError(err),
+          });
+
+          throw err;
+        });
+    },
+  };
+
+  return shopperInsights;
+}

package/src/api/shopper-insights/component.test.js

@@ -0,0 +1,343 @@
+/* @flow */
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import { getEnv, getBuyerCountry, getSDKToken } from "@paypal/sdk-client/src";
+import { vi, describe, expect } from "vitest";
+import { request } from "@krakenjs/belter/src";
+
+import { ValidationError } from "../../lib";
+
+import { getShopperInsightsComponent } from "./component";
+
+vi.mock("@paypal/sdk-client/src", () => {
+  return {
+    sendCountMetric: vi.fn(),
+    getSDKToken: vi.fn(() => "sdk-token"),
+    getPageType: vi.fn(() => "product-details"),
+    getClientToken: vi.fn(() => ""),
+    getUserIDToken: vi.fn(() => ""),
+    getEnv: vi.fn(() => "production"),
+    getCurrency: vi.fn(() => "USD"),
+    getBuyerCountry: vi.fn(() => "US"),
+    getPayPalAPIDomain: vi.fn(() => "https://api.paypal.com"),
+    getPartnerAttributionID: vi.fn(() => ""),
+    getSessionID: vi.fn(() => "sdk-session-ID-123"),
+    getSessionState: vi.fn(),
+    getLogger: vi.fn(() => ({ track: vi.fn(), error: vi.fn() })),
+  };
+});
+
+vi.mock("@krakenjs/belter/src", async () => {
+  const actual = await vi.importActual("@krakenjs/belter/src");
+  return {
+    ...actual,
+    request: vi.fn(() =>
+      ZalgoPromise.resolve({
+        status: 200,
+        headers: {},
+        body: {
+          eligible_methods: {
+            paypal: {
+              can_be_vaulted: false,
+              eligible_in_paypal_network: true,
+              recommended: true,
+              recommended_priority: 1,
+            },
+          },
+        },
+      })
+    ),
+  };
+});
+
+describe("shopper insights component - getRecommendedPaymentMethods()", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("should get recommended payment methods using the shopper insights API", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const recommendedPaymentMethods =
+      await shopperInsightsComponent.getRecommendedPaymentMethods({
+        email: "email@test.com",
+        phone: {
+          countryCode: "1",
+          nationalNumber: "2345678901",
+        },
+      });
+
+    expect(request).toHaveBeenCalled();
+    expect(recommendedPaymentMethods).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect.assertions(2);
+  });
+
+  test("should get recommended payment methods from memoized request for the exact same payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const payload = {
+      email: "email-1.0@test.com",
+      phone: {
+        countryCode: "1",
+        nationalNumber: "2345678901",
+      },
+    };
+    const response1 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods(payload);
+    expect(request).toHaveBeenCalled();
+    expect(request).toHaveBeenCalledTimes(1);
+    const response2 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods(payload);
+
+    expect(request).toHaveBeenCalled();
+    // This should not change as the payload is same
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(response1).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect(response2).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect.assertions(6);
+  });
+
+  test("should not get recommended payment methods from memoized request for a different payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const response1 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods({
+        email: "email-1.1@test.com",
+      });
+    expect(request).toHaveBeenCalled();
+    expect(request).toHaveBeenCalledTimes(1);
+    const response2 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods({
+        email: "email-1.2@test.com",
+      });
+
+    expect(request).toHaveBeenCalled();
+    // This must change to 2 as the payload is different
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(response1).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect(response2).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect.assertions(6);
+  });
+
+  test("catch errors from the API", async () => {
+    // $FlowFixMe
+    request.mockImplementationOnce(() =>
+      ZalgoPromise.resolve({
+        status: 400,
+        headers: {},
+        body: {
+          name: "ERROR",
+          message: "This is an API error",
+        },
+      })
+    );
+
+    const shopperInsightsComponent = getShopperInsightsComponent();
+
+    await expect(() =>
+      shopperInsightsComponent.getRecommendedPaymentMethods({
+        email: "email@test.com",
+        phone: {
+          countryCode: "1",
+          nationalNumber: "2345678905",
+        },
+      })
+    ).rejects.toThrow(
+      new Error(
+        `https://api.paypal.com/v2/payments/find-eligible-methods returned status 400\n\n{"name":"ERROR","message":"This is an API error"}`
+      )
+    );
+    expect(request).toHaveBeenCalled();
+    expect.assertions(2);
+  });
+
+  test("create payload with email and phone number", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email10@test.com",
+      phone: {
+        countryCode: "1",
+        nationalNumber: "2345678906",
+      },
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          customer: expect.objectContaining({
+            email: "email10@test.com",
+            phone: expect.objectContaining({
+              country_code: "1",
+              national_number: "2345678906",
+            }),
+          }),
+        }),
+      })
+    );
+  });
+
+  test("create payload with email only", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email2@test.com",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          customer: expect.objectContaining({
+            email: "email2@test.com",
+          }),
+        }),
+      })
+    );
+  });
+
+  test("create payload with phone only", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email5@test.com",
+      phone: {
+        countryCode: "1",
+        nationalNumber: "2345678901",
+      },
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          customer: expect.objectContaining({
+            phone: expect.objectContaining({
+              country_code: "1",
+              national_number: "2345678901",
+            }),
+          }),
+        }),
+      })
+    );
+  });
+
+  test("should default purchase units with currency code in the payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email6@test.com",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          purchase_units: expect.arrayContaining([
+            expect.objectContaining({
+              amount: expect.objectContaining({
+                currency_code: "USD",
+              }),
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  test("should use the SDK buyer-country parameter if country code is not passed in a non-prod env", async () => {
+    // $FlowFixMe
+    getEnv.mockImplementationOnce(() => "stage");
+
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email7@test.com",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          customer: expect.objectContaining({
+            country_code: "US",
+          }),
+        }),
+      })
+    );
+  });
+
+  test("should default US country code if SDK buyer-country parameter not passed in a non-prod env", async () => {
+    // $FlowFixMe
+    getEnv.mockImplementationOnce(() => "stage");
+    // $FlowFixMe
+    getBuyerCountry.mockImplementationOnce(() => "");
+
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email9@test.com",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          customer: expect.objectContaining({
+            country_code: "US",
+          }),
+        }),
+      })
+    );
+  });
+
+  test("should not set country code in prod env in the payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email@test.com",
+    });
+
+    // $FlowIssue
+    expect(request.mock.calls[0][0].json.customer.country_code).toEqual(
+      undefined
+    );
+  });
+
+  test("should request recommended payment methods by setting account details in the payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    await shopperInsightsComponent.getRecommendedPaymentMethods({
+      email: "email9@test.com",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        json: expect.objectContaining({
+          preferences: expect.objectContaining({
+            include_account_details: true,
+          }),
+        }),
+      })
+    );
+  });
+
+  test("ensure sdk-token is passed when using the getRecommendedPaymentMethods", async () => {
+    // $FlowFixMe
+    getSDKToken.mockImplementationOnce(() => undefined);
+    // $FlowFixMe
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const error = new ValidationError(
+      `script data attribute sdk-client-token is required but was not passed`
+    );
+    await expect(
+      async () =>
+        await shopperInsightsComponent.getRecommendedPaymentMethods({
+          email: "email@test.com",
+          phone: {
+            countryCode: "1",
+            nationalNumber: "2345678905",
+          },
+        })
+    ).rejects.toThrowError(error);
+    expect.assertions(1);
+  });
+});

package/src/api/shopper-insights/interface.js

@@ -1,69 +1,12 @@
 /* @flow */
-import {
-  getUserIDToken,
-  getPageType,
-  getClientToken,
-  getSDKToken,
-  getLogger,
-  getPayPalAPIDomain,
-  getCurrency,
-  getBuyerCountry,
-  getEnv,
-  getSessionState,
-} from "@paypal/sdk-client/src";
 
 import type { LazyExport } from "../../types";
-import { callMemoizedRestAPI } from "../api";
 
-import { fingerprint } from "./fingerprint";
 import {
-  ShopperSession,
-  type ShopperInsightsInterface,
-} from "./shopperSession";
-
-const sessionState = {
-  get: (key) => {
-    let value;
-    getSessionState((state) => {
-      value = state[key];
-      return state;
-    });
-    return value;
-  },
-  set: (key, value) => {
-    getSessionState((state) => ({
-      ...state,
-      [key]: value,
-    }));
-  },
-};
-
-export const ShopperInsights: LazyExport<ShopperInsightsInterface> = {
-  __get__: () => {
-    const shopperSession = new ShopperSession({
-      fingerprint,
-      logger: getLogger(),
-      // $FlowIssue ZalgoPromise vs Promise
-      request: callMemoizedRestAPI,
-      sdkConfig: {
-        sdkToken: getSDKToken(),
-        pageType: getPageType(),
-        userIDToken: getUserIDToken(),
-        clientToken: getClientToken(),
-        paypalApiDomain: getPayPalAPIDomain(),
-        environment: getEnv(),
-        buyerCountry: getBuyerCountry() || "US",
-        currency: getCurrency(),
-      },
-      sessionState,
-    });
-
-    shopperSession.validateSdkConfig();
+  getShopperInsightsComponent,
+  type ShopperInsightsComponent,
+} from "./component";
 
-    return {
-      getRecommendedPaymentMethods: (payload) =>
-        shopperSession.getRecommendedPaymentMethods(payload),
-      identify: () => shopperSession.identify(),
-    };
-  },
+export const ShopperInsights: LazyExport<ShopperInsightsComponent> = {
+  __get__: () => getShopperInsightsComponent(),
 };