@lookiero/checkout 10.0.0-beta.4 → 10.0.0

package/src/infrastructure/tracking/useTrackCheckout.ts

@@ -1,94 +1,84 @@
 import { useCallback } from "react";
-import invariant from "tiny-invariant";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
-import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
-import { CheckoutProjection } from "../../projection/checkout/checkout";
-import { OrderProjection } from "../../projection/order/order";
-import { PricingProjection } from "../../projection/pricing/pricing";
-import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { Subscription } from "../../projection/subscription/subscription";
 import { PROJECT, TrackingPage } from "./tracking";
 import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
 
+interface TrackCheckoutFunctionArgs {
+  readonly userId: string;
+  readonly totalReplacedFor: number;
+  readonly isFirstOrder: boolean;
+  readonly totalCheckoutItemsKept: number;
+  readonly currencyCode: Currency;
+  readonly subscription: Subscription;
+  readonly coupon: string | null;
+  readonly orderNumber: number;
+  readonly pendingToPay: number;
+}
 interface TrackCheckoutFunction {
-  (): void;
+  (args: TrackCheckoutFunctionArgs): void;
 }
 
 interface UseTrackCheckoutFunctionArgs {
-  readonly order: OrderProjection;
-  readonly checkout: CheckoutProjection | undefined;
-  readonly pricing: PricingProjection | undefined;
-  readonly subscription: SubscriptionProjection;
-  readonly userId: string;
+  readonly page: TrackingPage;
   readonly country: Country;
+  readonly checkoutId: string | undefined;
   readonly segment: Segment;
 }
-
 interface UseTrackCheckoutFunction {
   (args: UseTrackCheckoutFunctionArgs): TrackCheckoutFunction;
 }
 
-const useTrackCheckout: UseTrackCheckoutFunction = ({
-  order,
-  checkout,
-  pricing,
-  subscription,
-  segment,
-  country,
-  userId,
-}) => {
+const useTrackCheckout: UseTrackCheckoutFunction = ({ page, country, checkoutId, segment }) => {
   const emitUserEvent = useEmitUserEvent<CheckoutTrackingEvent>();
-  const { coupon, isFirstOrder, orderNumber } = order;
-
-  const trackCheckout: TrackCheckoutFunction = useCallback(() => {
-    invariant(checkout, "Checkout must be defined to track checkout");
 
-    const checkoutItemsKept = checkout.items.filter(
-      (checkoutItem) =>
-        checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
-    );
-    const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
-
-    const checkoutTrackingEvent: CheckoutTrackingEvent = {
-      event: TrackingEventName.CHECKOUT,
-      eventCategory: TrackingEventCategory.ECOMMERCE,
-      section: `${PROJECT}_${TrackingPage.CHECKOUT}`,
-      store: country,
-      segment,
-      checkoutId: checkout.id,
-      userId,
-      sizeChanges: totalReplacedFor,
+  const trackCheckout: TrackCheckoutFunction = useCallback(
+    ({
+      coupon,
+      currencyCode,
       isFirstOrder,
-      ecommerce: {
-        checkout: {
-          actionField: {
-            items: checkoutItemsKept.length || 0,
-            currencyCode: pricing?.pendingToPay.currency as Currency,
-            subscription,
-            coupon,
-            orderId: orderNumber,
-            value: (pricing?.pendingToPay.amount as number) / 100,
+      orderNumber,
+      pendingToPay,
+      subscription,
+      totalCheckoutItemsKept,
+      totalReplacedFor,
+      userId,
+    }) => {
+      if (!checkoutId) {
+        return;
+      }
+
+      const checkoutTrackingEvent: CheckoutTrackingEvent = {
+        event: TrackingEventName.CHECKOUT,
+        eventCategory: TrackingEventCategory.ECOMMERCE,
+        section: `${PROJECT}_${page}`,
+        store: country,
+        segment,
+        checkoutId,
+        userId,
+        sizeChanges: totalReplacedFor,
+        isFirstOrder,
+        ecommerce: {
+          checkout: {
+            actionField: {
+              items: totalCheckoutItemsKept,
+              currencyCode,
+              subscription,
+              coupon,
+              orderId: orderNumber,
+              value: pendingToPay,
+            },
           },
         },
-      },
-    };
+      };
 
-    emitUserEvent(checkoutTrackingEvent);
-  }, [
-    checkout,
-    country,
-    coupon,
-    emitUserEvent,
-    isFirstOrder,
-    orderNumber,
-    pricing?.pendingToPay.amount,
-    pricing?.pendingToPay.currency,
-    segment,
-    subscription,
-    userId,
-  ]);
+      emitUserEvent(checkoutTrackingEvent);
+    },
+    [checkoutId, country, emitUserEvent, page, segment],
+  );
 
   return trackCheckout;
 };

package/src/infrastructure/ui/Root.tsx

@@ -8,9 +8,10 @@ import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
 import { Layout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../projection/customer/customer";
-import { OrderProjection } from "../../projection/order/order";
-import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { Order } from "../../projection/order/order";
+import { Subscription } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
@@ -18,8 +19,8 @@ import { Routing } from "./routing/Routing";
 interface RootFunctionArgs {
   readonly Messaging: MessagingRoot;
   readonly I18n: I18n;
-  readonly queryBus: QueryBus;
   readonly development?: boolean;
+  readonly queryBus: QueryBus;
   readonly sentry: () => SentryEnvironment;
   readonly getAuthToken: () => Promise<string>;
   readonly kameleoon: () => KameleoonEnvironment;
@@ -31,13 +32,14 @@ interface RootFunction {
 
 interface RootProps {
   readonly basePath: string;
-  readonly locale: Locale;
+  readonly locale?: Locale;
   readonly customer: Customer;
-  readonly order: OrderProjection;
-  readonly subscription: SubscriptionProjection;
+  readonly order: Order | undefined;
+  readonly subscription: Subscription | undefined;
   readonly layout: Layout;
+  readonly tradename: Tradename;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutFlowSuccess: () => void;
+  readonly onCheckoutSubmitted?: () => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
@@ -57,13 +59,14 @@ const root: RootFunction = ({
   // eslint-disable-next-line react/display-name, react/prop-types
   const Root = ({
     basePath,
-    locale,
+    locale = Locale.en_GB,
     customer,
     order,
     subscription,
     layout,
+    tradename,
     onNotAccessible,
-    onCheckoutFlowSuccess,
+    onCheckoutSubmitted,
     useRedirect,
     useRoutes = reactRouterUseRoutes,
   }: RootProps) => {
@@ -82,9 +85,10 @@ const root: RootFunction = ({
             locale={locale}
             order={order}
             subscription={subscription}
+            tradename={tradename}
             useRedirect={useRedirect}
             useRoutes={useRoutes}
-            onCheckoutFlowSuccess={onCheckoutFlowSuccess}
+            onCheckoutSubmitted={onCheckoutSubmitted}
             onI18nError={development ? undefined : handleOnI18nError}
             onNotAccessible={onNotAccessible}
           />

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.test.tsx

@@ -6,6 +6,12 @@ import { checkoutItem } from "../../../../../projection/checkoutItem/checkoutIte
 import { render } from "../../../../test/render";
 import { ItemHeader } from "./ItemHeader";
 
+jest.mock("../../../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({
+    basePath: "",
+  }),
+}));
+
 const mockNavigate = jest.fn();
 const mockGeneratePath = jest.fn();
 jest.mock("react-router-native", () => ({

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx

@@ -33,7 +33,6 @@ interface ItemHeaderProps {
   readonly onNext?: OnNextItemFunction;
   readonly onPrevious?: OnPreviousItemFunction;
 }
-
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);

package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts

@@ -1,33 +1,75 @@
-import { useEffect } from "react";
-import { PaymentPayload, Section, usePaymentStatusManager } from "@lookiero/payments-front";
+import { useCallback, useEffect } from "react";
+import { useEvent } from "@lookiero/event";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { I18nMessages } from "../i18n/i18n";
+
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
+
+interface Message {
+  readonly id: string;
+}
+interface OnSuccessFunctionArgs {
+  readonly message: Message;
+}
+interface OnSuccessFunction {
+  (args: OnSuccessFunctionArgs): void;
+}
+
+interface Toaster {
+  readonly id: string;
+}
+interface Error {
+  readonly toaster?: Toaster;
+}
+interface OnErrorFunctionArgs {
+  readonly error: Error;
+}
+interface OnErrorFunction {
+  (args: OnErrorFunctionArgs): void;
+}
 
 interface UsePaymentInstrumentEventsFunctionArgs {
-  readonly onSuccess: (payload: PaymentPayload) => void;
-  readonly onError: (payload: PaymentPayload) => void;
+  readonly logger: Logger;
 }
 
 interface UsePaymentInstrumentEventsFunction {
   (args: UsePaymentInstrumentEventsFunctionArgs): void;
 }
 
-const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ onSuccess, onError }) => {
-  const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
+const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ logger }) => {
+  const { subscribe, unsubscribe } = useEvent();
 
-  useEffect(() => {
-    const { isLoading, consumePayload } = refreshStatus;
+  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
 
-    if (isLoading) {
-      return;
-    }
+  const onSuccess: OnSuccessFunction = useCallback(
+    ({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }),
+    [createNotification],
+  );
 
-    consumePayload((payload) => {
-      if (payload.success) {
-        onSuccess(payload);
-      } else {
-        onError(payload);
+  const onError: OnErrorFunction = useCallback(
+    ({ error }) => {
+      if (error.toaster) {
+        createNotification({
+          bodyI18nKey: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+          level: NotificationLevel.ERROR,
+        });
       }
-    });
-  }, [onError, onSuccess, refreshStatus]);
+    },
+    [createNotification],
+  );
+
+  useEffect(() => {
+    subscribe({ event: PAYMENT_ERROR }, onError);
+    subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+
+    return () => {
+      unsubscribe({ event: PAYMENT_ERROR }, onError);
+      unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+    };
+  }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
 };
 
 export { usePaymentInstrumentEvents };

package/src/infrastructure/ui/hooks/useStaticInfo.test.tsx

@@ -1,18 +1,21 @@
 import { renderHook, waitFor } from "@testing-library/react-native";
 import React, { FC } from "react";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 import { StaticInfoProvider, useStaticInfo as sut } from "./useStaticInfo";
 
 const kameleoon = {} as KameleoonEnvironment;
 const customer = { customerId: "6667283e-5f61-457e-b637-88736265b78f" } as Customer;
+const tradename = Tradename.LOOKIERO;
+const basePath = "";
 
 interface WrapperProps {
   readonly children: JSX.Element;
 }
 
 const Wrapper: FC<WrapperProps> = ({ children }) => (
-  <StaticInfoProvider customer={customer} kameleoon={kameleoon}>
+  <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon} tradename={tradename}>
     {children}
   </StaticInfoProvider>
 );
@@ -24,6 +27,8 @@ describe("useStaticInfo hook", () => {
     const staticInfo = {
       kameleoon,
       customer,
+      tradename,
+      basePath,
     };
 
     await waitFor(() => expect(result.current).toStrictEqual(staticInfo));

package/src/infrastructure/ui/hooks/useStaticInfo.tsx

@@ -1,11 +1,13 @@
 import React, { createContext, FC, ReactNode, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 
 interface StaticInfo {
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
+  readonly tradename: Tradename;
   readonly basePath: string;
 }
 
@@ -15,11 +17,20 @@ interface StaticInfoProviderProps {
   readonly children: ReactNode;
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
+  readonly tradename: Tradename;
   readonly basePath: string;
 }
 
-const StaticInfoProvider: FC<StaticInfoProviderProps> = ({ children, kameleoon, customer, basePath }) => {
-  const value = useMemo(() => ({ kameleoon, customer, basePath }), [customer, kameleoon, basePath]);
+const StaticInfoProvider: FC<StaticInfoProviderProps> = ({ children, kameleoon, customer, tradename, basePath }) => {
+  const value = useMemo(
+    () => ({
+      kameleoon,
+      customer,
+      tradename,
+      basePath,
+    }),
+    [basePath, customer, kameleoon, tradename],
+  );
 
   return <StaticInfoContext.Provider value={value}>{children}</StaticInfoContext.Provider>;
 };