@lookiero/checkout 0.4.3 → 0.4.5-beta.0

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

@@ -1,10 +1,9 @@
 import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
-import { CheckoutStatus } from "../../checkout/model/checkout";
 import { BlockCheckoutBooking } from "../command/blockCheckoutBooking";
 import { BookCheckoutBookingForCheckoutItem } from "../command/bookCheckoutBookingForCheckoutItem";
 interface CheckoutBooking extends AggregateRoot {
     readonly checkoutItemIds: string[];
-    readonly checkoutStatus: CheckoutStatus;
+    readonly isExpired: boolean;
 }
 declare const bookCheckoutBookingForCheckoutItemHandler: CommandHandlerFunction<BookCheckoutBookingForCheckoutItem, CheckoutBooking>;
 declare const blockCheckoutBookingHandler: CommandHandlerFunction<BlockCheckoutBooking, CheckoutBooking>;

package/dist/domain/checkoutBooking/model/checkoutBooking.js

@@ -1,4 +1,3 @@
-import { CheckoutStatus } from "../../checkout/model/checkout";
 import { checkoutBookingBlocked } from "./checkoutBookingBlocked";
 import { checkoutBookingBooked } from "./checkoutBookingBooked";
 import { checkoutBookingExpired } from "./checkoutBookingExpired";
@@ -11,7 +10,7 @@ const bookCheckoutBookingForCheckoutItemHandler = () => async ({ aggregateRoot,
 };
 const blockCheckoutBookingHandler = () => async ({ aggregateRoot, command }) => {
     const { aggregateId } = command;
-    if (aggregateRoot.checkoutStatus === CheckoutStatus.EXPIRED) {
+    if (aggregateRoot.isExpired) {
         return {
             ...aggregateRoot,
             domainEvents: [checkoutBookingExpired({ aggregateId })],

package/dist/domain/checkoutFeedback/command/giveCheckoutFeedback.d.ts

@@ -2,7 +2,7 @@ import { Command } from "@lookiero/messaging";
 import { Feedbacks } from "../model/feedbacks";
 declare const GIVE_CHECKOUT_FEEDBACK = "give_checkout_feedback";
 interface GiveCheckoutFeedbackPayload {
-    readonly aggregateId: string;
+    readonly checkoutId: string;
     readonly feedbacks: Feedbacks;
 }
 interface GiveCheckoutFeedback extends Command<typeof GIVE_CHECKOUT_FEEDBACK>, GiveCheckoutFeedbackPayload {

package/dist/domain/checkoutFeedback/command/giveCheckoutFeedback.js

@@ -1,7 +1,7 @@
 import { command } from "@lookiero/messaging";
 const GIVE_CHECKOUT_FEEDBACK = "give_checkout_feedback";
-const giveCheckoutFeedback = ({ aggregateId, ...payload }) => ({
-    ...command({ aggregateId, name: GIVE_CHECKOUT_FEEDBACK }),
+const giveCheckoutFeedback = (payload) => ({
+    ...command({ name: GIVE_CHECKOUT_FEEDBACK }),
     ...payload,
 });
 export { GIVE_CHECKOUT_FEEDBACK, giveCheckoutFeedback };

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

@@ -2,6 +2,7 @@ import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
 import { GiveCheckoutFeedback } from "../command/giveCheckoutFeedback";
 import { Feedbacks } from "./feedbacks";
 interface CheckoutFeedback extends AggregateRoot {
+    readonly checkoutId: string;
     readonly feedbacks: Feedbacks;
 }
 declare const giveCheckoutFeedbackHandler: CommandHandlerFunction<GiveCheckoutFeedback, CheckoutFeedback>;

package/dist/domain/checkoutFeedback/model/checkoutFeedback.js

@@ -1,10 +1,11 @@
 import { checkoutFeedbackGiven } from "./checkoutFeedbackGiven";
 const giveCheckoutFeedbackHandler = () => async ({ aggregateRoot, command }) => {
-    const { aggregateId, feedbacks } = command;
+    const { aggregateId, checkoutId, feedbacks } = command;
     return {
         ...aggregateRoot,
+        checkoutId,
         feedbacks,
-        domainEvents: [checkoutFeedbackGiven({ aggregateId })],
+        domainEvents: [checkoutFeedbackGiven({ aggregateId, checkoutId })],
     };
 };
 export { giveCheckoutFeedbackHandler };

package/dist/domain/checkoutFeedback/model/checkoutFeedbackGiven.d.ts

@@ -2,6 +2,7 @@ import { DomainEvent } from "@lookiero/messaging";
 declare const CHECKOUT_FEEDBACK_GIVEN = "checkout_feedback_given";
 interface CheckoutFeedbackGivenPayload {
     readonly aggregateId: string;
+    readonly checkoutId: string;
 }
 interface CheckoutFeedbackGiven extends DomainEvent<typeof CHECKOUT_FEEDBACK_GIVEN>, CheckoutFeedbackGivenPayload {
 }

package/dist/domain/checkoutFeedback/model/checkoutFeedbackGiven.js

@@ -1,4 +1,7 @@
 import { domainEvent } from "@lookiero/messaging";
 const CHECKOUT_FEEDBACK_GIVEN = "checkout_feedback_given";
-const checkoutFeedbackGiven = ({ aggregateId }) => domainEvent({ aggregateId, name: CHECKOUT_FEEDBACK_GIVEN });
+const checkoutFeedbackGiven = ({ aggregateId, ...payload }) => ({
+    ...domainEvent({ aggregateId, name: CHECKOUT_FEEDBACK_GIVEN }),
+    ...payload,
+});
 export { CHECKOUT_FEEDBACK_GIVEN, checkoutFeedbackGiven };

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

@@ -8,8 +8,7 @@ declare enum CheckoutItemStatus {
     INITIAL = "INITIAL",
     KEPT = "KEPT",
     RETURNED = "RETURNED",
-    REPLACED = "REPLACED",
-    EXPIRED = "EXPIRED"
+    REPLACED = "REPLACED"
 }
 interface CheckoutItem extends AggregateRoot {
     readonly status: CheckoutItemStatus;

package/dist/domain/checkoutItem/model/checkoutItem.js

@@ -7,7 +7,6 @@ var CheckoutItemStatus;
     CheckoutItemStatus["KEPT"] = "KEPT";
     CheckoutItemStatus["RETURNED"] = "RETURNED";
     CheckoutItemStatus["REPLACED"] = "REPLACED";
-    CheckoutItemStatus["EXPIRED"] = "EXPIRED";
 })(CheckoutItemStatus || (CheckoutItemStatus = {}));
 const keepCheckoutItemHandler = () => async ({ aggregateRoot, command }) => {
     const { aggregateId } = command;

package/dist/infrastructure/delivery/baseBootstrap.js

@@ -27,7 +27,7 @@ import { viewPricingByCheckoutIdHandler, VIEW_PRICING_BY_CHECKOUT_ID, } from "..
 import { listReturnQuestionsByCheckoutItemIdHandler, LIST_RETURN_QUESTIONS_BY_CHECKOUT_ITEM_ID, } from "../../projection/returnQuestion/listReturnQuestionsByCheckoutItemId";
 import { viewUiSettingByKeyHandler, VIEW_UI_SETTING_BY_KEY, } from "../../projection/uiSetting/viewUiSettingByKey";
 const MESSAGING_CONTEXT_ID = "Checkout";
-const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, fiveItemsDiscountByCustomerIdView, uiSettingByKeyView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedProductsVariantsForCheckoutItemView, checkoutBookingByIdView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, getCheckoutFeedback, saveCheckoutFeedback, checkoutFeedbacksDependencies, }) => messagingBootstrap({ id: MESSAGING_CONTEXT_ID })
+const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, fiveItemsDiscountByCustomerIdView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedProductsVariantsForCheckoutItemView, checkoutBookingByIdView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, uiSettingByKeyView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, getCheckoutFeedback, saveCheckoutFeedback, checkoutFeedbacksDependencies, }) => messagingBootstrap({ id: MESSAGING_CONTEXT_ID })
     .query(VIEW_FIVE_ITEMS_DISCOUNT_BY_CUSTOMER_ID, viewFiveItemsDiscountByCustomerIdHandler, {
     view: fiveItemsDiscountByCustomerIdView,
 })

package/dist/infrastructure/delivery/mock/dataSourceCheckoutBookings.js

@@ -1,20 +1,19 @@
 import invariant from "tiny-invariant";
 import { v4 as uuid } from "uuid";
-import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
 import { viewBookedProductsVariantsForCheckoutItem, } from "../../../projection/bookedProductsVariants/viewBookedProductVariantsForCheckoutItem";
 const toCheckoutBookingDomain = (checkoutBooking) => {
     invariant(checkoutBooking, "No checkoutBooking found!");
     return {
         aggregateId: uuid(),
         checkoutItemIds: checkoutBooking.productVariants.map((productVariant) => productVariant.id),
-        checkoutStatus: CheckoutStatus.AVAILABLE,
+        isExpired: false,
         domainEvents: [],
     };
 };
 const toCheckoutBookingProjection = (checkoutBooking) => ({
     id: checkoutBooking.aggregateId,
     checkoutItemIds: checkoutBooking.checkoutItemIds,
-    checkoutStatus: checkoutBooking.checkoutStatus,
+    isExpired: false,
 });
 const getCheckoutBooking = ({ queryBus }) => async (aggregateId) => toCheckoutBookingDomain(await queryBus(viewBookedProductsVariantsForCheckoutItem({ checkoutItemId: aggregateId })));
 const saveCheckoutBooking = ({ dataSource }) => async (aggregateRoot) => {

package/dist/infrastructure/delivery/mock/dataSourceCheckoutFeedbacks.js

@@ -1,16 +1,7 @@
-import invariant from "tiny-invariant";
-import { v4 as uuid } from "uuid";
-import { viewCheckoutFeedbackByCheckoutId, } from "../../../projection/checkoutFeedback/viewCheckoutFeedbackByCheckoutId";
-const toCheckoutFeedbackDomain = (checkoutFeedback) => {
-    invariant(checkoutFeedback, "No checkoutFeedback found!");
-    return {
-        aggregateId: uuid(),
-        feedbacks: checkoutFeedback,
-        domainEvents: [],
-    };
-};
 const toCheckoutFeedbackProjection = (checkoutFeedback) => checkoutFeedback.feedbacks;
-const getCheckoutFeedback = ({ queryBus }) => async (aggregateId) => toCheckoutFeedbackDomain(await queryBus(viewCheckoutFeedbackByCheckoutId({ checkoutId: aggregateId })));
+const getCheckoutFeedback = () => () => {
+    throw new Error("There is no equivalent AggregateRoot in the backend");
+};
 const saveCheckoutFeedback = ({ dataSource }) => async (aggregateRoot) => {
     dataSource.saveCheckoutFeedback(toCheckoutFeedbackProjection(aggregateRoot));
 };

package/dist/infrastructure/domain/checkoutBooking/model/httpCheckoutBookings.js

@@ -7,7 +7,7 @@ const toDomain = (checkoutBooking) => {
     return {
         aggregateId: checkoutBooking.id,
         checkoutItemIds: checkoutBooking.checkoutItemIds,
-        checkoutStatus: checkoutBooking.checkoutStatus,
+        isExpired: checkoutBooking.isExpired,
         domainEvents: [],
     };
 };

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/domain/checkoutFeedback/model/httpCheckoutFeedbacks.js

@@ -1,15 +1,6 @@
-import invariant from "tiny-invariant";
-import { v4 as uuid } from "uuid";
-import { viewCheckoutFeedbackByCheckoutId, } from "../../../../projection/checkoutFeedback/viewCheckoutFeedbackByCheckoutId";
 import { httpCheckoutFeedbacksGive } from "./httpCheckoutFeedbacksGive";
-const toDomain = (checkoutFeedback) => {
-    invariant(checkoutFeedback, "Not checkoutFeedback found!");
-    return {
-        aggregateId: uuid(),
-        feedbacks: checkoutFeedback,
-        domainEvents: [],
-    };
+const getCheckoutFeedback = () => async () => {
+    throw new Error("There is no equivalent AggregateRoot in the backend");
 };
-const getCheckoutFeedback = ({ queryBus }) => async (aggregateId) => toDomain(await queryBus(viewCheckoutFeedbackByCheckoutId({ checkoutId: aggregateId })));
 const saveCheckoutFeedback = ({ httpPost }) => async (aggregateRoot) => await httpCheckoutFeedbacksGive({ httpPost })(aggregateRoot);
 export { getCheckoutFeedback, saveCheckoutFeedback };

package/dist/infrastructure/domain/checkoutFeedback/model/httpCheckoutFeedbacksGive.js

@@ -1,13 +1,13 @@
 import { CHECKOUT_FEEDBACK_GIVEN, } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
 const isCheckoutFeedbackGiven = (event) => event.name === CHECKOUT_FEEDBACK_GIVEN;
-const httpCheckoutFeedbacksGive = ({ httpPost }) => async ({ aggregateId, feedbacks, domainEvents }) => {
+const httpCheckoutFeedbacksGive = ({ httpPost }) => async ({ checkoutId, feedbacks, domainEvents }) => {
     const checkoutFeedbackGiven = domainEvents.find(isCheckoutFeedbackGiven);
     if (!checkoutFeedbackGiven) {
         return;
     }
     await httpPost({
         endpoint: "/give-checkout-feedback",
-        body: { checkoutId: aggregateId, feedbacks },
+        body: { checkoutId, feedbacks },
     });
 };
 export { httpCheckoutFeedbacksGive };

package/dist/infrastructure/domain/checkoutFeedback/react/useGiveCheckoutFeedback.js

@@ -5,7 +5,7 @@ import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useGiveCheckoutFeedback = ({ checkoutId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
     const giveCheckoutFeedback = useCallback(({ feedbacks }) => commandBus(giveCheckoutFeedbackCommand({
-        aggregateId: checkoutId,
+        checkoutId,
         feedbacks,
     })), [checkoutId, commandBus]);
     return [giveCheckoutFeedback, status];

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/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js

@@ -1,5 +1,7 @@
 import { useQuery } from "@lookiero/messaging-react";
 import { CHECKOUT_PAID } from "../../../../domain/checkout/model/checkoutPaid";
+import { CHECKOUT_BOOKING_BOOKED, } from "../../../../domain/checkoutBooking/model/checkoutBookingBooked";
+import { CHECKOUT_BOOKING_EXPIRED, } from "../../../../domain/checkoutBooking/model/checkoutBookingExpired";
 import { CHECKOUT_FEEDBACK_GIVEN, } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
 import { CHECKOUT_ITEM_KEPT } from "../../../../domain/checkoutItem/model/checkoutItemKept";
 import { CHECKOUT_ITEM_REPLACED, } from "../../../../domain/checkoutItem/model/checkoutItemReplaced";
@@ -11,11 +13,15 @@ const isCheckoutItemReturned = (event) => event.name === CHECKOUT_ITEM_RETURNED;
 const isCheckoutItemReplaced = (event) => event.name === CHECKOUT_ITEM_REPLACED;
 const isCheckoutPaid = (event) => event.name === CHECKOUT_PAID;
 const isCheckoutFeedbackGiven = (event) => event.name === CHECKOUT_FEEDBACK_GIVEN;
+const isCheckoutBookingExpired = (event) => event.name === CHECKOUT_BOOKING_EXPIRED;
+const isCheckoutBookingBooked = (event) => event.name === CHECKOUT_BOOKING_BOOKED;
 const shouldInvalidate = (event) => isCheckoutItemKept(event) ||
     isCheckoutItemReplaced(event) ||
     isCheckoutItemReturned(event) ||
     isCheckoutPaid(event) ||
-    isCheckoutFeedbackGiven(event);
+    isCheckoutFeedbackGiven(event) ||
+    isCheckoutBookingExpired(event) ||
+    isCheckoutBookingBooked(event);
 const useViewFirstAvailableCheckoutByCustomerId = ({ customerId }) => useQuery({
     query: viewFirstAvailableCheckoutByCustomerId({ customerId }),
     contextId: MESSAGING_CONTEXT_ID,

package/dist/infrastructure/projection/payment/react/useViewPaymentFlowPayloadByCheckoutId.js

@@ -12,6 +12,6 @@ const useViewPaymentFlowPayloadByCheckoutId = ({ checkoutId }) => useQuery({
     query: viewPaymentFlowPayloadByCheckoutId({ checkoutId: checkoutId }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
-    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false, enabled: Boolean(checkoutId) },
+    options: { enabled: Boolean(checkoutId) },
 });
 export { useViewPaymentFlowPayloadByCheckoutId };

package/dist/infrastructure/ui/hooks/useSubmitCheckout.d.ts

@@ -0,0 +1,23 @@
+import { PaymentFlowRef } from "@lookiero/payments-front";
+import { RefObject } from "react";
+import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
+type Status = "idle" | "loading" | "success" | "error";
+interface SubmitCheckoutFunctionArgs {
+    readonly paymentFlowPayload: PaymentFlowPayloadProjection;
+}
+interface SubmitCheckoutFunction {
+    (args: SubmitCheckoutFunctionArgs): Promise<void>;
+}
+type UseSubmitCheckoutResult = [submitCheckout: SubmitCheckoutFunction, status: Status];
+interface UseSubmitCheckoutFunctionArgs {
+    readonly checkoutId: string;
+    readonly checkoutBookingId: string;
+    readonly paymentFlowRef: RefObject<PaymentFlowRef>;
+    readonly onError: () => void;
+}
+interface UseSubmitCheckoutFunction {
+    (args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckoutResult;
+}
+declare const useSubmitCheckout: UseSubmitCheckoutFunction;
+export type { Status };
+export { useSubmitCheckout };

package/dist/infrastructure/ui/hooks/useSubmitCheckout.js

@@ -0,0 +1,68 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
+import { useCallback, useMemo, useState } from "react";
+import { useCreateNotification } from "../../../shared/notifications";
+import { NotificationLevel } from "../../../shared/notifications/domain/notification/model/notification";
+import { useMarkCheckoutAsPaid } from "../../domain/checkout/react/useMarkCheckoutAsPaid";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { I18nMessages } from "../i18n/i18n";
+const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError }) => {
+    const [markAsPaid, markAsPaidStatus] = useMarkCheckoutAsPaid({ checkoutId });
+    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId });
+    const [createNotification] = useCreateNotification();
+    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
+    const submitCheckout = useCallback(async ({ paymentFlowPayload }) => {
+        try {
+            await blockCheckoutBooking();
+        }
+        catch (error) { }
+        paymentFlowRef.current?.startLegacyBoxCheckout(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        paymentFlowPayload, async ({ status }) => {
+            setStartLegacyBoxCheckoutStatus("loading");
+            if (status === ChargeStatus.REJECTED) {
+                createNotification({
+                    level: NotificationLevel.ERROR,
+                    bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_REJECTED,
+                });
+                setStartLegacyBoxCheckoutStatus("error");
+            }
+            else if (status === ChargeStatus.ERROR) {
+                createNotification({
+                    level: NotificationLevel.ERROR,
+                    bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+                });
+                setStartLegacyBoxCheckoutStatus("error");
+            }
+            else if (status === ChargeStatus.EXECUTED) {
+                setStartLegacyBoxCheckoutStatus("success");
+                try {
+                    await markAsPaid();
+                }
+                catch (error) { }
+            }
+        });
+    }, [blockCheckoutBooking, createNotification, markAsPaid, paymentFlowRef]);
+    const status = useMemo(() => {
+        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
+            startLegacyBoxCheckoutStatus === "loading" ||
+            markAsPaidStatus === CommandStatus.LOADING) {
+            return "loading";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
+            startLegacyBoxCheckoutStatus === "success" &&
+            markAsPaidStatus === CommandStatus.SUCCESS) {
+            return "success";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
+            startLegacyBoxCheckoutStatus === "error" ||
+            markAsPaidStatus === CommandStatus.ERROR) {
+            onError();
+            return "error";
+        }
+        return "idle";
+    }, [blockCheckoutBookingStatus, markAsPaidStatus, onError, startLegacyBoxCheckoutStatus]);
+    return [submitCheckout, status];
+};
+export { useSubmitCheckout };

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

@@ -49,8 +49,8 @@ declare enum I18nMessages {
     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_TOAST_PAYMENT_REJECTED = "checkout.toast_payment_rejected",
+    CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_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",

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

@@ -50,8 +50,8 @@ var I18nMessages;
     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_TOAST_PAYMENT_REJECTED"] = "checkout.toast_payment_rejected";
+    I18nMessages["CHECKOUT_TOAST_PAYMENT_ERROR"] = "checkout.toast_payment_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";

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

@@ -14,21 +14,29 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
     const [shouldIntroBeShown, shouldIntroBeShownStatus] = useShouldIntroBeShown();
     const navigatedToFirstItemWithoutCustomerDecision = useRef(false);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-    const firstItemWithoutCustomerDecision = checkout?.items.find((item) => [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status));
+    const firstItemWithoutCustomerDecision = checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
     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 checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
+    const checkoutShown = useRef(false);
+    checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(shouldIntroBeShownStatus) &&
         (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout);
     if (!dependenciesLoaded) {
         return loader;
     }
+    /* Prevent direct payment access */
+    if (checkoutPaymentRouteMatch && !checkoutShown.current) {
+        return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
+    }
     /* Navigate to the feedback if checkout is paid */
-    if (checkout?.status === CheckoutStatus.PAID && !(feedbackRouteMatch || checkoutRouteMatch)) {
+    if (checkout?.status === CheckoutStatus.PAID &&
+        !(feedbackRouteMatch || checkoutRouteMatch || checkoutPaymentRouteMatch)) {
         return React.createElement(Navigate, { to: `${basePath}/${Routes.FEEDBACK}`, replace: true });
     }
     /* Navigate to the summary if required */
@@ -36,7 +44,7 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
         checkout?.status === CheckoutStatus.STARTED ||
         checkout?.status === CheckoutStatus.NOTIFIED) &&
         firstItemWithoutCustomerDecision === undefined &&
-        !(summaryRouteMatch || itemDetailRouteMatch || checkoutRouteMatch)) {
+        !(summaryRouteMatch || itemDetailRouteMatch || checkoutRouteMatch || checkoutPaymentRouteMatch)) {
         return React.createElement(Navigate, { to: `${basePath}/${Routes.SUMMARY}`, replace: true });
     }
     /* Navigate to the Intro if required */

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

@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from "react";
 import { Navigate, Outlet, useRoutes } from "react-router-native";
 import { Spinner } from "../../../shared/ui/components/atoms/spinner/Spinner";
 import { App } from "../views/App";
+import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
 import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
@@ -45,7 +46,14 @@ const Routing = ({ basePath = "", customerId, locale, I18n, getAuthToken, menu,
                 {
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Checkout, { customerId: customerId, getAuthToken: getAuthToken, useRedirect: useRedirect }))),
+                        React.createElement(Checkout, { customerId: customerId, useRedirect: useRedirect },
+                            React.createElement(Outlet, null)))),
+                    children: [
+                        {
+                            path: Routes.CHECKOUT_PAYMENT,
+                            element: React.createElement(CheckoutPaymentModal, { customerId: customerId, getAuthToken: getAuthToken }),
+                        },
+                    ],
                 },
                 {
                     path: Routes.FEEDBACK,

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

@@ -5,6 +5,7 @@ export declare enum Routes {
     ITEM = "item/:id",
     SUMMARY = "summary",
     CHECKOUT = "checkout",
+    CHECKOUT_PAYMENT = "payment",
     FEEDBACK = "feedback",
     NOT_FOUND = "not-found"
 }

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

@@ -6,6 +6,7 @@ export var Routes;
     Routes["ITEM"] = "item/:id";
     Routes["SUMMARY"] = "summary";
     Routes["CHECKOUT"] = "checkout";
+    Routes["CHECKOUT_PAYMENT"] = "payment";
     Routes["FEEDBACK"] = "feedback";
     Routes["NOT_FOUND"] = "not-found";
 })(Routes || (Routes = {}));

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

@@ -1,7 +1,7 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 interface CheckoutProps {
+    readonly children?: ReactNode;
     readonly customerId: string;
-    readonly getAuthToken: () => Promise<string>;
     readonly useRedirect: () => Record<string, string>;
 }
 declare const Checkout: FC<CheckoutProps>;

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

@@ -1,18 +1,13 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow, PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
-import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { View } from "react-native";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
+import React, { useCallback, useMemo, useRef } from "react";
+import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
-import { useCreateNotification } from "../../../../shared/notifications";
-import { NotificationLevel } from "../../../../shared/notifications/domain/notification/model/notification";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
-import { useMarkCheckoutAsPaid } from "../../../domain/checkout/react/useMarkCheckoutAsPaid";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useViewPaymentFlowPayloadByCheckoutId } from "../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
@@ -23,60 +18,17 @@ import { HEADER_HEIGHT } from "../header/Header.style";
 import { ProductVariant } from "../item/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
-import { CheckoutSuccessModal } from "./components/checkoutSuccessModal/CheckoutSuccessModal";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
-const Checkout = ({ customerId, getAuthToken, useRedirect }) => {
+const Checkout = ({ children, customerId, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
     const paymentInstrumentSelectRef = useRef(null);
-    const paymentFlowRef = useRef(null);
-    const [authToken, setAuthToken] = useState();
-    useEffect(() => {
-        const loadAuthToken = async () => setAuthToken(await getAuthToken());
-        loadAuthToken();
-    }, [getAuthToken]);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
-    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
-        checkoutId: checkout?.id,
-    });
-    const [markAsPaid, markAsPaidStatus] = useMarkCheckoutAsPaid({ checkoutId: checkout?.id });
-    const [createNotification] = useCreateNotification();
-    const [success, setSuccess] = useState(false);
-    const [processingCheckout, setProcessingCheckout] = useState(false);
     const navigate = useNavigate();
     const basePath = useBasePath();
     const { returnUrl } = useRedirect();
-    const handleOnSubmitCheckout = useCallback(() => {
-        if (!paymentFlowRef.current) {
-            return;
-        }
-        setProcessingCheckout(true);
-        setSuccess(false);
-        paymentFlowRef.current.startLegacyBoxCheckout(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        paymentFlowPayload, async ({ status, final }) => {
-            if (status === ChargeStatus.REJECTED) {
-                createNotification({ level: NotificationLevel.ERROR, bodyI18nKey: I18nMessages.CHECKOUT_TOAST_REJECTED });
-            }
-            else if (status === ChargeStatus.ERROR) {
-                createNotification({ level: NotificationLevel.ERROR, bodyI18nKey: I18nMessages.CHECKOUT_TOAST_ERROR });
-            }
-            else if (status === ChargeStatus.EXECUTED) {
-                try {
-                    await markAsPaid();
-                    setSuccess(true);
-                }
-                catch (e) { }
-            }
-            if (final) {
-                setProcessingCheckout(false);
-            }
-        });
-    }, [createNotification, markAsPaid, paymentFlowPayload]);
-    const handleOnSuccessModalDismiss = useCallback(() => {
-        setSuccess(false);
-        navigate(`${basePath}/${Routes.FEEDBACK}`);
+    const handleOnSubmit = useCallback(() => {
+        navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
     }, [basePath, navigate]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const hasReplacedCheckoutItem = useMemo(() => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
@@ -86,8 +38,7 @@ const Checkout = ({ customerId, getAuthToken, useRedirect }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(CheckoutSuccessModal, { visible: success, onDismiss: handleOnSuccessModalDismiss }),
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
                     React.createElement(DeliveryBanner, null))),
@@ -96,7 +47,9 @@ const Checkout = ({ customerId, getAuthToken, useRedirect }) => {
                 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, 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, busy: processingCheckout || markAsPaidStatus === CommandStatus.LOADING, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, orderTotal: pricing.orderTotal, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmitCheckout }))))),
-        authToken && React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken })));
+                    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/components/checkoutPaymentModal/CheckoutPaymentModal.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface CheckoutPaymentModalProps {
+    readonly customerId: string;
+    readonly getAuthToken: () => Promise<string>;
+}
+declare const CheckoutPaymentModal: FC<CheckoutPaymentModalProps>;
+export { CheckoutPaymentModal };

package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -0,0 +1,45 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+import { PaymentFlow } from "@lookiero/payments-front";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-native";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
+import { Routes } from "../../../../routing/routes";
+import { useBasePath } from "../../../../routing/useBasePath";
+import { CheckoutSuccessModal } from "../checkoutSuccessModal/CheckoutSuccessModal";
+const CheckoutPaymentModal = ({ customerId, getAuthToken }) => {
+    const paymentFlowRef = useRef(null);
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+        checkoutId: checkout?.id,
+    });
+    const [authToken, setAuthToken] = useState();
+    useEffect(() => {
+        const loadAuthToken = async () => setAuthToken(await getAuthToken());
+        loadAuthToken();
+    }, [getAuthToken]);
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const handleOnSuccessModalDismiss = useCallback(() => navigate(`${basePath}/${Routes.FEEDBACK}`), [basePath, navigate]);
+    const handleOnErrorSubmitCheckout = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`), [basePath, navigate]);
+    const [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
+        checkoutId: checkout?.id,
+        checkoutBookingId: checkout?.checkoutBookingId,
+        paymentFlowRef,
+        onError: handleOnErrorSubmitCheckout,
+    });
+    useEffect(() => {
+        if (paymentFlowPayload) {
+            submitCheckout({ paymentFlowPayload });
+        }
+    }, [paymentFlowPayload, submitCheckout]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) || checkout;
+    if (!dependenciesLoaded)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CheckoutSuccessModal, { visible: submitCheckoutStatus === "success", onDismiss: handleOnSuccessModalDismiss }),
+        authToken && React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken })));
+};
+export { CheckoutPaymentModal };

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

@@ -1,5 +1,6 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
+import { Platform } from "react-native";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -29,7 +30,7 @@ const Feedback = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

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

@@ -2,7 +2,7 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
-import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+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";
@@ -12,11 +12,11 @@ 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, style: customStyle }) => (React.createElement(View, { style: customStyle, testID: "default-header" },
+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, style: customStyle }) => {
+const ItemHeader = ({ items, item }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
     const isFirstItem = itemIndex === 0;
@@ -33,32 +33,31 @@ const ItemHeader = ({ items, item, style: customStyle }) => {
         const nextItem = items[nextItemIndex];
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, itemIndex, items, navigate]);
-    return (React.createElement(View, { style: customStyle, testID: "item-header" },
+    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 = ({ style: customStyle }) => {
+const ItemDetailHeader = () => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const navigate = useNavigate();
     const handleOnBack = useCallback(() => navigate(-1), [navigate]);
-    return (React.createElement(View, { style: customStyle, testID: "item-detail-header" },
+    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 = ({ style: customStyle }) => {
+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: customStyle, testID: "checkout-header" },
+    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 { top: safeAreaInsetTop } = useSafeAreaInsets();
     const { id: itemId } = useParams();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const currentItem = checkout?.items.find((item) => item.id === itemId);
@@ -72,19 +71,19 @@ const Header = ({ customerId, menu: Menu, style: customStyle }) => {
     let header;
     if (checkout?.items && currentItem) {
         if (itemRouteMatch) {
-            header = React.createElement(ItemHeader, { item: currentItem, items: checkout.items, style: style.header });
+            header = React.createElement(ItemHeader, { item: currentItem, items: checkout.items });
         }
         else if (itemDetailRouteMatch) {
-            header = React.createElement(ItemDetailHeader, { style: style.header });
+            header = React.createElement(ItemDetailHeader, null);
         }
     }
     else if (checkoutRouteMatch) {
-        header = React.createElement(CheckoutHeader, { style: style.header });
+        header = React.createElement(CheckoutHeader, null);
     }
     else {
-        header = React.createElement(DefaultHeader, { style: style.header, onOpenMenu: handleOnOpenMenu });
+        header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
     }
-    return (React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, { paddingTop: safeAreaInsetTop }, customStyle] },
+    return (React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, customStyle] },
         header,
         React.createElement(Menu, { visible: menuVisible, onClose: handleOnCloseMenu })));
 };

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

@@ -1,21 +1,27 @@
 declare const HEADER_HEIGHT: number;
 declare const style: {
     buttonIconPlaceholder: {
+        flexGrow: number;
         height: number;
         width: number;
     };
     container: {
-        backgroundColor: string;
-        flex: number;
+        flexDirection: "row";
+        flexGrow: number;
         height: number;
-        paddingHorizontal: number;
         width: string;
     };
     header: {
         alignItems: "center";
-        flex: number;
+        backgroundColor: string;
         flexDirection: "row";
+        flexGrow: number;
+        flexWrap: "nowrap";
+        height: number;
         justifyContent: "space-between";
+        overflow: "visible";
+        paddingHorizontal: number;
+        width: string;
     };
     logo: {
         left: number;

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

@@ -4,21 +4,27 @@ const { colorBase, spaceXXL, spaceXXXL, spaceS } = theme();
 const HEADER_HEIGHT = spaceXXXL;
 const style = StyleSheet.create({
     buttonIconPlaceholder: {
+        flexGrow: 0,
         height: spaceXXL,
         width: spaceXXL,
     },
     container: {
-        backgroundColor: colorBase,
-        flex: 1,
+        flexDirection: "row",
+        flexGrow: 0,
         height: HEADER_HEIGHT,
-        paddingHorizontal: spaceS,
         width: "100%",
     },
     header: {
         alignItems: "center",
-        flex: 1,
+        backgroundColor: colorBase,
         flexDirection: "row",
+        flexGrow: 0,
+        flexWrap: "nowrap",
+        height: HEADER_HEIGHT,
         justifyContent: "space-between",
+        overflow: "visible",
+        paddingHorizontal: spaceS,
+        width: "100%",
     },
     logo: {
         left: 0,

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

@@ -4,7 +4,7 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React from "react";
-import { View } from "react-native";
+import { Platform, 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";
@@ -30,7 +30,7 @@ const Intro = ({ customerId }) => {
     const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
     if (fiveItemsDiscountStatus === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
         React.createElement(Body, { style: { column: style.bodyColumn } },
             React.createElement(View, { style: style.container },
                 React.createElement(View, { style: style.content },

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

@@ -41,7 +41,7 @@ const Item = ({ customerId }) => {
         if (itemRouteMatch) {
             const nextItemWithoutCustomerDecision = checkout?.items
                 .filter((item) => item.id !== id)
-                .find((item) => [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status));
+                .find((item) => item.status === CheckoutItemStatus.INITIAL);
             if (nextItemWithoutCustomerDecision) {
                 navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItemWithoutCustomerDecision.id }));
             }
@@ -52,7 +52,7 @@ const Item = ({ customerId }) => {
     }, [itemRouteMatch, itemDetailRouteMatch, checkout?.items, id, navigate, basePath]);
     const [customerDecissionMade, setCustomerDecissionMade] = useState();
     useEffect(() => {
-        setCustomerDecissionMade(checkoutItem.status !== CheckoutItemStatus.INITIAL && checkoutItem.status !== CheckoutItemStatus.EXPIRED);
+        setCustomerDecissionMade(checkoutItem.status !== CheckoutItemStatus.INITIAL);
     }, [checkoutItem.status, id]);
     const handleOnBannerPress = useCallback(() => setCustomerDecissionMade(false), []);
     const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id });
@@ -136,7 +136,7 @@ const Item = ({ customerId }) => {
     return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, null,
                 customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
                 React.createElement(View, { style: [style.container, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },

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";
-type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL | CheckoutItemStatus.EXPIRED>;
+type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 interface CustomerDecissionBannerProps {
     readonly checkoutItemStatus: CustomerDecissionBannerStatus;
     readonly onPress: () => void;

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

@@ -2,7 +2,7 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
@@ -24,6 +24,8 @@ const { spaceXL } = theme();
 const Summary = ({ customerId }) => {
     const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
+    const [pricingHeight, setPricingHeight] = useState(0);
+    const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
@@ -42,13 +44,13 @@ const Summary = ({ customerId }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: HEADER_HEIGHT, style: { safeAreaView: style.container } },
-            React.createElement(Body, { style: { row: { paddingBottom: spaceXL } } },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
+            React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
                 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 }))));
+        pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
 };
 export { Summary };

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

@@ -1,11 +1,13 @@
 import { FC } from "react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+import { Layout } from "../../../../../../shared/ui/components/layouts/sticky/Sticky";
 interface StickyPricingProps {
     readonly pricing: PricingProjection;
     readonly totalCheckoutItemsKept: number;
     readonly collapsed: boolean;
     readonly onPress: () => void;
     readonly onSubmit: () => void;
+    readonly onLayout?: ({ width, height }: Layout) => void;
 }
 declare const StickyPricing: FC<StickyPricingProps>;
 export { StickyPricing };

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

@@ -3,7 +3,7 @@ import { Sticky } from "../../../../../../shared/ui/components/layouts/sticky/St
 import { Body } from "../../../../components/layouts/body/Body";
 import { Pricing } from "../pricing/Pricing";
 import { style } from "./StickyPricing.style";
-const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit }) => (React.createElement(Sticky, null,
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { onLayout: onLayout },
     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/projection/bookedSizeChangeProductsVariants/bookedSizeChangeProductsVariants.d.ts

@@ -0,0 +1,10 @@
+import { SizeProjection } from "../shared/size";
+interface ProductVariantProjection {
+    readonly id: string;
+    readonly size: SizeProjection;
+}
+interface BookedSizeChangeProductsVariantsProjection {
+    readonly bookingId: string;
+    readonly productVariants: ProductVariantProjection[];
+}
+export type { BookedSizeChangeProductsVariantsProjection, ProductVariantProjection };

package/dist/projection/bookedSizeChangeProductsVariants/bookedSizeChangeProductsVariants.js

@@ -0,0 +1 @@
+export {};

package/dist/projection/bookedSizeChangeProductsVariants/viewBookedSizeChangeProductVariantsForCheckoutItem.d.ts

@@ -0,0 +1,25 @@
+import { CancelableQueryViewArgs, Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
+import { BookedSizeChangeProductsVariantsProjection } from "./bookedSizeChangeProductsVariants";
+declare const VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM = "view_booked_size_change_product_variants_for_checkout_item";
+interface ViewBookedSizeChangeProductsVariantsForCheckoutItemPayload {
+    readonly checkoutItemId: string;
+}
+interface ViewBookedSizeChangeProductsVariantsForCheckoutItem extends Query<typeof VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM>, ViewBookedSizeChangeProductsVariantsForCheckoutItemPayload {
+}
+interface ViewBookedSizeChangeProductsVariantsForCheckoutItemFunction {
+    (payload: ViewBookedSizeChangeProductsVariantsForCheckoutItemPayload): ViewBookedSizeChangeProductsVariantsForCheckoutItem;
+}
+declare const viewBookedSizeChangeProductsVariantsForCheckoutItem: ViewBookedSizeChangeProductsVariantsForCheckoutItemFunction;
+type ViewBookedSizeChangeProductsVariantsForCheckoutItemResult = BookedSizeChangeProductsVariantsProjection | null;
+interface BookedSizeChangeProductsVariantsForCheckoutItemViewArgs extends CancelableQueryViewArgs {
+    readonly checkoutItemId: string;
+}
+interface BookedSizeChangeProductsVariantsForCheckoutItemView {
+    (args: BookedSizeChangeProductsVariantsForCheckoutItemViewArgs): Promise<ViewBookedSizeChangeProductsVariantsForCheckoutItemResult>;
+}
+interface ViewBookedSizeChangeProductsVariantsForCheckoutItemHandlerFunctionArgs extends QueryHandlerFunctionArgs {
+    readonly view: BookedSizeChangeProductsVariantsForCheckoutItemView;
+}
+declare const viewBookedSizeChangeProductsVariantsForCheckoutItemHandler: QueryHandlerFunction<ViewBookedSizeChangeProductsVariantsForCheckoutItem, ViewBookedSizeChangeProductsVariantsForCheckoutItemResult, ViewBookedSizeChangeProductsVariantsForCheckoutItemHandlerFunctionArgs>;
+export type { ViewBookedSizeChangeProductsVariantsForCheckoutItem, BookedSizeChangeProductsVariantsForCheckoutItemView, ViewBookedSizeChangeProductsVariantsForCheckoutItemResult, };
+export { VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM, viewBookedSizeChangeProductsVariantsForCheckoutItem, viewBookedSizeChangeProductsVariantsForCheckoutItemHandler, };

package/dist/projection/bookedSizeChangeProductsVariants/viewBookedSizeChangeProductVariantsForCheckoutItem.js

@@ -0,0 +1,8 @@
+import { query, } from "@lookiero/messaging";
+const VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM = "view_booked_size_change_product_variants_for_checkout_item";
+const viewBookedSizeChangeProductsVariantsForCheckoutItem = (payload) => ({
+    ...query({ name: VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM }),
+    ...payload,
+});
+const viewBookedSizeChangeProductsVariantsForCheckoutItemHandler = ({ view, signal }) => async ({ checkoutItemId }) => view({ checkoutItemId, signal });
+export { VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM, viewBookedSizeChangeProductsVariantsForCheckoutItem, viewBookedSizeChangeProductsVariantsForCheckoutItemHandler, };

package/dist/projection/checkoutBooking/checkoutBooking.d.ts

@@ -1,7 +1,6 @@
-import { CheckoutStatus } from "../../domain/checkout/model/checkout";
 interface CheckoutBookingProjection {
     readonly id: string;
     readonly checkoutItemIds: string[];
-    readonly checkoutStatus: CheckoutStatus;
+    readonly isExpired: boolean;
 }
 export type { CheckoutBookingProjection };

package/package.json

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