@lookiero/checkout 0.8.24 → 0.8.26

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.js

@@ -1,6 +1,6 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { animated, useSpring } from "@react-spring/native";
-import React, { Children, useCallback, useState } from "react";
+import React, { Children, useCallback, useEffect, useState } from "react";
 import { Pressable, View } from "react-native";
 import invariant from "tiny-invariant";
 import { Slider } from "../../../../../shared/ui/components/layouts/slider/Slider";
@@ -35,10 +35,10 @@ const TabList = ({ labels = [], tabIndex = 0, style: customStyle, onSelect }) =>
 const Tabs = ({ children, defaultIndex = 0, tabLabels, style: customStyle, onChanged, tabLabelsWrapper = (children) => children, }) => {
     invariant(Children.count(children) === tabLabels.length, "Children and tab labels must be the same length");
     const [active, setActive] = useState(defaultIndex);
-    const handleOnActiveChanged = useCallback((activeIndex) => {
-        setActive(activeIndex);
-        onChanged?.(activeIndex);
-    }, [onChanged]);
+    const handleOnActiveChanged = useCallback((activeIndex) => setActive(activeIndex), []);
+    useEffect(() => {
+        onChanged?.(active);
+    }, [active, onChanged]);
     return (React.createElement(View, { style: [style.container, customStyle?.tabContainer], testID: "tabs" },
         tabLabelsWrapper(React.createElement(TabList, { labels: tabLabels, style: customStyle?.tabList, tabIndex: active, onSelect: handleOnActiveChanged })),
         React.createElement(View, { style: customStyle?.sliderContainer },

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

@@ -6,6 +6,7 @@ import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { useTrackPressContinue } from "../../../../shared/tracking/infrastructure/useTrackPressContinue";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -32,9 +33,15 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     });
     const navigate = useNavigate();
     const basePath = useBasePath();
+    const trackPressContinue = useTrackPressContinue({
+        page: TrackingPage.CHECKOUT,
+        country,
+        checkoutId: checkout?.id,
+    });
     const handleOnSubmit = useCallback(() => {
+        trackPressContinue();
         navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
-    }, [basePath, navigate]);
+    }, [basePath, navigate, trackPressContinue]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const hasReplacedCheckoutItem = useMemo(() => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];

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

@@ -6,6 +6,10 @@ import { Platform, View } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { useTrackPressContinue } from "../../../../shared/tracking/infrastructure/useTrackPressContinue";
+import { useTrackPressItem } from "../../../../shared/tracking/infrastructure/useTrackPressItem";
+import { useTrackPressPricing } from "../../../../shared/tracking/infrastructure/useTrackPressPricing";
+import { useTrackTabView } from "../../../../shared/tracking/infrastructure/useTrackTabView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -38,10 +42,41 @@ const Summary = ({ customerId, country }) => {
     });
     const navigate = useNavigate();
     const basePath = useBasePath();
+    const trackPressPricing = useTrackPressPricing({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
-    const handleOnPressPricing = useCallback(() => setPricingCollapsed(!pricingCollapsed), [pricingCollapsed]);
-    const handleOnSubmit = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`), [basePath, navigate]);
-    const handleOnPressItem = useCallback((checkoutItemId) => navigate(`${basePath}/${generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })}`), [basePath, navigate]);
+    const handleOnPressPricing = useCallback(() => {
+        const collapsed = !pricingCollapsed;
+        setPricingCollapsed(collapsed);
+        trackPressPricing({ collapse: collapsed });
+    }, [pricingCollapsed, trackPressPricing]);
+    const trackPressContinue = useTrackPressContinue({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const handleOnSubmit = useCallback(() => {
+        trackPressContinue();
+        navigate(`${basePath}/${Routes.CHECKOUT}`);
+    }, [basePath, navigate, trackPressContinue]);
+    const trackPressItem = useTrackPressItem({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const handleOnPressItem = useCallback((checkoutItemId) => {
+        trackPressItem({ checkoutItemId });
+        navigate(`${basePath}/${generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })}`);
+    }, [basePath, navigate, trackPressItem]);
+    const trackTabView = useTrackTabView({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const handleOnChangedTab = useCallback((active) => trackTabView({ tab: active === 0 ? "keep" : "return" }), [trackTabView]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const checkoutItemsReturned = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.RETURNED || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
@@ -56,6 +91,6 @@ const Summary = ({ customerId, country }) => {
             React.createElement(View, { style: style.content },
                 React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                 React.createElement(Text, { level: 3, style: style.description, body: true }, descriptionText)),
-            React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], country: country, onPressItem: handleOnPressItem }))));
+            React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], country: country, onChanged: handleOnChangedTab, onPressItem: handleOnPressItem }))));
 };
 export { Summary };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts

@@ -6,6 +6,7 @@ interface CheckoutItemsTabsProps {
     readonly checkoutItemsReturned: CheckoutItemProjection[];
     readonly country: Country;
     readonly onPressItem: (checkoutItemId: string) => void;
+    readonly onChanged?: (index: number) => void;
 }
 declare const CheckoutItemsTabs: FC<CheckoutItemsTabsProps>;
 export { CheckoutItemsTabs };

package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -9,13 +9,13 @@ import { ProductVariant } from "../../../item/components/productVariant/ProductV
 import { style } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItemStatus, checkoutItemProductVariant, checkoutItemPrice, country, discarded = false, testID, style: customStyle, onPress, }) => (React.createElement(View, { style: style.checkoutItem, testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItemProductVariant.brand, color: checkoutItemProductVariant.color, country: country, discarded: discarded, media: checkoutItemProductVariant.media, name: checkoutItemProductVariant.name, price: checkoutItemPrice, size: checkoutItemProductVariant.size, status: checkoutItemStatus, style: customStyle, onPress: onPress })));
-const CheckoutItemsTabs = ({ checkoutItemsKept, checkoutItemsReturned, country, onPressItem, }) => {
+const CheckoutItemsTabs = ({ checkoutItemsKept, checkoutItemsReturned, country, onPressItem, onChanged, }) => {
     const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
     const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
     const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
     const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
     const handleOnPressItem = useCallback((checkoutItemId) => onPressItem(checkoutItemId), [onPressItem]);
-    return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`] },
+    return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`], onChanged: onChanged },
         React.createElement(React.Fragment, null, checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                 ? checkoutItem.replacedFor
                 : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) }))))),

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

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

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

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

@@ -0,0 +1,18 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressItemFunctionArgs {
+    readonly checkoutItemId: string;
+}
+interface PressItemFunction {
+    (args: PressItemFunctionArgs): void;
+}
+interface UseTrackPressItemFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+}
+interface UseTrackPressItemFunction {
+    (agrs: UseTrackPressItemFunctionArgs): PressItemFunction;
+}
+declare const useTrackPressItem: UseTrackPressItemFunction;
+export { useTrackPressItem };

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

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

@@ -0,0 +1,18 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface PressPricingFunctionArgs {
+    readonly collapse: boolean;
+}
+interface PressPricingFunction {
+    (args: PressPricingFunctionArgs): void;
+}
+interface UseTrackPressPricingFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+}
+interface UseTrackPressPricingFunction {
+    (agrs: UseTrackPressPricingFunctionArgs): PressPricingFunction;
+}
+declare const useTrackPressPricing: UseTrackPressPricingFunction;
+export { useTrackPressPricing };

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

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

@@ -0,0 +1,15 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface TabViewFunctionArgs<T> {
+    readonly tab: T;
+}
+interface TabViewFunction<T> {
+    (args: TabViewFunctionArgs<T>): void;
+}
+interface UseTrackTabViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId: string | undefined;
+}
+declare const useTrackTabView: <T>({ page, country, checkoutId }: UseTrackTabViewFunctionArgs) => TabViewFunction<T>;
+export { useTrackTabView };

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

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

@@ -6,7 +6,11 @@ declare enum TrackingEvent {
     RETURN_ITEM = "return-item",
     REPLACE_ITEM = "replace-item",
     RESET_ITEM = "reset-item",
-    IMAGE_VIEW = "image-view"
+    IMAGE_VIEW = "image-view",
+    PRESS_PRICING = "press-pricing",
+    PRESS_ITEM = "press-item",
+    PRESS_CONTINUE = "press-continue",
+    TAB_VIEW = "tab-view"
 }
 declare enum TrackingEventCategory {
     NAVIGATION = "navigation"
@@ -44,5 +48,15 @@ interface ImageViewTrackingEvent extends BaseTrackingEvent {
     readonly productVariantId: string;
     readonly perspective: MediaPerspective;
 }
-export type { BaseTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, };
+interface PressPricingTrackingEvent extends BaseTrackingEvent {
+    readonly collapse: boolean;
+}
+interface PressItemTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId: string;
+}
+type PressContinueTrackingEvent = BaseTrackingEvent;
+interface TabViewTrackingEvent<T> extends BaseTrackingEvent {
+    readonly tab: T;
+}
+export type { BaseTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, };
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -6,6 +6,10 @@ var TrackingEvent;
     TrackingEvent["REPLACE_ITEM"] = "replace-item";
     TrackingEvent["RESET_ITEM"] = "reset-item";
     TrackingEvent["IMAGE_VIEW"] = "image-view";
+    TrackingEvent["PRESS_PRICING"] = "press-pricing";
+    TrackingEvent["PRESS_ITEM"] = "press-item";
+    TrackingEvent["PRESS_CONTINUE"] = "press-continue";
+    TrackingEvent["TAB_VIEW"] = "tab-view";
 })(TrackingEvent || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {

package/package.json

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