@lookiero/checkout 10.1.0 → 11.1.0

package/src/ExpoRoot.tsx

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
@@ -12,7 +13,7 @@ import { fetchTranslations, translationExternalEndpoint } from "@lookiero/sty-ps
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { DummyLayout, themeByTradename } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvironment";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
@@ -21,22 +22,24 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { Customer } from "./projection/customer/customer";
-import { Order } from "./projection/order/order";
-import { Subscription } from "./projection/subscription/subscription";
+import { OrderProjection } from "./projection/order/order";
+import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const locale: Locale = Locale.en_GB;
-const subscription: Subscription = "b";
-const order: Order = {
+const locale: Locale = Locale.es_ES;
+const subscription: SubscriptionProjection = "b";
+const order: OrderProjection = {
   isFirstOrder: false,
   orderNumber: 3687582,
   coupon: "MYLOOKIERO",
 };
 
 const customer: Customer = {
-  customerId: "a4355713-469b-4684-bf90-3215702dfb1c",
-  country: Country.ES,
+  customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+  country: Country.NL,
   segment: Segment.WOMEN,
+  email: "email@example.com",
+  name: "Adèle Léonce Émilie",
 };
 
 const sentryConfig: SentryEnvironment = {
@@ -53,7 +56,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2ODkxMDAsImV4cCI6MTc0NjI3ODQwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMDMiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiYTQzNTU3MTMtNDY5Yi00Njg0LWJmOTAtMzIxNTcwMmRmYjFjIiwiaWF0IjoxNzQzNjg2NDAyfQ.pmqFo-4s0USFpzCnijRt78bWuBdu2Q7f4L9UtOkfAwo";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -94,6 +97,7 @@ setPaymentsBridge({
   useFeatureFlags: () => ({}),
   locale: () => Promise.resolve("es-ES"),
   scrollView: ScrollView,
+  hostUrl: "",
 });
 
 const kameleoonConfig: KameleoonEnvironment = {
@@ -119,48 +123,59 @@ const Root = root({
   kameleoon: () => kameleoonConfig,
 })({ customerId: customer.customerId });
 
-const ExpoRoot: FC = () => {
+interface ExpoRootProps {
+  readonly tradename: Tradename;
+}
+const ExpoRoot: FC<ExpoRootProps> = ({ tradename }) => {
   const [fontsLoaded] = useFonts({
-    ["AreaInktrap-Semibold"]: require("@lookiero/aurora-fonts/AreaInktrap-Semibold.otf"),
-    ["AreaNormal-Semibold"]: require("@lookiero/aurora-fonts/AreaNormal-Semibold.otf"),
-    ["AreaNormal-Extrabold"]: require("@lookiero/aurora-fonts/AreaNormal-Extrabold.otf"),
+    ["AreaInktrap-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaInktrap-Semibold.otf"),
+    ["AreaNormal-Semibold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Semibold.otf"),
+    ["AreaNormal-Extrabold"]: require("@lookiero/aurora/build/assets/fonts/AreaNormal-Extrabold.otf"),
+    ["OpenSans-Regular"]: require("@lookiero/aurora/build/assets/fonts/OpenSans-Regular.ttf"),
+    ["OpenSans-Bold"]: require("@lookiero/aurora/build/assets/fonts/OpenSans-Bold.ttf"),
+    ["DalaFloda-Bold"]: require("@lookiero/aurora/build/assets/fonts/DalaFloda-Bold.otf"),
     auroraicons: require("@lookiero/aurora-iconfont/dist/auroraicons.ttf"),
   });
 
   const [isAccessible, setIsAccessible] = useState<boolean>();
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
+  const theme = themeByTradename({ tradename });
+
   return fontsLoaded ? (
-    <PaymentsQueryProvider>
-      <EventProvider>
-        <Aurora>
-          {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
-
-          <Router>
-            <Routes>
-              <Route
-                path="/checkout/*"
-                element={
-                  <Root
-                    basePath="/checkout"
-                    customer={customer}
-                    layout={DummyLayout}
-                    locale={locale}
-                    order={order}
-                    subscription={subscription}
-                    tradename={Tradename.LOOKIERO}
-                    useRedirect={useRedirect}
-                    onNotAccessible={onNotAccessible}
-                  />
-                }
-              />
-
-              <Route element={<Navigate to="/checkout" replace />} path="*" />
-            </Routes>
-          </Router>
-        </Aurora>
-      </EventProvider>
-    </PaymentsQueryProvider>
+    <PortalProvider>
+      <PaymentsQueryProvider>
+        <EventProvider>
+          <Aurora theme={theme}>
+            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+
+            <Router>
+              <Routes>
+                <Route
+                  path="/checkout/*"
+                  element={
+                    <Root
+                      basePath="/checkout"
+                      customer={customer}
+                      layout={DummyLayout}
+                      locale={locale}
+                      order={order}
+                      subscription={subscription}
+                      tradename={Tradename.LOOKIERO}
+                      useRedirect={useRedirect}
+                      onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}
+                      onNotAccessible={onNotAccessible}
+                    />
+                  }
+                />
+
+                <Route element={<Navigate to="/checkout" replace />} path="*" />
+              </Routes>
+            </Router>
+          </Aurora>
+        </EventProvider>
+      </PaymentsQueryProvider>
+    </PortalProvider>
   ) : null;
 };
 

package/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { CommandStatus, useCommand } from "@lookiero/messaging-react";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
@@ -13,7 +14,7 @@ interface BlockCheckoutBookingFunction {
 type UseBlockCheckoutBooking = [blockCheckoutBooking: BlockCheckoutBookingFunction, status: CommandStatus];
 
 interface UseBlockCheckoutBookingFunctionArgs {
-  readonly checkoutBookingId: string;
+  readonly checkoutBookingId: string | undefined;
   readonly logger: Logger;
 }
 
@@ -26,6 +27,8 @@ const useBlockCheckoutBooking: UseBlockCheckoutBookingFunction = ({ checkoutBook
   const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
 
   const blockCheckoutBooking = useCallback(async () => {
+    invariant(checkoutBookingId, "checkoutBookingId is required");
+
     try {
       await commandBus(
         blockCheckoutBookingCommand({

package/src/infrastructure/projection/checkout/checkout.mock.ts

@@ -11,6 +11,7 @@ const itemIds = [
   "8890e00b-d4ed-4220-ae13-52cd88ae8ed5",
 ];
 interface CheckoutDtoFunctionArgs {
+  readonly id?: string;
   readonly status?: CheckoutStatus;
   readonly items: CheckoutItemFunctionArgs[];
 }
@@ -19,8 +20,12 @@ interface CheckoutDtoFunction {
   (args: CheckoutDtoFunctionArgs): CheckoutDto;
 }
 
-const checkoutDto: CheckoutDtoFunction = ({ status = CheckoutStatus.STARTED, items }) => ({
-  id: "9c450400-0cd7-44a4-b0e3-e0002a9bf8df",
+const checkoutDto: CheckoutDtoFunction = ({
+  id = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df",
+  status = CheckoutStatus.STARTED,
+  items,
+}) => ({
+  id,
   status,
   customerId: "0df61ca7-7e4d-462b-a422-a57de0d116b4",
   boxId: "9c406e57-100a-4aa6-83c5-016e7c2970e7",
@@ -37,6 +42,6 @@ interface CheckoutFunction {
   (args: CheckoutFunctionArgs): CheckoutProjection;
 }
 
-const checkout: CheckoutFunction = ({ status, items }) => toCheckoutProjection(checkoutDto({ status, items }));
+const checkout: CheckoutFunction = ({ id, status, items }) => toCheckoutProjection(checkoutDto({ id, status, items }));
 
 export { checkout, checkoutDto };

package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.ts

@@ -23,7 +23,7 @@ const DEFAULT_QUERY_OPTIONS: QueryOptions = {
 };
 
 interface UseViewPricingByCheckoutIdFunctionArgs {
-  readonly checkoutId: string;
+  readonly checkoutId: string | undefined;
   readonly queryOptions?: QueryOptions;
 }
 
@@ -36,7 +36,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
   queryOptions = DEFAULT_QUERY_OPTIONS,
 }) =>
   useQuery({
-    query: viewPricingByCheckoutId({ checkoutId }),
+    query: viewPricingByCheckoutId({ checkoutId: checkoutId as string }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
@@ -44,6 +44,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
       staleTime: Infinity,
       retry: false,
       refetchOnWindowFocus: false,
+      enabled: Boolean(checkoutId),
     },
   });
 

package/src/infrastructure/tracking/tracking.ts

@@ -2,7 +2,7 @@ import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-trac
 import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
 import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
-import { Subscription } from "../../projection/subscription/subscription";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 
 const PROJECT = "checkout";
 
@@ -121,7 +121,7 @@ interface CheckoutTrackingEvent
       readonly actionField: {
         readonly items: number;
         readonly currencyCode: Currency;
-        readonly subscription: Subscription;
+        readonly subscription: SubscriptionProjection;
         readonly coupon: string | null;
         readonly orderId: number;
         readonly value: number;

package/src/infrastructure/tracking/useTrackCheckout.test.tsx

@@ -2,9 +2,15 @@ import { renderHook } from "@testing-library/react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
+import { CheckoutStatus } from "../../domain/checkout/model/checkout";
+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 { checkout as checkoutMock } from "../projection/checkout/checkout.mock";
 import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
-import { TrackingPage } from "./tracking";
 import { useTrackCheckout as sut } from "./useTrackCheckout";
 
 const mockEmitUserEvent = jest.fn();
@@ -12,6 +18,34 @@ jest.mock("@lookiero/sty-psp-tracking");
 
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const userId = "80c38da1-7091-483d-a2ad-8f1642211e80";
+const order: OrderProjection = {
+  coupon: null,
+  isFirstOrder: false,
+  orderNumber: 3691625,
+};
+const checkoutItemsReturned = 1;
+const checkoutItemsKept = 2;
+const checkoutItemsReplaced = 2;
+const checkout: CheckoutProjection = checkoutMock({
+  id: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
+  status: CheckoutStatus.STARTED,
+  items: [
+    ...new Array(checkoutItemsReturned).fill(1).map(() => ({ status: CheckoutItemStatus.RETURNED })),
+    ...new Array(checkoutItemsKept).fill(1).map(() => ({ status: CheckoutItemStatus.KEPT })),
+    ...new Array(checkoutItemsReplaced).fill(1).map(() => ({
+      status: CheckoutItemStatus.REPLACED,
+      replacedFor: { id: "26184353-c4bd-467a-bfd5-c9f688956058" },
+    })),
+  ],
+});
+const pricing: PricingProjection = {
+  pendingToPay: {
+    amount: 16691,
+    currency: Currency.EUR,
+  },
+} as PricingProjection;
+const subscription: SubscriptionProjection = "b";
 
 const event: CheckoutTrackingEvent = {
   event: TrackingEventName.CHECKOUT,
@@ -19,19 +53,19 @@ const event: CheckoutTrackingEvent = {
   section: "checkout_checkout",
   store: country,
   segment,
-  checkoutId: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
-  userId: "80c38da1-7091-483d-a2ad-8f1642211e80",
-  sizeChanges: 0,
-  isFirstOrder: false,
+  checkoutId: checkout.id,
+  userId,
+  sizeChanges: checkoutItemsReplaced,
+  isFirstOrder: order.isFirstOrder,
   ecommerce: {
     checkout: {
       actionField: {
-        items: 5,
-        currencyCode: Currency.EUR,
-        subscription: "b",
-        coupon: null,
-        orderId: 3691625,
-        value: 166.91,
+        items: checkoutItemsKept + checkoutItemsReplaced,
+        currencyCode: pricing.pendingToPay.currency,
+        subscription,
+        coupon: order.coupon,
+        orderId: order.orderNumber,
+        value: pricing.pendingToPay.amount / 100,
       },
     },
   },
@@ -43,24 +77,17 @@ describe("useTrackCheckout custom hook", () => {
 
     const { result } = renderHook(() =>
       sut({
-        page: TrackingPage.CHECKOUT,
+        order,
+        checkout,
+        pricing,
+        subscription,
+        userId,
         country,
         segment,
-        checkoutId: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
       }),
     );
 
-    result.current({
-      totalCheckoutItemsKept: 5,
-      pendingToPay: 166.91,
-      coupon: null,
-      currencyCode: Currency.EUR,
-      isFirstOrder: false,
-      orderNumber: 3691625,
-      totalReplacedFor: 0,
-      subscription: "b",
-      userId: "80c38da1-7091-483d-a2ad-8f1642211e80",
-    });
+    result.current();
 
     expect(mockEmitUserEvent).toHaveBeenCalledWith(event);
   });

package/src/infrastructure/tracking/useTrackCheckout.ts

@@ -1,84 +1,94 @@
 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 { Subscription } from "../../projection/subscription/subscription";
+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 { 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 {
-  (args: TrackCheckoutFunctionArgs): void;
+  (): void;
 }
 
 interface UseTrackCheckoutFunctionArgs {
-  readonly page: TrackingPage;
+  readonly order: OrderProjection;
+  readonly checkout: CheckoutProjection | undefined;
+  readonly pricing: PricingProjection | undefined;
+  readonly subscription: SubscriptionProjection;
+  readonly userId: string;
   readonly country: Country;
-  readonly checkoutId: string | undefined;
   readonly segment: Segment;
 }
+
 interface UseTrackCheckoutFunction {
   (args: UseTrackCheckoutFunctionArgs): TrackCheckoutFunction;
 }
 
-const useTrackCheckout: UseTrackCheckoutFunction = ({ page, country, checkoutId, segment }) => {
+const useTrackCheckout: UseTrackCheckoutFunction = ({
+  order,
+  checkout,
+  pricing,
+  subscription,
+  segment,
+  country,
+  userId,
+}) => {
   const emitUserEvent = useEmitUserEvent<CheckoutTrackingEvent>();
+  const { coupon, isFirstOrder, orderNumber } = order;
 
-  const trackCheckout: TrackCheckoutFunction = useCallback(
-    ({
-      coupon,
-      currencyCode,
-      isFirstOrder,
-      orderNumber,
-      pendingToPay,
-      subscription,
-      totalCheckoutItemsKept,
-      totalReplacedFor,
-      userId,
-    }) => {
-      if (!checkoutId) {
-        return;
-      }
+  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}_${page}`,
-        store: country,
-        segment,
-        checkoutId,
-        userId,
-        sizeChanges: totalReplacedFor,
-        isFirstOrder,
-        ecommerce: {
-          checkout: {
-            actionField: {
-              items: totalCheckoutItemsKept,
-              currencyCode,
-              subscription,
-              coupon,
-              orderId: orderNumber,
-              value: pendingToPay,
-            },
+    const checkoutTrackingEvent: CheckoutTrackingEvent = {
+      event: TrackingEventName.CHECKOUT,
+      eventCategory: TrackingEventCategory.ECOMMERCE,
+      section: `${PROJECT}_${TrackingPage.CHECKOUT}`,
+      store: country,
+      segment,
+      checkoutId: checkout.id,
+      userId,
+      sizeChanges: totalReplacedFor,
+      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,
           },
         },
-      };
+      },
+    };
 
-      emitUserEvent(checkoutTrackingEvent);
-    },
-    [checkoutId, country, emitUserEvent, page, segment],
-  );
+    emitUserEvent(checkoutTrackingEvent);
+  }, [
+    checkout,
+    country,
+    coupon,
+    emitUserEvent,
+    isFirstOrder,
+    orderNumber,
+    pricing?.pendingToPay.amount,
+    pricing?.pendingToPay.currency,
+    segment,
+    subscription,
+    userId,
+  ]);
 
   return trackCheckout;
 };

package/src/infrastructure/ui/Root.tsx

@@ -10,8 +10,8 @@ import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLogger
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../projection/customer/customer";
-import { Order } from "../../projection/order/order";
-import { Subscription } from "../../projection/subscription/subscription";
+import { OrderProjection } from "../../projection/order/order";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
@@ -32,14 +32,14 @@ interface RootFunction {
 
 interface RootProps {
   readonly basePath: string;
-  readonly locale?: Locale;
+  readonly locale: Locale;
   readonly customer: Customer;
-  readonly order: Order | undefined;
-  readonly subscription: Subscription | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
   readonly layout: Layout;
   readonly tradename: Tradename;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutSubmitted?: () => void;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
@@ -59,14 +59,14 @@ const root: RootFunction = ({
   // eslint-disable-next-line react/display-name, react/prop-types
   const Root = ({
     basePath,
-    locale = Locale.en_GB,
+    locale,
     customer,
     order,
     subscription,
     layout,
     tradename,
     onNotAccessible,
-    onCheckoutSubmitted,
+    onCheckoutFlowSuccess,
     useRedirect,
     useRoutes = reactRouterUseRoutes,
   }: RootProps) => {
@@ -88,7 +88,7 @@ const root: RootFunction = ({
             tradename={tradename}
             useRedirect={useRedirect}
             useRoutes={useRoutes}
-            onCheckoutSubmitted={onCheckoutSubmitted}
+            onCheckoutFlowSuccess={onCheckoutFlowSuccess}
             onI18nError={development ? undefined : handleOnI18nError}
             onNotAccessible={onNotAccessible}
           />

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

@@ -33,6 +33,7 @@ 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);