@lookiero/checkout 0.8.22 → 0.8.24

package/dist/infrastructure/delivery/baseBootstrap.d.ts

@@ -15,6 +15,7 @@ import { CheckoutByIdView } from "../../projection/checkout/viewCheckoutById";
 import { FirstAvailableCheckoutByCustomerIdView } from "../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { FiveItemsDiscountByCustomerIdView } from "../../projection/checkout/viewFiveItemsDiscountByCustomerId";
 import { IsCheckoutEnabledByCustomerIdView } from "../../projection/checkout/viewIsCheckoutEnabledByCustomerId";
+import { IsSizeChangeEnabledByCheckoutIdView } from "../../projection/checkout/viewIsSizeChangeEnabledByCheckoutId";
 import { CheckoutBookingByIdView } from "../../projection/checkoutBooking/viewCheckoutBookingById";
 import { CheckoutItemByIdView } from "../../projection/checkoutItem/viewCheckoutItemById";
 import { CheckoutQuestionsByCheckoutIdView } from "../../projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId";
@@ -29,6 +30,7 @@ interface BaseBootstrapFunctionArgs<UiSettingGetFunctionArgs extends RepositoryG
     readonly checkoutByIdView: CheckoutByIdView;
     readonly firstAvailableCheckoutByCustomerIdView: FirstAvailableCheckoutByCustomerIdView;
     readonly isCheckoutEnabledByCustomerIdView: IsCheckoutEnabledByCustomerIdView;
+    readonly isSizeChangeEnabledByCheckoutIdView: IsSizeChangeEnabledByCheckoutIdView;
     readonly fiveItemsDiscountByCustomerIdView: FiveItemsDiscountByCustomerIdView;
     readonly uiSettingByKeyView: UiSettingByKeyView;
     readonly checkoutItemByIdView: CheckoutItemByIdView;

package/dist/infrastructure/delivery/baseBootstrap.js

@@ -26,6 +26,7 @@ import { viewFirstAvailableCheckoutByCustomerIdHandler, VIEW_FIRST_AVAILABLE_CHE
 import { viewFiveItemsDiscountByCustomerIdHandler, VIEW_FIVE_ITEMS_DISCOUNT_BY_CUSTOMER_ID, } from "../../projection/checkout/viewFiveItemsDiscountByCustomerId";
 import { viewIsCheckoutAccessibleByCustomerIdHandler, VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, } from "../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 import { viewIsCheckoutEnabledByCustomerIdHandler, VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID, } from "../../projection/checkout/viewIsCheckoutEnabledByCustomerId";
+import { viewIsSizeChangeEnabledByCheckoutIdHandler, VIEW_IS_SIZE_CHANGE_ENABLED_BY_CHECKOUT_ID, } from "../../projection/checkout/viewIsSizeChangeEnabledByCheckoutId";
 import { viewCheckoutBookingByIdHandler, VIEW_CHECKOUT_BOOKING_BY_ID, } from "../../projection/checkoutBooking/viewCheckoutBookingById";
 import { viewCheckoutItemByIdHandler, VIEW_CHECKOUT_ITEM_BY_ID, } from "../../projection/checkoutItem/viewCheckoutItemById";
 import { listCheckoutQuestionsByCheckoutIdHandler, LIST_CHECKOUT_QUESTIONS_BY_CHECKOUT_ID, } from "../../projection/checkoutQuestion/listCheckoutQuestionsByCheckoutId";
@@ -36,7 +37,7 @@ import { viewUiSettingByKeyHandler, VIEW_UI_SETTING_BY_KEY, } from "../../projec
 import { bootstrapWithBuilder as bootstrapNotifications } from "../../shared/notifications/infrastructure/delivery/bootstrap";
 import { inMemoryStorageNotifications } from "../../shared/notifications/infrastructure/persistence/inMemoryStorageNotifications";
 const MESSAGING_CONTEXT_ID = "Checkout";
-const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, fiveItemsDiscountByCustomerIdView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedProductsVariantsForCheckoutItemView, checkoutBookingByIdView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, uiSettingByKeyView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, getCheckoutFeedback, saveCheckoutFeedback, checkoutFeedbacksDependencies, }) => {
+const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, isSizeChangeEnabledByCheckoutIdView, fiveItemsDiscountByCustomerIdView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedProductsVariantsForCheckoutItemView, checkoutBookingByIdView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, uiSettingByKeyView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, getCheckoutFeedback, saveCheckoutFeedback, checkoutFeedbacksDependencies, }) => {
     let messaging = messagingBootstrap({ id: MESSAGING_CONTEXT_ID })
         .query(VIEW_FIVE_ITEMS_DISCOUNT_BY_CUSTOMER_ID, viewFiveItemsDiscountByCustomerIdHandler, {
         view: fiveItemsDiscountByCustomerIdView,
@@ -49,6 +50,9 @@ const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdVie
     })
         .query(VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID, viewIsCheckoutEnabledByCustomerIdHandler, {
         view: isCheckoutEnabledByCustomerIdView,
+    })
+        .query(VIEW_IS_SIZE_CHANGE_ENABLED_BY_CHECKOUT_ID, viewIsSizeChangeEnabledByCheckoutIdHandler, {
+        view: isSizeChangeEnabledByCheckoutIdView,
     })
         .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler)
         .command(START_CHECKOUT, startCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)

package/dist/infrastructure/delivery/bootstrap.js

@@ -9,6 +9,7 @@ import { httpCheckoutByIdView } from "../projection/checkout/httpCheckoutByIdVie
 import { httpFirstAvailableCheckoutByCustomerIdView } from "../projection/checkout/httpFirstAvailableCheckoutByCustomerIdView";
 import { httpFiveItemsDiscountByCustomerIdView } from "../projection/checkout/httpFiveItemsDiscountByCustomerIdView";
 import { httpIsCheckoutEnabledByCustomerIdView } from "../projection/checkout/httpIsCheckoutEnabledByCustomerIdView";
+import { httpIsSizeChangeEnabledByCheckoutIdView } from "../projection/checkout/httpIsSizeChangeEnabledByCheckoutIdView";
 import { httpCheckoutBookingByIdView } from "../projection/checkoutBooking/httpCheckoutBookingByIdView";
 import { httpCheckoutItemByIdView } from "../projection/checkoutItem/httpCheckoutItemByIdView";
 import { httpCheckoutQuestionsByCheckoutIdView } from "../projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView";
@@ -25,6 +26,7 @@ const bootstrap = ({ apiUrl, getAuthToken }) => {
         checkoutByIdView: httpCheckoutByIdView({ httpPost }),
         firstAvailableCheckoutByCustomerIdView: httpFirstAvailableCheckoutByCustomerIdView({ httpPost }),
         isCheckoutEnabledByCustomerIdView: httpIsCheckoutEnabledByCustomerIdView({ httpGet }),
+        isSizeChangeEnabledByCheckoutIdView: httpIsSizeChangeEnabledByCheckoutIdView({ httpGet }),
         fiveItemsDiscountByCustomerIdView: httpFiveItemsDiscountByCustomerIdView({ httpGet }),
         uiSettingByKeyView: storageUiSettingByKeyView({ read }),
         checkoutItemByIdView: httpCheckoutItemByIdView({ httpPost }),

package/dist/infrastructure/projection/checkout/httpIsSizeChangeEnabledByCheckoutIdView.d.ts

@@ -1,9 +1,9 @@
 import { IsSizeChangeEnabledByCheckoutIdView } from "../../../projection/checkout/viewIsSizeChangeEnabledByCheckoutId";
-import { HttpPostFunction } from "../../delivery/http/httpClient";
+import { HttpGetFunction } from "../../delivery/http/httpClient";
 interface HttpIsSizeChangeEnabledByCheckoutIdView extends IsSizeChangeEnabledByCheckoutIdView {
 }
 interface HttpIsSizeChangeEnabledByCheckoutIdViewFunctionArgs {
-    readonly httpPost: HttpPostFunction;
+    readonly httpGet: HttpGetFunction;
 }
 interface HttpIsSizeChangeEnabledByCheckoutIdViewFunction {
     (args: HttpIsSizeChangeEnabledByCheckoutIdViewFunctionArgs): HttpIsSizeChangeEnabledByCheckoutIdView;

package/dist/infrastructure/projection/checkout/httpIsSizeChangeEnabledByCheckoutIdView.js

@@ -1,10 +1,9 @@
-const httpIsSizeChangeEnabledByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/is-size-change-enabled",
+const httpIsSizeChangeEnabledByCheckoutIdView = ({ httpGet }) => async ({ checkoutId, signal }) => await httpGet({
+    endpoint: `/is-size-change-enabled-by-checkout-id/${checkoutId}`,
     signal,
-    body: { checkoutId },
     result: {
         error: false,
-        success: (response) => response.result,
+        success: (response) => response,
     },
 });
 export { httpIsSizeChangeEnabledByCheckoutIdView };

package/dist/infrastructure/ui/hooks/useSubmitCheckout.d.ts

@@ -5,6 +5,7 @@ import { Logger } from "../../../shared/logging/Logger";
 type Status = "idle" | "loading" | "success" | "error";
 interface SubmitCheckoutFunctionArgs {
     readonly paymentFlowPayload: PaymentFlowPayloadProjection;
+    readonly sizeChangeEnabled: boolean;
 }
 interface SubmitCheckoutFunction {
     (args: SubmitCheckoutFunctionArgs): Promise<void>;

package/dist/infrastructure/ui/hooks/useSubmitCheckout.js

@@ -12,9 +12,9 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
     const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
     const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
     const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
-    const submitCheckout = useCallback(async ({ paymentFlowPayload }) => {
+    const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
         try {
-            await blockCheckoutBooking();
+            sizeChangeEnabled && (await blockCheckoutBooking());
         }
         catch (error) {
             return;
@@ -38,7 +38,7 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
                 }
             }
         });
-    }, [paymentFlowRef, blockCheckoutBooking, createNotification, submitCheckoutCommand]);
+    }, [paymentFlowRef, blockCheckoutBooking, submitCheckoutCommand, createNotification]);
     const status = useMemo(() => {
         if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
             startLegacyBoxCheckoutStatus === "loading" ||

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

@@ -5,7 +5,7 @@ import React, { useCallback, useMemo } 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 { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -25,7 +25,7 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
-    usePageView({
+    useTrackPageView({
         page: TrackingPage.CHECKOUT,
         country,
         checkoutId: checkout?.id,

package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-native";
 import { useLogger } from "../../../../../../shared/logging/useLogger";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
 import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
 import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
 import { Routes } from "../../../../routing/routes";
@@ -15,6 +16,7 @@ const CheckoutPaymentModal = ({ customerId, getAuthToken }) => {
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
         checkoutId: checkout?.id,
     });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
     const [authToken, setAuthToken] = useState();
     useEffect(() => {
         const loadAuthToken = async () => setAuthToken(await getAuthToken());
@@ -31,10 +33,10 @@ const CheckoutPaymentModal = ({ customerId, getAuthToken }) => {
         logger,
     });
     useEffect(() => {
-        if (paymentFlowPayload) {
-            submitCheckout({ paymentFlowPayload });
+        if (paymentFlowPayload && sizeChangeEnabled !== undefined) {
+            submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
         }
-    }, [paymentFlowPayload, submitCheckout]);
+    }, [paymentFlowPayload, sizeChangeEnabled, submitCheckout]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
     if (!dependenciesLoaded)

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

@@ -2,7 +2,7 @@ import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import { useLogger } from "../../../../shared/logging/useLogger";
-import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
+import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -32,7 +32,7 @@ const Feedback = ({ customerId, country }) => {
         }
         catch (e) { }
     }, [giveCheckoutFeedback]);
-    usePageView({
+    useTrackPageView({
         page: TrackingPage.FEEDBACK,
         country,
         checkoutId: checkout?.id,

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

@@ -5,7 +5,12 @@ import { useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useLogger } from "../../../../shared/logging/useLogger";
-import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
+import { useTrackImageView } from "../../../../shared/tracking/infrastructure/useTrackImageView";
+import { useTrackItemPageView } from "../../../../shared/tracking/infrastructure/useTrackItemPageView";
+import { useTrackKeepItem } from "../../../../shared/tracking/infrastructure/useTrackKeepItem";
+import { useTrackReplaceItem } from "../../../../shared/tracking/infrastructure/useTrackReplaceItem";
+import { useTrackResetItem } from "../../../../shared/tracking/infrastructure/useTrackResetItem";
+import { useTrackReturnItem } from "../../../../shared/tracking/infrastructure/useTrackReturnItem";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
@@ -14,6 +19,7 @@ import { useResetCheckoutItem } from "../../../domain/checkoutItem/react/useRese
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
@@ -34,13 +40,73 @@ const Item = ({ customerId, country }) => {
     const logger = useLogger();
     const { id } = useParams();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [isSizeChangeEnabled, sizeChangeEnabledStatus] = useViewIsSizeChangeEnabledByCheckoutId({
+        checkoutId: checkout?.id,
+    });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
-    usePageView({
+    const [bookedProductsVariants] = useViewBookedProductsVariantsForCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+    });
+    const [bookCheckoutBooking] = useBookCheckoutBookingForCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+        checkoutBookingId: checkout?.checkoutBookingId,
+        logger,
+    });
+    const isBookingRequired = bookedProductsVariants === null && isSizeChangeEnabled;
+    useEffect(() => {
+        isBookingRequired && bookCheckoutBooking();
+    }, [bookCheckoutBooking, isBookingRequired]);
+    const replaceableFor = useMemo(() => sizeChangeEnabledStatus === QueryStatus.SUCCESS
+        ? isSizeChangeEnabled
+            ? bookedProductsVariants
+                ? bookedProductsVariants?.productVariants.map(({ id }) => id)
+                : undefined
+            : []
+        : undefined, [bookedProductsVariants, isSizeChangeEnabled, sizeChangeEnabledStatus]);
+    useTrackItemPageView({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+        productVariantId: checkoutItem.productVariant.id,
+        replaceableFor,
+        unique: checkoutItem.productVariant.size.unique,
+    });
+    const trackKeepItem = useTrackKeepItem({
         page: TrackingPage.ITEM,
         country,
         checkoutId: checkout?.id,
         checkoutItemId: checkoutItem.id,
     });
+    const trackReturnItem = useTrackReturnItem({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
+    const trackReplaceItem = useTrackReplaceItem({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+        productVariantId: checkoutItem.productVariant.id,
+    });
+    const trackResetItem = useTrackResetItem({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
+    const trackImageView = useTrackImageView({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+        productVariantId: checkoutItem.productVariant.id,
+    });
+    useEffect(() => trackImageView({
+        perspective: checkoutItem.productVariant.media[0]?.perspective,
+    }), [checkoutItem.productVariant.media, trackImageView]);
     const customerDecissionMade = checkoutItem.status !== CheckoutItemStatus.INITIAL;
     const [resetCheckoutItem, resetCheckoutItemStatus] = useResetCheckoutItem({
         checkoutItemId: checkoutItem.id,
@@ -58,17 +124,6 @@ const Item = ({ customerId, country }) => {
     const [sizeWithoutStockModalVisible, setSizeWithoutStockModalVisible] = useState(false);
     const handleOnShowSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(true), []);
     const handleOnHideSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(false), []);
-    const [bookedProductsVariants, bookedProductsVariantsStatus] = useViewBookedProductsVariantsForCheckoutItem({
-        checkoutItemId: checkoutItem.id,
-    });
-    const [bookCheckoutBooking] = useBookCheckoutBookingForCheckoutItem({
-        checkoutItemId: checkoutItem.id,
-        checkoutBookingId: checkout?.checkoutBookingId,
-        logger,
-    });
-    useEffect(() => {
-        bookedProductsVariants === null && bookCheckoutBooking();
-    }, [bookCheckoutBooking, bookedProductsVariants]);
     const [returnQuestions, returnQuestionsStatus] = useListReturnQuestionsByCheckoutItemId({
         checkoutItemId: checkoutItem.id,
     });
@@ -81,30 +136,43 @@ const Item = ({ customerId, country }) => {
     const handleOnSubmit = useCallback((feedbacks) => {
         handleOnHideReturnQuestions();
         returnCheckoutItem({ feedbacks });
-    }, [handleOnHideReturnQuestions, returnCheckoutItem]);
-    const handleOnReplace = useCallback((replacedForId) => replaceCheckoutItem({ replacedForId }), [replaceCheckoutItem]);
+        trackReturnItem();
+    }, [handleOnHideReturnQuestions, returnCheckoutItem, trackReturnItem]);
+    const handleOnReplace = useCallback((replacedForId) => {
+        replaceCheckoutItem({ replacedForId });
+        trackReplaceItem({ replaceFor: replacedForId });
+    }, [replaceCheckoutItem, trackReplaceItem]);
     const handleOnReturn = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
+    const handleOnKeep = useCallback(() => {
+        keepCheckoutItem();
+        trackKeepItem();
+    }, [keepCheckoutItem, trackKeepItem]);
+    const handleOnPressCustomerDecissionBanner = useCallback(() => {
+        resetCheckoutItem();
+        trackResetItem();
+    }, [resetCheckoutItem, trackResetItem]);
+    const handleOnChangedProductVariantSlider = useCallback((active) => trackImageView({ perspective: checkoutItem.productVariant.media[active]?.perspective }), [checkoutItem.productVariant.media, trackImageView]);
     const productVariantSelected = useMemo(() => checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
         ? { id: checkoutItem.replacedFor.id, size: checkoutItem.replacedFor.size }
         : { id: checkoutItem.productVariant.id, size: checkoutItem.productVariant.size }, [checkoutItem.productVariant.id, checkoutItem.productVariant.size, checkoutItem.replacedFor, checkoutItem.status]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(returnQuestionsStatus) &&
-        // This will ensure that the view is not shown until bookCheckoutBooking use-case is dispatched
-        (dependenciesLoadedStatuses.includes(checkoutStatus) || (checkout && checkout.checkoutBookingId)) &&
-        dependenciesLoadedStatuses.includes(bookedProductsVariantsStatus) &&
-        bookedProductsVariants;
+        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);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
     const { media, brand, name, color } = checkoutItem.productVariant;
     return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         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: keepCheckoutItem, 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, { changingDecission: resetCheckoutItemStatus === CommandStatus.LOADING, checkoutItemStatus: checkoutItem.status, onPress: resetCheckoutItem })),
+                customerDecissionMade && (React.createElement(CustomerDecissionBanner, { changingDecission: resetCheckoutItemStatus === CommandStatus.LOADING, 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 })),
+                        React.createElement(ProductVariantSlider, { producVariantMedia: media, onChanged: handleOnChangedProductVariantSlider })),
                     React.createElement(ProductVariantDescription, { brand: brand, color: color, country: country, name: name, price: price, size: productVariantSelected.size }),
                     checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
                         React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.d.ts

@@ -3,7 +3,7 @@ import { ProductVariantProjection } from "../../../../../../projection/bookedPro
 import { Country } from "../../../../../../projection/shared/country";
 import { Layout } from "../../../../../../shared/ui/components/layouts/sticky/Sticky";
 interface ItemActionsProps {
-    readonly productVariants: ProductVariantProjection[];
+    readonly productVariants?: ProductVariantProjection[];
     readonly productVariantSelected: ProductVariantProjection;
     readonly keepButtonLoading?: boolean;
     readonly returnButtonLoading?: boolean;

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -13,7 +13,7 @@ const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoadin
     const sizeSelectorLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
     const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
     const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
-    const sizeSelectorOptions = useMemo(() => productVariants.map((productVariant) => ({
+    const sizeSelectorOptions = useMemo(() => (productVariants || []).map((productVariant) => ({
         label: size({ size: productVariant.size, country }),
         value: productVariant.id,
     })), [country, productVariants]);
@@ -23,7 +23,7 @@ const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoadin
         React.createElement(Body, { style: { column: style.container } },
             React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),
             React.createElement(View, { style: style.row },
-                !productVariantSelected.size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
+                !productVariantSelected.size.unique && productVariants && (React.createElement(SelectField, { ...(disabledSizeSelector && {
                         onPress: onSizeSelectorPress,
                     }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", title: sizeSelectorLabelText || "", value: productVariantSelected.id, style: {
                         selectField: style.sizeSelector,

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.d.ts

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 interface ProductVariantSlider {
     readonly producVariantMedia: MediaProjection[];
+    readonly onChanged?: (active: number) => void;
 }
 declare const ProductVariantSlider: FC<ProductVariantSlider>;
 export { ProductVariantSlider };

package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -3,10 +3,13 @@ import { Image } from "react-native";
 import { Slider } from "../../../../../../shared/ui/components/layouts/slider/Slider";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style } from "./ProductVariantSlider.style";
-const ProductVariantSlider = ({ producVariantMedia }) => {
+const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
     const cdnImageUrl = useMediaImage();
     const [active, setActive] = useState(0);
-    const handleOnActiveChanged = useCallback((activeIndex) => setActive(activeIndex), []);
+    const handleOnActiveChanged = useCallback((activeIndex) => {
+        setActive(activeIndex);
+        onChanged?.(activeIndex);
+    }, [onChanged]);
     return (React.createElement(Slider, { active: active, paginationActiveItemStyle: style.paginationActiveItemStyle, paginationItemStyle: style.paginationItemStyle, paginationStyle: style.paginationStyle, paginationRenderItem: (index) => (React.createElement(Image, { key: producVariantMedia[index]?.perspective, resizeMode: "contain", style: style.paginationImage, testID: "product-variant-pagination-image", source: {
                 uri: cdnImageUrl({
                     url: producVariantMedia[index]?.url,

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

@@ -5,7 +5,7 @@ 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 { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
 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";
@@ -21,7 +21,7 @@ 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({
+    useTrackPageView({
         page: TrackingPage.NOT_FOUND,
         country,
         checkoutId: checkout?.id,

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

@@ -5,7 +5,7 @@ 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 { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -31,7 +31,7 @@ const Summary = ({ customerId, country }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
-    usePageView({
+    useTrackPageView({
         page: TrackingPage.SUMMARY,
         country,
         checkoutId: checkout?.id,

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

@@ -0,0 +1,21 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { MediaPerspective } from "../../../projection/checkoutItem/checkoutItem";
+import { Country } from "../../../projection/shared/country";
+interface ImageViewFunctionArgs {
+    readonly perspective: MediaPerspective;
+}
+interface ImageViewFunction {
+    (args: ImageViewFunctionArgs): void;
+}
+interface UseTrackImageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+}
+interface UseTrackImageViewFunction {
+    (agrs: UseTrackImageViewFunctionArgs): ImageViewFunction;
+}
+declare const useTrackImageView: UseTrackImageViewFunction;
+export { useTrackImageView };

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

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackImageView = ({ page, country, checkoutId, checkoutItemId, productVariantId, }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const imageView = useCallback(({ perspective }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const imageViewTrackingEvent = {
+            event: TrackingEvent.IMAGE_VIEW,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+            productVariantId,
+            perspective,
+        };
+        emitUserEvent(imageViewTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page, productVariantId]);
+    return imageView;
+};
+export { useTrackImageView };

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

@@ -0,0 +1,16 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface UseTrackItemPageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId?: string;
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+    readonly replaceableFor: string[] | undefined;
+    readonly unique: boolean;
+}
+interface UseTrackItemPageViewFunction {
+    (agrs: UseTrackItemPageViewFunctionArgs): void;
+}
+declare const useTrackItemPageView: UseTrackItemPageViewFunction;
+export { useTrackItemPageView };

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

@@ -0,0 +1,25 @@
+import { useLayoutEffect } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackItemPageView = ({ page, country, checkoutId, checkoutItemId, productVariantId, replaceableFor, unique, }) => {
+    const emitUserEvent = useEmitUserEvent();
+    useLayoutEffect(() => {
+        if (!(checkoutId && replaceableFor)) {
+            return;
+        }
+        const itemPageViewTrackingEvent = {
+            event: TrackingEvent.PAGEVIEW,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+            productVariantId,
+            replaceableFor,
+            unique,
+        };
+        emitUserEvent(itemPageViewTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page, productVariantId, replaceableFor, unique]);
+};
+export { useTrackItemPageView };

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

@@ -0,0 +1,16 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface KeepItemFunction {
+    (): void;
+}
+interface UseTrackKeepItemFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly checkoutItemId: string;
+}
+interface UseTrackKeepItemFunction {
+    (agrs: UseTrackKeepItemFunctionArgs): KeepItemFunction;
+}
+declare const useTrackKeepItem: UseTrackKeepItemFunction;
+export { useTrackKeepItem };

package/dist/shared/tracking/infrastructure/useTrackKeepItem.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 useTrackKeepItem = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const keepItem = useCallback(() => {
+        if (!checkoutId) {
+            return;
+        }
+        const keepItemTrackingEvent = {
+            event: TrackingEvent.KEEP_ITEM,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+        };
+        emitUserEvent(keepItemTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+    return keepItem;
+};
+export { useTrackKeepItem };

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

@@ -0,0 +1,12 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface UseTrackPageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+}
+interface UseTrackPageViewFunction {
+    (agrs: UseTrackPageViewFunctionArgs): void;
+}
+declare const useTrackPageView: UseTrackPageViewFunction;
+export { useTrackPageView };

package/dist/shared/tracking/infrastructure/{usePageView.js → useTrackPageView.js}

@@ -2,26 +2,20 @@ import { useLayoutEffect } from "react";
 import { PROJECT } from "../../../infrastructure/tracking/tracking";
 import { TrackingEvent, TrackingEventCategory } from "../tracking";
 import { useEmitUserEvent } from "./useEmitUserEvent";
-const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
+const useTrackPageView = ({ page, country, checkoutId }) => {
     const emitUserEvent = useEmitUserEvent();
     useLayoutEffect(() => {
         if (!checkoutId) {
             return;
         }
-        const baseTrackingEvent = {
+        const pageViewTrackingEvent = {
             event: TrackingEvent.PAGEVIEW,
             eventCategory: TrackingEventCategory.NAVIGATION,
             section: `${PROJECT}_${page}`,
             store: country,
             checkoutId,
         };
-        const pageViewTrackingEvent = checkoutItemId
-            ? {
-                ...baseTrackingEvent,
-                checkoutItemId,
-            }
-            : baseTrackingEvent;
         emitUserEvent(pageViewTrackingEvent);
-    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+    }, [checkoutId, country, emitUserEvent, page]);
 };
-export { usePageView };
+export { useTrackPageView };

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

@@ -0,0 +1,20 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface ReplaceItemFunctionArgs {
+    readonly replaceFor: string;
+}
+interface ReplaceItemFunction {
+    (args: ReplaceItemFunctionArgs): void;
+}
+interface UseTrackReplaceItemFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+}
+interface UseTrackReplaceItemFunction {
+    (agrs: UseTrackReplaceItemFunctionArgs): ReplaceItemFunction;
+}
+declare const useTrackReplaceItem: UseTrackReplaceItemFunction;
+export { useTrackReplaceItem };

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

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackReplaceItem = ({ page, country, checkoutId, checkoutItemId, productVariantId, }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const replaceItem = useCallback(({ replaceFor }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const replaceItemTrackingEvent = {
+            event: TrackingEvent.REPLACE_ITEM,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+            productVariantId,
+            replaceFor,
+        };
+        emitUserEvent(replaceItemTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page, productVariantId]);
+    return replaceItem;
+};
+export { useTrackReplaceItem };

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

@@ -0,0 +1,16 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface ResetItemFunction {
+    (): void;
+}
+interface UseTrackResetItemFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly checkoutItemId: string;
+}
+interface UseTrackResetItemFunction {
+    (agrs: UseTrackResetItemFunctionArgs): ResetItemFunction;
+}
+declare const useTrackResetItem: UseTrackResetItemFunction;
+export { useTrackResetItem };

package/dist/shared/tracking/infrastructure/useTrackResetItem.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 useTrackResetItem = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const resetItem = useCallback(() => {
+        if (!checkoutId) {
+            return;
+        }
+        const resetItemTrackingEvent = {
+            event: TrackingEvent.RESET_ITEM,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+        };
+        emitUserEvent(resetItemTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+    return resetItem;
+};
+export { useTrackResetItem };

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

@@ -0,0 +1,16 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface ReturnItemFunction {
+    (): void;
+}
+interface UseTrackReturnItemFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+    readonly checkoutItemId: string;
+}
+interface UseTrackReturnItemFunction {
+    (agrs: UseTrackReturnItemFunctionArgs): ReturnItemFunction;
+}
+declare const useTrackReturnItem: UseTrackReturnItemFunction;
+export { useTrackReturnItem };

package/dist/shared/tracking/infrastructure/useTrackReturnItem.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 useTrackReturnItem = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const returnItem = useCallback(() => {
+        if (!checkoutId) {
+            return;
+        }
+        const returnItemTrackingEvent = {
+            event: TrackingEvent.RETURN_ITEM,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+        };
+        emitUserEvent(returnItemTrackingEvent);
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+    return returnItem;
+};
+export { useTrackReturnItem };

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

@@ -1,6 +1,12 @@
+import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
 import { Country } from "../../projection/shared/country";
 declare enum TrackingEvent {
-    PAGEVIEW = "pageview"
+    PAGEVIEW = "pageview",
+    KEEP_ITEM = "keep-item",
+    RETURN_ITEM = "return-item",
+    REPLACE_ITEM = "replace-item",
+    RESET_ITEM = "reset-item",
+    IMAGE_VIEW = "image-view"
 }
 declare enum TrackingEventCategory {
     NAVIGATION = "navigation"
@@ -12,8 +18,31 @@ interface BaseTrackingEvent {
     readonly store: Country;
     readonly checkoutId: string;
 }
-interface PageViewTrackingEvent extends BaseTrackingEvent {
-    readonly checkoutItemId?: string;
+type PageViewTrackingEvent = BaseTrackingEvent;
+interface ItemPageViewTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+    readonly replaceableFor: string[] | undefined;
+    readonly unique: boolean;
 }
-export type { BaseTrackingEvent, PageViewTrackingEvent };
+interface KeepItemTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+}
+interface ReturnItemTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+}
+interface ReplaceItemTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+    readonly replaceFor: string;
+}
+interface ResetItemTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+}
+interface ImageViewTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+    readonly productVariantId: string;
+    readonly perspective: MediaPerspective;
+}
+export type { BaseTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, };
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -1,6 +1,11 @@
 var TrackingEvent;
 (function (TrackingEvent) {
     TrackingEvent["PAGEVIEW"] = "pageview";
+    TrackingEvent["KEEP_ITEM"] = "keep-item";
+    TrackingEvent["RETURN_ITEM"] = "return-item";
+    TrackingEvent["REPLACE_ITEM"] = "replace-item";
+    TrackingEvent["RESET_ITEM"] = "reset-item";
+    TrackingEvent["IMAGE_VIEW"] = "image-view";
 })(TrackingEvent || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

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

@@ -1,13 +0,0 @@
-import { TrackingPage } from "../../../infrastructure/tracking/tracking";
-import { Country } from "../../../projection/shared/country";
-interface UsePageViewFunctionArgs {
-    readonly page: TrackingPage;
-    readonly country: Country;
-    readonly checkoutId?: string;
-    readonly checkoutItemId?: string;
-}
-interface UsePageViewFunction {
-    (agrs: UsePageViewFunctionArgs): void;
-}
-declare const usePageView: UsePageViewFunction;
-export { usePageView };