@lookiero/checkout 0.4.0-beta.0 → 0.4.0-beta.2

package/dist/infrastructure/ui/Root.js

@@ -1,11 +1,12 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, development }) => 
+const root = ({ Messaging, I18n, Notifications, authToken, development }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
-({ basePath, locale = "en", customerId, onNotAccessible }) => {
+({ basePath, locale = "en", customerId, menu, onNotAccessible, useRedirect }) => {
     const handleOnI18nError = useCallback(() => void 0, []);
     return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-        React.createElement(Routing, { I18n: I18n, basePath: basePath, customerId: customerId, locale: locale, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+        React.createElement(Notifications, { includeReactQueryDevTools: Platform.OS === "web" },
+            React.createElement(Routing, { I18n: I18n, authToken: authToken, basePath: basePath, customerId: customerId, locale: locale, menu: menu, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
 };
 export { root };

package/dist/infrastructure/ui/components/atoms/price/Price.d.ts

@@ -1,8 +1,8 @@
 import { FC } from "react";
 import { TextProps } from "react-native";
-import { PriceProjection } from "../../../../../projection/checkoutItem/checkoutItem";
-declare type PriceStyle = "priceText" | "discountedText";
-declare type PriceVariant = "default" | "detail" | "subtotal" | "total";
+import { PriceProjection } from "../../../../../projection/shared/price";
+type PriceStyle = "priceText" | "discountedText";
+type PriceVariant = "default" | "detail" | "subtotal" | "total";
 interface PriceProps {
     readonly price: PriceProjection;
     readonly variant?: PriceVariant;

package/dist/infrastructure/ui/components/layouts/body/Body.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
-declare type BodyStyle = "row" | "column";
+type BodyStyle = "row" | "column";
 interface BodyProps {
     readonly children: ReactNode;
     readonly style?: Partial<Record<BodyStyle, StyleProp<ViewStyle>>>;

package/dist/infrastructure/ui/components/layouts/body/Body.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Column } from "../../../shared/components/layouts/column/Column";
-import { Row } from "../../../shared/components/layouts/row/Row";
+import { Column } from "../../../../../shared/ui/components/layouts/column/Column";
+import { Row } from "../../../../../shared/ui/components/layouts/row/Row";
 import { style } from "./Body.style";
 const Body = ({ children, style: customStyle }) => (React.createElement(Row, { style: [style.row, customStyle?.row] },
     React.createElement(Column, { style: customStyle?.column }, children)));

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

@@ -3,7 +3,7 @@ import { animated, useSpring } from "@react-spring/native";
 import React, { Children, useCallback, useState } from "react";
 import { Pressable, View } from "react-native";
 import invariant from "tiny-invariant";
-import { Slider } from "../../../shared/components/layouts/slider/Slider";
+import { Slider } from "../../../../../shared/ui/components/layouts/slider/Slider";
 import { style } from "./Tabs.style";
 const Tab = ({ children, active, disabled = false, style: customStyle, onPress, onLayout }) => (React.createElement(Pressable, { disabled: disabled, style: [style.tab, customStyle?.tab], testID: "tab", onLayout: onLayout, onPress: onPress },
     React.createElement(Text, { level: 2, style: [style.tabText, active && style.tabActiveText, customStyle?.tabText], detail: true }, children)));

package/dist/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback.js

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import invariant from "tiny-invariant";
 const ReturnQuestionFeedbackContext = createContext(null);
 const ReturnQuestionFeedbackProvider = ({ feedback = {}, children, }) => {
@@ -6,6 +6,7 @@ const ReturnQuestionFeedbackProvider = ({ feedback = {}, children, }) => {
     const onChange = useCallback(({ returnQuestionId, returnQuestionFeedback }) => setContextFeedback((feedback) => returnQuestionFeedback
         ? { ...feedback, [returnQuestionId]: returnQuestionFeedback }
         : Object.entries(feedback).reduce((acc, [id, feedback]) => (id !== returnQuestionId ? { ...acc, [id]: feedback } : acc), {})), []);
+    useEffect(() => setContextFeedback(feedback), [feedback]);
     const value = useMemo(() => ({
         feedback: contextFeedback,
         onChange,

package/dist/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionItem.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from "react";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
 import { ReturnQuestionItem } from "../components/ReturnQuestionItem";
-declare type ReturnQuestionItems = Record<ReturnQuestionType, ReturnQuestionItem>;
+type ReturnQuestionItems = Record<ReturnQuestionType, ReturnQuestionItem>;
 interface ReturnQuestionItemContextProviderProps {
     readonly returnQuestionItems: ReturnQuestionItems;
     readonly children: ReactNode;

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts

@@ -6,5 +6,5 @@ interface ReturnQuestionItemProps {
     readonly children?: ReactNode;
     readonly portalHostName?: string;
 }
-declare type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
+type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
 export type { ReturnQuestionItem, ReturnQuestionItemProps };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -1,10 +1,10 @@
 import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
+import { Modal } from "../../../../../../../shared/ui/components/layouts/modal/Modal";
+import { ButtonIcon } from "../../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
-import { Modal } from "../../../../../shared/components/layouts/modal/Modal";
-import { ButtonIcon } from "../../../../../shared/components/molecules/buttonIcon/ButtonIcon";
-import { InputField } from "../../../../../shared/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,7 +1,7 @@
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
-import { InputField } from "../../../../../shared/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {

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";
+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,16 @@ 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: [
+                {
+                    // Why did we set this??
+                    paddingTop: !safeAreaInsetTop ? spaceXL : 0,
+                    paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+                },
+                customStyle?.scrollView,
+            ] }, children)));
 };
 export { SafeAreaScrollView };

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

@@ -1,6 +1,7 @@
 declare const COLOR_I18N_PREFIX = "color.";
 declare const RETURN_QUESTIONS_PREFIX = "return_questions.";
 declare const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
+declare const CHECKOUT_QUESTIONS_PREFIX = "checkout_questions.";
 declare enum I18nMessages {
     INTRO_TITLE = "intro.title",
     INTRO_SUBTITLE = "intro.subtitle",
@@ -33,7 +34,32 @@ 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_RETURN_TAB = "summary.return_tab",
+    SUMMARY_KEEP_EMPTY = "summary.keep_empty",
+    SUMMARY_RETURN_EMPTY = "summary.return_empty",
+    SUMMARY_TOTAL = "summary.total",
+    SUMMARY_SUBTOTAL = "summary.subtotal",
+    SUMMARY_SUBMIT_BUTTON = "summary.submit_button",
+    SUMMARY_FREE = "summary.free",
+    SUMMARY_DISCOUNT = "summary.discount",
+    SUMMARY_TOTAL_ITEMS_KEPT = "summary.total_items_kept",
+    SUMMARY_CREDIT = "summary.credit",
+    SUMMARY_FEE = "summary.fee",
+    PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
+    CHECKOUT_TITLE = "checkout.title",
+    CHECKOUT_PAY_BUTTON = "checkout.pay_button",
+    CHECKOUT_TOAST_REJECTED = "checkout.toast_rejected",
+    CHECKOUT_TOAST_ERROR = "checkout.toast_error",
+    CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
+    CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
+    CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
+    CHECKOUT_DELIVERY_BANNER = "checkout.delivery_banner",
+    HEADER_CHECKOUT_TITLE = "header.checkout_title",
+    HEADER_COMPLETE_CHECKOUT_TITLE = "header.complete_checkout_title",
+    FEEDBACK_BUTTON = "feedback.button"
 }
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX, CHECKOUT_QUESTIONS_PREFIX, };

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

@@ -1,6 +1,7 @@
 const COLOR_I18N_PREFIX = "color.";
 const RETURN_QUESTIONS_PREFIX = "return_questions.";
 const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
+const CHECKOUT_QUESTIONS_PREFIX = "checkout_questions.";
 var I18nMessages;
 (function (I18nMessages) {
     I18nMessages["INTRO_TITLE"] = "intro.title";
@@ -34,7 +35,32 @@ 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";
+    I18nMessages["SUMMARY_RETURN_EMPTY"] = "summary.return_empty";
+    I18nMessages["SUMMARY_TOTAL"] = "summary.total";
+    I18nMessages["SUMMARY_SUBTOTAL"] = "summary.subtotal";
+    I18nMessages["SUMMARY_SUBMIT_BUTTON"] = "summary.submit_button";
+    I18nMessages["SUMMARY_FREE"] = "summary.free";
+    I18nMessages["SUMMARY_DISCOUNT"] = "summary.discount";
+    I18nMessages["SUMMARY_TOTAL_ITEMS_KEPT"] = "summary.total_items_kept";
+    I18nMessages["SUMMARY_CREDIT"] = "summary.credit";
+    I18nMessages["SUMMARY_FEE"] = "summary.fee";
+    I18nMessages["PRODUCT_VARIANT_SIZE_CHANGE"] = "product_variant.size_change";
+    I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
+    I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
+    I18nMessages["CHECKOUT_TOAST_REJECTED"] = "checkout.toast_rejected";
+    I18nMessages["CHECKOUT_TOAST_ERROR"] = "checkout.toast_error";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_DESCRIPTION"] = "checkout.success_modal_description";
+    I18nMessages["CHECKOUT_SUCCESS_MODAL_BUTTON"] = "checkout.success_modal_button";
+    I18nMessages["CHECKOUT_DELIVERY_BANNER"] = "checkout.delivery_banner";
+    I18nMessages["HEADER_CHECKOUT_TITLE"] = "header.checkout_title";
+    I18nMessages["HEADER_COMPLETE_CHECKOUT_TITLE"] = "header.complete_checkout_title";
+    I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX, CHECKOUT_QUESTIONS_PREFIX, };

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

@@ -1,7 +1,7 @@
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useEffect, useRef } from "react";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
 const CheckoutAccessibilityMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
     const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
     const onNotAccessibleRef = useRef(onNotAccessible);

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

@@ -1,6 +1,5 @@
 import { FC } from "react";
 interface CheckoutMiddlewareProps {
-    readonly basePath: string;
     readonly customerId: string;
     readonly loader?: JSX.Element;
     readonly children: JSX.Element;

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

@@ -1,26 +1,49 @@
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useRef } from "react";
 import { generatePath, Navigate, useMatch } from "react-router-native";
+import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useShouldIntroBeShown } from "../../projection/uiSetting/react/useShouldIntroBeShown";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
 import { Routes } from "./routes";
-const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement(Spinner, null), children }) => {
+import { useBasePath } from "./useBasePath";
+const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner, null), children }) => {
+    const basePath = useBasePath();
     const introShown = useRef(false);
     const [shouldIntroBeShown, shouldIntroBeShownStatus] = useShouldIntroBeShown();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     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 checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
+    const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
+    const notFoundRouteMatch = useMatch(`${basePath}/${Routes.NOT_FOUND}`);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
         dependenciesLoadedStatuses.includes(checkoutStatus);
     if (!dependenciesLoaded) {
         return loader;
     }
-    if (shouldIntroBeShown && !introShown.current) {
+    /* Navigate to NotFound if checkout is completed */
+    if (checkout?.status === CheckoutStatus.COMPLETED && !notFoundRouteMatch) {
+        return React.createElement(Navigate, { to: `${basePath}/${Routes.NOT_FOUND}`, replace: true });
+    }
+    /* Navigate to the feedback if checkout is paid */
+    if (checkout?.status === CheckoutStatus.PAID && !feedbackRouteMatch) {
+        return React.createElement(Navigate, { to: `${basePath}/${Routes.FEEDBACK}`, replace: true });
+    }
+    /* Navigate to the summary if required */
+    if (checkout?.status !== CheckoutStatus.PAID &&
+        checkout?.status !== CheckoutStatus.COMPLETED &&
+        firstItemWithoutCustomerDecision === undefined &&
+        !(summaryRouteMatch || itemDetailRouteMatch || checkoutRouteMatch)) {
+        return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
+    }
+    /* Navigate to the Intro if required */
+    if (shouldIntroBeShown && !introShown.current && firstItemWithoutCustomerDecision !== undefined) {
         if (introRouteMatch) {
             introShown.current = true;
         }
@@ -29,18 +52,18 @@ const CheckoutMiddleware = ({ basePath, customerId, loader = React.createElement
         }
     }
     else {
-        if (itemRouteMatch) {
-            const checkoutItem = checkout?.items.find((item) => item.id === itemRouteMatch.params.id);
+        /* Item/ItemDetail 404 - Not found */
+        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 });
             }
         }
+        /* Navigate to the first item without customer's decission */
         if (firstItemWithoutCustomerDecision && !itemRouteMatch) {
+            console.log("navigate to first item...", firstItemWithoutCustomerDecision.id);
             return (React.createElement(Navigate, { to: generatePath(`${basePath}/${Routes.ITEM}`, { id: firstItemWithoutCustomerDecision.id }), replace: true }));
         }
-        if (firstItemWithoutCustomerDecision === undefined && !summaryRouteMatch) {
-            return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
-        }
     }
     return children;
 };

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

@@ -1,12 +1,16 @@
 import { I18n } from "@lookiero/i18n-react";
 import { FC } from "react";
+import { Menu } from "../views/header/Header";
 interface RoutingProps {
-    readonly onNotAccessible: () => void;
+    readonly basePath?: string;
     readonly customerId: string | undefined;
     readonly locale: string;
     readonly I18n: I18n;
-    readonly basePath?: string;
+    readonly authToken: string;
+    readonly menu: Menu;
+    readonly onNotAccessible: () => void;
     readonly onI18nError?: (err: Error) => void;
+    readonly useRedirect: () => Record<string, string>;
 }
 declare const Routing: FC<RoutingProps>;
 export { Routing };

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

@@ -1,22 +1,26 @@
 import React, { lazy, Suspense } from "react";
 import { Navigate, Outlet, useRoutes } from "react-router-native";
-import { Spinner } from "../shared/components/atoms/spinner/Spinner";
+import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { App } from "../views/App";
 import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
+import { BasePathProvider } from "./useBasePath";
 const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ default: module.Intro })));
 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 Routing = ({ basePath = "", onNotAccessible, customerId, locale, I18n, onI18nError }) => {
+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 = "", customerId, locale, I18n, authToken, menu, onI18nError, onNotAccessible, useRedirect, }) => {
     const routes = useRoutes([
         {
             path: "",
-            element: (React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible },
-                React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
-                    React.createElement(CheckoutMiddleware, { basePath: basePath, customerId: customerId },
-                        React.createElement(App, null,
-                            React.createElement(Outlet, null)))))),
+            element: (React.createElement(BasePathProvider, { basePath: basePath },
+                React.createElement(CheckoutAccessibilityMiddleware, { customerId: customerId, onNotAccessible: onNotAccessible },
+                    React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
+                        React.createElement(CheckoutMiddleware, { customerId: customerId },
+                            React.createElement(App, { customerId: customerId, menu: menu },
+                                React.createElement(Outlet, null))))))),
             children: [
                 {
                     path: Routes.INTRO,
@@ -28,11 +32,26 @@ 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) },
                         React.createElement(Summary, { customerId: customerId }))),
                 },
+                {
+                    path: Routes.CHECKOUT,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Checkout, { authToken: authToken, customerId: customerId, useRedirect: useRedirect }))),
+                },
+                {
+                    path: Routes.FEEDBACK,
+                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
+                        React.createElement(Feedback, { customerId: customerId }))),
+                },
                 {
                     path: "*",
                     element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),

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

@@ -1,6 +1,10 @@
 export declare enum Routes {
     HOME = "",
     INTRO = "intro",
+    ITEM_DETAIL = "item/:id/detail",
     ITEM = "item/:id",
-    SUMMARY = "summary"
+    SUMMARY = "summary",
+    CHECKOUT = "checkout",
+    FEEDBACK = "feedback",
+    NOT_FOUND = "not-found"
 }

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

@@ -2,6 +2,10 @@ export var Routes;
 (function (Routes) {
     Routes["HOME"] = "";
     Routes["INTRO"] = "intro";
+    Routes["ITEM_DETAIL"] = "item/:id/detail";
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";
+    Routes["CHECKOUT"] = "checkout";
+    Routes["FEEDBACK"] = "feedback";
+    Routes["NOT_FOUND"] = "not-found";
 })(Routes || (Routes = {}));

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

@@ -1,8 +1,8 @@
 import { DefaultTheme } from "@lookiero/aurora-next/build/theming/theme.default";
-declare type Remove$PrefixFromKeys<T> = {
+type Remove$PrefixFromKeys<T> = {
     [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
 };
-declare type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
+type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
 interface ThemeFunction {
     (): AuroraTheme;
 }

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

@@ -1,5 +1,8 @@
 import { FC } from "react";
+import { Menu } from "./header/Header";
 interface AppProps {
+    readonly customerId: string;
+    readonly menu: Menu;
     readonly children: JSX.Element;
 }
 declare const App: FC<AppProps>;

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

@@ -1,6 +1,13 @@
 import { PortalProvider } from "@gorhom/portal";
 import React from "react";
+import { View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
-    React.createElement(PortalProvider, null, children)));
+import { Notifications } from "../../../shared/notifications/infrastructure/ui/views/Notifications";
+import { style } from "./App.style";
+import { Header } from "./header/Header";
+const App = ({ customerId, menu, children }) => (React.createElement(SafeAreaProvider, null,
+    React.createElement(Header, { customerId: customerId, menu: menu, style: style.header }),
+    React.createElement(Notifications, null),
+    React.createElement(PortalProvider, null,
+        React.createElement(View, { style: style.body }, children))));
 export { App };

package/dist/infrastructure/ui/views/intro/Intro.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-declare type IntroProps = {
+type IntroProps = {
     readonly customerId: string;
 };
 declare const Intro: FC<IntroProps>;

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -5,12 +5,12 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React from "react";
 import { View } from "react-native";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useIncrementIntroShownCount } from "../../../domain/uiSetting/react/useIncrementIntroShownCount";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
-import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
     React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),

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

@@ -1,9 +1,10 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 import { useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useBookCheckouBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckouBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../domain/checkoutItem/react/useReplaceCheckoutItem";
@@ -12,8 +13,8 @@ import { useViewBookedSizeChangeProductsVariantsForCheckoutItem } from "../../..
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { Body } from "../../components/layouts/body/Body";
+import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Item.style";
 import { CustomerDecissionBanner } from "./components/banner/CustomerDecissionBanner";
 import { ItemActions } from "./components/itemActions/ItemActions";
@@ -39,10 +40,11 @@ const Item = ({ customerId }) => {
         checkoutItemId: checkoutItem.id,
     });
     const [bookCheckouBooking] = useBookCheckouBookingForCheckoutItem({
-        checkoutBookingId: bookedSizeChangeProductsVariants?.id,
-        checkoutId: checkout?.id,
         checkoutItemId: checkoutItem.id,
     });
+    useEffect(() => {
+        bookedSizeChangeProductsVariants === null && bookCheckouBooking();
+    }, [bookCheckouBooking, bookedSizeChangeProductsVariants, bookedSizeChangeProductsVariants?.bookingId]);
     const [returnQuestions, returnQuestionsStatus] = useListReturnQuestionsByCheckoutItemId({
         checkoutItemId: checkoutItem.id,
     });
@@ -55,22 +57,27 @@ const Item = ({ customerId }) => {
     });
     const [stickyHeight, setStickyHeight] = useState(0);
     const handleOnStickyLayout = useCallback(({ height }) => setStickyHeight(height), []);
-    useEffect(() => {
-        checkout?.bookingId === undefined && bookCheckouBooking();
-    }, [bookCheckouBooking, checkout?.bookingId]);
     const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
     const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
     const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
     const handleOnEditFeedback = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
-    const handleOnSubmit = useCallback((feedback) => {
+    const handleOnSubmit = useCallback((feedbacks) => {
         handleOnHideReturnQuestions();
-        returnCheckoutItem({ feedbacks: feedback });
+        returnCheckoutItem({ feedbacks });
     }, [handleOnHideReturnQuestions, returnCheckoutItem]);
     const handleOnReplace = useCallback((replacedFor) => {
         handleOnShowSizeChangeModal();
         replaceCheckoutItem({ replacedFor });
     }, [handleOnShowSizeChangeModal, replaceCheckoutItem]);
     const handleOnReturn = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
+    const productVariantSelected = useMemo(() => checkoutItem.replacedFor
+        ? bookedSizeChangeProductsVariants?.productVariants.find((productVariant) => productVariant.id === checkoutItem.replacedFor)
+        : { id: checkoutItem.productVariant.id, size: checkoutItem.productVariant.size }, [
+        bookedSizeChangeProductsVariants?.productVariants,
+        checkoutItem.productVariant.id,
+        checkoutItem.productVariant.size,
+        checkoutItem.replacedFor,
+    ]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(returnQuestionsStatus) &&
         dependenciesLoadedStatuses.includes(checkoutStatus) &&
@@ -78,8 +85,8 @@ const Item = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
-    const { media, brand, name, size, color } = checkoutItem.productVariant;
-    return (React.createElement(React.Fragment, null,
+    const { media, brand, name, color } = checkoutItem.productVariant;
+    return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
         React.createElement(SafeAreaScrollView, null,
@@ -88,10 +95,10 @@ const Item = ({ customerId }) => {
                 React.createElement(View, { style: [style.container, { paddingBottom: stickyHeight }] },
                     React.createElement(View, { style: style.sliderContainer },
                         React.createElement(ProductVariantSlider, { producVariantMedia: media })),
-                    React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: size }),
-                    checkoutItem.feedback && (React.createElement(View, { style: style.feedbackContainer },
-                        React.createElement(ReturnQuestionsFeedback, { feedback: checkoutItem.feedback || {}, returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),
-        customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: checkoutItem.productVariant, productVariants: bookedSizeChangeProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
-        React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, feedback: checkoutItem.feedback || {}, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
+                    React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: productVariantSelected.size }),
+                    checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
+                        React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),
+        customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedSizeChangeProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
+        React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
 };
 export { Item };

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

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-declare type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL | CheckoutItemStatus.EXPIRED>;
+type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL | CheckoutItemStatus.EXPIRED>;
 interface CustomerDecissionBannerProps {
     readonly checkoutItemStatus: CustomerDecissionBannerStatus;
     readonly onPress: () => void;