@paypal/checkout-components 5.0.301 → 5.0.302-alpha.1

package/package.json

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

package/src/lib/api.js

@@ -0,0 +1,67 @@
+/* @flow */
+
+import { getPartnerAttributionID, getSessionID } from "@paypal/sdk-client/src";
+import { inlineMemoize, request } from "@krakenjs/belter/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+
+import { HEADERS } from "../constants/api";
+
+type RestAPIParams = {|
+  method?: string,
+  url: string,
+  data: Object,
+  accessToken: ?string,
+|};
+
+export function callRestAPI({
+  accessToken,
+  method,
+  url,
+  data,
+}: RestAPIParams): ZalgoPromise<Object> {
+  const partnerAttributionID = getPartnerAttributionID() || "";
+
+  if (!accessToken) {
+    throw new Error(`No access token passed to API request ${url}`);
+  }
+
+  const requestHeaders = {
+    [HEADERS.AUTHORIZATION]: `Bearer ${accessToken}`,
+    [HEADERS.CONTENT_TYPE]: `application/json`,
+    [HEADERS.PARTNER_ATTRIBUTION_ID]: partnerAttributionID,
+    [HEADERS.CLIENT_METADATA_ID]: getSessionID(),
+  };
+
+  return request({
+    method,
+    url,
+    headers: requestHeaders,
+    json: data,
+  }).then(({ status, body, headers: responseHeaders }) => {
+    if (status >= 300) {
+      const error = new Error(
+        `${url} returned status ${status}\n\n${JSON.stringify(body)}`
+      );
+
+      // $FlowFixMe
+      error.response = { status, headers: responseHeaders, body };
+
+      throw error;
+    }
+
+    return body;
+  });
+}
+
+export function callMemoizedRestAPI({
+  accessToken,
+  method,
+  url,
+  data,
+}: RestAPIParams): ZalgoPromise<Object> {
+  return inlineMemoize(
+    callMemoizedRestAPI,
+    () => callRestAPI({ accessToken, method, url, data }),
+    [accessToken, method, url, JSON.stringify(data)]
+  );
+}

package/src/lib/index.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+export * from "./api";
 export * from "./errors";
 export * from "./isRTLLanguage";
 export * from "./security";

package/src/shopper-insights/interface.js

@@ -0,0 +1,64 @@
+/* @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 "../lib";
+
+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({
+      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,
+    });
+
+    return {
+      getRecommendedPaymentMethods: (payload) =>
+        shopperSession.getRecommendedPaymentMethods(payload),
+    };
+  },
+};

package/src/shopper-insights/shopperSession.js

@@ -0,0 +1,342 @@
+/* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
+
+import { type LoggerType } from "@krakenjs/beaver-logger/src";
+import { stringifyError } from "@krakenjs/belter/src";
+import { FPTI_KEY } from "@paypal/sdk-constants/src";
+
+import {
+  ELIGIBLE_PAYMENT_METHODS,
+  FPTI_TRANSITION,
+  SHOPPER_INSIGHTS_METRIC_NAME,
+} from "../constants/api";
+import { ValidationError } from "../lib";
+
+export type MerchantPayloadData = {|
+  email?: string,
+  phone?: {|
+    countryCode?: string,
+    nationalNumber?: string,
+  |},
+|};
+
+type RecommendedPaymentMethods = {|
+  isPayPalRecommended: boolean,
+  isVenmoRecommended: boolean,
+|};
+
+type RecommendedPaymentMethodsRequestData = {|
+  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,
+  |},
+|};
+
+type RecommendedPaymentMethodsResponse = {|
+  body: {|
+    eligible_methods: {
+      [paymentMethod: "paypal" | "venmo"]: {|
+        can_be_vaulted: boolean,
+        eligible_in_paypal_network?: boolean,
+        recommended?: boolean,
+        recommended_priority?: number,
+      |},
+    },
+  |},
+|};
+
+type SdkConfig = {|
+  sdkToken: ?string,
+  pageType: ?string,
+  userIDToken: ?string,
+  clientToken: ?string,
+  paypalApiDomain: string,
+  environment: ?string,
+  buyerCountry: string,
+  currency: string,
+|};
+
+// eslint's flow integration is very out of date
+// it doesn't recognize the generics here as used
+// eslint-disable-next-line no-undef
+type Request = <TRequestData, TResponse>({|
+  method?: string,
+  url: string,
+  // eslint-disable-next-line no-undef
+  data: TRequestData,
+  accessToken: ?string,
+  // eslint-disable-next-line no-undef
+|}) => Promise<TResponse>;
+
+type Storage = {|
+  // eslint's flow integration is very out of date
+  // it doesn't recognize the generics here as used
+  // eslint-disable-next-line no-undef
+  get: <TValue>(key: string) => ?TValue,
+  // eslint-disable-next-line flowtype/no-weak-types
+  set: (key: string, value: any) => void,
+|};
+
+const parseEmail = (merchantPayload): ?{| email: string |} => {
+  if (!merchantPayload.email) {
+    return;
+  }
+
+  const email = merchantPayload.email;
+  const isValidEmail =
+    typeof email === "string" && email.length < 320 && /^.+@.+$/.test(email);
+
+  if (!isValidEmail) {
+    throw new ValidationError(
+      `Expected shopper information to include a valid email format`
+    );
+  }
+
+  return {
+    email,
+  };
+};
+
+const parsePhone = (
+  merchantPayload
+): ?{| phone: {| country_code: string, national_number: string |} |} => {
+  if (!merchantPayload.phone) {
+    return;
+  }
+
+  if (
+    !merchantPayload.phone.nationalNumber ||
+    !merchantPayload.phone.countryCode
+  ) {
+    throw new ValidationError(
+      `Expected phone number for shopper insights to include nationalNumber and countryCode`
+    );
+  }
+
+  const nationalNumber = merchantPayload.phone.nationalNumber;
+  const countryCode = merchantPayload.phone.countryCode;
+  const isValidPhone =
+    typeof nationalNumber === "string" && /\d{5,}/.test(nationalNumber);
+
+  if (!isValidPhone) {
+    throw new ValidationError(
+      `Expected shopper information to be a valid phone number format`
+    );
+  }
+
+  return {
+    phone: {
+      country_code: countryCode,
+      national_number: nationalNumber,
+    },
+  };
+};
+
+export const parseMerchantPayload = ({
+  merchantPayload,
+  sdkConfig,
+}: {|
+  merchantPayload: MerchantPayloadData,
+  sdkConfig: SdkConfig,
+|}): RecommendedPaymentMethodsRequestData => {
+  const email = parseEmail(merchantPayload);
+  const phone = parsePhone(merchantPayload);
+
+  return {
+    customer: {
+      ...(sdkConfig.environment !== "production" && {
+        country_code: sdkConfig.buyerCountry,
+      }),
+      // $FlowIssue too many cases?
+      ...email,
+      ...phone,
+    },
+    purchase_units: [
+      {
+        amount: {
+          currency_code: sdkConfig.currency,
+        },
+      },
+    ],
+    // getRecommendedPaymentMethods maps to include_account_details in the API
+    preferences: {
+      include_account_details: true,
+    },
+  };
+};
+
+const parseSdkConfig = ({
+  sdkConfig,
+  logger,
+}: {|
+  sdkConfig: SdkConfig,
+  logger: LoggerType,
+|}): SdkConfig => {
+  if (!sdkConfig.sdkToken) {
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
+      event: "error",
+      dimensions: {
+        errorType: "merchant_configuration_validation_error",
+        validationDetails: "sdk_token_not_present",
+      },
+    });
+
+    throw new ValidationError(
+      `script data attribute sdk-client-token is required but was not passed`
+    );
+  }
+
+  if (!sdkConfig.pageType) {
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
+      event: "error",
+      dimensions: {
+        errorType: "merchant_configuration_validation_error",
+        validationDetails: "page_type_not_present",
+      },
+    });
+
+    throw new ValidationError(
+      `script data attribute page-type is required but was not passed`
+    );
+  }
+
+  if (sdkConfig.userIDToken) {
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
+      event: "error",
+      dimensions: {
+        errorType: "merchant_configuration_validation_error",
+        validationDetails: "sdk_token_and_id_token_present",
+      },
+    });
+
+    throw new ValidationError(
+      `use script data attribute sdk-client-token instead of user-id-token`
+    );
+  }
+
+  // Client token has widely adopted integrations in the SDK that we do not want
+  // to support anymore. For now, we will be only enforcing a warning. We should
+  // expand on this warning with upgrade guides when we have them.
+  if (sdkConfig.clientToken) {
+    // eslint-disable-next-line no-console
+    console.warn(`script data attribute client-token is not recommended`);
+  }
+
+  return sdkConfig;
+};
+
+export interface ShopperInsightsInterface {
+  getRecommendedPaymentMethods: (
+    payload: MerchantPayloadData
+  ) => Promise<RecommendedPaymentMethods>;
+}
+
+export class ShopperSession {
+  logger: LoggerType;
+  request: Request;
+  requestId: string = "";
+  sdkConfig: SdkConfig;
+  sessionState: Storage;
+
+  constructor({
+    logger,
+    request,
+    sdkConfig,
+    sessionState,
+  }: {|
+    logger: LoggerType,
+    request: Request,
+    sdkConfig: SdkConfig,
+    sessionState: Storage,
+  |}) {
+    this.logger = logger;
+    this.request = request;
+    this.sdkConfig = parseSdkConfig({ sdkConfig, logger });
+    this.sessionState = sessionState;
+  }
+
+  async getRecommendedPaymentMethods(
+    merchantPayload: MerchantPayloadData
+  ): Promise<RecommendedPaymentMethods> {
+    const startTime = Date.now();
+    const data = parseMerchantPayload({
+      merchantPayload,
+      sdkConfig: this.sdkConfig,
+    });
+    try {
+      const { body } = await this.request<
+        RecommendedPaymentMethodsRequestData,
+        RecommendedPaymentMethodsResponse
+      >({
+        method: "POST",
+        url: `${this.sdkConfig.paypalApiDomain}/${ELIGIBLE_PAYMENT_METHODS}`,
+        data,
+        accessToken: this.sdkConfig.sdkToken,
+      });
+
+      this.sessionState.set("shopperInsights", {
+        getRecommendedPaymentMethodsUsed: true,
+      });
+
+      const { paypal, venmo } = body?.eligible_methods;
+
+      const isPayPalRecommended =
+        (paypal?.eligible_in_paypal_network && paypal?.recommended) || false;
+      const isVenmoRecommended =
+        (venmo?.eligible_in_paypal_network && venmo?.recommended) || false;
+
+      this.logger.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(),
+      });
+
+      this.logger.metricCounter({
+        namespace: SHOPPER_INSIGHTS_METRIC_NAME,
+        event: "success",
+        dimensions: {
+          isPayPalRecommended: String(isPayPalRecommended),
+          isVenmoRecommended: String(isVenmoRecommended),
+        },
+      });
+
+      return { isPayPalRecommended, isVenmoRecommended };
+    } catch (error) {
+      this.logger.metricCounter({
+        namespace: SHOPPER_INSIGHTS_METRIC_NAME,
+        event: "error",
+        dimensions: {
+          errorType: "api_error",
+        },
+      });
+
+      this.logger.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(),
+      });
+
+      this.logger.error("shopper_insights_api_error", {
+        err: stringifyError(error),
+      });
+
+      throw error;
+    }
+  }
+}