@lookiero/checkout 3.1.2 → 3.2.0

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

@@ -24,6 +24,9 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
     const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
     const summaryRouteMatchRef = useRef(summaryRouteMatch);
     summaryRouteMatchRef.current = summaryRouteMatch;
+    const summaryTabsRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
+    const summaryTabsRouteMatchRef = useRef(summaryTabsRouteMatch);
+    summaryTabsRouteMatchRef.current = summaryTabsRouteMatch;
     const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
     const checkoutRouteMatchRef = useRef(checkoutRouteMatch);
     checkoutRouteMatchRef.current = checkoutRouteMatch;
@@ -61,6 +64,7 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
             /* Navigate to the summary if required */
             if (itemWithoutCustomerDecision === undefined &&
                 !(summaryRouteMatchRef.current ||
+                    summaryTabsRouteMatchRef.current ||
                     itemDetailRouteMatchRef.current ||
                     checkoutRouteMatchRef.current ||
                     checkoutPaymentRouteMatchRef.current)) {

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

@@ -9,6 +9,7 @@ import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
 const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
+const SummaryTabs = lazy(() => import("../views/summaryTabs/SummaryTabs").then((module) => ({ default: module.SummaryTabs })));
 const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
 const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
 const Routing = ({ basePath = "", customer, locale, I18n, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
@@ -35,7 +36,15 @@ const Routing = ({ basePath = "", customer, locale, I18n, layout, getAuthToken,
                 {
                     path: Routes.SUMMARY,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId, layout: layout }))),
+                        React.createElement(Summary, { country: customer?.country, customerId: customer?.customerId, layout: layout },
+                            React.createElement(Outlet, null)))),
+                    children: [
+                        {
+                            path: Routes.SUMMARY_TABS,
+                            element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                                React.createElement(SummaryTabs, { country: customer?.country, customerId: customer?.customerId }))),
+                        },
+                    ],
                 },
                 {
                     path: Routes.CHECKOUT,

package/dist/infrastructure/ui/routing/routes.d.ts

@@ -3,6 +3,7 @@ export declare enum Routes {
     ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
     SUMMARY = "summary",
+    SUMMARY_TABS = "tabs/:tab",
     CHECKOUT = "checkout",
     CHECKOUT_PAYMENT = "payment",
     FEEDBACK = "feedback",

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

@@ -4,6 +4,7 @@ export var Routes;
     Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";
+    Routes["SUMMARY_TABS"] = "tabs/:tab";
     Routes["CHECKOUT"] = "checkout";
     Routes["CHECKOUT_PAYMENT"] = "payment";
     Routes["FEEDBACK"] = "feedback";

package/dist/infrastructure/ui/views/summary/Summary.d.ts

@@ -1,10 +1,11 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { Country } from "../../../../projection/shared/country";
 import { Layout } from "../../components/layouts/layout/Layout";
 interface SummaryProps {
     readonly customerId: string;
     readonly country: Country;
     readonly layout: Layout;
+    readonly children: ReactNode;
 }
 declare const Summary: FC<SummaryProps>;
 export { Summary };

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

@@ -1,15 +1,13 @@
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
-import { generatePath, useNavigate } from "react-router-native";
+import { generatePath, useMatch, 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";
@@ -21,25 +19,35 @@ import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { theme } from "../../theme/theme";
 import { style } from "./Summary.style";
-import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
 import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { StickyPricing } from "./components/stickyPricing/StickyPricing";
 const { spaceXXL } = theme();
-const Summary = ({ customerId, country, layout: Layout }) => {
+const Summary = ({ customerId, country, layout: Layout, children }) => {
     const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
-    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
+    const tab = match?.params.tab;
+    useEffect(() => {
+        if (!tab) {
+            navigate(generatePath(Routes.SUMMARY_TABS, {
+                tab: "keep",
+            }), {
+                replace: true,
+            });
+        }
+    }, [navigate, tab]);
     useTrackPageView({
         page: TrackingPage.SUMMARY,
         country,
         checkoutId: checkout?.id,
     });
-    const navigate = useNavigate();
-    const basePath = useBasePath();
     const trackPressPricing = useTrackPressPricing({
         page: TrackingPage.SUMMARY,
         country,
@@ -60,29 +68,11 @@ const Summary = ({ customerId, country, layout: Layout }) => {
         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 totalCheckoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED).length || 0, [checkout?.items]);
     const [height, setHeight] = useState(0);
     const handleOnLayout = useCallback((event) => setHeight(event.nativeEvent.layout.height), []);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) &&
-        dependenciesLoadedStatuses.includes(pricingStatus) &&
-        dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(pricingStatus) && dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(Layout, { scrollEnabled: false, style: { scrollView: { height } }, onLayout: handleOnLayout },
@@ -92,7 +82,7 @@ const Summary = ({ customerId, country, layout: Layout }) => {
                 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 }, descriptionText)),
-                React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], country: country, onChanged: handleOnChangedTab, onPressItem: handleOnPressItem }))),
-        pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
+                children)),
+        pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
 };
 export { Summary };

package/dist/infrastructure/ui/views/summaryTabs/SummaryTabs.d.ts

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

package/dist/infrastructure/ui/views/summaryTabs/SummaryTabs.js

@@ -0,0 +1,52 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useCallback, useMemo } from "react";
+import { generatePath, useNavigate, useParams } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { useTrackPressItem } from "../../../../shared/tracking/infrastructure/useTrackPressItem";
+import { useTrackTabView } from "../../../../shared/tracking/infrastructure/useTrackTabView";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
+const TAB_INDEX = {
+    keep: 0,
+    return: 1,
+};
+const SummaryTabs = ({ country, customerId }) => {
+    const { tab } = useParams();
+    const tabIndex = useMemo(() => TAB_INDEX[tab] || 0, [tab]);
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    useTrackPageView({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
+    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];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
+    return (React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], country: country, tabIndex: tabIndex, onChanged: handleOnChangedTab, onPressItem: handleOnPressItem }));
+};
+export { SummaryTabs };

package/dist/infrastructure/ui/views/{summary → summaryTabs}/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { Country } from "../../../../../../projection/shared/country";
 interface CheckoutItemsTabsProps {
+    readonly tabIndex: number;
     readonly checkoutItemsKept: CheckoutItemProjection[];
     readonly checkoutItemsReturned: CheckoutItemProjection[];
     readonly country: Country;

package/dist/infrastructure/ui/views/{summary → summaryTabs}/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -9,13 +9,13 @@ import { ProductVariant } from "../../../shared/components/productVariant/Produc
 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, onChanged, }) => {
+const CheckoutItemsTabs = ({ tabIndex, 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})`], onChanged: onChanged },
+    return (React.createElement(Tabs, { defaultIndex: tabIndex, 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/package.json

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