@lookiero/checkout 0.8.27 → 1.0.0

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

@@ -19,7 +19,7 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                 React.createElement(CheckoutAccessibilityMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
                     React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                         React.createElement(CheckoutMiddleware, { customerId: customer?.customerId },
-                            React.createElement(App, { customerId: customer?.customerId, menu: menu, tabBar: tabBar },
+                            React.createElement(App, { country: customer?.country, customerId: customer?.customerId, menu: menu, tabBar: tabBar },
                                 React.createElement(Outlet, null))))))),
             children: [
                 {

package/dist/infrastructure/ui/views/App.d.ts

@@ -1,7 +1,9 @@
 import { FC } from "react";
+import { Country } from "../../../projection/shared/country";
 import { Menu, TabBar } from "./navigation/Navigation";
 interface AppProps {
     readonly customerId: string;
+    readonly country: Country;
     readonly menu: Menu;
     readonly tabBar: TabBar;
     readonly children: JSX.Element;

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

@@ -7,9 +7,9 @@ import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { theme } from "../theme/theme";
 import { Navigation } from "./navigation/Navigation";
 const { colorBase } = theme();
-const App = ({ customerId, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
+const App = ({ customerId, country, menu, tabBar, children }) => (React.createElement(SafeAreaProvider, null,
     React.createElement(PortalProvider, null,
         React.createElement(StatusBar, { backgroundColor: colorBase, barStyle: "dark-content", translucent: true }),
         React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID }),
-        React.createElement(Navigation, { customerId: customerId, menu: menu, tabBar: tabBar }, children))));
+        React.createElement(Navigation, { country: country, customerId: customerId, menu: menu, tabBar: tabBar }, children))));
 export { App };

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

@@ -160,7 +160,8 @@ const Item = ({ customerId, country }) => {
         dependenciesLoadedStatuses.includes(sizeChangeEnabledStatus) &&
         // This will ensure that the view is not shown until bookCheckoutBooking use-case is dispatched (if required)
         (isBookingRequired ? checkout?.checkoutBookingId && bookedProductsVariants : true) &&
-        (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout);
+        (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
+        resetCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
@@ -169,7 +170,7 @@ const Item = ({ customerId, country }) => {
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         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, { changingDecission: resetCheckoutItemStatus === CommandStatus.LOADING, checkoutItemStatus: checkoutItem.status, onPress: handleOnPressCustomerDecissionBanner })),
+                customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnPressCustomerDecissionBanner })),
                 React.createElement(View, { style: [style.content, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },
                     React.createElement(View, { style: style.sliderContainer },
                         React.createElement(ProductVariantSlider, { producVariantMedia: media, onChanged: handleOnChangedProductVariantSlider })),

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.d.ts

@@ -4,7 +4,6 @@ type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemSta
 interface CustomerDecissionBannerProps {
     readonly checkoutItemStatus: CustomerDecissionBannerStatus;
     readonly onPress: () => void;
-    readonly changingDecission: boolean;
 }
 declare const CustomerDecissionBanner: FC<CustomerDecissionBannerProps>;
 export type { CustomerDecissionBannerStatus };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -1,27 +1,21 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Pressable, View } from "react-native";
+import { Pressable } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { Spinner } from "../../../../../../shared/ui/components/atoms/spinner/Spinner";
 import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { theme } from "../../../../theme/theme";
 import { style } from "./CustomerDecissionBanner.style";
-const { colorContent } = theme();
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
     [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
-const CustomerDecissionBanner = ({ checkoutItemStatus, onPress, changingDecission, }) => {
+const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] }) || "";
     const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
     return (React.createElement(Banner, { text: decissionText },
-        React.createElement(View, { style: style.actions },
-            React.createElement(View, { style: style.placeholder }),
-            React.createElement(Pressable, { onPress: changingDecission ? undefined : onPress },
-                React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText)),
-            React.createElement(View, { style: style.placeholder }, changingDecission && React.createElement(Spinner, { color: colorContent, size: 20 })))));
+        React.createElement(Pressable, { style: style.button, onPress: onPress },
+            React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText))));
 };
 export { CustomerDecissionBanner };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

@@ -1,16 +1,10 @@
 declare const style: {
-    actions: {
-        flexDirection: "row";
-        justifyContent: "space-between";
+    button: {
+        alignItems: "center";
         marginTop: number;
-        minHeight: number;
-        width: string;
     };
     buttonText: {
         textDecorationLine: "underline";
     };
-    placeholder: {
-        width: number;
-    };
 };
 export { style };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

@@ -2,18 +2,12 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { spaceM } = theme();
 const style = StyleSheet.create({
-    actions: {
-        flexDirection: "row",
-        justifyContent: "space-between",
+    button: {
+        alignItems: "center",
         marginTop: spaceM,
-        minHeight: 20,
-        width: "100%",
     },
     buttonText: {
         textDecorationLine: "underline",
     },
-    placeholder: {
-        width: 20,
-    },
 });
 export { style };

package/dist/infrastructure/ui/views/navigation/Navigation.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { Country } from "../../../../projection/shared/country";
 interface MenuProps {
     readonly isVisible: boolean;
     readonly onClose: () => void;
@@ -11,6 +12,7 @@ interface TabBarProps {
 type TabBar = FC<TabBarProps>;
 interface NavigationProps {
     readonly customerId: string;
+    readonly country: Country;
     readonly menu: Menu;
     readonly tabBar: TabBar;
     readonly children: ReactNode;

package/dist/infrastructure/ui/views/navigation/Navigation.js

@@ -1,15 +1,58 @@
 import { usePortal } from "@lookiero/aurora-next/build/contexts/Portal/Portal";
 import React, { useCallback, useState } from "react";
 import { Platform } from "react-native";
+import { useTrackPressBack } from "../../../../shared/tracking/infrastructure/useTrackPressBack";
+import { useTrackPressMenu } from "../../../../shared/tracking/infrastructure/useTrackPressMenu";
+import { useTrackPressNext } from "../../../../shared/tracking/infrastructure/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../../shared/tracking/infrastructure/useTrackPressPrevious";
 import { style } from "./Navigation.style";
 import { Header } from "./components/header/Header";
-const Navigation = ({ customerId, menu, tabBar: TabBar, children }) => {
+const Navigation = ({ customerId, country, menu, tabBar: TabBar, children }) => {
     const [menuVisible, setMenuVisible] = useState(false);
-    const handleOnOpenMenu = useCallback(() => setMenuVisible(true), []);
-    const handleOnCloseMenu = useCallback(() => setMenuVisible(false), []);
+    const trackPressMenu = useTrackPressMenu();
+    const handleOnOpenMenu = useCallback(({ page, checkoutId, open }) => {
+        setMenuVisible(true);
+        trackPressMenu({
+            page,
+            country,
+            checkoutId,
+            open,
+        });
+    }, [country, trackPressMenu]);
+    const handleOnCloseMenu = useCallback(({ page, checkoutId, open }) => {
+        setMenuVisible(false);
+        trackPressMenu({
+            page,
+            country,
+            checkoutId,
+            open,
+        });
+    }, [country, trackPressMenu]);
+    const trackPressBack = useTrackPressBack();
+    const handleOnBack = useCallback(({ page, checkoutId }) => trackPressBack({
+        page,
+        country,
+        checkoutId,
+    }), [country, trackPressBack]);
+    const trackPressNext = useTrackPressNext();
+    const handleOnNext = useCallback(({ page, checkoutId, from, to }) => trackPressNext({
+        page,
+        country,
+        checkoutId,
+        from,
+        to,
+    }), [country, trackPressNext]);
+    const trackPressPrevious = useTrackPressPrevious();
+    const handleOnPrevious = useCallback(({ page, checkoutId, from, to }) => trackPressPrevious({
+        page,
+        country,
+        checkoutId,
+        from,
+        to,
+    }), [country, trackPressPrevious]);
     const { busy } = usePortal();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header, { customerId: customerId, menu: menu, menuVisible: menuVisible, style: style.header, onCloseMenu: handleOnCloseMenu, onOpenMenu: handleOnOpenMenu }),
+        React.createElement(Header, { customerId: customerId, menu: menu, menuVisible: menuVisible, style: style.header, onBack: handleOnBack, onCloseMenu: handleOnCloseMenu, onNext: handleOnNext, onOpenMenu: handleOnOpenMenu, onPrevious: handleOnPrevious }),
         children,
         Platform.OS !== "web" && React.createElement(TabBar, { isPortalBusy: busy, panel: menuVisible })));
 };

package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts

@@ -1,12 +1,57 @@
 import { FC } from "react";
 import { StyleProp, ViewStyle } from "react-native";
+import { TrackingPage } from "../../../../../tracking/tracking";
 import { Menu } from "../../Navigation";
+interface OnOpenMenuFunctionArgs {
+    readonly page: TrackingPage;
+    readonly checkoutId: string | undefined;
+    readonly open: boolean;
+}
+interface OnOpenMenuFunction {
+    (args: OnOpenMenuFunctionArgs): void;
+}
+interface OnCloseMenuFunctionArgs {
+    readonly page: TrackingPage;
+    readonly checkoutId: string | undefined;
+    readonly open: boolean;
+}
+interface OnCloseMenuFunction {
+    (args: OnCloseMenuFunctionArgs): void;
+}
+interface OnBackFunctionArgs {
+    readonly page: TrackingPage;
+    readonly checkoutId: string | undefined;
+}
+interface OnBackFunction {
+    (args: OnBackFunctionArgs): void;
+}
+interface OnNextFunctionArgs {
+    readonly page: TrackingPage;
+    readonly checkoutId: string | undefined;
+    readonly from: string;
+    readonly to: string;
+}
+interface OnNextFunction {
+    (args: OnNextFunctionArgs): void;
+}
+interface OnPreviousFunctionArgs {
+    readonly page: TrackingPage;
+    readonly checkoutId: string | undefined;
+    readonly from: string;
+    readonly to: string;
+}
+interface OnPreviousFunction {
+    (args: OnPreviousFunctionArgs): void;
+}
 interface HeaderProps {
     readonly customerId: string;
     readonly menu: Menu;
     readonly menuVisible: boolean;
-    readonly onOpenMenu: () => void;
-    readonly onCloseMenu: () => void;
+    readonly onOpenMenu: OnOpenMenuFunction;
+    readonly onCloseMenu: OnCloseMenuFunction;
+    readonly onBack?: OnBackFunction;
+    readonly onNext?: OnNextFunction;
+    readonly onPrevious?: OnPreviousFunction;
     readonly style?: StyleProp<ViewStyle>;
 }
 declare const Header: FC<HeaderProps>;

package/dist/infrastructure/ui/views/navigation/components/header/Header.js

@@ -6,6 +6,7 @@ import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context"
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { ButtonIcon } from "../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../../../tracking/tracking";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { useBasePath } from "../../../../routing/useBasePath";
@@ -15,8 +16,8 @@ const ButtonIconPlaceholder = () => React.createElement(View, { style: style.but
 const DefaultHeader = ({ onOpenMenu }) => (React.createElement(View, { style: style.header, testID: "default-header" },
     React.createElement(Logo, { style: style.logo }),
     React.createElement(ButtonIconPlaceholder, null),
-    React.createElement(ButtonIcon, { name: "menu", onPress: onOpenMenu })));
-const ItemHeader = ({ items, item }) => {
+    React.createElement(ButtonIcon, { name: "menu", testID: "menu-button-icon", onPress: onOpenMenu })));
+const ItemHeader = ({ items, item, onNext, onPrevious }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
     const isFirstItem = itemIndex === 0;
@@ -26,64 +27,97 @@ const ItemHeader = ({ items, item }) => {
     const navigateToPreviousItem = useCallback(() => {
         const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
         const previousItem = items[previousItemIndex];
+        onPrevious?.({ from: item.id, to: previousItem.id });
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
-    }, [basePath, itemIndex, items, navigate]);
+    }, [basePath, item.id, itemIndex, items, navigate, onPrevious]);
     const navigateToNextItem = useCallback(() => {
         const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
         const nextItem = items[nextItemIndex];
+        onNext?.({ from: item.id, to: nextItem.id });
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
-    }, [basePath, itemIndex, items, navigate]);
+    }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(View, { style: style.header, testID: "item-header" },
-        !isFirstItem ? React.createElement(ButtonIcon, { name: "arrow-left", onPress: navigateToPreviousItem }) : React.createElement(ButtonIconPlaceholder, null),
+        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow-left", testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
         React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
-        !isLastItem ? React.createElement(ButtonIcon, { name: "arrow-right", onPress: navigateToNextItem }) : React.createElement(ButtonIconPlaceholder, null)));
+        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow-right", testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
 };
-const ItemDetailHeader = () => {
+const ItemDetailHeader = ({ onBack }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const navigate = useNavigate();
-    const handleOnBack = useCallback(() => navigate(-1), [navigate]);
+    const handleOnBack = useCallback(() => {
+        onBack?.();
+        navigate(-1);
+    }, [navigate, onBack]);
     return (React.createElement(View, { style: style.header, testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
-        React.createElement(ButtonIcon, { name: "close", onPress: handleOnBack })));
+        React.createElement(ButtonIcon, { name: "close", testID: "close-button-icon", onPress: handleOnBack })));
 };
-const CheckoutHeader = () => {
+const CheckoutHeader = ({ onBack }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
     const basePath = useBasePath();
     const navigate = useNavigate();
-    const handleOnBack = useCallback(() => navigate(`${basePath}/${Routes.SUMMARY}`), [basePath, navigate]);
+    const handleOnBack = useCallback(() => {
+        onBack?.();
+        navigate(`${basePath}/${Routes.SUMMARY}`);
+    }, [basePath, navigate, onBack]);
     return (React.createElement(View, { style: style.header, testID: "checkout-header" },
-        React.createElement(ButtonIcon, { name: "arrow-left", onPress: handleOnBack }),
+        React.createElement(ButtonIcon, { name: "arrow-left", testID: "arrow-left-button-icon", onPress: handleOnBack }),
         React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
         React.createElement(ButtonIconPlaceholder, null)));
 };
-const Header = ({ customerId, menu: Menu, menuVisible, onOpenMenu, onCloseMenu, style: customStyle, }) => {
+const Header = ({ customerId, menu: Menu, menuVisible, onOpenMenu, onCloseMenu, onBack, onNext, onPrevious, style: customStyle, }) => {
     const { id: itemId } = useParams();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const currentItem = checkout?.items.find((item) => item.id === itemId);
     const basePath = useBasePath();
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+    const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
     const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
     const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
+    const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
+    const trackingPage = useCallback(() => {
+        if (itemRouteMatch || itemDetailRouteMatch)
+            return TrackingPage.ITEM;
+        if (checkoutRouteMatch || checkoutPaymentRouteMatch)
+            return TrackingPage.CHECKOUT;
+        if (summaryRouteMatch)
+            return TrackingPage.SUMMARY;
+        if (feedbackRouteMatch)
+            return TrackingPage.FEEDBACK;
+        return TrackingPage.NOT_FOUND;
+    }, [
+        checkoutPaymentRouteMatch,
+        checkoutRouteMatch,
+        feedbackRouteMatch,
+        itemDetailRouteMatch,
+        itemRouteMatch,
+        summaryRouteMatch,
+    ]);
     const { top: safeAreaInsetTop } = useSafeAreaInsets();
+    const handleOnOpenMenu = useCallback(() => onOpenMenu({ page: trackingPage(), checkoutId: checkout?.id, open: true }), [checkout?.id, onOpenMenu, trackingPage]);
+    const handleOnCloseMenu = useCallback(() => onCloseMenu({ page: trackingPage(), checkoutId: checkout?.id, open: false }), [checkout?.id, onCloseMenu, trackingPage]);
+    const handleOnBack = useCallback(() => onBack?.({ page: trackingPage(), checkoutId: checkout?.id }), [checkout?.id, onBack, trackingPage]);
+    const handleOnNext = useCallback(({ from, to }) => onNext?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onNext, trackingPage]);
+    const handleOnPrevious = useCallback(({ from, to }) => onPrevious?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onPrevious, trackingPage]);
     let header;
     if (checkout?.items && currentItem) {
         if (itemRouteMatch) {
-            header = React.createElement(ItemHeader, { item: currentItem, items: checkout.items });
+            header = (React.createElement(ItemHeader, { item: currentItem, items: checkout.items, onNext: handleOnNext, onPrevious: handleOnPrevious }));
         }
         else if (itemDetailRouteMatch) {
-            header = React.createElement(ItemDetailHeader, null);
+            header = React.createElement(ItemDetailHeader, { onBack: handleOnBack });
         }
     }
     else if (checkoutRouteMatch || checkoutPaymentRouteMatch) {
-        header = React.createElement(CheckoutHeader, null);
+        header = React.createElement(CheckoutHeader, { onBack: handleOnBack });
     }
     else {
-        header = React.createElement(DefaultHeader, { onOpenMenu: onOpenMenu });
+        header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, { height: HEADER_HEIGHT + safeAreaInsetTop }, customStyle] }, header),
-        React.createElement(Menu, { isVisible: menuVisible, onClose: onCloseMenu })));
+        React.createElement(Menu, { isVisible: menuVisible, onClose: handleOnCloseMenu })));
 };
 export { Header };

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

@@ -0,0 +1,15 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressBackFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+}
+interface PressBackFunction {
+    (args: PressBackFunctionArgs): void;
+}
+interface UseTrackPressBackFunction {
+    (): PressBackFunction;
+}
+declare const useTrackPressBack: UseTrackPressBackFunction;
+export { useTrackPressBack };

package/dist/shared/tracking/infrastructure/useTrackPressBack.js

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackPressBack = () => {
+    const emitUserEvent = useEmitUserEvent();
+    const pressBack = useCallback(({ page, country, checkoutId }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const pressBackTrackingEvent = {
+            event: TrackingEvent.PRESS_BACK,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+        };
+        emitUserEvent(pressBackTrackingEvent);
+    }, [emitUserEvent]);
+    return pressBack;
+};
+export { useTrackPressBack };

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

@@ -0,0 +1,16 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressMenuFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly open: boolean;
+}
+interface PressMenuFunction {
+    (args: PressMenuFunctionArgs): void;
+}
+interface UseTrackPressMenuFunction {
+    (): PressMenuFunction;
+}
+declare const useTrackPressMenu: UseTrackPressMenuFunction;
+export { useTrackPressMenu };

package/dist/shared/tracking/infrastructure/useTrackPressMenu.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackPressMenu = () => {
+    const emitUserEvent = useEmitUserEvent();
+    const pressMenu = useCallback(({ page, country, checkoutId, open }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const pressMenuTrackingEvent = {
+            event: TrackingEvent.PRESS_MENU,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            open,
+        };
+        emitUserEvent(pressMenuTrackingEvent);
+    }, [emitUserEvent]);
+    return pressMenu;
+};
+export { useTrackPressMenu };

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

@@ -0,0 +1,17 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressNextFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly from: string;
+    readonly to: string;
+}
+interface PressNextFunction {
+    (args: PressNextFunctionArgs): void;
+}
+interface UseTrackPressNextFunction {
+    (): PressNextFunction;
+}
+declare const useTrackPressNext: UseTrackPressNextFunction;
+export { useTrackPressNext };

package/dist/shared/tracking/infrastructure/useTrackPressNext.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackPressNext = () => {
+    const emitUserEvent = useEmitUserEvent();
+    const pressNext = useCallback(({ page, country, checkoutId, from, to }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const pressNextTrackingEvent = {
+            event: TrackingEvent.PRESS_NEXT,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            from,
+            to,
+        };
+        emitUserEvent(pressNextTrackingEvent);
+    }, [emitUserEvent]);
+    return pressNext;
+};
+export { useTrackPressNext };

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

@@ -0,0 +1,17 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressPreviousFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly from: string;
+    readonly to: string;
+}
+interface PressPreviousFunction {
+    (args: PressPreviousFunctionArgs): void;
+}
+interface UseTrackPressPreviousFunction {
+    (): PressPreviousFunction;
+}
+declare const useTrackPressPrevious: UseTrackPressPreviousFunction;
+export { useTrackPressPrevious };

package/dist/shared/tracking/infrastructure/useTrackPressPrevious.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackPressPrevious = () => {
+    const emitUserEvent = useEmitUserEvent();
+    const pressPrevious = useCallback(({ page, country, checkoutId, from, to }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const pressPreviousTrackingEvent = {
+            event: TrackingEvent.PRESS_PREVIOUS,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            from,
+            to,
+        };
+        emitUserEvent(pressPreviousTrackingEvent);
+    }, [emitUserEvent]);
+    return pressPrevious;
+};
+export { useTrackPressPrevious };

package/dist/shared/tracking/tracking.d.ts

@@ -11,7 +11,11 @@ declare enum TrackingEvent {
     PRESS_ITEM = "press-item",
     PRESS_CONTINUE = "press-continue",
     TAB_VIEW = "tab-view",
-    CHANGE_FEEDBACK = "change-feedback"
+    CHANGE_FEEDBACK = "change-feedback",
+    PRESS_MENU = "press-menu",
+    PRESS_BACK = "press-back",
+    PRESS_NEXT = "press-next",
+    PRESS_PREVIOUS = "press-previous"
 }
 declare enum TrackingEventCategory {
     NAVIGATION = "navigation"
@@ -64,5 +68,17 @@ interface ChangeFeedbackTrackingEvent extends BaseTrackingEvent {
     readonly questionName: string;
     readonly feedback: string | undefined;
 }
-export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, };
+interface PressMenuTrackingEvent extends BaseTrackingEvent {
+    readonly open: boolean;
+}
+type PressBackTrackingEvent = BaseTrackingEvent;
+interface PressNextTrackingEvent extends BaseTrackingEvent {
+    readonly from: string;
+    readonly to: string;
+}
+interface PressPreviousTrackingEvent extends BaseTrackingEvent {
+    readonly from: string;
+    readonly to: string;
+}
+export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, PressMenuTrackingEvent, PressBackTrackingEvent, PressNextTrackingEvent, PressPreviousTrackingEvent, };
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -11,6 +11,10 @@ var TrackingEvent;
     TrackingEvent["PRESS_CONTINUE"] = "press-continue";
     TrackingEvent["TAB_VIEW"] = "tab-view";
     TrackingEvent["CHANGE_FEEDBACK"] = "change-feedback";
+    TrackingEvent["PRESS_MENU"] = "press-menu";
+    TrackingEvent["PRESS_BACK"] = "press-back";
+    TrackingEvent["PRESS_NEXT"] = "press-next";
+    TrackingEvent["PRESS_PREVIOUS"] = "press-previous";
 })(TrackingEvent || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {

package/dist/shared/ui/components/atoms/spinner/Spinner.d.ts

@@ -1,8 +1,3 @@
 import { FC } from "react";
-import { ColorValue } from "react-native";
-interface SpinnerProps {
-    readonly color?: ColorValue;
-    readonly size?: number | "large" | "small";
-}
-declare const Spinner: FC<SpinnerProps>;
+declare const Spinner: FC;
 export { Spinner };

package/dist/shared/ui/components/atoms/spinner/Spinner.js

@@ -1,8 +1,7 @@
+import { Spinner as AuroraSpinner } from "@lookiero/aurora-next/build/components/atoms/Spinner/Spinner";
 import React from "react";
-import { ActivityIndicator, View } from "react-native";
-import { theme } from "../../../../../infrastructure/ui/theme/theme";
+import { View } from "react-native";
 import { style } from "./Spinner.style";
-const { colorPrimary } = theme();
-const Spinner = ({ color = colorPrimary, size = "large" }) => (React.createElement(View, { style: style.container },
-    React.createElement(ActivityIndicator, { color: color, size: size })));
+const Spinner = () => (React.createElement(View, { style: style.container },
+    React.createElement(AuroraSpinner, null)));
 export { Spinner };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.8.27",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "@lookiero/aurora-fonts": "^1.0.6",
     "@lookiero/aurora-iconfont": "^2.0.37",
-    "@lookiero/aurora-next": "^3.0.185",
+    "@lookiero/aurora-next": "^3.0.191",
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
@@ -67,7 +67,7 @@
     "@expo/webpack-config": "^0.17.2",
     "@lookiero/aurora-fonts": "^1.0.6",
     "@lookiero/aurora-iconfont": "^2.0.37",
-    "@lookiero/aurora-next": "^3.0.185",
+    "@lookiero/aurora-next": "^3.0.191",
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",