@lookiero/checkout 0.3.26 → 0.4.0-beta.0

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/shared/components/molecules/buttonIcon/ButtonIcon.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { StyleProp, TouchableHighlightProps, ViewStyle } from "react-native";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+interface ButtonIconStyle {
+    readonly button: StyleProp<ViewStyle>;
+    readonly icon: IconStyle;
+}
+interface ButtonIconBaseProps {
+    readonly name: IconName;
+    readonly testID?: string;
+    readonly style?: Partial<ButtonIconStyle>;
+}
+interface ButtonIconProps extends Omit<TouchableHighlightProps, keyof ButtonIconBaseProps>, ButtonIconBaseProps {
+}
+declare const ButtonIcon: FC<ButtonIconProps>;
+export { ButtonIcon };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { TouchableHighlight } from "react-native";
+import { Icon } from "../../atoms/icon/Icon";
+import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
+const ButtonIcon = ({ name, style: customStyle, testID = "button-icon", onPress, ...restProps }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], testID: testID, underlayColor: buttonIconUnderlayColor, onPress: onPress, ...restProps },
+    React.createElement(Icon, { name: name, style: customStyle?.icon })));
+export { ButtonIcon };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.style.d.ts

@@ -0,0 +1,7 @@
+declare const buttonIconUnderlayColor: string;
+declare const style: {
+    buttonIcon: {
+        padding: number;
+    };
+};
+export { style, buttonIconUnderlayColor };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceS, colorGrayscaleS } = theme();
+const buttonIconUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    buttonIcon: {
+        padding: spaceS,
+    },
+});
+export { style, buttonIconUnderlayColor };

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

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ErrorStyle } from "../../atoms/error/Error";
+import { FieldStyle } from "../../atoms/field/Field";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+import { InputProps, InputStyle } from "../../atoms/input/Input";
+declare type InputFieldStyle = FieldStyle & {
+    readonly inputField: StyleProp<ViewStyle>;
+    readonly input: InputStyle;
+    readonly error: ErrorStyle;
+    readonly icon: IconStyle;
+};
+interface InputFieldBaseProps {
+    readonly label: string;
+    readonly multiline?: boolean;
+    readonly error?: string | null;
+    readonly style?: Partial<InputFieldStyle>;
+    readonly onChange?: (value: string) => void;
+    readonly icon?: IconName;
+}
+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/inputField/InputField.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
+import { theme } from "../../../../theme/theme";
+import { Error } from "../../atoms/error/Error";
+import { Field } from "../../atoms/field/Field";
+import { Icon } from "../../atoms/icon/Icon";
+import { Input } from "../../atoms/input/Input";
+import { style } from "./InputField.style";
+const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
+const inputPaddingRightWithIcon = iconSize + spaceM * 2;
+const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const handleOnChange = useCallback((text) => onChange(text), [onChange]);
+    const handleOnBlur = useCallback(() => setIsFocused(false), []);
+    const handleOnFocus = useCallback(() => setIsFocused(true), []);
+    const color = error ? colorPrimary : isFocused ? colorContent : colorGrayscaleL;
+    return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
+        React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
+                field: [style.field, customStyle?.field],
+                fieldText: [{ color }, customStyle?.fieldText],
+            } }),
+        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
+        !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
+        !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
+};
+export { InputField };

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

@@ -0,0 +1,17 @@
+declare const style: {
+    error: {
+        marginLeft: number;
+        marginTop: number;
+    };
+    field: {
+        position: "absolute";
+        zIndex: number;
+    };
+    icon: {
+        position: "absolute";
+        right: number;
+        top: number;
+        zIndex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXS, spaceS, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    error: {
+        marginLeft: spaceL,
+        marginTop: spaceXS,
+    },
+    field: {
+        position: "absolute",
+        zIndex: 4,
+    },
+    icon: {
+        position: "absolute",
+        right: spaceS,
+        top: spaceM,
+        zIndex: 4,
+    },
+});
+export { style };

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

@@ -0,0 +1,26 @@
+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;
+    readonly value: string;
+}
+interface SelectFieldBaseProps {
+    readonly placeholder: string;
+    readonly value: string | undefined;
+    readonly options: Option[];
+    readonly style?: Partial<SelectFieldStyle>;
+    readonly onChange?: (value: string) => void;
+}
+interface SelectFieldProps extends Omit<TouchableHighlightProps, keyof SelectFieldBaseProps>, SelectFieldBaseProps {
+}
+declare const SelectField: FC<SelectFieldProps>;
+export type { Option };
+export { SelectField };

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

@@ -0,0 +1,26 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import React, { useCallback, useMemo, useState } from "react";
+import { TouchableHighlight, View } from "react-native";
+import { theme } from "../../../../theme/theme";
+import { Modal } from "../../layouts/modal/Modal";
+import { InputField } from "../inputField/InputField";
+import { style } from "./SelectField.style";
+const { colorGrayscaleS } = theme();
+const SelectField = ({ placeholder, value, options, style: customStyle, onChange = () => void 0, ...touchableRestProps }) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
+    const handleOnModalClose = useCallback(() => setModalVisible(false), []);
+    const handleOnPressOption = useCallback((value) => {
+        onChange(value);
+        handleOnModalClose();
+    }, [handleOnModalClose, onChange]);
+    const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
+    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, 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))))))));
+};
+export { SelectField };

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

@@ -0,0 +1,15 @@
+declare const style: {
+    modalContent: {
+        paddingBottom: number;
+        paddingHorizontal: number;
+    };
+    option: {
+        borderBottomColor: string;
+        borderBottomWidth: number;
+        paddingVertical: number;
+    };
+    optionText: {
+        lineHeight: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { borderSize, colorGrayscaleS, spaceM, spaceXL } = theme();
+const style = StyleSheet.create({
+    modalContent: {
+        paddingBottom: spaceXL,
+        paddingHorizontal: spaceXL,
+    },
+    option: {
+        borderBottomColor: colorGrayscaleS,
+        borderBottomWidth: borderSize,
+        paddingVertical: spaceM,
+    },
+    optionText: {
+        lineHeight: 24,
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.d.ts

@@ -0,0 +1,4 @@
+declare type ScreenSize = "S" | "M" | "L";
+declare const useScreenSize: () => ScreenSize;
+export type { ScreenSize };
+export { useScreenSize };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.js

@@ -0,0 +1,9 @@
+import { useDevice } from "@lookiero/aurora-next/build/hooks/useDevice/useDevice";
+const useScreenSize = () => {
+    const { screen } = useDevice();
+    const screenSize = Object.entries(screen)
+        .filter(([key]) => ["S", "M", "L"].includes(key))
+        .find(([, value]) => value);
+    return screenSize?.[0];
+};
+export { useScreenSize };

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

@@ -0,0 +1,10 @@
+import { DefaultTheme } from "@lookiero/aurora-next/build/theming/theme.default";
+declare type Remove$PrefixFromKeys<T> = {
+    [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
+};
+declare type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
+interface ThemeFunction {
+    (): AuroraTheme;
+}
+declare const theme: ThemeFunction;
+export { theme };

package/dist/infrastructure/ui/theme/theme.js

@@ -0,0 +1,5 @@
+import { Theme } from "@lookiero/aurora-next/build/theming/Theme";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const theme = () => Theme.get();
+export { theme };

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface AppProps {
+    readonly children: JSX.Element;
+}
+declare const App: FC<AppProps>;
+export { App };

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

@@ -0,0 +1,6 @@
+import { PortalProvider } from "@gorhom/portal";
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
+    React.createElement(PortalProvider, null, children)));
+export { App };

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+declare type IntroProps = {
+    readonly customerId: string;
+};
+declare const Intro: FC<IntroProps>;
+export { Intro };

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

@@ -0,0 +1,51 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Icon } from "@lookiero/aurora-next/build/components/primitives/Icon/Icon";
+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 React from "react";
+import { View } from "react-native";
+import { useIncrementIntroShownCount } from "../../../domain/uiSetting/react/useIncrementIntroShownCount";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
+import { I18nMessages } from "../../i18n/i18n";
+import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
+import { style } from "./Intro.style";
+const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
+    React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
+    React.createElement(Text, { level: 2, detail: true }, text)));
+const Intro = ({ customerId }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
+    const subTitleText = useI18nMessage({ id: I18nMessages.INTRO_SUBTITLE });
+    const discountText = useI18nMessage({ id: I18nMessages.INTRO_DISCOUNT });
+    const bulletOneText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_ONE });
+    const bulletTwoText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_TWO });
+    const bulletThreeText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_THREE });
+    const buttonText = useI18nMessage({ id: I18nMessages.INTRO_BUTTON });
+    const [fiveItemsDiscount, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({
+        customerId,
+    });
+    const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
+    if (fiveItemsDiscountStatus === QueryStatus.LOADING)
+        return React.createElement(Spinner, null);
+    return (React.createElement(SafeAreaScrollView, null,
+        React.createElement(Body, { style: { column: style.bodyColumn } },
+            React.createElement(View, { style: style.container },
+                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),
+                    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(View, { style: style.description },
+                        React.createElement(Bullet, { text: bulletOneText }),
+                        React.createElement(Bullet, { text: bulletTwoText }),
+                        React.createElement(Bullet, { text: bulletThreeText }))),
+                React.createElement(Button, { disabled: incrementIntroShownCountStatus === CommandStatus.LOADING, onPress: incrementIntroShownCount }, buttonText)))));
+};
+export { Intro };

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

@@ -0,0 +1,52 @@
+declare const style: {
+    bodyColumn: {
+        paddingHorizontal: number;
+    };
+    bullet: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginVertical: number;
+    };
+    container: {
+        flex: number;
+        justifyContent: "space-between";
+    };
+    content: {
+        alignItems: "center";
+    };
+    description: {
+        borderWidth: number;
+        marginBottom: number;
+        padding: number;
+        width: string;
+    };
+    discount: {
+        alignItems: "flex-end";
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+    };
+    discountContainer: {
+        alignItems: "center";
+        backgroundColor: string;
+        marginBottom: number;
+        padding: number;
+        textAlign: "center";
+        width: string;
+    };
+    percentage: {
+        marginLeft: number;
+    };
+    subtitle: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    tickIcon: {
+        marginRight: number;
+    };
+    title: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+};
+export { style };

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

@@ -0,0 +1,55 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
+const style = StyleSheet.create({
+    bodyColumn: {
+        paddingHorizontal: spaceXL,
+    },
+    bullet: {
+        alignItems: "center",
+        flexDirection: "row",
+        marginVertical: spaceS,
+    },
+    container: {
+        flex: 1,
+        justifyContent: "space-between",
+    },
+    content: {
+        alignItems: "center",
+    },
+    description: {
+        borderWidth: borderSize,
+        marginBottom: spaceXL,
+        padding: spaceM,
+        width: "100%",
+    },
+    discount: {
+        alignItems: "flex-end",
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: spaceS,
+    },
+    discountContainer: {
+        alignItems: "center",
+        backgroundColor: colorAccent,
+        marginBottom: spaceL,
+        padding: spaceM,
+        textAlign: "center",
+        width: "100%",
+    },
+    percentage: {
+        marginLeft: spaceXS,
+    },
+    subtitle: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
+    tickIcon: {
+        marginRight: spaceS,
+    },
+    title: {
+        marginBottom: spaceM,
+        textAlign: "center",
+    },
+});
+export { style };

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+interface ItemProps {
+    readonly customerId: string;
+}
+declare const Item: FC<ItemProps>;
+export { Item };

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

@@ -0,0 +1,97 @@
+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";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+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";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+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";
+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,
+    });
+    const [bookCheckouBooking] = useBookCheckouBookingForCheckoutItem({
+        checkoutBookingId: bookedSizeChangeProductsVariants?.id,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
+    const [returnQuestions, returnQuestionsStatus] = useListReturnQuestionsByCheckoutItemId({
+        checkoutItemId: checkoutItem.id,
+    });
+    const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id });
+    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(() => {
+        checkout?.bookingId === undefined && bookCheckouBooking();
+    }, [bookCheckouBooking, checkout?.bookingId]);
+    const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
+    const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
+    const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
+    const handleOnEditFeedback = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
+    const handleOnSubmit = useCallback((feedback) => {
+        handleOnHideReturnQuestions();
+        returnCheckoutItem({ feedbacks: feedback });
+    }, [handleOnHideReturnQuestions, returnCheckoutItem]);
+    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) &&
+        dependenciesLoadedStatuses.includes(checkoutStatus) &&
+        dependenciesLoadedStatuses.includes(bookedSizeChangeProductsVariantsStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
+    const { price } = checkoutItem;
+    const { media, brand, name, size, color } = checkoutItem.productVariant;
+    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 })),
+                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 }),
+                    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, 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/Item.style.d.ts

@@ -0,0 +1,15 @@
+declare const style: {
+    container: {
+        paddingHorizontal: number;
+    };
+    feedbackContainer: {
+        borderTopColor: string;
+        borderTopWidth: number;
+        marginVertical: number;
+    };
+    sliderContainer: {
+        marginBottom: number;
+        minHeight: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,18 @@
+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,
+        marginVertical: spaceXL,
+    },
+    sliderContainer: {
+        marginBottom: spaceXL,
+        minHeight: 500,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+declare type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL | CheckoutItemStatus.EXPIRED>;
+interface CustomerDecissionBannerProps {
+    readonly checkoutItemStatus: CustomerDecissionBannerStatus;
+    readonly onPress: () => void;
+}
+declare const CustomerDecissionBanner: FC<CustomerDecissionBannerProps>;
+export type { CustomerDecissionBannerStatus };
+export { CustomerDecissionBanner };