@lookiero/checkout 0.2.41 → 0.2.43

package/dist/domain/checkoutItem/command/replaceCheckoutItem.d.ts

@@ -0,0 +1,14 @@
+import { Command } from "@lookiero/messaging";
+declare const REPLACE_CHECKOUT_ITEM = "replace_checkout_item";
+interface ReplaceCheckoutItemPayload {
+    readonly aggregateId: string;
+    readonly replacedFor: string;
+}
+interface ReplaceCheckoutItem extends Command<typeof REPLACE_CHECKOUT_ITEM>, ReplaceCheckoutItemPayload {
+}
+interface ReplaceCheckoutItemFunction {
+    (payload: ReplaceCheckoutItemPayload): ReplaceCheckoutItem;
+}
+declare const replaceCheckoutItem: ReplaceCheckoutItemFunction;
+export type { ReplaceCheckoutItem };
+export { REPLACE_CHECKOUT_ITEM, replaceCheckoutItem };

package/dist/domain/checkoutItem/command/replaceCheckoutItem.js

@@ -0,0 +1,7 @@
+import { command } from "@lookiero/messaging";
+const REPLACE_CHECKOUT_ITEM = "replace_checkout_item";
+const replaceCheckoutItem = ({ aggregateId, ...payload }) => ({
+    ...command({ aggregateId, name: REPLACE_CHECKOUT_ITEM }),
+    ...payload,
+});
+export { REPLACE_CHECKOUT_ITEM, replaceCheckoutItem };

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

@@ -1,5 +1,6 @@
 import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
 import { KeepCheckoutItem } from "../command/keepCheckoutItem";
+import { ReplaceCheckoutItem } from "../command/replaceCheckoutItem";
 import { ReturnCheckoutItem } from "../command/returnCheckoutItem";
 import { Feedbacks } from "./feedbacks";
 import { Price } from "./price";
@@ -14,8 +15,10 @@ interface CheckoutItem extends AggregateRoot {
     readonly status: CheckoutItemStatus;
     readonly price: Price;
     readonly feedbacks: Feedbacks;
+    readonly replacedFor?: string;
 }
 declare const keepCheckoutItemHandler: CommandHandlerFunction<KeepCheckoutItem, CheckoutItem>;
 declare const returnCheckoutItemHandler: CommandHandlerFunction<ReturnCheckoutItem, CheckoutItem>;
+declare const replaceCheckoutItemHandler: CommandHandlerFunction<ReplaceCheckoutItem, CheckoutItem>;
 export type { CheckoutItem };
-export { CheckoutItemStatus, keepCheckoutItemHandler, returnCheckoutItemHandler };
+export { CheckoutItemStatus, keepCheckoutItemHandler, returnCheckoutItemHandler, replaceCheckoutItemHandler };

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

@@ -1,5 +1,6 @@
 import invariant from "tiny-invariant";
 import { checkoutItemKept } from "./checkoutItemKept";
+import { checkoutItemReplaced } from "./checkoutItemReplaced";
 import { checkoutItemReturned } from "./checkoutItemReturned";
 var CheckoutItemStatus;
 (function (CheckoutItemStatus) {
@@ -27,4 +28,13 @@ const returnCheckoutItemHandler = () => async ({ aggregateRoot, command }) => {
         domainEvents: [checkoutItemReturned({ aggregateId })],
     };
 };
-export { CheckoutItemStatus, keepCheckoutItemHandler, returnCheckoutItemHandler };
+const replaceCheckoutItemHandler = () => async ({ aggregateRoot, command }) => {
+    const { aggregateId } = command;
+    invariant(aggregateRoot.status !== CheckoutItemStatus.REPLACED, "CheckoutItem is already replaced");
+    return {
+        ...aggregateRoot,
+        status: CheckoutItemStatus.REPLACED,
+        domainEvents: [checkoutItemReplaced({ aggregateId })],
+    };
+};
+export { CheckoutItemStatus, keepCheckoutItemHandler, returnCheckoutItemHandler, replaceCheckoutItemHandler };

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

@@ -0,0 +1,13 @@
+import { DomainEvent } from "@lookiero/messaging";
+declare const CHECKOUT_ITEM_REPLACED = "checkout_item_replaced";
+interface CheckoutItemReplacedPayload {
+    readonly aggregateId: string;
+}
+interface CheckoutItemReplaced extends DomainEvent<typeof CHECKOUT_ITEM_REPLACED>, CheckoutItemReplacedPayload {
+}
+interface CheckoutItemReplacedFunction {
+    (payload: CheckoutItemReplacedPayload): CheckoutItemReplaced;
+}
+declare const checkoutItemReplaced: CheckoutItemReplacedFunction;
+export type { CheckoutItemReplaced };
+export { CHECKOUT_ITEM_REPLACED, checkoutItemReplaced };

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

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

package/dist/infrastructure/delivery/baseBootstrap.js

@@ -4,8 +4,9 @@ import { startCheckoutHandler } from "../../domain/checkout/model/checkout";
 import { BOOK_CHECKOUT_BOOKING_FOR_CHECKOUT_ITEM } from "../../domain/checkoutBooking/command/bookCheckoutBookingForCheckoutItem";
 import { bookCheckoutBookingForCheckoutItemHandler, } from "../../domain/checkoutBooking/model/checkoutBooking";
 import { KEEP_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/keepCheckoutItem";
+import { REPLACE_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/replaceCheckoutItem";
 import { RETURN_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/returnCheckoutItem";
-import { keepCheckoutItemHandler, returnCheckoutItemHandler, } from "../../domain/checkoutItem/model/checkoutItem";
+import { keepCheckoutItemHandler, replaceCheckoutItemHandler, returnCheckoutItemHandler, } from "../../domain/checkoutItem/model/checkoutItem";
 import { UPDATE_UI_SETTING } from "../../domain/uiSetting/command/updateUiSetting";
 import { updateUiSettingHandler } from "../../domain/uiSetting/model/uiSetting";
 import { viewBookedSizeChangeProductsVariantsForCheckoutItemHandler, VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM, } from "../../projection/bookedSizeChangeProductsVariants/viewBookedSizeChangeProductVariantsForCheckoutItem";
@@ -41,6 +42,7 @@ const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdVie
 })
     .command(KEEP_CHECKOUT_ITEM, keepCheckoutItemHandler)(getCheckoutItem, saveCheckoutItem, ...checkoutItemsDependencies)
     .command(RETURN_CHECKOUT_ITEM, returnCheckoutItemHandler)(getCheckoutItem, saveCheckoutItem, ...checkoutItemsDependencies)
+    .command(REPLACE_CHECKOUT_ITEM, replaceCheckoutItemHandler)(getCheckoutItem, saveCheckoutItem, ...checkoutItemsDependencies)
     .query(VIEW_BOOKED_SIZE_CHANGE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM, viewBookedSizeChangeProductsVariantsForCheckoutItemHandler, {
     view: bookedSizeChangeProductsVariantsForCheckoutItemView,
 })

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

@@ -15,7 +15,5 @@ const toDomain = (checkout) => {
     };
 };
 const getCheckout = ({ queryBus }) => async (aggregateId) => toDomain(await queryBus(viewCheckoutById({ checkoutId: aggregateId })));
-const saveCheckout = ({ httpPost }) => async (aggregateRoot) => {
-    await httpCheckoutsStart({ httpPost })(aggregateRoot);
-};
+const saveCheckout = ({ httpPost }) => async (aggregateRoot) => await httpCheckoutsStart({ httpPost })(aggregateRoot);
 export { getCheckout, saveCheckout };

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

@@ -5,7 +5,7 @@ const httpCheckoutsStart = ({ httpPost }) => async ({ aggregateId, domainEvents
     if (!checkoutStarted) {
         return;
     }
-    httpPost({
+    await httpPost({
         endpoint: "/start-checkout",
         body: { checkoutId: aggregateId },
     });

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

@@ -4,7 +4,7 @@ import { startCheckout } from "../../../../domain/checkout/command/startCheckout
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useStartCheckout = ({ checkoutId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const start = useCallback(async () => await commandBus(startCheckout({ aggregateId: checkoutId })), [checkoutId, commandBus]);
+    const start = useCallback(() => commandBus(startCheckout({ aggregateId: checkoutId })), [checkoutId, commandBus]);
     return [start, status];
 };
 export { useStartCheckout };

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

@@ -11,7 +11,5 @@ const toDomain = (checkoutBooking) => {
     };
 };
 const getCheckoutBooking = ({ queryBus }) => async (aggregateId) => toDomain(await queryBus(viewCheckoutBookingById({ checkoutBookingId: aggregateId })));
-const saveCheckoutBooking = ({ httpPost }) => async (aggregateRoot) => {
-    await httpCheckoutBookingsBook({ httpPost })(aggregateRoot);
-};
+const saveCheckoutBooking = ({ httpPost }) => async (aggregateRoot) => await httpCheckoutBookingsBook({ httpPost })(aggregateRoot);
 export { getCheckoutBooking, saveCheckoutBooking };

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

@@ -6,7 +6,7 @@ const httpCheckoutBookingsBook = ({ httpPost }) => async ({ aggregateId, checkou
         return;
     }
     const { checkoutItemId } = checkoutBookingBooked;
-    httpPost({
+    await httpPost({
         endpoint: "/book-size-change-product-variants-for-checkout-item",
         body: {
             checkoutId,

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

@@ -5,7 +5,7 @@ import { bookCheckoutBookingForCheckoutItem } from "../../../../domain/checkoutB
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useBookCheckouBookingForCheckoutItem = ({ checkoutId, checkoutItemId, checkoutBookingId, }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const book = useCallback(async () => await commandBus(bookCheckoutBookingForCheckoutItem({
+    const book = useCallback(() => commandBus(bookCheckoutBookingForCheckoutItem({
         aggregateId: checkoutBookingId || uuid(),
         checkoutId,
         checkoutItemId,

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

@@ -1,6 +1,7 @@
 import invariant from "tiny-invariant";
 import { viewCheckoutItemById, } from "../../../../projection/checkoutItem/viewCheckoutItemById";
 import { httpCheckoutItemsKeep } from "./httpCheckoutItemsKeep";
+import { httpCheckoutItemsReplace } from "./httpCheckoutItemsReplace";
 import { httpCheckoutItemsReturn } from "./httpCheckoutItemsReturn";
 const toDomain = (checkoutItem) => {
     invariant(checkoutItem, "No checkoutItem found!");
@@ -9,6 +10,7 @@ const toDomain = (checkoutItem) => {
         status: checkoutItem.status,
         price: checkoutItem.price,
         feedbacks: checkoutItem.feedback,
+        replacedFor: checkoutItem.replacedFor,
         aggregateId: checkoutItem.id,
         domainEvents: [],
     };
@@ -18,6 +20,7 @@ const saveCheckoutItem = ({ httpPost }) => async (aggregateRoot) => {
     await Promise.all([
         httpCheckoutItemsKeep({ httpPost })(aggregateRoot),
         httpCheckoutItemsReturn({ httpPost })(aggregateRoot),
+        httpCheckoutItemsReplace({ httpPost })(aggregateRoot),
     ]);
 };
 export { getCheckoutItem, saveCheckoutItem };

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

@@ -5,7 +5,7 @@ const httpCheckoutItemsKeep = ({ httpPost }) => async ({ aggregateId, domainEven
     if (!checkoutItemKept) {
         return;
     }
-    httpPost({
+    await httpPost({
         endpoint: "/keep-checkout-item",
         body: { checkoutItemId: aggregateId },
     });

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

@@ -0,0 +1,5 @@
+import { HttpCheckoutItemsSaveFunction } from "./httpCheckoutItems";
+interface HttpCheckoutItemsReplaceFunction extends HttpCheckoutItemsSaveFunction {
+}
+declare const httpCheckoutItemsReplace: HttpCheckoutItemsReplaceFunction;
+export { httpCheckoutItemsReplace };

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

@@ -0,0 +1,13 @@
+import { CHECKOUT_ITEM_REPLACED, } from "../../../../domain/checkoutItem/model/checkoutItemReplaced";
+const isCheckoutItemReplaced = (event) => event.name === CHECKOUT_ITEM_REPLACED;
+const httpCheckoutItemsReplace = ({ httpPost }) => async ({ aggregateId, replacedFor, domainEvents }) => {
+    const checkoutItemReplaced = domainEvents.find(isCheckoutItemReplaced);
+    if (!checkoutItemReplaced) {
+        return;
+    }
+    await httpPost({
+        endpoint: "/replace-checkout-item",
+        body: { checkoutItemId: aggregateId, replacedFor },
+    });
+};
+export { httpCheckoutItemsReplace };

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

@@ -5,7 +5,7 @@ const httpCheckoutItemsReturn = ({ httpPost }) => async ({ aggregateId, feedback
     if (!checkoutItemReturned) {
         return;
     }
-    httpPost({
+    await httpPost({
         endpoint: "/return-checkout-item",
         body: { checkoutItemId: aggregateId, feedbacks },
     });

package/dist/infrastructure/domain/checkoutItem/react/useKeepCheckoutItem.js

@@ -4,7 +4,7 @@ import { keepCheckoutItem } from "../../../../domain/checkoutItem/command/keepCh
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useKeepCheckoutItem = ({ checkoutItemId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const keep = useCallback(async () => await commandBus(keepCheckoutItem({
+    const keep = useCallback(() => commandBus(keepCheckoutItem({
         aggregateId: checkoutItemId,
     })), [checkoutItemId, commandBus]);
     return [keep, status];

package/dist/infrastructure/domain/checkoutItem/react/useReplaceCheckoutItem.d.ts

@@ -0,0 +1,16 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+interface ReplaceCheckoutItemFunctionArgs {
+    readonly replacedFor: string;
+}
+interface ReplaceCheckoutItemFunction {
+    (args: ReplaceCheckoutItemFunctionArgs): Promise<void>;
+}
+interface UseReplaceCheckoutItemFunctionArgs {
+    readonly checkoutItemId: string;
+}
+declare type UseReplaceCheckoutItemResult = [replace: ReplaceCheckoutItemFunction, status: CommandStatus];
+interface UseReplaceCheckoutItemFunction {
+    (args: UseReplaceCheckoutItemFunctionArgs): UseReplaceCheckoutItemResult;
+}
+declare const useReplaceCheckoutItem: UseReplaceCheckoutItemFunction;
+export { useReplaceCheckoutItem };

package/dist/infrastructure/domain/checkoutItem/react/useReplaceCheckoutItem.js

@@ -0,0 +1,13 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { replaceCheckoutItem } from "../../../../domain/checkoutItem/command/replaceCheckoutItem";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+const useReplaceCheckoutItem = ({ checkoutItemId }) => {
+    const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
+    const replace = useCallback(({ replacedFor }) => commandBus(replaceCheckoutItem({
+        aggregateId: checkoutItemId,
+        replacedFor,
+    })), [checkoutItemId, commandBus]);
+    return [replace, status];
+};
+export { useReplaceCheckoutItem };

package/dist/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.js

@@ -4,7 +4,7 @@ import { returnCheckoutItem as returnCheckoutItemCommand } from "../../../../dom
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useReturnCheckoutItem = ({ checkoutItemId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const returnCheckoutItem = useCallback(async ({ feedbacks }) => await commandBus(returnCheckoutItemCommand({
+    const returnCheckoutItem = useCallback(({ feedbacks }) => commandBus(returnCheckoutItemCommand({
         aggregateId: checkoutItemId,
         feedbacks,
     })), [checkoutItemId, commandBus]);

package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.js

@@ -5,7 +5,7 @@ import { updateUiSetting } from "../../../../domain/uiSetting/command/updateUiSe
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useUpdateUiSetting = () => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const update = useCallback(async ({ key, value }) => await commandBus(updateUiSetting({
+    const update = useCallback(({ key, value }) => commandBus(updateUiSetting({
         aggregateId: uuid(),
         key,
         value,

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.d.ts

@@ -21,4 +21,5 @@ interface InputFieldBaseProps {
 interface InputFieldProps extends Omit<InputProps, keyof InputFieldBaseProps>, InputFieldBaseProps {
 }
 declare const InputField: FC<InputFieldProps>;
+export type { InputFieldStyle };
 export { InputField };

package/dist/infrastructure/ui/shared/components/molecules/selectField/SelectField.d.ts

@@ -1,10 +1,12 @@
 import { FC } from "react";
 import { StyleProp, TextStyle, TouchableHighlightProps, ViewStyle } from "react-native";
+import { InputFieldStyle } from "../inputField/InputField";
 interface SelectFieldStyle {
     readonly selectField: StyleProp<ViewStyle>;
     readonly modalContent: StyleProp<ViewStyle>;
     readonly option: StyleProp<ViewStyle>;
     readonly optionText: StyleProp<TextStyle>;
+    readonly inputField: Partial<InputFieldStyle>;
 }
 interface Option {
     readonly label: string;

package/dist/infrastructure/ui/shared/components/molecules/selectField/SelectField.js

@@ -18,7 +18,7 @@ const SelectField = ({ placeholder, value, options, style: customStyle, onChange
     return (React.createElement(React.Fragment, null,
         React.createElement(TouchableHighlight, { style: customStyle?.selectField, underlayColor: colorGrayscaleS, onPress: handleOnPressSelectField, ...touchableRestProps },
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, value: selectedValue?.label }))),
+                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
         React.createElement(Modal, { visible: modalVisible, scroll: true, onClose: handleOnModalClose },
             React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] }, options.map(({ label, value }) => (React.createElement(TouchableHighlight, { key: value, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: () => handleOnPressOption(value) },
                 React.createElement(Text, { level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));

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

@@ -1,4 +1,4 @@
-import { QueryStatus } from "@lookiero/messaging-react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { View } from "react-native";
 import { useParams } from "react-router-native";
@@ -6,6 +6,7 @@ import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checko
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useBookCheckouBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckouBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewBookedSizeChangeProductsVariantsForCheckoutItem } from "../../../projection/bookedSizeChangeProductsVariants/react/useViewBookedSizeChangeProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -19,11 +20,20 @@ import { ProductVariantDescription } from "./components/productVariantDescriptio
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
+import { SizeChangeModal } from "./components/sizeChangeModal/SizeChangeModal";
+import { SizeWithoutStockModal } from "./components/sizeWithoutStockModal/SizeWithoutStockModal";
 const Item = ({ customerId }) => {
     const { id } = useParams();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
     const [customerDecissionMade, setCustomerDecissionMade] = useState(() => checkoutItem.status === CheckoutItemStatus.INITIAL || checkoutItem.status === CheckoutItemStatus.EXPIRED);
+    const handleOnBannerPress = useCallback(() => setCustomerDecissionMade(!customerDecissionMade), [customerDecissionMade]);
+    const [sizeWithoutStockModalVisible, setSizeWithoutStockModalVisible] = useState(false);
+    const handleOnShowSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(true), []);
+    const handleOnHideSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(false), []);
+    const [sizeChangeModalVisible, setSizeChangeModalVisible] = useState(false);
+    const handleOnShowSizeChangeModal = useCallback(() => setSizeChangeModalVisible(true), []);
+    const handleOnHideSizeChangeModal = useCallback(() => setSizeChangeModalVisible(false), []);
     const [bookedSizeChangeProductsVariants, bookedSizeChangeProductsVariantsStatus] = useViewBookedSizeChangeProductsVariantsForCheckoutItem({
         checkoutItemId: checkoutItem.id,
     });
@@ -35,20 +45,25 @@ const Item = ({ customerId }) => {
     const [returnQuestions, returnQuestionsStatus] = useListReturnQuestionsByCheckoutItemId({
         checkoutItemId: checkoutItem.id,
     });
-    const [keepCheckoutItem] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id });
+    const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id });
+    const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+    });
+    const [stickyHeight, setStickyHeight] = useState(0);
+    const handleOnStickyLayout = useCallback(({ height }) => setStickyHeight(height), []);
     useEffect(() => {
         checkout?.bookingId === undefined && bookCheckouBooking();
     }, [bookCheckouBooking, checkout?.bookingId]);
-    const [stickyHeight, setStickyHeight] = useState(0);
-    const handleOnStickyLayout = useCallback(({ height }) => setStickyHeight(height), []);
     const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
     const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
     const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
     const handleOnEditFeedback = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
-    const handleOnSubmit = useCallback(() => handleOnHideReturnQuestions(), [handleOnHideReturnQuestions]);
-    const handleOnReplace = useCallback(() => void 0, []);
+    const handleOnSubmit = useCallback((feedback) => {
+        handleOnHideReturnQuestions();
+        returnCheckoutItem({ feedbacks: feedback });
+    }, [handleOnHideReturnQuestions, returnCheckoutItem]);
+    const handleOnReplace = useCallback(() => handleOnShowSizeChangeModal(), [handleOnShowSizeChangeModal]);
     const handleOnReturn = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
-    const handleOnBannerPress = useCallback(() => setCustomerDecissionMade(!customerDecissionMade), [customerDecissionMade]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(returnQuestionsStatus) &&
         dependenciesLoadedStatuses.includes(checkoutStatus) &&
@@ -61,6 +76,8 @@ const Item = ({ customerId }) => {
         .map((productVariant) => productVariant.size)
         .concat(checkoutItem.productVariant.size) || [];
     return (React.createElement(React.Fragment, null,
+        React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
+        React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, null,
                 !customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
@@ -70,7 +87,7 @@ const Item = ({ customerId }) => {
                     React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: size }),
                     checkoutItem.feedback && (React.createElement(View, { style: style.feedbackContainer },
                         React.createElement(ReturnQuestionsFeedback, { feedback: checkoutItem.feedback || {}, returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),
-        customerDecissionMade && (React.createElement(ItemActions, { size: checkoutItem.productVariant.size, sizes: sizes, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn })),
+        customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, size: checkoutItem.productVariant.size, sizes: sizes, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
         React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, feedback: checkoutItem.feedback || {}, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
 };
 export { Item };

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.d.ts

@@ -4,6 +4,9 @@ import { Layout } from "../../../../shared/components/layouts/sticky/Sticky";
 interface ItemActionsProps {
     readonly sizes: SizeProjection[];
     readonly size: SizeProjection;
+    readonly keepButtonLoading?: boolean;
+    readonly returnButtonLoading?: boolean;
+    readonly onSizeSelectorPress?: () => void;
     readonly onKeep: (value: string) => void;
     readonly onReturn: () => void;
     readonly onReplace: () => void;

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -1,25 +1,31 @@
 import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/Button/Button.definition";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Body } from "../../../../components/layouts/body/Body";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Sticky } from "../../../../shared/components/layouts/sticky/Sticky";
 import { SelectField } from "../../../../shared/components/molecules/selectField/SelectField";
 import { style } from "./ItemActions.style";
-const ItemActions = ({ sizes, size, onKeep, onReplace, onReturn, onLayout }) => {
+const ItemActions = ({ sizes, size, keepButtonLoading = false, returnButtonLoading = false, onSizeSelectorPress = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     const sizeSelectorLabelText = useI18nMessage({ id: I18nMessages.ITEM_SIZES_LABEL });
     const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
     const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
     const sizeSelectorOptions = useMemo(() => sizes.map((size) => ({ label: size.lookiero, value: size.id })), [sizes]);
     const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === size.id, [sizeSelectorOptions, size.id]);
+    const handleOnPressSizeSelector = useCallback(() => onSizeSelectorPress(), [onSizeSelectorPress]);
     return (React.createElement(Sticky, { onLayout: onLayout },
         React.createElement(Body, { style: { column: style.container } },
-            React.createElement(Button, { onPress: onKeep }, keepButtonText),
+            React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),
             React.createElement(View, { style: style.row },
-                !size.unique && (React.createElement(SelectField, { disabled: disabledSizeSelector, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", style: { selectField: style.sizeSelector }, testID: "size-selector", value: size.id, onChange: onReplace })),
+                !size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
+                        onPress: handleOnPressSizeSelector,
+                    }), options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", value: size.id, style: {
+                        selectField: style.sizeSelector,
+                        inputField: { input: disabledSizeSelector && style.inputDisabled },
+                    }, onChange: onReplace })),
                 React.createElement(View, { style: style.returnButtonContainer },
-                    React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));
+                    React.createElement(Button, { busy: returnButtonLoading, variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));
 };
 export { ItemActions };

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts

@@ -2,6 +2,9 @@ declare const style: {
     container: {
         paddingHorizontal: number;
     };
+    inputDisabled: {
+        color: string;
+    };
     returnButtonContainer: {
         flex: number;
     };

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.js

@@ -1,10 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceL, spaceXL } = theme();
+const { colorGrayscaleL, spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
     container: {
         paddingHorizontal: spaceXL,
     },
+    inputDisabled: {
+        color: colorGrayscaleL,
+    },
     returnButtonContainer: {
         flex: 1,
     },

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

@@ -1,16 +1,13 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useState } from "react";
+import React from "react";
 import { StyleSheet, View } from "react-native";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { SizeWithoutStockModal } from "../item/components/sizeWithoutStockModal/SizeWithoutStockModal";
 const Summary = () => {
     const summaryText = useI18nMessage({ id: "summary" });
-    const [modalVisible, setModalVisible] = useState(true);
     return (React.createElement(SafeAreaScrollView, null,
         React.createElement(View, { style: styles.container },
-            React.createElement(Text, { heading: true, level: 3 }, summaryText),
-            React.createElement(SizeWithoutStockModal, { visible: modalVisible, onDismiss: () => setModalVisible(false) }))));
+            React.createElement(Text, { heading: true, level: 3 }, summaryText))));
 };
 const styles = StyleSheet.create({
     container: {

package/package.json

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