@lookiero/checkout 0.2.43 → 0.2.45

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

@@ -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 { useReplaceCheckoutItem } from "../../../domain/checkoutItem/react/useReplaceCheckoutItem";
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewBookedSizeChangeProductsVariantsForCheckoutItem } from "../../../projection/bookedSizeChangeProductsVariants/react/useViewBookedSizeChangeProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -49,6 +50,9 @@ const Item = ({ customerId }) => {
     const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
         checkoutItemId: checkoutItem.id,
     });
+    const [replaceCheckoutItem, replaceCheckoutItemStatus] = useReplaceCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+    });
     const [stickyHeight, setStickyHeight] = useState(0);
     const handleOnStickyLayout = useCallback(({ height }) => setStickyHeight(height), []);
     useEffect(() => {
@@ -62,7 +66,10 @@ const Item = ({ customerId }) => {
         handleOnHideReturnQuestions();
         returnCheckoutItem({ feedbacks: feedback });
     }, [handleOnHideReturnQuestions, returnCheckoutItem]);
-    const handleOnReplace = useCallback(() => handleOnShowSizeChangeModal(), [handleOnShowSizeChangeModal]);
+    const handleOnReplace = useCallback((replacedFor) => {
+        handleOnShowSizeChangeModal();
+        replaceCheckoutItem({ replacedFor });
+    }, [handleOnShowSizeChangeModal, replaceCheckoutItem]);
     const handleOnReturn = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(returnQuestionsStatus) &&
@@ -72,9 +79,6 @@ const Item = ({ customerId }) => {
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
     const { media, brand, name, size, color } = checkoutItem.productVariant;
-    const sizes = bookedSizeChangeProductsVariants?.productVariants
-        .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 }),
@@ -87,7 +91,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, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, size: checkoutItem.productVariant.size, sizes: sizes, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
+        customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: checkoutItem.productVariant, productVariants: bookedSizeChangeProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
         React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, feedback: checkoutItem.feedback || {}, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
 };
 export { Item };

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

@@ -1,15 +1,17 @@
 import { FC } from "react";
-import { SizeProjection } from "../../../../../../projection/shared/size";
+import { ProductVariantProjection } from "../../../../../../projection/bookedSizeChangeProductsVariants/bookedSizeChangeProductsVariants";
+import { CheckoutItemProductVariantProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { Layout } from "../../../../shared/components/layouts/sticky/Sticky";
 interface ItemActionsProps {
-    readonly sizes: SizeProjection[];
-    readonly size: SizeProjection;
+    readonly productVariants: ProductVariantProjection[];
+    readonly productVariantSelected: CheckoutItemProductVariantProjection;
     readonly keepButtonLoading?: boolean;
     readonly returnButtonLoading?: boolean;
+    readonly sizeSelectorDisabled?: boolean;
     readonly onSizeSelectorPress?: () => void;
-    readonly onKeep: (value: string) => void;
+    readonly onKeep: () => void;
     readonly onReturn: () => void;
-    readonly onReplace: () => void;
+    readonly onReplace: (value: string) => void;
     readonly onLayout?: ({ width, height }: Layout) => void;
 }
 declare const ItemActions: FC<ItemActionsProps>;

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

@@ -8,22 +8,24 @@ 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, keepButtonLoading = false, returnButtonLoading = false, onSizeSelectorPress = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
+const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoading = false, returnButtonLoading = false, sizeSelectorDisabled = 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 sizeSelectorOptions = useMemo(() => productVariants
+        .map((productVariant) => ({ label: productVariant.size.lookiero, value: productVariant.id }))
+        .concat({ label: productVariantSelected.size.lookiero, value: productVariantSelected.id }), [productVariantSelected.id, productVariantSelected.size.lookiero, productVariants]);
+    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === productVariantSelected.id, [sizeSelectorOptions, productVariantSelected.id]);
     const handleOnPressSizeSelector = useCallback(() => onSizeSelectorPress(), [onSizeSelectorPress]);
     return (React.createElement(Sticky, { onLayout: onLayout },
         React.createElement(Body, { style: { column: style.container } },
             React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),
             React.createElement(View, { style: style.row },
-                !size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
+                !productVariantSelected.size.unique && (React.createElement(SelectField, { ...(disabledSizeSelector && {
                         onPress: handleOnPressSizeSelector,
-                    }), options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", value: size.id, style: {
+                    }), disabled: sizeSelectorDisabled, options: sizeSelectorOptions, placeholder: sizeSelectorLabelText || "", testID: "size-selector", value: productVariantSelected.id, style: {
                         selectField: style.sizeSelector,
-                        inputField: { input: disabledSizeSelector && style.inputDisabled },
+                        inputField: { input: (disabledSizeSelector || sizeSelectorDisabled) && style.inputDisabled },
                     }, onChange: onReplace })),
                 React.createElement(View, { style: style.returnButtonContainer },
                     React.createElement(Button, { busy: returnButtonLoading, variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));

package/package.json

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