@paypal/checkout-components 5.0.373-alpha-bd1c80d.0 → 5.0.373

package/package.json

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

package/src/hosted-buttons/index.js

@@ -14,6 +14,7 @@ import {
   renderDefaultButton,
   renderForm,
   renderStandaloneButton,
+  getTrackingId,
 } from "./utils";
 import type {
   HostedButtonsComponent,
@@ -49,28 +50,34 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
         selector,
       });
 
+      const trackingId = getTrackingId(selector);
+
       const createOrder = buildHostedButtonCreateOrder({
         enableDPoP,
         hostedButtonId,
         merchantId,
+        trackingId,
       });
 
       const onApprove = buildHostedButtonOnApprove({
         enableDPoP,
         hostedButtonId,
         merchantId,
+        trackingId,
       });
 
       const onShippingAddressChange = buildHostedButtonOnShippingAddressChange({
         enableDPoP,
         hostedButtonId,
         shouldIncludeShippingCallbacks,
+        trackingId,
       });
 
       const onShippingOptionsChange = buildHostedButtonOnShippingOptionsChange({
         enableDPoP,
         hostedButtonId,
         shouldIncludeShippingCallbacks,
+        trackingId,
       });
 
       const buttonOptions: HostedButtonOptions = {

package/src/hosted-buttons/types.js

@@ -132,6 +132,7 @@ export type GetCallbackProps = {|
   hostedButtonId: string,
   merchantId?: string,
   shouldIncludeShippingCallbacks?: boolean,
+  trackingId?: string,
 |};
 
 export type HostedButtonsInstance = {|

package/src/hosted-buttons/utils.js

@@ -9,7 +9,7 @@ import {
   getLocale,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
+import { FUNDING, FPTI_KEY } from "@paypal/sdk-constants/src";
 import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
@@ -214,6 +214,18 @@ export function getElementFromSelector(
     : selector;
 }
 
+export function getTrackingId(
+  HostedButtonSelector: string | HTMLElement
+): string {
+  if (typeof HostedButtonSelector !== "string") {
+    return "";
+  }
+  const ele = document.querySelector(
+    `${HostedButtonSelector} input[name="uuid"]`
+  );
+  return ele ? ele.getAttribute("value") || "" : "";
+}
+
 /**
  * Attaches form fields (html) to the given selector, and
  * initializes window.__pp_form_fields (htmlScript).
@@ -246,6 +258,7 @@ export const buildHostedButtonCreateOrder = ({
   enableDPoP,
   hostedButtonId,
   merchantId,
+  trackingId,
 }: GetCallbackProps): CreateOrder => {
   return async (data) => {
     const userInputs =
@@ -271,6 +284,13 @@ export const buildHostedButtonCreateOrder = ({
       });
       // $FlowIssue request returns ZalgoPromise
       const { body } = response;
+      getLogger()
+        .track({
+          [FPTI_KEY.CONTEXT_ID]: body.context_id,
+          [FPTI_KEY.EVENT_NAME]: "ncps_create_order",
+          tracking_id: trackingId,
+        })
+        .flush();
       return body.context_id || onError(body.name);
     } catch (e) {
       return onError("REQUEST_FAILED");
@@ -282,6 +302,7 @@ export const buildHostedButtonOnApprove = ({
   enableDPoP,
   hostedButtonId,
   merchantId,
+  trackingId,
 }: GetCallbackProps): OnApprove => {
   return async (data) => {
     const url = `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`;
@@ -299,6 +320,14 @@ export const buildHostedButtonOnApprove = ({
         context_id: data.orderID,
       }),
     }).then((response) => {
+      getLogger()
+        .track({
+          [FPTI_KEY.CONTEXT_ID]: data.orderID,
+          [FPTI_KEY.EVENT_NAME]: "ncps_onapprove_order",
+          tracking_id: trackingId,
+        })
+        .flush();
+
       // The "Debit or Credit Card" button does not open a popup
       // so we need to redirect to the thank you page for buyers who complete
       // a checkout via "Debit or Credit Card".
@@ -319,6 +348,7 @@ export const buildHostedButtonOnShippingAddressChange = ({
   enableDPoP,
   hostedButtonId,
   shouldIncludeShippingCallbacks,
+  trackingId,
 }: GetCallbackProps): OnShippingAddressChange | typeof undefined => {
   if (shouldIncludeShippingCallbacks) {
     return async (data, actions) => {
@@ -354,6 +384,14 @@ export const buildHostedButtonOnShippingAddressChange = ({
       if (response.status !== 200) {
         return actions.reject(errors?.ADDRESS_ERROR);
       }
+
+      getLogger()
+        .track({
+          [FPTI_KEY.CONTEXT_ID]: orderID,
+          [FPTI_KEY.EVENT_NAME]: "ncps_shipping_address_change",
+          tracking_id: trackingId,
+        })
+        .flush();
     };
   }
 };
@@ -362,6 +400,7 @@ export const buildHostedButtonOnShippingOptionsChange = ({
   enableDPoP,
   hostedButtonId,
   shouldIncludeShippingCallbacks,
+  trackingId,
 }: GetCallbackProps): OnShippingOptionsChange | typeof undefined => {
   if (shouldIncludeShippingCallbacks) {
     return async (data, actions) => {
@@ -386,6 +425,14 @@ export const buildHostedButtonOnShippingOptionsChange = ({
       if (response.status !== 200) {
         return actions.reject(errors?.METHOD_UNAVAILABLE);
       }
+
+      getLogger()
+        .track({
+          [FPTI_KEY.CONTEXT_ID]: orderID,
+          [FPTI_KEY.EVENT_NAME]: "ncps_shipping_options_change",
+          tracking_id: trackingId,
+        })
+        .flush();
     };
   }
 };

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

@@ -21,6 +21,7 @@ import {
   renderStandaloneButton,
   applyContainerStyles,
   renderDefaultButton,
+  getTrackingId,
 } from "./utils";
 
 vi.mock("@krakenjs/belter/src", async () => {
@@ -39,6 +40,10 @@ vi.mock("@paypal/sdk-client/src", async () => {
     getLocale: () => ({ lang: "en", country: "US" }),
     getLogger: vi.fn(() => ({
       error: vi.fn(),
+      track: vi.fn().mockImplementation(() => ({
+        flush: vi.fn(),
+      })),
+      flush: vi.fn(),
     })),
   };
 });
@@ -803,6 +808,35 @@ test("getElementFromSelector", () => {
   expect(mockQuerySelector).toHaveBeenCalledWith(containerId);
 });
 
+describe("getTrackingId", () => {
+  const containerId = "#container-id";
+
+  test("returns uuid value when input element exists and has a value", () => {
+    const inputElement = document.createElement("input");
+    inputElement.setAttribute("name", "uuid");
+    inputElement.setAttribute("value", "test-uuid-123");
+
+    const containerElement = document.createElement("div");
+    containerElement.appendChild(inputElement);
+
+    vi.spyOn(document, "querySelector").mockImplementationOnce(
+      () => inputElement
+    );
+
+    const result = getTrackingId(containerId);
+
+    expect(result).toBe("test-uuid-123");
+  });
+
+  test("returns empty string when input element doesn't exist", () => {
+    vi.spyOn(document, "querySelector").mockImplementationOnce(() => null);
+
+    const result = getTrackingId(containerId);
+
+    expect(result).toBe("");
+  });
+});
+
 describe("getButtonPreferences", () => {
   test("returns all button preferences if all are eligible", () => {
     const params = {

package/src/zoid/buttons/component.jsx

@@ -105,7 +105,6 @@ import {
   sendPostRobotMessageToButtonIframe,
   isEagerOrderCreationEnabled,
 } from "./util";
-import { PayPalOnApproveOverlay } from "../../ui/overlay/paypal-on-approve-processing-overlay";
 
 export type ButtonsComponent = ZoidComponent<
   ButtonProps,
@@ -342,38 +341,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           },
       },
 
-      showOnApproveOverlay: {
-        type: "function",
-        queryParam: false,
-        value:
-          ({ props: { buttonSessionID } }) =>
-            () => {
-              const overlay = (
-                <PayPalOnApproveOverlay
-                  buttonSessionID={buttonSessionID}
-                />
-              ).render(dom({ doc: document }));
-
-              document.body?.appendChild(overlay);
-            },
-      },
-
-      hideOnApproveOverlay: {
-        type: "function",
-        queryParam: false,
-        value:
-          ({ props: { buttonSessionID } }) =>
-            () => {
-              const overlay = document.getElementsByName(
-                `paypal-onapprove-overlay-${buttonSessionID}`
-              )?.[0];
-
-              if (overlay) {
-                overlay.remove();
-              }
-            },
-      },
-
       redirect: {
         type: "function",
         sendToChild: true,

package/src/ui/overlay/paypal-on-approve-processing-overlay/index.jsx

@@ -1,3 +0,0 @@
-/* @flow */
-
-export * from "./overlay";

package/src/ui/overlay/paypal-on-approve-processing-overlay/overlay.jsx

@@ -1,82 +0,0 @@
-/* @flow */
-/** @jsx node */
-
-import { animate, noop } from "@krakenjs/belter/src";
-import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
-import { LOGO_COLOR, PayPalRebrandLogo } from "@paypal/sdk-logos/src";
-import { type ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-
-import { getContainerStyle, getSandboxStyle } from "../paypal-app-switch/style";
-
-type OverlayProps = {|
-  buttonSessionID: string,
-  close: () => ZalgoPromise<void>,
-  focus: () => ZalgoPromise<void>,
-|};
-
-export function PayPalOnApproveOverlay({
-  buttonSessionID,
-}: OverlayProps): ElementNode {
-  const uid = `paypal-onapprove-overlay-${buttonSessionID}`;
-  const overlayIframeName = `__paypal_checkout_sandbox_${uid}__`;
-  const nonce = "";
-  function closeOverlay(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    const overlay = document.getElementsByName(uid)?.[0];
-
-    animate(overlay, "hide-container", noop);
-
-    if (overlay) {
-      // the delay is to allow the animation time to run
-      setTimeout(() => {
-        overlay.remove();
-      }, 300);
-    }
-  }
-
-  const setupShowAnimation = () => (el) => {
-    animate(el, "show-container", noop);
-  };
-
-  return (
-    <div
-      id={uid}
-      name={uid}
-      onRender={setupShowAnimation()}
-      class="paypal-checkout-sandbox"
-    >
-      <style nonce={nonce}>{getSandboxStyle({ uid })}</style>
-      <iframe
-        title="PayPal Checkout On Approve Overlay"
-        name={overlayIframeName}
-        scrolling="no"
-        class="paypal-checkout-sandbox-iframe"
-      >
-        <html>
-          <body>
-            <div
-              dir="auto"
-              id={uid}
-              class="paypal-overlay-context-popup paypal-checkout-overlay"
-            >
-              <a
-                href="#"
-                class="paypal-checkout-close"
-                onClick={closeOverlay}
-                aria-label="close"
-                role="button"
-              />
-              <div class="paypal-checkout-modal">
-                <div class="paypal-checkout-logo" dir="ltr">
-                  <PayPalRebrandLogo logoColor={LOGO_COLOR.WHITE} />
-                </div>
-              </div>
-              <style nonce={nonce}>{getContainerStyle({ uid })}</style>
-            </div>
-          </body>
-        </html>
-      </iframe>
-    </div>
-  );
-}