@lookiero/checkout 0.6.0-beta.9 → 0.6.0

package/README.md

@@ -26,6 +26,15 @@ Once we can replace the build of Jenkins for NPM one, we are going to be able to
 ```json
 {
   (...)
+  "scripts": {
+    (...)
+    // Remove
+    "build": "tsc -b tsconfig.build.json && cp -R ./src/public/ ./dist/public",
+    // Add
+    "build": "tsc -b tsconfig.build.json && npm run copy:assets",
+    "copy:assets": "cp -R ./src/public/ ./dist/public",
+    (...)
+  },
   "dependencies": {
     (...)
     "@expo/dev-server": "0.1.120",

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import { EndpointFunction } from "@lookiero/i18n";
-import { ComponentType } from "react";
+import { FC } from "react";
 import { RootProps } from "./infrastructure/ui/Root";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-import { SentryLoggerFunctionArgs } from "./shared/logging/SentryLogger";
 interface IsCheckoutAccessibleFunctionArgs {
     readonly customerId: string | undefined;
 }
@@ -13,10 +12,9 @@ interface BootstrapFunctionArgs {
     readonly getAuthToken: () => Promise<string>;
     readonly apiUrl: string;
     readonly translations: EndpointFunction;
-    readonly sentry: SentryLoggerFunctionArgs;
 }
 interface BootstrapFunctionReturn {
-    readonly Root: ComponentType<RootProps>;
+    readonly Root: FC<RootProps>;
     readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
 }
 interface BootstrapFunction {

package/dist/index.js

@@ -3,13 +3,13 @@ import { i18n } from "@lookiero/i18n-react";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { root } from "./infrastructure/ui/Root";
 import { viewIsCheckoutAccessibleByCustomerId, } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-const bootstrap = ({ apiUrl, getAuthToken, translations, sentry }) => {
+const bootstrap = ({ apiUrl, getAuthToken, translations }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
         fetchTranslation: fetchFetchTranslation({ endpoint: translations }),
         contextId: "CheckoutI18n",
     });
-    const Root = root({ Messaging, I18n, getAuthToken, sentry });
+    const Root = root({ Messaging, I18n, getAuthToken });
     const isCheckoutAccessible = ({ customerId }) => queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
     return {
         Root,

package/dist/infrastructure/tracking/tracking.d.ts

@@ -0,0 +1,9 @@
+declare const PROJECT = "checkout";
+declare enum TrackingPage {
+    ITEM = "item",
+    CHECKOUT = "checkout",
+    SUMMARY = "summary",
+    FEEDBACK = "feedback",
+    NOT_FOUND = "not_found"
+}
+export { PROJECT, TrackingPage };

package/dist/infrastructure/tracking/tracking.js

@@ -0,0 +1,10 @@
+const PROJECT = "checkout";
+var TrackingPage;
+(function (TrackingPage) {
+    TrackingPage["ITEM"] = "item";
+    TrackingPage["CHECKOUT"] = "checkout";
+    TrackingPage["SUMMARY"] = "summary";
+    TrackingPage["FEEDBACK"] = "feedback";
+    TrackingPage["NOT_FOUND"] = "not_found";
+})(TrackingPage || (TrackingPage = {}));
+export { PROJECT, TrackingPage };

package/dist/infrastructure/ui/Root.d.ts

@@ -1,18 +1,16 @@
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
-import { ComponentType } from "react";
+import { FC } from "react";
 import { Customer } from "../../projection/shared/customer";
-import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
 import { Menu, TabBar } from "./views/navigation/Navigation";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
     readonly development?: boolean;
-    readonly sentry?: SentryLoggerFunctionArgs;
     readonly getAuthToken: () => Promise<string>;
 }
 interface RootFunction {
-    (args: RootFunctionArgs): ComponentType<RootProps>;
+    (args: RootFunctionArgs): FC<RootProps>;
 }
 interface RootProps {
     readonly basePath: string;

package/dist/infrastructure/ui/Root.js

@@ -1,21 +1,11 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
-import { sentryLogger } from "../../shared/logging/SentryLogger";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
-    // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
-        const handleOnI18nError = useCallback(() => void 0, []);
-        return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
-    };
-    return sentry
-        ? sentryLogger({
-            publicKey: sentry.publicKey,
-            environment: sentry.environment,
-            release: sentry.release,
-            project: sentry.project,
-        })(Root)
-        : Root;
+const root = ({ Messaging, I18n, getAuthToken, development }) => 
+// eslint-disable-next-line react/display-name, react/prop-types
+({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
+    const handleOnI18nError = useCallback(() => void 0, []);
+    return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
+        React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
 };
 export { root };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js

@@ -2,10 +2,11 @@ import React from "react";
 import { Platform, ScrollView } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../theme/theme";
+import { style } from "./SafeAreaScrollView.style.ts";
 const { spaceXXXL } = theme();
 const SafeAreaScrollView = ({ children, footer, edges = ["top", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
+    return (React.createElement(SafeAreaView, { edges: edges, style: [style.safeAreaView, customStyle?.safeAreaView] },
         React.createElement(ScrollView, { contentContainerStyle: [
                 {
                     paddingTop: safeAreaInsetTop + scrollerPaddingTop,

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    safeAreaView: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/{views/header/components/Logo.style.js → components/templates/SafeAreaScrollView.style.ts.js}

@@ -1,8 +1,7 @@
 import { StyleSheet } from "react-native";
 const style = StyleSheet.create({
-    logo: {
-        height: 54,
-        width: 217,
+    safeAreaView: {
+        flex: 1,
     },
 });
 export { style };

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -58,6 +58,8 @@ declare enum I18nMessages {
     HEADER_CHECKOUT_TITLE = "header.checkout_title",
     HEADER_COMPLETE_CHECKOUT_TITLE = "header.complete_checkout_title",
     FEEDBACK_BUTTON = "feedback.button",
-    CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired"
+    CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
+    NOT_FOUND_DESCRIPTION = "not_found.description",
+    NOT_FOUND_BUTTON = "not_found.button"
 }
 export { I18nMessages, COLOR_I18N_PREFIX };

package/dist/infrastructure/ui/i18n/i18n.js

@@ -60,5 +60,7 @@ var I18nMessages;
     I18nMessages["HEADER_COMPLETE_CHECKOUT_TITLE"] = "header.complete_checkout_title";
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
     I18nMessages["CHECKOUT_TOAST_BOOKING_EXPIRED"] = "checkout.toast_booking_expired";
+    I18nMessages["NOT_FOUND_DESCRIPTION"] = "not_found.description";
+    I18nMessages["NOT_FOUND_BUTTON"] = "not_found.button";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX };

package/dist/infrastructure/ui/routing/Routing.js

@@ -12,6 +12,7 @@ const Item = lazy(() => import("../views/item/Item").then((module) => ({ default
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
 const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
+const NotFound = lazy(() => import("../views/notFound/NotFound").then((module) => ({ default: module.NotFound })));
 const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, }) => {
     const routes = useRoutes([
         {
@@ -58,11 +59,16 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                 {
                     path: Routes.FEEDBACK,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Feedback, { customerId: customer?.customerId }))),
+                        React.createElement(Feedback, { country: customer?.country, customerId: customer?.customerId }))),
+                },
+                {
+                    path: Routes.NOT_FOUND,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(NotFound, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
                     path: "*",
-                    element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
+                    element: React.createElement(Navigate, { to: `${Routes.NOT_FOUND}`, replace: true }),
                 },
             ],
         },

package/dist/infrastructure/ui/views/App.js

@@ -4,14 +4,8 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { Navigation } from "./navigation/Navigation";
-const a = true;
-const App = ({ customerId, menu, tabBar, children }) => {
-    if (a) {
-        throw new Error("This is an error (while integrated in UAF)");
-    }
-    return (React.createElement(SafeAreaProvider, null,
-        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
-        React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar },
-            React.createElement(PortalProvider, null, children))));
-};
+const App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
+    React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
+    React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar },
+        React.createElement(PortalProvider, null, children))));
 export { App };

package/dist/infrastructure/ui/views/checkout/Checkout.js

@@ -6,9 +6,11 @@ import React, { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
@@ -24,6 +26,11 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     const paymentInstrumentSelectRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    usePageView({
+        page: TrackingPage.CHECKOUT,
+        country,
+        checkoutId: checkout?.id,
+    });
     const navigate = useNavigate();
     const basePath = useBasePath();
     const { returnUrl } = useRedirect();
@@ -38,18 +45,18 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
                     React.createElement(DeliveryBanner, null))),
                 React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }),
                 React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                 checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.checkoutItemKept, testID: "checkout-items-kept" },
-                    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, size: checkoutItem.productVariant.size, status: checkoutItem.status })))),
+                    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+                            ? checkoutItem.replacedFor.size
+                            : checkoutItem.productVariant.size })))),
                 pricing && (React.createElement(View, { style: style.pricingContainer },
-                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, 
-                        // busy={submitCheckoutStatus === "loading"}
-                        collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))))),
+                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))))),
         children));
 };
 export { Checkout };

package/dist/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -5,9 +5,6 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
-    container: {
-        flex: number;
-    };
     deliveryBannerContainer: {
         marginBottom: number;
     };

package/dist/infrastructure/ui/views/checkout/Checkout.style.js

@@ -8,9 +8,6 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
-    container: {
-        flex: 1,
-    },
     deliveryBannerContainer: {
         marginBottom: spaceXXL,
     },

package/dist/infrastructure/ui/views/feedback/Feedback.d.ts

@@ -1,6 +1,8 @@
 import { FC } from "react";
+import { Country } from "../../../../projection/shared/country";
 interface FeedbackProps {
     readonly customerId: string;
+    readonly country: Country;
 }
 declare const Feedback: FC<FeedbackProps>;
 export { Feedback };

package/dist/infrastructure/ui/views/feedback/Feedback.js

@@ -1,17 +1,19 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
-const Feedback = ({ customerId }) => {
+const Feedback = ({ customerId, country }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,
@@ -25,12 +27,17 @@ const Feedback = ({ customerId }) => {
         }
         catch (e) { }
     }, [giveCheckoutFeedback]);
+    usePageView({
+        page: TrackingPage.FEEDBACK,
+        country,
+        checkoutId: checkout?.id,
+    });
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

package/dist/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -2,8 +2,5 @@ declare const style: {
     bodyColumn: {
         paddingHorizontal: number;
     };
-    container: {
-        flex: number;
-    };
 };
 export { style };

package/dist/infrastructure/ui/views/feedback/Feedback.style.js

@@ -5,8 +5,5 @@ const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
     },
-    container: {
-        flex: 1,
-    },
 });
 export { style };

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -30,7 +30,7 @@ const Intro = ({ customerId }) => {
     const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
     if (fiveItemsDiscountStatus === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
         React.createElement(Body, { style: { column: style.bodyColumn } },
             React.createElement(View, { style: style.intro },
                 React.createElement(View, { style: style.content },

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -7,9 +7,6 @@ declare const style: {
         flexDirection: "row";
         marginVertical: number;
     };
-    container: {
-        flex: number;
-    };
     content: {
         alignItems: "center";
     };

package/dist/infrastructure/ui/views/intro/Intro.style.js

@@ -10,9 +10,6 @@ const style = StyleSheet.create({
         flexDirection: "row",
         marginVertical: spaceS,
     },
-    container: {
-        flex: 1,
-    },
     content: {
         alignItems: "center",
     },

package/dist/infrastructure/ui/views/item/Item.js

@@ -4,6 +4,7 @@ import { Platform, View } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
@@ -12,6 +13,7 @@ import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useRet
 import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
@@ -33,6 +35,12 @@ const Item = ({ customerId, country }) => {
     const { id } = useParams();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    usePageView({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
     const basePath = useBasePath();
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
@@ -136,7 +144,7 @@ const Item = ({ customerId, country }) => {
     return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container }, footer: !customerDecissionMade && (React.createElement(ItemActions, { country: country, keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: !customerDecissionMade && (React.createElement(ItemActions, { country: country, keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
             React.createElement(Body, null,
                 customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
                 React.createElement(View, { style: [style.content, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },

package/dist/infrastructure/ui/views/item/Item.style.d.ts

@@ -1,7 +1,4 @@
 declare const style: {
-    container: {
-        flex: number;
-    };
     content: {
         paddingHorizontal: number;
     };

package/dist/infrastructure/ui/views/item/Item.style.js

@@ -2,9 +2,6 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorGrayscaleM, spaceXL } = theme();
 const style = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
     content: {
         paddingHorizontal: spaceXL,
     },

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts

@@ -32,6 +32,7 @@ declare const style: {
         flexDirection: "row";
     };
     sizeChange: {
+        width?: string | undefined;
         backgroundColor: string;
         marginTop: number;
         paddingHorizontal: number;

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { borderSize, colorGrayscaleL, colorInfo, spaceXS, spaceS, spaceM } = theme();
 const IMAGE_WIDTH = 96;
@@ -40,6 +40,11 @@ const style = StyleSheet.create({
         marginTop: spaceM,
         paddingHorizontal: spaceS,
         paddingVertical: spaceXS,
+        ...Platform.select({
+            web: {
+                width: "fit-content",
+            },
+        }),
     },
     sizeChangeText: {
         textTransform: "uppercase",

package/dist/infrastructure/ui/views/notFound/NotFound.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { Country } from "../../../../projection/shared/country";
+interface NotFoundProps {
+    readonly customerId: string;
+    readonly country: Country;
+}
+declare const NotFound: FC<NotFoundProps>;
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.js

@@ -0,0 +1,43 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useCallback } from "react";
+import { Image, Platform } from "react-native";
+import { useNavigate } from "react-router-native";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
+import { AspectRatioView } from "../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
+import { style } from "./NotFound.style";
+const NotFound = ({ customerId, country }) => {
+    const descriptionText = useI18nMessage({ id: I18nMessages.NOT_FOUND_DESCRIPTION });
+    const buttonText = useI18nMessage({ id: I18nMessages.NOT_FOUND_BUTTON });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    usePageView({
+        page: TrackingPage.NOT_FOUND,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const handleOnPress = useCallback(() => navigate(`${basePath}/${Routes.HOME}`), [basePath, navigate]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { scrollView: style.container } },
+        React.createElement(Body, { style: { column: style.bodyColumn } },
+            React.createElement(AspectRatioView, { aspectRatio: 1.25 },
+                React.createElement(Image, { resizeMode: "contain", source: require("../../../../public/images/not-found.png"), style: style.image, testID: "not-found-image" })),
+            React.createElement(Text, { level: 1, style: style.description, body: true }, descriptionText),
+            React.createElement(Button, { onPress: handleOnPress }, buttonText))));
+};
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.style.d.ts

@@ -0,0 +1,16 @@
+declare const style: {
+    bodyColumn: {
+        paddingHorizontal: number;
+    };
+    container: {
+        flex: number;
+    };
+    description: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    image: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/notFound/NotFound.style.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    bodyColumn: {
+        paddingHorizontal: spaceXL,
+    },
+    container: {
+        flex: 1,
+    },
+    description: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
+    image: {
+        flex: 1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -5,10 +5,12 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
@@ -29,6 +31,11 @@ const Summary = ({ customerId, country }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+    usePageView({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
     const navigate = useNavigate();
     const basePath = useBasePath();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
@@ -43,7 +50,7 @@ const Summary = ({ customerId, country }) => {
         dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container }, footer: pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) },
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) },
         React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
             fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
             React.createElement(View, { style: style.content },