@lookiero/checkout 0.3.1 → 0.3.3

package/dist/domain/checkout/command/markCheckoutAsPaid.d.ts

@@ -0,0 +1,13 @@
+import { Command } from "@lookiero/messaging";
+declare const MARK_CHECKOUT_AS_PAID = "mark_checkout_as_paid";
+interface MarkCheckoutAsPaidPayload {
+    readonly aggregateId: string;
+}
+interface MarkCheckoutAsPaid extends Command<typeof MARK_CHECKOUT_AS_PAID>, MarkCheckoutAsPaidPayload {
+}
+interface MarkCheckoutAsPaidFunction {
+    (payload: MarkCheckoutAsPaidPayload): MarkCheckoutAsPaid;
+}
+declare const markCheckoutAsPaid: MarkCheckoutAsPaidFunction;
+export type { MarkCheckoutAsPaid };
+export { MARK_CHECKOUT_AS_PAID, markCheckoutAsPaid };

package/dist/domain/checkout/command/markCheckoutAsPaid.js

@@ -0,0 +1,4 @@
+import { command } from "@lookiero/messaging";
+const MARK_CHECKOUT_AS_PAID = "mark_checkout_as_paid";
+const markCheckoutAsPaid = ({ aggregateId }) => command({ aggregateId, name: MARK_CHECKOUT_AS_PAID });
+export { MARK_CHECKOUT_AS_PAID, markCheckoutAsPaid };

package/dist/domain/checkout/model/checkout.d.ts

@@ -1,10 +1,12 @@
 import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
+import { MarkCheckoutAsPaid } from "../command/markCheckoutAsPaid";
 import { StartCheckout } from "../command/startCheckout";
 declare enum CheckoutStatus {
     AVAILABLE = "AVAILABLE",
     NOTIFIED = "NOTIFIED",
     STARTED = "STARTED",
-    COMPLETED = "COMPLETED"
+    COMPLETED = "COMPLETED",
+    PAID = "PAID"
 }
 interface Checkout extends AggregateRoot {
     readonly status: CheckoutStatus;
@@ -14,5 +16,6 @@ interface Checkout extends AggregateRoot {
     readonly expiresOn: Date;
 }
 declare const startCheckoutHandler: CommandHandlerFunction<StartCheckout, Checkout>;
+declare const markCheckoutAsPaidHandler: CommandHandlerFunction<MarkCheckoutAsPaid, Checkout>;
 export type { Checkout };
-export { CheckoutStatus, startCheckoutHandler };
+export { CheckoutStatus, startCheckoutHandler, markCheckoutAsPaidHandler };

package/dist/domain/checkout/model/checkout.js

@@ -1,4 +1,5 @@
 import invariant from "tiny-invariant";
+import { checkoutPaid } from "./checkoutPaid";
 import { checkoutStarted } from "./checkoutStarted";
 var CheckoutStatus;
 (function (CheckoutStatus) {
@@ -6,6 +7,7 @@ var CheckoutStatus;
     CheckoutStatus["NOTIFIED"] = "NOTIFIED";
     CheckoutStatus["STARTED"] = "STARTED";
     CheckoutStatus["COMPLETED"] = "COMPLETED";
+    CheckoutStatus["PAID"] = "PAID";
 })(CheckoutStatus || (CheckoutStatus = {}));
 const startCheckoutHandler = () => async ({ aggregateRoot, command }) => {
     const { aggregateId } = command;
@@ -17,4 +19,14 @@ const startCheckoutHandler = () => async ({ aggregateRoot, command }) => {
         domainEvents: [checkoutStarted({ aggregateId })],
     };
 };
-export { CheckoutStatus, startCheckoutHandler };
+const markCheckoutAsPaidHandler = () => async ({ aggregateRoot, command }) => {
+    const { aggregateId } = command;
+    invariant(aggregateRoot.status !== CheckoutStatus.PAID, "Checkout is already paid");
+    invariant(aggregateRoot.status !== CheckoutStatus.COMPLETED, "Checkout is already completed");
+    return {
+        ...aggregateRoot,
+        status: CheckoutStatus.PAID,
+        domainEvents: [checkoutPaid({ aggregateId })],
+    };
+};
+export { CheckoutStatus, startCheckoutHandler, markCheckoutAsPaidHandler };

package/dist/domain/checkout/model/checkoutPaid.d.ts

@@ -0,0 +1,13 @@
+import { DomainEvent } from "@lookiero/messaging";
+declare const CHECKOUT_PAID = "checkout_paid";
+interface CheckoutPaidPayload {
+    readonly aggregateId: string;
+}
+interface CheckoutPaid extends DomainEvent<typeof CHECKOUT_PAID>, CheckoutPaidPayload {
+}
+interface CheckoutPaidFunction {
+    (payload: CheckoutPaidPayload): CheckoutPaid;
+}
+declare const checkoutPaid: CheckoutPaidFunction;
+export type { CheckoutPaid };
+export { CHECKOUT_PAID, checkoutPaid };

package/dist/domain/checkout/model/checkoutPaid.js

@@ -0,0 +1,4 @@
+import { domainEvent } from "@lookiero/messaging";
+const CHECKOUT_PAID = "checkout_paid";
+const checkoutPaid = ({ aggregateId }) => domainEvent({ aggregateId, name: CHECKOUT_PAID });
+export { CHECKOUT_PAID, checkoutPaid };

package/dist/infrastructure/delivery/baseBootstrap.js

@@ -1,6 +1,7 @@
 import { bootstrap as messagingBootstrap } from "@lookiero/messaging-react";
+import { MARK_CHECKOUT_AS_PAID } from "../../domain/checkout/command/markCheckoutAsPaid";
 import { START_CHECKOUT } from "../../domain/checkout/command/startCheckout";
-import { startCheckoutHandler } from "../../domain/checkout/model/checkout";
+import { markCheckoutAsPaidHandler, startCheckoutHandler } from "../../domain/checkout/model/checkout";
 import { BOOK_CHECKOUT_BOOKING_FOR_CHECKOUT_ITEM } from "../../domain/checkoutBooking/command/bookCheckoutBookingForCheckoutItem";
 import { bookCheckoutBookingForCheckoutItemHandler, } from "../../domain/checkoutBooking/model/checkoutBooking";
 import { KEEP_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/keepCheckoutItem";
@@ -35,6 +36,7 @@ const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdVie
 })
     .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler)
     .command(START_CHECKOUT, startCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
+    .command(MARK_CHECKOUT_AS_PAID, markCheckoutAsPaidHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
     .query(VIEW_CHECKOUT_ITEM_BY_ID, viewCheckoutItemByIdHandler, {
     view: checkoutItemByIdView,
 })

package/dist/infrastructure/domain/checkout/model/httpCheckouts.js

@@ -1,5 +1,6 @@
 import invariant from "tiny-invariant";
 import { viewCheckoutById, } from "../../../../projection/checkout/viewCheckoutById";
+import { httpCheckoutsMarkAsPaid } from "./httpCheckoutsMarkAsPaid";
 import { httpCheckoutsStart } from "./httpCheckoutsStart";
 const toDomain = (checkout) => {
     invariant(checkout, "No checkout found!");
@@ -15,5 +16,10 @@ const toDomain = (checkout) => {
     };
 };
 const getCheckout = ({ queryBus }) => async (aggregateId) => toDomain(await queryBus(viewCheckoutById({ checkoutId: aggregateId })));
-const saveCheckout = ({ httpPost }) => async (aggregateRoot) => await httpCheckoutsStart({ httpPost })(aggregateRoot);
+const saveCheckout = ({ httpPost }) => async (aggregateRoot) => {
+    await Promise.all([
+        httpCheckoutsStart({ httpPost })(aggregateRoot),
+        httpCheckoutsMarkAsPaid({ httpPost })(aggregateRoot),
+    ]);
+};
 export { getCheckout, saveCheckout };

package/dist/infrastructure/domain/checkout/model/httpCheckoutsMarkAsPaid.d.ts

@@ -0,0 +1,5 @@
+import { HttpCheckoutsSaveFunction } from "./httpCheckouts";
+interface HttpCheckoutsMarkAsPaidFunction extends HttpCheckoutsSaveFunction {
+}
+declare const httpCheckoutsMarkAsPaid: HttpCheckoutsMarkAsPaidFunction;
+export { httpCheckoutsMarkAsPaid };

package/dist/infrastructure/domain/checkout/model/httpCheckoutsMarkAsPaid.js

@@ -0,0 +1,13 @@
+import { CHECKOUT_PAID } from "../../../../domain/checkout/model/checkoutPaid";
+const isCheckoutPaid = (event) => event.name === CHECKOUT_PAID;
+const httpCheckoutsMarkAsPaid = ({ httpPost }) => async ({ aggregateId, domainEvents }) => {
+    const checkoutPaid = domainEvents.find(isCheckoutPaid);
+    if (!checkoutPaid) {
+        return;
+    }
+    await httpPost({
+        endpoint: "/mark-checkout-as-paid",
+        body: { checkoutId: aggregateId },
+    });
+};
+export { httpCheckoutsMarkAsPaid };

package/dist/infrastructure/domain/checkout/react/useMarkCheckoutAsPaid.d.ts

@@ -0,0 +1,13 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+interface MarkAsPaidFunction {
+    (): Promise<void>;
+}
+declare type UseMarkCheckoutAsPaid = [markAsPaid: MarkAsPaidFunction, status: CommandStatus];
+interface UseMarkCheckoutAsPaidFunctionArgs {
+    readonly checkoutId: string;
+}
+interface UseMarkCheckoutAsPaidFunction {
+    (args: UseMarkCheckoutAsPaidFunctionArgs): UseMarkCheckoutAsPaid;
+}
+declare const useMarkCheckoutAsPaid: UseMarkCheckoutAsPaidFunction;
+export { useMarkCheckoutAsPaid };

package/dist/infrastructure/domain/checkout/react/useMarkCheckoutAsPaid.js

@@ -0,0 +1,12 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { markCheckoutAsPaid } from "../../../../domain/checkout/command/markCheckoutAsPaid";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useMarkCheckoutAsPaid = ({ checkoutId }) => {
+    const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
+    const markAsPaid = useCallback(() => commandBus(markCheckoutAsPaid({
+        aggregateId: checkoutId,
+    })), [checkoutId, commandBus]);
+    return [markAsPaid, status];
+};
+export { useMarkCheckoutAsPaid };

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

@@ -1,8 +1,11 @@
 import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { Edge } from "react-native-safe-area-context";
+declare type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
 interface SafeAreaScrollViewProps {
     readonly children: ReactNode;
     readonly edges?: Edge[];
+    readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
 }
 declare const SafeAreaScrollView: FC<SafeAreaScrollViewProps>;
 export { SafeAreaScrollView };

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

@@ -3,12 +3,15 @@ import { ScrollView } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../theme/theme";
 const { spaceXL } = theme();
-const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"] }) => {
+const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"], style: customStyle, }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    return (React.createElement(SafeAreaView, { edges: edges },
-        React.createElement(ScrollView, { contentContainerStyle: {
-                paddingTop: !safeAreaInsetTop ? spaceXL : 0,
-                paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
-            } }, children)));
+    return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
+        React.createElement(ScrollView, { contentContainerStyle: [
+                {
+                    paddingTop: !safeAreaInsetTop ? spaceXL : 0,
+                    paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+                },
+                customStyle?.scrollView,
+            ] }, children)));
 };
 export { SafeAreaScrollView };

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

@@ -33,6 +33,9 @@ declare enum I18nMessages {
     FEEDBACK_UNANSWERED = "feedback.unanswered",
     RETURN_QUESTIONS_TITLE = "return_questions.title",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
+    SUMMARY_TITLE = "summary.title",
+    SUMMARY_DESCRIPTION = "summary.description",
+    SUMMARY_BANNER = "summary.banner",
     SUMMARY_KEEP_TAB = "summary.keep_tab",
     SUMMARY_RETURN_TAB = "summary.return_tab",
     SUMMARY_KEEP_EMPTY = "summary.keep_empty",

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

@@ -34,6 +34,9 @@ var I18nMessages;
     I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
     I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
+    I18nMessages["SUMMARY_TITLE"] = "summary.title";
+    I18nMessages["SUMMARY_DESCRIPTION"] = "summary.description";
+    I18nMessages["SUMMARY_BANNER"] = "summary.banner";
     I18nMessages["SUMMARY_KEEP_TAB"] = "summary.keep_tab";
     I18nMessages["SUMMARY_RETURN_TAB"] = "summary.return_tab";
     I18nMessages["SUMMARY_KEEP_EMPTY"] = "summary.keep_empty";

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

@@ -13,6 +13,7 @@ const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement
     const firstItemWithoutCustomerDecision = checkout?.items.find((item) => [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status));
     const introRouteMatch = useMatch(`${basePath}/${Routes.INTRO}`);
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
+    const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
     const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
@@ -29,8 +30,8 @@ const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement
         }
     }
     else {
-        if (itemRouteMatch) {
-            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch.params.id);
+        if (itemRouteMatch || itemDetailRouteMatch) {
+            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch?.params.id || itemDetailRouteMatch?.params.id);
             if (!checkoutItem) {
                 return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
             }
@@ -38,7 +39,7 @@ const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement
         if (firstItemWithoutCustomerDecision && !itemRouteMatch) {
             return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
         }
-        if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch) {
+        if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch && !itemDetailRouteMatch) {
             return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
         }
     }

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

@@ -28,6 +28,11 @@ const Routing = ({ basePath = "", onNotAccessible, customerId, locale, I18n, onI
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Item, { customerId: customerId }))),
                 },
+                {
+                    path: Routes.ITEM_DETAIL,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Item, { customerId: customerId }))),
+                },
                 {
                     path: Routes.SUMMARY,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },

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

@@ -1,6 +1,7 @@
 export declare enum Routes {
     HOME = "",
     INTRO = "intro",
+    ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
     SUMMARY = "summary"
 }

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

@@ -2,6 +2,7 @@ export var Routes;
 (function (Routes) {
     Routes["HOME"] = "";
     Routes["INTRO"] = "intro";
+    Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";
 })(Routes || (Routes = {}));

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.js

@@ -3,10 +3,10 @@ import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../../../theme/theme";
 import { style } from "./Sticky.style";
-const { spaceL } = theme();
+const { spaceXL } = theme();
 const Sticky = ({ children, style: customStyle, onLayout }) => {
     const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => onLayout?.({ width, height }), [onLayout]);
-    return (React.createElement(View, { style: [style.sticky, { paddingBottom: safeAreaInsetBottom + spaceL }, customStyle], onLayout: handleOnLayout }, children));
+    return (React.createElement(View, { style: [style.sticky, { paddingBottom: safeAreaInsetBottom + spaceXL }, customStyle], onLayout: handleOnLayout }, children));
 };
 export { Sticky };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.style.js

@@ -1,6 +1,6 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { colorBase, elevationLayerL, elevationRadius, spaceL } = theme();
+const { colorBase, elevationLayerL, elevationRadius, spaceXL } = theme();
 const style = StyleSheet.create({
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -8,7 +8,7 @@ const style = StyleSheet.create({
         backgroundColor: colorBase,
         bottom: 0,
         elevation: elevationLayerL,
-        paddingTop: spaceL,
+        paddingTop: spaceXL,
         shadowColor: colorBase,
         shadowOffset: {
             height: -40,

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

@@ -1,25 +1,49 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import { generatePath, useNavigate } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { pricing } from "../../../projection/pricing/pricing.mock";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
 import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
+import { style } from "./Summary.style";
 import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
-import { Pricing } from "./components/pricing/Pricing";
+import { FiveItemsDiscountBanner } from "./components/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
+import { StickyPricing } from "./components/stickyPricing/StickyPricing";
 const Summary = ({ customerId }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const handleOnPressPricing = useCallback(() => setPricingCollapsed(!pricingCollapsed), [pricingCollapsed]);
     const handleOnSubmit = useCallback(() => void 0, []);
-    const handleOnPressItem = useCallback(() => void 0, []);
+    const navigate = useNavigate();
+    const handleOnPressItem = useCallback((checkoutItemId) => navigate(generatePath(Routes.ITEM_DETAIL, { id: checkoutItemId })), [navigate]);
+    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);
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) &&
+        dependenciesLoadedStatuses.includes(pricingStatus) &&
+        dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, null,
-        React.createElement(Body, null,
-            React.createElement(CheckoutItemsTabs, { checkoutItems: checkout?.items || [], onPressItem: handleOnPressItem }),
-            React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: pricingCollapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalItemsKept: 3, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SafeAreaScrollView, { style: { safeAreaView: style.container } },
+            React.createElement(Body, null,
+                fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
+                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 || [], onPressItem: handleOnPressItem }))),
+        pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
 };
 export { Summary };

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

@@ -0,0 +1,18 @@
+declare const style: {
+    container: {
+        flex: number;
+    };
+    content: {
+        paddingHorizontal: number;
+    };
+    description: {
+        marginBottom: number;
+        marginTop: number;
+        textAlign: "center";
+    };
+    title: {
+        marginTop: number;
+        textAlign: "center";
+    };
+};
+export { style };

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { spaceM, spaceL, spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        paddingHorizontal: spaceXL,
+    },
+    description: {
+        marginBottom: spaceXL,
+        marginTop: spaceM,
+        textAlign: "center",
+    },
+    title: {
+        marginTop: spaceL,
+        textAlign: "center",
+    },
+});
+export { style };

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

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 interface CheckoutItemsTabsProps {
-    readonly checkoutItems: CheckoutItemProjection[];
+    readonly checkoutItemsKept: CheckoutItemProjection[];
+    readonly checkoutItemsReturned: CheckoutItemProjection[];
     readonly onPressItem: (checkoutItemId: string) => void;
 }
 declare const CheckoutItemsTabs: FC<CheckoutItemsTabsProps>;

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

@@ -1,24 +1,21 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { View } from "react-native";
-import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { Tabs } from "../../../../components/layouts/tabs/Tabs";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant } from "../../../item/components/productVariant/ProductVariant";
 import { style } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItem, discarded = false, testID, style: customStyle, onPress, }) => (React.createElement(View, { style: style.checkoutItem, testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, discarded: discarded, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, size: checkoutItem.productVariant.size, status: checkoutItem.status, style: customStyle, onPress: onPress })));
-const CheckoutItemsTabs = ({ checkoutItems, onPressItem }) => {
+const CheckoutItemsTabs = ({ checkoutItemsKept, checkoutItemsReturned, onPressItem }) => {
     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 keepCheckoutItems = useMemo(() => checkoutItems.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkoutItems]);
-    const returnCheckoutItems = useMemo(() => checkoutItems.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.RETURNED || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkoutItems]);
     const handleOnPressItem = useCallback((checkoutItemId) => onPressItem(checkoutItemId), [onPressItem]);
-    return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${keepCheckoutItems.length})`, `${returnTabText} (${returnCheckoutItems.length})`] },
-        React.createElement(React.Fragment, null, keepCheckoutItems.length === 0 ? (React.createElement(Text, null, keepEmptyText)) : (keepCheckoutItems.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, testID: "keep-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))),
-        React.createElement(React.Fragment, null, returnCheckoutItems.length === 0 ? (React.createElement(Text, null, returnEmptyText)) : (returnCheckoutItems.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, style: { image: style.returnCheckoutItem }, testID: "return-checkout-item", discarded: true, onPress: () => handleOnPressItem(checkoutItem.id) })))))));
+    return (React.createElement(Tabs, { style: { sliderContainer: style.sliderContainer }, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`] },
+        React.createElement(React.Fragment, null, checkoutItemsKept.length === 0 ? (React.createElement(Text, null, keepEmptyText)) : (checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, testID: "keep-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))),
+        React.createElement(React.Fragment, null, checkoutItemsReturned.length === 0 ? (React.createElement(Text, null, returnEmptyText)) : (checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItem: checkoutItem, style: { image: style.returnCheckoutItem }, testID: "return-checkout-item", discarded: true, onPress: () => handleOnPressItem(checkoutItem.id) })))))));
 };
 export { CheckoutItemsTabs };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface FiveItemsDiscountBannerProps {
+    readonly fiveItemsDiscount: number;
+}
+declare const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps>;
+export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -0,0 +1,15 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { View } from "react-native";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./FiveItemsDiscountBanner.style";
+const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
+    const bannerText = useI18nMessage({
+        id: I18nMessages.SUMMARY_BANNER,
+        values: { discount: fiveItemsDiscount.toString() },
+    });
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { level: 3, body: true }, bannerText)));
+};
+export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorAccent, spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorAccent,
+        paddingHorizontal: spaceXL,
+        paddingVertical: 12,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.d.ts

@@ -7,7 +7,7 @@ interface PricingProps {
     readonly balanceDiscount?: PriceProjection;
     readonly discount?: PriceProjection;
     readonly discountPercentage?: number;
-    readonly totalItemsKept: number;
+    readonly totalCheckoutItemsKept: number;
     readonly service: ServiceProjection;
     readonly collapsible?: boolean;
     readonly collapsed?: boolean;

package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -6,17 +6,18 @@ import React from "react";
 import { Pressable, View } from "react-native";
 import { Price } from "../../../../components/atoms/price/Price";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { Icon } from "../../../../shared/components/atoms/icon/Icon";
 import { style } from "./Pricing.style";
+import { ArrowDown } from "./icons/ArrowDown";
+import { ArrowUp } from "./icons/ArrowUp";
 const PS_SERVICE_FREE_INDICATOR = 100;
 const Row = ({ text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { level: level, style: style.uppercase, action: true }, text),
     children));
-const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalItemsKept, service, collapsible = true, collapsed = false, onPress = () => void 0, onSubmit, }) => {
+const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, onPress = () => void 0, onSubmit, }) => {
     const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL }) || "";
-    const totalItemsKeptText = useI18nMessage({
+    const totalCheckoutItemsKeptText = useI18nMessage({
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
-        values: { items: totalItemsKept.toString() },
+        values: { items: totalCheckoutItemsKept.toString() },
     });
     const subtotalText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBTOTAL });
     const submitButtonText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
@@ -30,19 +31,18 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
     const isPSServiceFree = service.discount.amount === PS_SERVICE_FREE_INDICATOR;
     const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
     const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
-    return (React.createElement(Pressable, { disabled: !collapsible, style: style.container, testID: "pricing", onPress: onPress },
-        collapsible && (React.createElement(View, { style: style.iconContainer },
-            React.createElement(Icon, { name: collapsed ? "arrow-up" : "arrow-down" }))),
+    return (React.createElement(Pressable, { disabled: !collapsible, testID: "pricing", onPress: onPress },
+        collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { style: style.icon, testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(animated.View, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
             React.createElement(View, null,
                 React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
                     totalText,
                     " ",
-                    totalItemsKeptText),
+                    totalCheckoutItemsKeptText),
                 React.createElement(Price, { price: orderTotal, variant: "detail" })),
             React.createElement(View, null,
                 React.createElement(Button, { small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
-            React.createElement(Row, { text: `${subtotalText} ${totalItemsKeptText}` },
+            React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
                 React.createElement(Price, { price: subtotal, variant: "subtotal" })),
             discount && (React.createElement(Row, { text: discountText },
                 React.createElement(Price, { price: discount, variant: "subtotal" }))),

package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts

@@ -3,16 +3,16 @@ declare const style: {
         flexDirection: "row";
         justifyContent: "space-between";
     };
-    container: {
-        paddingBottom: number;
-        paddingHorizontal: number;
-        paddingTop: number;
-    };
     divider: {
         backgroundColor: string;
         height: number;
         marginBottom: number;
     };
+    icon: {
+        height: number;
+        stroke: string;
+        width: number;
+    };
     iconContainer: {
         alignItems: "center";
         marginBottom: number;

package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.js

@@ -1,21 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { colorContent, spaceXS, spaceM, spaceL, spaceXL } = theme();
+const { colorContent, colorGrayscaleS, spaceXS, spaceL } = theme();
 const style = StyleSheet.create({
     collapsed: {
         flexDirection: "row",
         justifyContent: "space-between",
     },
-    container: {
-        paddingBottom: spaceXL,
-        paddingHorizontal: spaceXL,
-        paddingTop: spaceM,
-    },
     divider: {
         backgroundColor: colorContent,
         height: 1,
         marginBottom: 19,
     },
+    icon: {
+        height: 10,
+        stroke: colorGrayscaleS,
+        width: 58,
+    },
     iconContainer: {
         alignItems: "center",
         marginBottom: spaceL,

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const ArrowDown: (props: SvgProps) => JSX.Element;
+export { ArrowDown };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+const ArrowDown = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
+    React.createElement(Path, { d: "M1.198 1.23 28.27 8.698M55.802 1.23 28.73 8.698", strokeLinecap: "round", strokeWidth: 2 })));
+export { ArrowDown };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const ArrowUp: (props: SvgProps) => JSX.Element;
+export { ArrowUp };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.js

@@ -0,0 +1,5 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+const ArrowUp = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
+    React.createElement(Path, { d: "M1.698 8.77 28.77 1.302M56.302 8.77 29.23 1.302", strokeLinecap: "round", strokeWidth: 2 })));
+export { ArrowUp };

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+interface StickyPricingProps {
+    readonly pricing: PricingProjection;
+    readonly totalCheckoutItemsKept: number;
+    readonly collapsed: boolean;
+    readonly onPress: () => void;
+    readonly onSubmit: () => void;
+}
+declare const StickyPricing: FC<StickyPricingProps>;
+export { StickyPricing };

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Body } from "../../../../components/layouts/body/Body";
+import { Sticky } from "../../../../shared/components/layouts/sticky/Sticky";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./StickyPricing.style";
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit }) => (React.createElement(Sticky, null,
+    React.createElement(Body, { style: { column: style.container } },
+        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
+export { StickyPricing };

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts

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

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        paddingHorizontal: spaceXL,
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -33,7 +33,7 @@
     "@lookiero/messaging-react": "^8.0.0",
     "@react-spring/native": "^9.5.5",
     "react-native-safe-area-context": "^4.4.1",
-    "react-native-svg": "^13.5.0",
+    "react-native-svg": "12.3.0",
     "react-router-dom": "^6.4.2",
     "react-router-native": "^6.4.2",
     "tiny-invariant": "^1.2.0",

package/dist/infrastructure/projection/pricing/pricing.mock.d.ts

@@ -1,3 +0,0 @@
-import { PricingProjection } from "../../../projection/pricing/pricing";
-declare const pricing: PricingProjection;
-export { pricing };

package/dist/infrastructure/projection/pricing/pricing.mock.js

@@ -1,37 +0,0 @@
-import { Currency } from "../../../domain/checkoutItem/model/currency";
-const pricing = {
-    orderTotal: {
-        amount: 14323,
-        currency: Currency.EUR,
-    },
-    subtotal: {
-        amount: 21801,
-        currency: Currency.EUR,
-    },
-    discount: {
-        amount: -2500,
-        currency: Currency.EUR,
-    },
-    discountPercentage: 25,
-    balanceDiscount: {
-        amount: 1000,
-        currency: Currency.EUR,
-    },
-    service: {
-        reference: "LK-service",
-        originalPrice: {
-            amount: 10.0,
-            currency: Currency.EUR,
-        },
-        discount: {
-            amount: 0,
-            currency: Currency.EUR,
-        },
-        finalPrice: {
-            amount: -1000,
-            currency: Currency.EUR,
-        },
-        prepaid: true,
-    },
-};
-export { pricing };