@lookiero/checkout 0.5.6 → 0.6.0-beta.0

package/README.md

@@ -26,15 +26,6 @@ Once we can replace the build of Jenkins for NPM one, we are going to be able to
 ```json
 {
   (...)
-  "scripts": {
-    (...)
-    // Remove
-    "build": "tsc -b tsconfig.build.json && cp -R ./src/public/ ./dist/public",
-    // Add
-    "build": "tsc -b tsconfig.build.json && npm run copy:assets",
-    "copy:assets": "cp -R ./src/public/ ./dist/public",
-    (...)
-  },
   "dependencies": {
     (...)
     "@expo/dev-server": "0.1.120",

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/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/index.d.ts

@@ -1,5 +1,5 @@
 import { EndpointFunction } from "@lookiero/i18n";
-import { FC } from "react";
+import { ComponentType } from "react";
 import { RootProps } from "./infrastructure/ui/Root";
 import { IsCheckoutAccessibleByCustomerIdProjection } from "./projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 interface IsCheckoutAccessibleFunctionArgs {
@@ -14,7 +14,7 @@ interface BootstrapFunctionArgs {
     readonly translations: EndpointFunction;
 }
 interface BootstrapFunctionReturn {
-    readonly Root: FC<RootProps>;
+    readonly Root: ComponentType<RootProps>;
     readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
 }
 interface BootstrapFunction {

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>;
+}
+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,16 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+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(() => {
+        invariant(checkoutId, "CheckoutId must be defined in order to mark the checkout as paid");
+        return commandBus(markCheckoutAsPaid({
+            aggregateId: checkoutId,
+        }));
+    }, [checkoutId, commandBus]);
+    return [markAsPaid, status];
+};
+export { useMarkCheckoutAsPaid };

package/dist/infrastructure/domain/checkoutBooking/react/useBookCheckouBookingForCheckoutItem.d.ts

@@ -0,0 +1,13 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+interface BookFunction {
+    (): Promise<void>;
+}
+type UseBookCheckouBookingForCheckoutItem = [book: BookFunction, status: CommandStatus];
+interface UseBookCheckouBookingForCheckoutItemFunctionArgs {
+    readonly checkoutItemId: string;
+}
+interface UseBookCheckouBookingForCheckoutItemFunction {
+    (args: UseBookCheckouBookingForCheckoutItemFunctionArgs): UseBookCheckouBookingForCheckoutItem;
+}
+declare const useBookCheckouBookingForCheckoutItem: UseBookCheckouBookingForCheckoutItemFunction;
+export { useBookCheckouBookingForCheckoutItem };

package/dist/infrastructure/domain/checkoutBooking/react/useBookCheckouBookingForCheckoutItem.js

@@ -0,0 +1,14 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { v4 as uuid } from "uuid";
+import { bookCheckoutBookingForCheckoutItem } from "../../../../domain/checkoutBooking/command/bookCheckoutBookingForCheckoutItem";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useBookCheckouBookingForCheckoutItem = ({ checkoutItemId }) => {
+    const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
+    const book = useCallback(() => commandBus(bookCheckoutBookingForCheckoutItem({
+        aggregateId: uuid(),
+        checkoutItemId,
+    })), [checkoutItemId, commandBus]);
+    return [book, status];
+};
+export { useBookCheckouBookingForCheckoutItem };

package/dist/infrastructure/projection/bookedSizeChangeProductsVariants/httpBookedSizeChangeProductsVariantsForCheckoutItemView.d.ts

@@ -0,0 +1,12 @@
+import { BookedSizeChangeProductsVariantsForCheckoutItemView } from "../../../projection/bookedSizeChangeProductsVariants/viewBookedSizeChangeProductVariantsForCheckoutItem";
+import { HttpPostFunction } from "../../delivery/http/httpClient";
+interface HttpBookedSizeChangeProductsVariantsForCheckoutItemView extends BookedSizeChangeProductsVariantsForCheckoutItemView {
+}
+interface HttpBookedSizeChangeProductsVariantsForCheckoutItemViewFunctionArgs {
+    readonly httpPost: HttpPostFunction;
+}
+interface HttpBookedSizeChangeProductsVariantsForCheckoutItemViewFunction {
+    (args: HttpBookedSizeChangeProductsVariantsForCheckoutItemViewFunctionArgs): HttpBookedSizeChangeProductsVariantsForCheckoutItemView;
+}
+declare const httpBookedSizeChangeProductsVariantsForCheckoutItemView: HttpBookedSizeChangeProductsVariantsForCheckoutItemViewFunction;
+export { httpBookedSizeChangeProductsVariantsForCheckoutItemView };

package/dist/infrastructure/projection/bookedSizeChangeProductsVariants/httpBookedSizeChangeProductsVariantsForCheckoutItemView.js

@@ -0,0 +1,9 @@
+const httpBookedSizeChangeProductsVariantsForCheckoutItemView = ({ httpPost }) => async ({ checkoutItemId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-booked-size-change-product-variants-for-checkout-item",
+        body: { checkoutItemId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
+export { httpBookedSizeChangeProductsVariantsForCheckoutItemView };

package/dist/infrastructure/projection/bookedSizeChangeProductsVariants/react/useViewBookedSizeChangeProductsVariantsForCheckoutItem.d.ts

@@ -0,0 +1,10 @@
+import { UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { BookedSizeChangeProductsVariantsProjection } from "../../../../projection/bookedSizeChangeProductsVariants/bookedSizeChangeProductsVariants";
+interface UseViewBookedSizeChangeProductsVariantsForCheckoutItemFunctionArgs {
+    readonly checkoutItemId: string;
+}
+interface UseViewBookedSizeChangeProductsVariantsForCheckoutItemFunction {
+    (args: UseViewBookedSizeChangeProductsVariantsForCheckoutItemFunctionArgs): UseQueryFunctionResult<BookedSizeChangeProductsVariantsProjection>;
+}
+declare const useViewBookedSizeChangeProductsVariantsForCheckoutItem: UseViewBookedSizeChangeProductsVariantsForCheckoutItemFunction;
+export { useViewBookedSizeChangeProductsVariantsForCheckoutItem };

package/dist/infrastructure/projection/bookedSizeChangeProductsVariants/react/useViewBookedSizeChangeProductsVariantsForCheckoutItem.js

@@ -0,0 +1,12 @@
+import { useQuery } from "@lookiero/messaging-react";
+import { CHECKOUT_BOOKING_BOOKED, } from "../../../../domain/checkoutBooking/model/checkoutBookingBooked";
+import { viewBookedSizeChangeProductsVariantsForCheckoutItem } from "../../../../projection/bookedSizeChangeProductsVariants/viewBookedSizeChangeProductVariantsForCheckoutItem";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const isCheckoutBookingBooked = (event) => event.name === CHECKOUT_BOOKING_BOOKED;
+const useViewBookedSizeChangeProductsVariantsForCheckoutItem = ({ checkoutItemId }) => useQuery({
+    query: viewBookedSizeChangeProductsVariantsForCheckoutItem({ checkoutItemId }),
+    contextId: MESSAGING_CONTEXT_ID,
+    invalidation: isCheckoutBookingBooked,
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+});
+export { useViewBookedSizeChangeProductsVariantsForCheckoutItem };

package/dist/infrastructure/projection/checkoutFeedback/httpCheckoutFeedbackByCheckoutIdView.d.ts

@@ -0,0 +1,12 @@
+import { CheckoutFeedbackByCheckoutIdView } from "../../../projection/checkoutFeedback/viewCheckoutFeedbackByCheckoutId";
+import { HttpPostFunction } from "../../delivery/http/httpClient";
+interface HttpCheckoutFeebackByCheckoutIdView extends CheckoutFeedbackByCheckoutIdView {
+}
+interface HttpCheckoutFeebackByCheckoutIdViewFunctionArgs {
+    readonly httpPost: HttpPostFunction;
+}
+interface HttpCheckoutFeebackByCheckoutIdViewFunction {
+    (args: HttpCheckoutFeebackByCheckoutIdViewFunctionArgs): HttpCheckoutFeebackByCheckoutIdView;
+}
+declare const httpCheckoutFeebackByCheckoutIdView: HttpCheckoutFeebackByCheckoutIdViewFunction;
+export { httpCheckoutFeebackByCheckoutIdView };

package/dist/infrastructure/projection/checkoutFeedback/httpCheckoutFeedbackByCheckoutIdView.js

@@ -0,0 +1,9 @@
+const httpCheckoutFeebackByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-checkout-feedback-by-checkout-id",
+        body: { checkoutId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
+export { httpCheckoutFeebackByCheckoutIdView };

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

@@ -1,16 +1,18 @@
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
-import { FC } from "react";
+import { ComponentType } from "react";
 import { Customer } from "../../projection/shared/customer";
+import { SentryLoggerFunctionArgs } from "../../shared/logging/SentryLogger";
 import { Menu, TabBar } from "./views/navigation/Navigation";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
     readonly development?: boolean;
+    readonly sentry?: SentryLoggerFunctionArgs;
     readonly getAuthToken: () => Promise<string>;
 }
 interface RootFunction {
-    (args: RootFunctionArgs): FC<RootProps>;
+    (args: RootFunctionArgs): ComponentType<RootProps>;
 }
 interface RootProps {
     readonly basePath: string;

package/dist/infrastructure/ui/Root.js

@@ -1,11 +1,21 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
+import { sentryLogger } from "../../shared/logging/SentryLogger";
 import { Routing } from "./routing/Routing";
-const root = ({ Messaging, I18n, getAuthToken, development }) => 
-// eslint-disable-next-line react/display-name, react/prop-types
-({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
-    const handleOnI18nError = useCallback(() => void 0, []);
-    return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-        React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
+    // eslint-disable-next-line react/display-name, react/prop-types
+    const Root = ({ basePath, locale = "en", customer, menu, tabBar, onNotAccessible, useRedirect }) => {
+        const handleOnI18nError = useCallback(() => void 0, []);
+        return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
+            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+    };
+    return sentry
+        ? sentryLogger({
+            publicKey: sentry.publicKey,
+            environment: sentry.environment,
+            release: sentry.release,
+            project: sentry.project,
+        })(Root)
+        : Root;
 };
 export { root };

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

@@ -2,11 +2,10 @@ import React from "react";
 import { Platform, ScrollView } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../theme/theme";
-import { style } from "./SafeAreaScrollView.style.ts";
 const { spaceXXXL } = theme();
 const SafeAreaScrollView = ({ children, footer, edges = ["top", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    return (React.createElement(SafeAreaView, { edges: edges, style: [style.safeAreaView, customStyle?.safeAreaView] },
+    return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
         React.createElement(ScrollView, { contentContainerStyle: [
                 {
                     paddingTop: safeAreaInsetTop + scrollerPaddingTop,

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

@@ -58,8 +58,6 @@ declare enum I18nMessages {
     HEADER_CHECKOUT_TITLE = "header.checkout_title",
     HEADER_COMPLETE_CHECKOUT_TITLE = "header.complete_checkout_title",
     FEEDBACK_BUTTON = "feedback.button",
-    CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
-    NOT_FOUND_DESCRIPTION = "not_found.description",
-    NOT_FOUND_BUTTON = "not_found.button"
+    CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired"
 }
 export { I18nMessages, COLOR_I18N_PREFIX };

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

@@ -60,7 +60,5 @@ var I18nMessages;
     I18nMessages["HEADER_COMPLETE_CHECKOUT_TITLE"] = "header.complete_checkout_title";
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
     I18nMessages["CHECKOUT_TOAST_BOOKING_EXPIRED"] = "checkout.toast_booking_expired";
-    I18nMessages["NOT_FOUND_DESCRIPTION"] = "not_found.description";
-    I18nMessages["NOT_FOUND_BUTTON"] = "not_found.button";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX };

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

@@ -1,4 +1,3 @@
-import { PaymentsQueryProvider } from "@lookiero/payments-front";
 import React, { lazy, Suspense } from "react";
 import { Navigate, Outlet, useRoutes } from "react-router-native";
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
@@ -13,7 +12,6 @@ const Item = lazy(() => import("../views/item/Item").then((module) => ({ default
 const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
 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 NotFound = lazy(() => import("../views/notFound/NotFound").then((module) => ({ default: module.NotFound })));
 const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthToken, onI18nError, onNotAccessible, useRedirect, }) => {
     const routes = useRoutes([
         {
@@ -48,9 +46,8 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                 {
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(PaymentsQueryProvider, null,
-                            React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
-                                React.createElement(Outlet, null))))),
+                        React.createElement(Checkout, { country: customer?.country, customerId: customer?.customerId, useRedirect: useRedirect },
+                            React.createElement(Outlet, null)))),
                     children: [
                         {
                             path: Routes.CHECKOUT_PAYMENT,
@@ -63,14 +60,9 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
                         React.createElement(Feedback, { customerId: customer?.customerId }))),
                 },
-                {
-                    path: Routes.NOT_FOUND,
-                    element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(NotFound, null))),
-                },
                 {
                     path: "*",
-                    element: React.createElement(Navigate, { to: `${Routes.NOT_FOUND}`, replace: true }),
+                    element: React.createElement(Navigate, { to: `${Routes.HOME}`, replace: true }),
                 },
             ],
         },

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

@@ -0,0 +1,4 @@
+declare const style: {
+    header: {};
+};
+export { style };

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

@@ -0,0 +1,16 @@
+import { Platform, StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    header: {
+        ...Platform.select({
+            web: {
+                position: "fixed",
+                zIndex: 1,
+            },
+            native: {
+                position: "absolute",
+                zIndex: 1,
+            },
+        }),
+    },
+});
+export { style };

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

@@ -38,18 +38,18 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
                     React.createElement(DeliveryBanner, null))),
                 React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }),
                 React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                 checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.checkoutItemKept, testID: "checkout-items-kept" },
-                    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
-                            ? checkoutItem.replacedFor.size
-                            : checkoutItem.productVariant.size })))),
+                    React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, size: checkoutItem.productVariant.size, status: checkoutItem.status })))),
                 pricing && (React.createElement(View, { style: style.pricingContainer },
-                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))))),
+                    React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, 
+                        // busy={submitCheckoutStatus === "loading"}
+                        collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))))),
         children));
 };
 export { Checkout };

package/dist/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -5,6 +5,9 @@ declare const style: {
     checkoutItemKept: {
         paddingVertical: number;
     };
+    container: {
+        flex: number;
+    };
     deliveryBannerContainer: {
         marginBottom: number;
     };

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

@@ -8,6 +8,9 @@ const style = StyleSheet.create({
     checkoutItemKept: {
         paddingVertical: spaceM,
     },
+    container: {
+        flex: 1,
+    },
     deliveryBannerContainer: {
         marginBottom: spaceXXL,
     },

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

@@ -30,7 +30,7 @@ const Feedback = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

package/dist/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -2,5 +2,8 @@ declare const style: {
     bodyColumn: {
         paddingHorizontal: number;
     };
+    container: {
+        flex: number;
+    };
 };
 export { style };

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

@@ -5,5 +5,8 @@ const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
     },
+    container: {
+        flex: 1,
+    },
 });
 export { style };

package/dist/infrastructure/ui/views/header/Header.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface MenuProps {
+    readonly isVisible: boolean;
+    readonly onClose: () => void;
+}
+type Menu = FC<MenuProps>;
+interface HeaderProps {
+    readonly customerId: string;
+    readonly menu: Menu;
+    readonly style?: StyleProp<ViewStyle>;
+}
+declare const Header: FC<HeaderProps>;
+export type { Menu };
+export { Header };

package/dist/infrastructure/ui/views/header/Header.js

@@ -0,0 +1,90 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback, useState } from "react";
+import { Platform, StatusBar, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
+import { ButtonIcon } from "../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./Header.style";
+import { Logo } from "./components/Logo";
+const ButtonIconPlaceholder = () => React.createElement(View, { style: style.buttonIconPlaceholder });
+const DefaultHeader = ({ onOpenMenu }) => (React.createElement(View, { style: style.header, testID: "default-header" },
+    React.createElement(Logo, { style: style.logo }),
+    React.createElement(ButtonIconPlaceholder, null),
+    React.createElement(ButtonIcon, { name: "menu", onPress: onOpenMenu })));
+const ItemHeader = ({ items, item }) => {
+    const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const itemIndex = items.indexOf(item);
+    const isFirstItem = itemIndex === 0;
+    const isLastItem = itemIndex === items.length - 1;
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const navigateToPreviousItem = useCallback(() => {
+        const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
+        const previousItem = items[previousItemIndex];
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
+    }, [basePath, itemIndex, items, navigate]);
+    const navigateToNextItem = useCallback(() => {
+        const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
+        const nextItem = items[nextItemIndex];
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
+    }, [basePath, itemIndex, items, navigate]);
+    return (React.createElement(View, { style: style.header, testID: "item-header" },
+        !isFirstItem ? React.createElement(ButtonIcon, { name: "arrow-left", onPress: navigateToPreviousItem }) : React.createElement(ButtonIconPlaceholder, null),
+        React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
+        !isLastItem ? React.createElement(ButtonIcon, { name: "arrow-right", onPress: navigateToNextItem }) : React.createElement(ButtonIconPlaceholder, null)));
+};
+const ItemDetailHeader = () => {
+    const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const navigate = useNavigate();
+    const handleOnBack = useCallback(() => navigate(-1), [navigate]);
+    return (React.createElement(View, { style: style.header, testID: "item-detail-header" },
+        React.createElement(ButtonIconPlaceholder, null),
+        React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
+        React.createElement(ButtonIcon, { name: "close", onPress: handleOnBack })));
+};
+const CheckoutHeader = () => {
+    const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const handleOnBack = useCallback(() => navigate(`${basePath}/${Routes.SUMMARY}`), [basePath, navigate]);
+    return (React.createElement(View, { style: style.header, testID: "checkout-header" },
+        React.createElement(ButtonIcon, { name: "arrow-left", onPress: handleOnBack }),
+        React.createElement(Text, { level: 3, style: style.title, detail: true }, title),
+        React.createElement(ButtonIconPlaceholder, null)));
+};
+const Header = ({ customerId, menu: Menu, style: customStyle }) => {
+    const { id: itemId } = useParams();
+    const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const currentItem = checkout?.items.find((item) => item.id === itemId);
+    const basePath = useBasePath();
+    const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
+    const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+    const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const handleOnOpenMenu = useCallback(() => setMenuVisible(true), []);
+    const handleOnCloseMenu = useCallback(() => setMenuVisible(false), []);
+    let header;
+    if (checkout?.items && currentItem) {
+        if (itemRouteMatch) {
+            header = React.createElement(ItemHeader, { item: currentItem, items: checkout.items });
+        }
+        else if (itemDetailRouteMatch) {
+            header = React.createElement(ItemDetailHeader, null);
+        }
+    }
+    else if (checkoutRouteMatch) {
+        header = React.createElement(CheckoutHeader, null);
+    }
+    else {
+        header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, Platform.OS === "android" && { paddingTop: StatusBar.currentHeight }, customStyle] }, header),
+        React.createElement(Menu, { isVisible: menuVisible, onClose: handleOnCloseMenu })));
+};
+export { Header };

package/dist/infrastructure/ui/views/header/Header.style.d.ts

@@ -0,0 +1,35 @@
+declare const HEADER_HEIGHT: number;
+declare const style: {
+    buttonIconPlaceholder: {
+        flexGrow: number;
+        height: number;
+        width: number;
+    };
+    container: {
+        backgroundColor: string;
+        flexDirection: "row";
+        flexGrow: number;
+        height: number;
+        width: string;
+    };
+    header: {
+        alignItems: "center";
+        flexDirection: "row";
+        flexGrow: number;
+        flexWrap: "nowrap";
+        height: number;
+        justifyContent: "space-between";
+        overflow: "visible";
+        paddingHorizontal: number;
+        width: string;
+    };
+    logo: {
+        left: number;
+        position: "absolute";
+        top: number;
+    };
+    title: {
+        textTransform: "uppercase";
+    };
+};
+export { style, HEADER_HEIGHT };