@paypal/checkout-components 5.0.297 → 5.0.298-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.297",
+  "version": "5.0.298-alpha.3",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -102,6 +102,7 @@
     "vitest": "^0.25.3"
   },
   "dependencies": {
+    "@krakenjs/beaver-logger": "^5.7.0",
     "@krakenjs/belter": "^2.0.0",
     "@krakenjs/cross-domain-utils": "^3.0.0",
     "@krakenjs/jsx-pragmatic": "^3",
@@ -111,8 +112,8 @@
     "@paypal/common-components": "^1.0.35",
     "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
-    "@paypal/sdk-client": "^4.0.180",
-    "@paypal/sdk-constants": "^1.0.133",
+    "@paypal/sdk-client": "^4.0.181",
+    "@paypal/sdk-constants": "^1.0.141",
     "@paypal/sdk-logos": "^2.2.6"
   },
   "lint-staged": {

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { sendCountMetric } from "@paypal/sdk-client/src";
+import { getLogger } from "@paypal/sdk-client/src";
 
 import {
   SHOPPER_INSIGHTS_METRIC_NAME,
@@ -21,9 +21,10 @@ export function validateMerchantConfig({
   userIDToken,
   clientToken,
 }: MerchantConfigParams) {
+  const logger = getLogger();
   if (!sdkToken) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",
@@ -37,8 +38,8 @@ export function validateMerchantConfig({
   }
 
   if (!pageType) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",
@@ -52,8 +53,8 @@ export function validateMerchantConfig({
   }
 
   if (userIDToken) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",

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

@@ -5,7 +5,9 @@ import { validateMerchantConfig, validateMerchantPayload } from "./validation";
 
 vi.mock("@paypal/sdk-client/src", () => {
   return {
-    sendCountMetric: vi.fn(),
+    getLogger: () => ({
+      metricCounter: vi.fn().mockReturnThis(),
+    }),
   };
 });
 

package/src/connect/component.jsx

@@ -15,8 +15,6 @@ import {
 } from "@paypal/sdk-client/src";
 import { FPTI_KEY } from "@paypal/sdk-constants";
 
-import { sendCountMetric } from "./sendCountMetric";
-
 const MIN_MAJOR_VERSION = 3;
 const MIN_MINOR_VERSION = 97;
 export const MIN_BT_VERSION = `${MIN_MAJOR_VERSION}.${MIN_MINOR_VERSION}.3-connect-alpha.6.1`; // Minimum for supporting AXO
@@ -33,8 +31,8 @@ export function getSdkVersion(version: string | null): string {
     majorVersion < MIN_MAJOR_VERSION ||
     (majorVersion === MIN_MAJOR_VERSION && minorVersion < MIN_MINOR_VERSION)
   ) {
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.error.count",
+    getLogger().metricCounter({
+      namespace: "connect.init.count",
       event: "error",
       dimensions: {
         errorName: "braintree_version_not_supported_error",
@@ -42,7 +40,7 @@ export function getSdkVersion(version: string | null): string {
     });
 
     throw new Error(
-      `The braintree version used does not support Connect. Please use version ${MIN_BT_VERSION} or above`
+      `The braintree version: ${version} does not support Connect. Please use version ${MIN_BT_VERSION} or above`
     );
   }
 
@@ -65,9 +63,9 @@ export const getConnectComponent = async (merchantProps = {}) => {
     // queryStringParams = {}, // TODO: what do we need here in this case?
   });
 
-  sendCountMetric({
-    name: "pp.app.paypal_sdk.connect.init.count",
-    dimensions: {},
+  getLogger().metricCounter({
+    namespace: "connect.init.count",
+    event: "init",
   });
 
   const debugEnabled = getDebug() || false;
@@ -82,21 +80,20 @@ export const getConnectComponent = async (merchantProps = {}) => {
       metadata,
     });
   } catch (error) {
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.error.count",
-      event: "error",
-      dimensions: {
-        errorName: "connect_load_error",
-      },
-    });
-
     getLogger()
+      .error("load_connect_error", { err: stringifyError(error) })
       .track({
         [FPTI_KEY.CONTEXT_TYPE]: "CMID",
         [FPTI_KEY.CONTEXT_ID]: cmid,
         [FPTI_KEY.EVENT_NAME]: `ppcp_axo_failure`,
       })
-      .error("load_connect_error", { err: stringifyError(error) })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "error",
+        dimensions: {
+          errorName: "connect_load_error",
+        },
+      })
       .flush();
 
     throw new Error(error);
@@ -121,23 +118,14 @@ export const getConnectComponent = async (merchantProps = {}) => {
         [FPTI_KEY.CONTEXT_ID]: cmid,
         [FPTI_KEY.EVENT_NAME]: `ppcp_connect_success`,
       })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "success",
+      })
       .flush();
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.success.count",
-      event: "success",
-      dimensions: {},
-    });
 
     return connect;
   } catch (error) {
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.error.count",
-      event: "error",
-      dimensions: {
-        errorName: "connect_init_error",
-      },
-    });
-
     getLogger()
       .track({
         [FPTI_KEY.CONTEXT_TYPE]: "CMID",
@@ -145,6 +133,13 @@ export const getConnectComponent = async (merchantProps = {}) => {
         [FPTI_KEY.EVENT_NAME]: `ppcp_connect_failure`,
       })
       .error("init_connect_error", { err: stringifyError(error) })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "error",
+        dimensions: {
+          errorName: "connect_init_error",
+        },
+      })
       .flush();
 
     throw new Error(error);

package/src/connect/component.test.js

@@ -9,7 +9,6 @@ import {
   getSdkVersion,
   MIN_BT_VERSION,
 } from "./component";
-import { sendCountMetric } from "./sendCountMetric";
 
 vi.mock("@paypal/sdk-client/src", () => {
   return {
@@ -23,6 +22,7 @@ vi.mock("@paypal/sdk-client/src", () => {
       error: vi.fn().mockReturnThis(),
       track: vi.fn().mockReturnThis(),
       flush: vi.fn().mockReturnThis(),
+      metricCounter: vi.fn().mockReturnThis(),
     })),
     getEnv: vi.fn().mockReturnValue("mock-env"),
     getCSPNonce: vi.fn(),
@@ -36,15 +36,10 @@ vi.mock("@paypal/connect-loader-component", () => {
   };
 });
 
-vi.mock("./sendCountMetric", () => {
-  return {
-    sendCountMetric: vi.fn(),
-  };
-});
-
 describe("getConnectComponent: returns ConnectComponent", () => {
   const mockAxoMetadata = { someData: "data" };
   const mockProps = { someProp: "value" };
+
   beforeEach(() => {
     vi.clearAllMocks();
     window.braintree = {
@@ -76,7 +71,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         env: "mock-env",
       },
     });
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("uses sdk token if present", async () => {
@@ -99,7 +93,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         env: "mock-env",
       },
     });
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("loadAxo failure is handled", async () => {
@@ -109,7 +102,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
       errorMessage
     );
-    expect(sendCountMetric).toHaveBeenCalledTimes(2);
   });
 
   test("connect create failure is handled", async () => {
@@ -119,7 +111,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
       expectedError
     );
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("minified is set according to debug value", async () => {

package/src/constants/api.js

@@ -15,8 +15,7 @@ export const FPTI_TRANSITION = {
   SHOPPER_INSIGHTS_API_ERROR: "sdk_shopper_insights_recommended_error",
 };
 
-export const SHOPPER_INSIGHTS_METRIC_NAME =
-  "pp.app.paypal_sdk.api.shopper_insights.count";
+export const SHOPPER_INSIGHTS_METRIC_NAME = "shopper_insights.count";
 
 export type MerchantPayloadData = {|
   email?: string,

package/src/constants/button.js

@@ -63,3 +63,24 @@ export const MENU_PLACEMENT = {
   ABOVE: ("above": "above"),
   BELOW: ("below": "below"),
 };
+
+export const MESSAGE_OFFER = {
+  PAY_LATER_LONG_TERM: ("pay_later_long_term": "pay_later_long_term"),
+  PAY_LATER_SHORT_TERM: ("pay_later_short_term": "pay_later_short_term"),
+};
+
+export const MESSAGE_COLOR = {
+  BLACK: ("black": "black"),
+  WHITE: ("white": "white"),
+};
+
+export const MESSAGE_POSITION = {
+  TOP: ("top": "top"),
+  BOTTOM: ("bottom": "bottom"),
+};
+
+export const MESSAGE_ALIGN = {
+  CENTER: ("center": "center"),
+  LEFT: ("left": "left"),
+  RIGHT: ("right": "right"),
+};

package/src/constants/class.js

@@ -42,4 +42,9 @@ export const CLASS = {
   HIDDEN: ("hidden": "hidden"),
 
   IMMEDIATE: ("immediate": "immediate"),
+
+  BUTTON_MESSAGE: ("paypal-button-message": "paypal-button-message"),
+
+  BUTTON_MESSAGE_RESERVE:
+    ("paypal-button-message-reserved": "paypal-button-message-reserved"),
 };

package/src/hosted-buttons/index.js

@@ -20,35 +20,34 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
     hostedButtonId,
   }: HostedButtonsComponentProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
-    const render = (selector) => {
+    const render = async (selector) => {
       const merchantId = getMerchantID();
+      const { html, htmlScript, style } = await getHostedButtonDetails({
+        hostedButtonId,
+      });
 
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ html, htmlScript, style }) => {
-          const { onInit, onClick } = renderForm({
-            hostedButtonId,
-            html,
-            htmlScript,
-            selector,
-          });
+      const { onInit, onClick } = renderForm({
+        hostedButtonId,
+        html,
+        htmlScript,
+        selector,
+      });
 
-          // $FlowFixMe
-          Buttons({
-            hostedButtonId,
-            style,
-            onInit,
-            onClick,
-            createOrder: buildHostedButtonCreateOrder({
-              hostedButtonId,
-              merchantId,
-            }),
-            onApprove: buildHostedButtonOnApprove({
-              hostedButtonId,
-              merchantId,
-            }),
-          }).render(selector);
-        }
-      );
+      // $FlowFixMe
+      Buttons({
+        hostedButtonId,
+        style,
+        onInit,
+        onClick,
+        createOrder: buildHostedButtonCreateOrder({
+          hostedButtonId,
+          merchantId,
+        }),
+        onApprove: buildHostedButtonOnApprove({
+          hostedButtonId,
+          merchantId,
+        }),
+      }).render(selector);
     };
     return {
       render,

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

@@ -1,8 +1,8 @@
 /* @flow */
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 import { describe, test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
@@ -61,16 +61,17 @@ const getHostedButtonDetailsResponse = {
 };
 
 describe("HostedButtons", () => {
-  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", () => {
+  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", async () => {
     const Buttons = vi.fn(() => ({ render: vi.fn() }));
     // $FlowIssue
     getButtonsComponent.mockImplementationOnce(() => Buttons);
     const HostedButtons = getHostedButtonsComponent();
     // $FlowIssue
     request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse)
     );
-    HostedButtons({
+    await HostedButtons({
       hostedButtonId: "B1234567890",
     }).render("#example");
     expect(Buttons).toHaveBeenCalledWith(
@@ -81,3 +82,5 @@ describe("HostedButtons", () => {
     expect.assertions(1);
   });
 });
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -1,6 +1,5 @@
 /* @flow */
-
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
@@ -12,11 +11,11 @@ export type GetCallbackProps = {|
 |};
 
 export type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
+  render: (string | HTMLElement) => Promise<void>,
 |};
 
 export type HostedButtonDetailsParams =
-  (HostedButtonsComponentProps) => ZalgoPromise<{|
+  (HostedButtonsComponentProps) => Promise<{|
     html: string,
     htmlScript: string,
     style: {|
@@ -34,14 +33,14 @@ export type ButtonVariables = $ReadOnlyArray<{|
 
 export type CreateOrder = (data: {|
   paymentSource: string,
-|}) => ZalgoPromise<string | void>;
+|}) => Promise<string | void>;
 
 export type OnApprove = (data: {|
   orderID: string,
   paymentSource: string,
-|}) => ZalgoPromise<mixed>;
+|}) => Promise<mixed>;
 
-export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
+export type CreateAccessToken = (clientID: string) => Promise<string>;
 
 export type HostedButtonsComponent =
   (HostedButtonsComponentProps) => HostedButtonsInstance;
@@ -55,3 +54,5 @@ export type RenderForm = ({|
   onInit: (data: mixed, actions: mixed) => void,
   onClick: (data: mixed, actions: mixed) => void,
 |};
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/utils.js

@@ -39,8 +39,8 @@ export const getMerchantID = (): string | void => {
 };
 
 export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
-  (clientId) => {
-    return request({
+  async (clientId) => {
+    const response = await request({
       url: `${apiUrl}/v1/oauth2/token`,
       method: "POST",
       body: "grant_type=client_credentials",
@@ -48,32 +48,36 @@ export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
         Authorization: `Basic ${btoa(clientId)}`,
         "Content-Type": "application/json",
       },
-    }).then((response) => response.body.access_token);
+    });
+    // $FlowIssue request returns ZalgoPromise
+    return response.body.access_token;
   }
 );
 
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables?.find((variable) => variable.name === key)?.value ?? "";
 
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
+export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
   hostedButtonId,
 }) => {
-  return request({
+  const response = await request({
     url: `${baseUrl}/ncp/api/form-fields/${hostedButtonId}`,
     headers: getHeaders(),
-  }).then(({ body }) => {
-    const variables = body.button_details.link_variables;
-    return {
-      style: {
-        layout: getButtonVariable(variables, "layout"),
-        shape: getButtonVariable(variables, "shape"),
-        color: getButtonVariable(variables, "color"),
-        label: getButtonVariable(variables, "button_text"),
-      },
-      html: body.html,
-      htmlScript: body.html_script,
-    };
   });
+
+  // $FlowIssue request returns ZalgoPromise
+  const { body } = response;
+  const variables = body.button_details.link_variables;
+  return {
+    style: {
+      layout: getButtonVariable(variables, "layout"),
+      shape: getButtonVariable(variables, "shape"),
+      color: getButtonVariable(variables, "color"),
+      label: getButtonVariable(variables, "button_text"),
+    },
+    html: body.html,
+    htmlScript: body.html_script,
+  };
 };
 
 /**
@@ -109,12 +113,13 @@ export const buildHostedButtonCreateOrder = ({
   hostedButtonId,
   merchantId,
 }: GetCallbackProps): CreateOrder => {
-  return (data) => {
+  return async (data) => {
     const userInputs =
       window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
     const onError = window[`__pp_form_fields_${hostedButtonId}`]?.onError;
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
+    const accessToken = await createAccessToken(getClientID());
+    try {
+      const response = await request({
         url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
         headers: getHeaders(accessToken),
         method: "POST",
@@ -124,10 +129,13 @@ export const buildHostedButtonCreateOrder = ({
           merchant_id: merchantId,
           ...userInputs,
         }),
-      })
-        .then(({ body }) => body.context_id || onError(body.name))
-        .catch(() => onError("REQUEST_FAILED"));
-    });
+      });
+      // $FlowIssue request returns ZalgoPromise
+      const { body } = response;
+      return body.context_id || onError(body.name);
+    } catch (e) {
+      return onError("REQUEST_FAILED");
+    }
   };
 };
 
@@ -135,18 +143,17 @@ export const buildHostedButtonOnApprove = ({
   hostedButtonId,
   merchantId,
 }: GetCallbackProps): OnApprove => {
-  return (data) => {
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          entry_point: entryPoint,
-          merchant_id: merchantId,
-          context_id: data.orderID,
-        }),
-      });
+  return async (data) => {
+    const accessToken = await createAccessToken(getClientID());
+    return request({
+      url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`,
+      headers: getHeaders(accessToken),
+      method: "POST",
+      body: JSON.stringify({
+        entry_point: entryPoint,
+        merchant_id: merchantId,
+        context_id: data.orderID,
+      }),
     });
   };
 };

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

@@ -1,8 +1,7 @@
 /* @flow */
-
+/* eslint-disable no-restricted-globals, promise/no-native */
 import { test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import {
   buildHostedButtonCreateOrder,
@@ -62,7 +61,8 @@ const getHostedButtonDetailsResponse = {
 test("getHostedButtonDetails", async () => {
   // $FlowIssue
   request.mockImplementationOnce(() =>
-    ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+    // eslint-disable-next-line compat/compat
+    Promise.resolve(getHostedButtonDetailsResponse)
   );
   await getHostedButtonDetails({
     hostedButtonId,
@@ -85,7 +85,8 @@ test("buildHostedButtonCreateOrder", async () => {
 
   // $FlowIssue
   request.mockImplementation(() =>
-    ZalgoPromise.resolve({
+    // eslint-disable-next-line compat/compat
+    Promise.resolve({
       body: {
         link_id: hostedButtonId,
         merchant_id: merchantId,
@@ -107,7 +108,8 @@ test("buildHostedButtonCreateOrder error handling", async () => {
 
   // $FlowIssue
   request.mockImplementation(() =>
-    ZalgoPromise.resolve({
+    // eslint-disable-next-line compat/compat
+    Promise.resolve({
       body: {
         name: "RESOURCE_NOT_FOUND",
       },
@@ -133,7 +135,8 @@ describe("buildHostedButtonOnApprove", () => {
 
     // $FlowIssue
     request.mockImplementation(() =>
-      ZalgoPromise.resolve({
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
         body: {},
       })
     );
@@ -150,3 +153,5 @@ describe("buildHostedButtonOnApprove", () => {
     expect.assertions(1);
   });
 });
+
+/* eslint-enable no-restricted-globals, promise/no-native */