@lookiero/checkout 0.2.29 → 0.2.31

package/dist/infrastructure/projection/bookedSizeReplaceableProductVariants/bookedSizeReplaceableProductVariants.mock.d.ts

@@ -0,0 +1,3 @@
+import { BookedSizeReplaceableProductVariantsProjection } from "../../../projection/bookedSizeReplaceableProductVariants/viewBookedSizeReplaceableProductVariantsForCheckoutItem";
+declare const bookedSizeReplaceableProductVariants: BookedSizeReplaceableProductVariantsProjection;
+export { bookedSizeReplaceableProductVariants };

package/dist/infrastructure/projection/bookedSizeReplaceableProductVariants/bookedSizeReplaceableProductVariants.mock.js

@@ -0,0 +1,17 @@
+const bookedSizeReplaceableProductVariants = {
+    booking: "b00e2c2d-7d9c-4808-88a4-e1c845ae6889",
+    productVariants: [
+        {
+            id: "383fab95-56eb-4639-bb18-530ab792b4d3",
+            size: {
+                id: "4f8a26b8-8d2d-4012-b49a-7d2820095598",
+                europe: "S",
+                lookiero: "S",
+                uk: "S",
+                it: "S",
+                unique: false,
+            },
+        },
+    ],
+};
+export { bookedSizeReplaceableProductVariants };

package/dist/infrastructure/projection/bookedSizeReplaceableProductVariants/httpBookedSizeReplaceableProductVariantsForCheckoutItemView.d.ts

@@ -1,16 +1,13 @@
 import { BookedSizeReplaceableProductVariantsForCheckoutItemView, BookedSizeReplaceableProductVariantsProjection } from "../../../projection/bookedSizeReplaceableProductVariants/viewBookedSizeReplaceableProductVariantsForCheckoutItem";
 import { HttpPostFunction } from "../../delivery/http/httpClient";
-interface SizeFormatDto {
-    readonly size: string;
-    readonly format: string;
-    readonly length?: string;
-}
 interface SizeDto {
     readonly id: string;
-    readonly europe: SizeFormatDto;
-    readonly it: SizeFormatDto;
-    readonly lookiero: SizeFormatDto;
-    readonly uk: SizeFormatDto;
+    readonly lookiero: string;
+    readonly uk: string;
+    readonly it: string;
+    readonly europe: string;
+    readonly unique: boolean;
+    readonly visual_order?: number;
 }
 interface ProductVariantDto {
     readonly id: string;

package/dist/infrastructure/projection/bookedSizeReplaceableProductVariants/httpBookedSizeReplaceableProductVariantsForCheckoutItemView.js

@@ -1,9 +1,11 @@
 const toSize = (size) => ({
     id: size.id,
-    europe: size.europe,
-    it: size.it,
     lookiero: size.lookiero,
     uk: size.uk,
+    it: size.it,
+    europe: size.europe,
+    unique: size.unique,
+    visualOrder: size.visual_order,
 });
 const toProductVariant = (productVariant) => ({
     id: productVariant.id,

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

@@ -1,7 +1,12 @@
 import { FC } from "react";
+import { TextProps } from "react-native";
 import { PriceProjection } from "../../../../../projection/checkoutItem/checkoutItem";
+declare type PriceStyle = "priceText" | "discountedText";
+declare type PriceVariant = "default" | "detail" | "subtotal" | "total";
 interface PriceProps {
     readonly price: PriceProjection;
+    readonly variant?: PriceVariant;
+    readonly style?: Partial<Record<PriceStyle, TextProps>>;
 }
 declare const Price: FC<PriceProps>;
 export { Price };

package/dist/infrastructure/ui/components/atoms/price/Price.js

@@ -3,7 +3,13 @@ import { useI18nNumber } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
 import { style } from "./Price.style";
-const Price = ({ price }) => {
+const PRICE_VARIANT = {
+    default: { body: true, level: 3 },
+    detail: { detail: true, level: 2 },
+    subtotal: { action: true, level: 3 },
+    total: { action: true, level: 2 },
+};
+const Price = ({ price, variant = "default", style: customStyle }) => {
     const isDiscounted = price.discountedPrice && price.discountedPrice.percentage !== 0;
     const productPrice = useI18nNumber({
         value: price.amount / 100,
@@ -16,7 +22,7 @@ const Price = ({ price }) => {
         currency: price.currency,
     });
     return (React.createElement(View, { style: style.price, testID: "price" },
-        React.createElement(Text, { level: 3, style: isDiscounted && style.priceTextDiscounted, testID: "price-text", body: true }, productPrice),
-        isDiscounted && (React.createElement(Text, { level: 3, style: style.discountedPriceText, testID: "discounted-price-text", body: true }, productDiscountedPrice))));
+        React.createElement(Text, { ...PRICE_VARIANT[variant], style: [isDiscounted && style.priceTextDiscounted, customStyle?.priceText], testID: "price-text" }, productPrice),
+        isDiscounted && (React.createElement(Text, { ...PRICE_VARIANT[variant], style: [style.discountedPriceText, customStyle?.discountedText], testID: "discounted-price-text" }, productDiscountedPrice))));
 };
 export { Price };

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

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

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

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

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

@@ -1,7 +1,4 @@
 declare const style: {
-    column: {
-        paddingHorizontal: number;
-    };
     row: {
         flex: number;
         justifyContent: "center";

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

@@ -1,10 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
-const { spaceXL } = theme();
 const style = StyleSheet.create({
-    column: {
-        paddingHorizontal: spaceXL,
-    },
     row: {
         flex: 1,
         justifyContent: "center",

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -6,7 +6,7 @@ import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children }) => {
     const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { level: 2, style: style.title }, titleText),
+        React.createElement(Text, { level: 3, style: style.title }, titleText),
         children));
 };
 export { HostDefaultReturnQuestionItem };

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

@@ -1,15 +1,14 @@
 import React from "react";
-import { ScrollView, View } from "react-native";
+import { ScrollView } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { theme } from "../../theme/theme";
 const { spaceXL } = theme();
 const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"] }) => {
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     return (React.createElement(SafeAreaView, { edges: edges },
-        React.createElement(ScrollView, null,
-            React.createElement(View, { style: {
-                    paddingTop: !safeAreaInsetTop ? spaceXL : 0,
-                    paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
-                } }, children))));
+        React.createElement(ScrollView, { contentContainerStyle: {
+                paddingTop: !safeAreaInsetTop ? spaceXL : 0,
+                paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+            } }, children)));
 };
 export { SafeAreaScrollView };

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

@@ -30,6 +30,8 @@ declare enum I18nMessages {
     GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
     GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button",
     FEEDBACK_TITLE = "feedback.title",
-    FEEDBACK_UNANSWERED = "feedback.unanswered"
+    FEEDBACK_UNANSWERED = "feedback.unanswered",
+    RETURN_QUESTIONS_TITLE = "return_questions.title",
+    RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button"
 }
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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

@@ -32,5 +32,7 @@ var I18nMessages;
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON"] = "get_out_of_checkout_modal.confirm_button";
     I18nMessages["FEEDBACK_TITLE"] = "feedback.title";
     I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
+    I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
+    I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
 })(I18nMessages || (I18nMessages = {}));
 export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.js

@@ -11,7 +11,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
         onContentSizeChange?.(event);
-        console.log("onContentSizeChange");
         if (!multiline || Platform.OS === "web") {
             return;
         }

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.d.ts

@@ -9,6 +9,7 @@ interface ModalProps {
     readonly onClose: () => void;
     readonly showCloseButton?: boolean;
     readonly header?: ReactNode;
+    readonly footer?: ReactNode;
     readonly portalHostName?: string;
     readonly scroll?: boolean;
     readonly size?: Partial<Record<ScreenSize, ColumnSize>>;

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -8,11 +8,12 @@ import { theme } from "../../../../theme/theme";
 import { useScreenSize } from "../../../hooks/useScreenSize";
 import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
+import { Sticky } from "../sticky/Sticky";
 import { style } from "./Modal.style";
 const { spaceXXL } = theme();
 const TRANSITION_MODAL_SCALE = 0.9;
 const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
-const Modal = ({ children, visible, header, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
+const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
     const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     // On Android safeAreaInsetTop won't return the actual value.
@@ -30,6 +31,8 @@ const Modal = ({ children, visible, header, portalHostName, onClose, showCloseBu
     useBack(handleHardwareBackPress);
     const [modalHeight, setModalHeight] = useState();
     const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
+    const [footerHeight, setFooterHeight] = useState(0);
+    const handleOnFooterLayout = useCallback(({ height }) => setFooterHeight(height), []);
     const transitions = useTransition(visible, {
         from: isSmallDevice
             ? {
@@ -70,6 +73,7 @@ const Modal = ({ children, visible, header, portalHostName, onClose, showCloseBu
                         React.createElement(View, null, header),
                         showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
                     React.createElement(ModalContentView, null,
-                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom } }, children))))))))));
+                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom + footerHeight } }, children)),
+                    footer && (React.createElement(Sticky, { style: style.stickyFooter, onLayout: handleOnFooterLayout }, footer))))))))));
 };
 export { Modal };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.d.ts

@@ -20,6 +20,9 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
         flex: number;
         zIndex: number;
     };
+    stickyFooter: {
+        paddingHorizontal: number;
+    };
     "1/4": ViewStyle;
     "1/3": ViewStyle;
     "1/2": ViewStyle;

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.js

@@ -1,6 +1,6 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceM, colorBase, colorOverlay } = theme();
+const { colorBase, colorOverlay, spaceM, spaceXL } = theme();
 const modalStylesForColumSize = {
     ["1/4"]: {
         maxWidth: `${100 * (1 / 4)}%`,
@@ -63,5 +63,8 @@ const style = StyleSheet.create({
         flex: 1,
         zIndex: 2,
     },
+    stickyFooter: {
+        paddingHorizontal: spaceXL,
+    },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface Layout {
+    readonly width: number;
+    readonly height: number;
+}
+interface StickyProps {
+    readonly children: ReactNode;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly onLayout?: ({ width, height }: Layout) => void;
+}
+declare const Sticky: FC<StickyProps>;
+export type { Layout };
+export { Sticky };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.js

@@ -0,0 +1,12 @@
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../../../theme/theme";
+import { style } from "./Sticky.style";
+const { spaceL } = theme();
+const Sticky = ({ children, style: customStyle, onLayout }) => {
+    const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => onLayout?.({ width, height }), [onLayout]);
+    return (React.createElement(View, { style: [style.sticky, { paddingBottom: safeAreaInsetBottom + spaceL }, customStyle], onLayout: handleOnLayout }, children));
+};
+export { Sticky };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.style.d.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    sticky: {
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    } | {
+        position: "sticky";
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    } | {
+        position: "absolute";
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    };
+}>;
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.style.js

@@ -0,0 +1,33 @@
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorBase, elevationLayerL, elevationRadius, spaceL } = theme();
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    sticky: {
+        backgroundColor: colorBase,
+        bottom: 0,
+        elevation: elevationLayerL,
+        paddingTop: spaceL,
+        shadowColor: colorBase,
+        shadowOffset: {
+            height: -40,
+            width: 0,
+        },
+        shadowOpacity: 1,
+        shadowRadius: elevationRadius,
+        width: "100%",
+        ...Platform.select({
+            web: {
+                position: "sticky",
+            },
+            ios: {
+                position: "absolute",
+            },
+            android: {
+                position: "absolute",
+            },
+        }),
+    },
+});
+export { style };

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

@@ -36,13 +36,13 @@ const Intro = ({ customerId }) => {
                 React.createElement(View, { style: style.content },
                     React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                     React.createElement(Text, { level: 3, style: style.subtitle, body: true }, subTitleText),
-                    React.createElement(View, { style: style.discountContainer },
+                    fiveItemsDiscount !== 0 && (React.createElement(View, { style: style.discountContainer },
                         React.createElement(View, { style: style.discount },
                             React.createElement(Text, { level: 2, heading: true },
                                 "- ",
                                 fiveItemsDiscount),
                             React.createElement(Text, { level: 3, style: style.percentage, heading: true }, "%")),
-                        React.createElement(Text, { level: 3, body: true }, discountText)),
+                        React.createElement(Text, { level: 3, body: true }, discountText))),
                     React.createElement(View, { style: style.description },
                         React.createElement(Bullet, { text: bulletOneText }),
                         React.createElement(Bullet, { text: bulletTwoText }),

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

@@ -26,7 +26,7 @@ declare const style: {
     discountContainer: {
         alignItems: "center";
         backgroundColor: string;
-        marginVertical: number;
+        marginBottom: number;
         padding: number;
         textAlign: "center";
         width: string;
@@ -35,6 +35,7 @@ declare const style: {
         marginLeft: number;
     };
     subtitle: {
+        marginBottom: number;
         textAlign: "center";
     };
     tickIcon: {

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

@@ -29,7 +29,7 @@ const style = StyleSheet.create({
     discountContainer: {
         alignItems: "center",
         backgroundColor: colorAccent,
-        marginVertical: spaceL,
+        marginBottom: spaceL,
         padding: spaceM,
         textAlign: "center",
         width: "100%",
@@ -38,6 +38,7 @@ const style = StyleSheet.create({
         marginLeft: spaceXS,
     },
     subtitle: {
+        marginBottom: spaceXL,
         textAlign: "center",
     },
     tickIcon: {

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

@@ -2,7 +2,9 @@ import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import { useParams } from "react-router-native";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { bookedSizeReplaceableProductVariants as bookedSizeReplaceableProductVariantsMock } from "../../../projection/bookedSizeReplaceableProductVariants/bookedSizeReplaceableProductVariants.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { feedback as feedbackMock } from "../../../projection/feedback/feedback.mock";
 import { returnQuestions as returnQuestionsMock } from "../../../projection/returnQuestion/returnQuestions.mock";
@@ -10,6 +12,8 @@ import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Item.style";
+import { CustomerDecissionBanner } from "./components/banner/CustomerDecissionBanner";
+import { ItemActions } from "./components/itemActions/ItemActions";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/ReturnQuestionsFeedback";
@@ -18,27 +22,41 @@ const Item = ({ customerId }) => {
     const { id } = useParams();
     const [checkout, status] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    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(() => void 0, []);
+    const handleOnSubmit = useCallback(() => handleOnHideReturnQuestions(), [handleOnHideReturnQuestions]);
+    const handleOnKeep = useCallback(() => void 0, []);
+    const handleOnReplace = useCallback(() => void 0, []);
+    const handleOnReturn = useCallback(() => void 0, []);
+    const handleOnBannerPress = useCallback(() => void 0, []);
     if (status === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
     const { media, brand, name, size, color } = checkoutItem.productVariant;
+    const customerDecissionMade = checkoutItem.status === CheckoutItemStatus.INITIAL || checkoutItem.status === CheckoutItemStatus.EXPIRED;
     const returnQuestions = returnQuestionsMock;
     const feedback = feedbackMock;
+    const sizes = bookedSizeReplaceableProductVariantsMock.productVariants
+        .map((productVariant) => productVariant.size)
+        .concat(checkoutItem.productVariant.size);
     return (React.createElement(React.Fragment, null,
         React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, null,
-                React.createElement(View, { style: style.sliderContainer },
-                    React.createElement(ProductVariantSlider, { producVariantMedia: media })),
-                React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: size }),
-                Object.entries(feedback).length !== 0 && (React.createElement(View, { style: style.feedbackContainer },
-                    React.createElement(ReturnQuestionsFeedback, { feedback: feedback, returnQuestions: returnQuestions, onEditFeedback: handleOnEditFeedback }))),
-                React.createElement(View, { style: { flexDirection: "row", justifyContent: "center" } },
-                    React.createElement(TouchableHighlight, { onPress: handleOnShowReturnQuestions },
-                        React.createElement(Text, { style: { padding: 16 } }, "show return questions"))))),
-        React.createElement(ReturnQuestionsForm, { feedback: feedback, returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions })));
+                !customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
+                React.createElement(View, { style: [style.container, { paddingBottom: stickyHeight }] },
+                    React.createElement(View, { style: style.sliderContainer },
+                        React.createElement(ProductVariantSlider, { producVariantMedia: media })),
+                    React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: size }),
+                    Object.entries(feedback).length !== 0 && (React.createElement(View, { style: style.feedbackContainer },
+                        React.createElement(ReturnQuestionsFeedback, { feedback: feedback, returnQuestions: returnQuestions, onEditFeedback: handleOnEditFeedback }))),
+                    React.createElement(View, { style: { flexDirection: "row", justifyContent: "center" } },
+                        React.createElement(TouchableHighlight, { onPress: handleOnShowReturnQuestions },
+                            React.createElement(Text, { style: { padding: 16 } }, "show return questions")))))),
+        customerDecissionMade && (React.createElement(ItemActions, { size: checkoutItem.productVariant.size, sizes: sizes, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn })),
+        React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, feedback: feedback, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
 };
 export { Item };

package/dist/infrastructure/ui/views/item/Item.style.d.ts

@@ -1,4 +1,7 @@
 declare const style: {
+    container: {
+        paddingHorizontal: number;
+    };
     feedbackContainer: {
         borderTopColor: string;
         borderTopWidth: number;

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

@@ -2,6 +2,9 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorGrayscaleM, spaceXL } = theme();
 const style = StyleSheet.create({
+    container: {
+        paddingHorizontal: spaceXL,
+    },
     feedbackContainer: {
         borderTopColor: colorGrayscaleM,
         borderTopWidth: borderSize,

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { SizeProjection } from "../../../../../../projection/shared/size";
+import { Layout } from "../../../../shared/components/layouts/sticky/Sticky";
+interface ItemActionsProps {
+    readonly sizes: SizeProjection[];
+    readonly size: SizeProjection;
+    readonly onKeep: (value: string) => void;
+    readonly onReturn: () => void;
+    readonly onReplace: () => void;
+    readonly onLayout?: ({ width, height }: Layout) => void;
+}
+declare const ItemActions: FC<ItemActionsProps>;
+export { ItemActions };

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

@@ -0,0 +1,25 @@
+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 { 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 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]);
+    return (React.createElement(Sticky, { onLayout: onLayout },
+        React.createElement(Body, { style: { column: style.container } },
+            React.createElement(Button, { 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 })),
+                React.createElement(View, { style: style.returnButtonContainer },
+                    React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));
+};
+export { ItemActions };

package/dist/infrastructure/ui/views/item/components/{productVariantActions/ProductVariantActions.style.d.ts → itemActions/ItemActions.style.d.ts}

@@ -1,6 +1,6 @@
 declare const style: {
     container: {
-        width: string;
+        paddingHorizontal: number;
     };
     returnButtonContainer: {
         flex: number;

package/dist/infrastructure/ui/views/item/components/{productVariantActions/ProductVariantActions.style.js → itemActions/ItemActions.style.js}

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceL } = theme();
+const { spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
     container: {
-        width: "100%",
+        paddingHorizontal: spaceXL,
     },
     returnButtonContainer: {
         flex: 1,

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { ColorProjection, MediaProjection, PriceProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { SizeProjection } from "../../../../../../projection/shared/size";
+interface ProductVariantProps {
+    readonly media: MediaProjection[];
+    readonly brand: string;
+    readonly name: string;
+    readonly price: PriceProjection;
+    readonly size: SizeProjection;
+    readonly color: ColorProjection;
+}
+declare const ProductVariant: FC<ProductVariantProps>;
+export { ProductVariant };

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js

@@ -0,0 +1,30 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { Image, View } from "react-native";
+import { Price } from "../../../../components/atoms/price/Price";
+import { useMediaImage } from "../../../../hooks/useMediaImage";
+import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
+import { IMAGE_WIDTH, style } from "./ProductVariant.style";
+const ProductVariant = ({ media, brand, name, price, size, color }) => {
+    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    const colorLabel = useI18nMessage({ id: color.label, prefix: COLOR_I18N_PREFIX });
+    const cdnImageUrl = useMediaImage();
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Image, { resizeMode: "contain", style: style.media, testID: "product-variant-media", source: {
+                uri: cdnImageUrl({
+                    url: media[0]?.url,
+                    width: IMAGE_WIDTH,
+                }),
+            } }),
+        React.createElement(View, { style: style.descriptionContainer },
+            React.createElement(View, null,
+                React.createElement(Text, { level: 2, style: style.brand, detail: true }, brand),
+                React.createElement(Text, { level: 2, detail: true }, name),
+                React.createElement(Text, { level: 2, style: style.priceAndColor, detail: true },
+                    size.unique ? uniqueText : size.lookiero,
+                    " / ",
+                    colorLabel)),
+            React.createElement(Price, { price: price, variant: "detail" }))));
+};
+export { ProductVariant };

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts

@@ -0,0 +1,23 @@
+declare const IMAGE_WIDTH = 96;
+declare const style: {
+    brand: {
+        color: string;
+    };
+    container: {
+        flexDirection: "row";
+    };
+    descriptionContainer: {
+        justifyContent: "space-between";
+        marginLeft: number;
+    };
+    media: {
+        borderColor: string;
+        borderWidth: number;
+        height: number;
+        width: number;
+    };
+    priceAndColor: {
+        color: string;
+    };
+};
+export { style, IMAGE_WIDTH };

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { borderSize, colorGrayscaleL, spaceS } = theme();
+const IMAGE_WIDTH = 96;
+const IMAGE_HEIGHT = 120;
+const style = StyleSheet.create({
+    brand: {
+        color: colorGrayscaleL,
+    },
+    container: {
+        flexDirection: "row",
+    },
+    descriptionContainer: {
+        justifyContent: "space-between",
+        marginLeft: spaceS,
+    },
+    media: {
+        borderColor: colorGrayscaleL,
+        borderWidth: borderSize,
+        height: IMAGE_HEIGHT,
+        width: IMAGE_WIDTH,
+    },
+    priceAndColor: {
+        color: colorGrayscaleL,
+    },
+});
+export { style, IMAGE_WIDTH };

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
-import { ColorProjection, PriceProjection, SizeProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { ColorProjection, PriceProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { SizeProjection } from "../../../../../../projection/shared/size";
 interface ProductVariantDescriptionProps {
     readonly brand: string;
     readonly name: string;

package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -8,7 +8,7 @@ import { ReturnQuestionFeedbackProvider } from "../../../../components/organisms
 import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
 import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
-import { I18nMessages, RETURN_QUESTIONS_PREFIX } from "../../../../i18n/i18n";
+import { I18nMessages, RETURN_QUESTIONS_FEEDBACK_PREFIX } from "../../../../i18n/i18n";
 import { ButtonIcon } from "../../../../shared/components/molecules/buttonIcon/ButtonIcon";
 import { style } from "./ReturnQuestionsFeedback.style";
 const returnQuestionItems = {
@@ -20,7 +20,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
 };
 const ReturnQuestionsFeedback = ({ feedback, returnQuestions, onEditFeedback }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE, prefix: RETURN_QUESTIONS_PREFIX });
+    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE, prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX });
     return (React.createElement(View, null,
         React.createElement(View, { style: style.titleContainer },
             React.createElement(Text, { level: 2, style: style.title }, titleText),

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -1,10 +1,14 @@
 import { FC } from "react";
+import { CheckoutItemProductVariantProjection, PriceProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
 interface ReturnQuestionsFormProps {
     readonly visible: boolean;
     readonly feedback: FeedbackProjection;
     readonly returnQuestions: ReturnQuestionProjection[];
+    readonly checkoutItemPrice: PriceProjection;
+    readonly productVariant: CheckoutItemProductVariantProjection;
+    readonly onSubmit: () => void;
     readonly onClose: () => void;
 }
 declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -1,4 +1,7 @@
 import { PortalHost } from "@gorhom/portal";
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { View } from "react-native";
 import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
@@ -10,7 +13,9 @@ import { HostSelectReturnQuestionItem } from "../../../../components/organisms/r
 import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem";
 import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { I18nMessages, RETURN_QUESTIONS_PREFIX } from "../../../../i18n/i18n";
 import { Modal } from "../../../../shared/components/layouts/modal/Modal";
+import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ReturnQuestionsForm.style";
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 const returnQuestionItems = {
@@ -21,10 +26,20 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
     [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
 };
-const ReturnQuestionsForm = ({ feedback, returnQuestions, onClose, visible }) => (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
-    React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
-        React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
-        React.createElement(Modal, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
-            React.createElement(View, { style: style.returnQuestionsContainer },
-                React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }))))));
+const ReturnQuestionsForm = ({ feedback, returnQuestions, checkoutItemPrice, productVariant, visible, onSubmit, onClose, }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE, prefix: RETURN_QUESTIONS_PREFIX });
+    const submitButtonText = useI18nMessage({
+        id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON,
+        prefix: RETURN_QUESTIONS_PREFIX,
+    });
+    const { media, brand, name, size, color } = productVariant;
+    return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
+        React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+            React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
+            React.createElement(Modal, { footer: React.createElement(Button, { onPress: onSubmit }, submitButtonText), portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
+                React.createElement(View, { style: style.returnQuestionsContainer },
+                    React.createElement(Text, { level: 2, style: style.title }, titleText),
+                    React.createElement(ProductVariant, { brand: brand, color: color, media: media, name: name, price: checkoutItemPrice, size: size }),
+                    React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }))))));
+};
 export { ReturnQuestionsForm };

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -3,5 +3,9 @@ declare const style: {
         paddingBottom: number;
         paddingHorizontal: number;
     };
+    title: {
+        marginBottom: number;
+        textAlign: "center";
+    };
 };
 export { style };

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -6,5 +6,9 @@ const style = StyleSheet.create({
         paddingBottom: spaceXL,
         paddingHorizontal: spaceXL,
     },
+    title: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
 });
 export { style };

package/dist/projection/bookedSizeReplaceableProductVariants/viewBookedSizeReplaceableProductVariantsForCheckoutItem.d.ts

@@ -1,19 +1,8 @@
 import { CancelableQueryViewArgs, Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
-interface SizeFormat {
-    readonly format: string;
-    readonly length?: string;
-    readonly size: string;
-}
-interface Size {
-    readonly id: string;
-    readonly europe: SizeFormat;
-    readonly it: SizeFormat;
-    readonly lookiero: SizeFormat;
-    readonly uk: SizeFormat;
-}
+import { SizeProjection } from "../shared/size";
 interface ProductVariant {
     readonly id: string;
-    readonly size: Size;
+    readonly size: SizeProjection;
 }
 interface BookedSizeReplaceableProductVariantsProjection {
     readonly booking: string | null;
@@ -40,5 +29,5 @@ interface ViewBookedSizeReplaceableProductVariantsForCheckoutItemHandlerFunction
     readonly view: BookedSizeReplaceableProductVariantsForCheckoutItemView;
 }
 declare const viewBookedSizeReplaceableProductVariantsForCheckoutItemHandler: QueryHandlerFunction<ViewBookedSizeReplaceableProductVariantsForCheckoutItem, ViewBookedSizeReplaceableProductVariantsForCheckoutItemResult, ViewBookedSizeReplaceableProductVariantsForCheckoutItemHandlerFunctionArgs>;
-export type { Size, ProductVariant, BookedSizeReplaceableProductVariantsProjection, BookedSizeReplaceableProductVariantsForCheckoutItemView, };
+export type { ProductVariant, BookedSizeReplaceableProductVariantsProjection, BookedSizeReplaceableProductVariantsForCheckoutItemView, };
 export { VIEW_BOOKED_SIZE_REPLACEABLE_PRODUCT_VARIANTS_FOR_CHECKOUT_ITEM, viewBookedSizeReplaceableProductVariantsForCheckoutItem, viewBookedSizeReplaceableProductVariantsForCheckoutItemHandler, };

package/dist/projection/checkoutItem/checkoutItem.d.ts

@@ -1,6 +1,7 @@
 import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
 import { FeedbackProjection } from "../feedback/feedback";
+import { SizeProjection } from "../shared/size";
 declare enum MediaPerspective {
     BACK = "BACK",
     BOTTOM_UP = "BOTTOM_UP",
@@ -28,15 +29,6 @@ interface PriceProjection {
         readonly percentage: number;
     };
 }
-interface SizeProjection {
-    readonly id: string;
-    readonly lookiero: string;
-    readonly uk: string;
-    readonly it: string;
-    readonly europe: string;
-    readonly unique: boolean;
-    readonly visualOrder?: number;
-}
 interface ColorProjection {
     readonly id: string;
     readonly label: string;
@@ -57,5 +49,5 @@ interface CheckoutItemProjection {
     readonly productVariant: CheckoutItemProductVariantProjection;
     readonly feedback: FeedbackProjection | undefined;
 }
-export type { CheckoutItemProjection, CheckoutItemProductVariantProjection, ColorProjection, MediaProjection, PriceProjection, SizeProjection, };
+export type { CheckoutItemProjection, CheckoutItemProductVariantProjection, ColorProjection, MediaProjection, PriceProjection, };
 export { Currency, MediaPerspective };

package/dist/projection/shared/size.d.ts

@@ -0,0 +1,10 @@
+interface SizeProjection {
+    readonly id: string;
+    readonly lookiero: string;
+    readonly uk: string;
+    readonly it: string;
+    readonly europe: string;
+    readonly unique: boolean;
+    readonly visualOrder?: number;
+}
+export type { SizeProjection };

package/dist/projection/shared/size.js

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

package/package.json

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

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.d.ts

@@ -1,11 +0,0 @@
-import { FC } from "react";
-import { SizeProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-interface ProductVariantActionsProps {
-    readonly sizes: SizeProjection[];
-    readonly size: SizeProjection;
-    readonly onKeep: (value: string) => void;
-    readonly onReturn: () => void;
-    readonly onReplace: () => void;
-}
-declare const ProductVariantActions: FC<ProductVariantActionsProps>;
-export { ProductVariantActions };

package/dist/infrastructure/ui/views/item/components/productVariantActions/ProductVariantActions.js

@@ -1,22 +0,0 @@
-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 { View } from "react-native";
-import { I18nMessages } from "../../../../i18n/i18n";
-import { SelectField } from "../../../../shared/components/molecules/selectField/SelectField";
-import { style } from "./ProductVariantActions.style";
-const ProductVariantActions = ({ sizes, size, onKeep, onReplace, onReturn }) => {
-    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]);
-    return (React.createElement(View, { style: style.container },
-        React.createElement(Button, { 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 })),
-            React.createElement(View, { style: style.returnButtonContainer },
-                React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText)))));
-};
-export { ProductVariantActions };