@lookiero/checkout 5.3.0 → 6.0.0-beta.0

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+    buttonContainer: {
+        paddingHorizontal: space6,
+        paddingVertical: space8,
+    },
+});
+export { style };

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { Layout } from "../../components/layouts/layout/Layout";
+interface ItemProps {
+    readonly layout: Layout;
+}
+declare const Item: FC<ItemProps>;
+export { Item };

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

@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
+import { Box, Spinner } from "@lookiero/aurora";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { useTrackItemPageView } from "../../../tracking/useTrackItemPageView";
+import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
+import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
+import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
+import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
+import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ItemDetailHeader } from "../../components/templates/header/itemDetailHeader/ItemDetailHeader";
+import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
+import { NewFeedbackExperimentVariation, useNewFeedbackExperiment } from "../../hooks/useNewFeedbackExperiment";
+import { useStaticInfo } from "../../hooks/useStaticInfo";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./Item.style";
+import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
+import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
+import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
+const Item = ({ layout: Layout }) => {
+    const logger = useLogger();
+    const screenSize = useScreenSize();
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const isDesktopScreen = screenSize !== "S";
+    const { id } = useParams();
+    const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    /* Kameleoon experiment */
+    const newFeedbackVariation = useNewFeedbackExperiment();
+    const redirectToReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+    /* Kameleoon experiment */
+    /* SizeChange and Booking */
+    const [isSizeChangeEnabled, sizeChangeEnabledStatus] = useViewIsSizeChangeEnabledByCheckoutId({
+        checkoutId: checkout?.id,
+    });
+    const [bookedProductsVariants, bookedProductsVariantsStatus] = useViewBookedProductsVariantsForCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+    });
+    const isBookingRequired = bookedProductsVariants === null && isSizeChangeEnabled;
+    const [bookCheckoutBooking] = useBookCheckoutBookingForCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+        checkoutBookingId: checkout?.checkoutBookingId,
+        logger,
+    });
+    // This reference is used for the effect not be triggered twice
+    // (bookCheckoutBooking changes when the checkout has a proper checkoutBookingId)
+    const bookCheckoutBookingRef = useRef(bookCheckoutBooking);
+    bookCheckoutBookingRef.current = bookCheckoutBooking;
+    useEffect(() => {
+        if (isBookingRequired) {
+            bookCheckoutBookingRef.current();
+        }
+    }, [isBookingRequired]);
+    /* SizeChange and Booking */
+    /* ReturnCheckoutItem */
+    const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
+        checkoutItemId: checkoutItem.id,
+    });
+    const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
+    const showReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
+    const hideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
+    const goToReturnPage = useCallback(() => {
+        navigate(`${basePath}/${generatePath(Routes.RETURN, { id: checkoutItem.id })}`);
+    }, [basePath, checkoutItem.id, navigate]);
+    const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+        logger,
+    });
+    const trackReturnItem = useTrackReturnItem({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
+    const returnItem = useCallback(async (feedbacks) => {
+        hideReturnQuestions();
+        returnCheckoutItem({ feedbacks });
+        trackReturnItem();
+    }, [hideReturnQuestions, returnCheckoutItem, trackReturnItem]);
+    /* ReturnCheckoutItem */
+    const currentProductVariant = useMemo(() => checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+        ? { id: checkoutItem.replacedFor.id, size: checkoutItem.replacedFor.size }
+        : { id: checkoutItem.productVariant.id, size: checkoutItem.productVariant.size }, [checkoutItem.productVariant.id, checkoutItem.productVariant.size, checkoutItem.replacedFor, checkoutItem.status]);
+    const replaceableFor = useMemo(() => sizeChangeEnabledStatus === QueryStatus.SUCCESS
+        ? isSizeChangeEnabled
+            ? bookedProductsVariants
+                ? bookedProductsVariants.productVariants
+                    .filter(({ id }) => id !== currentProductVariant.id)
+                    .map(({ size }) => size.lookiero)
+                : undefined
+            : []
+        : undefined, [bookedProductsVariants, currentProductVariant.id, isSizeChangeEnabled, sizeChangeEnabledStatus]);
+    useTrackItemPageView({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+        status: checkoutItem.status,
+        productVariantId: checkoutItem.productVariant.id,
+        replaceableFor,
+        unique: checkoutItem.productVariant.size.unique,
+    });
+    const trackPressNext = useTrackPressNext({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId: checkout?.id,
+    });
+    const handleOnNext = useCallback(({ from, to }) => trackPressNext({ from, to }), [trackPressNext]);
+    const trackPressPrevious = useTrackPressPrevious({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId: checkout?.id,
+    });
+    const handleOnPrevious = useCallback(({ from, to }) => trackPressPrevious({ from, to }), [trackPressPrevious]);
+    const trackPressBack = useTrackPressBack({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId: checkout?.id,
+    });
+    const handleOnBack = useCallback(() => {
+        trackPressBack();
+        navigate(-1);
+    }, [navigate, trackPressBack]);
+    const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+    const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
+        itemDetailRouteMatch ? (React.createElement(ItemDetailHeader, { onBack: handleOnBack })) : (React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: handleOnNext, onPrevious: handleOnPrevious })),
+        fiveItemsDiscount !== 0 ? React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }) : null)), [
+        checkout?.items,
+        checkoutItem,
+        fiveItemsDiscount,
+        handleOnBack,
+        handleOnNext,
+        handleOnPrevious,
+        itemDetailRouteMatch,
+    ]);
+    const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
+    const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING &&
+        checkout &&
+        checkoutItem &&
+        returnQuestions &&
+        // This will ensure that the view is not shown until bookCheckoutBooking use-case is dispatched (if required)
+        bookedProductsVariantsStatus !== QueryStatus.LOADING &&
+        fiveItemsDiscountStatus !== QueryStatus.LOADING &&
+        sizeChangeEnabledStatus !== QueryStatus.LOADING &&
+        (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true) &&
+        returnCheckoutItemStatus !== CommandStatus.LOADING;
+    if (!dependenciesLoaded) {
+        return React.createElement(Spinner, { testID: "spinner" });
+    }
+    return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
+        React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
+                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+                scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
+                safeAreaView: isDesktopScreen ? style.safeAreaView : null,
+            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, onReturn: redirectToReturnPage ? goToReturnPage : showReturnQuestions })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: redirectToReturnPage ? goToReturnPage : showReturnQuestions }))),
+        !redirectToReturnPage ? (React.createElement(ReturnQuestionsForm, { returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: hideReturnQuestions, onSubmit: returnItem })) : null));
+};
+export { Item };

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

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { colorBgPrimaryLight } = theme();
+const style = StyleSheet.create({
+    header: {
+        height: HEADER_HEIGHT,
+    },
+    headerWithDoubleHeight: {
+        height: HEADER_HEIGHT * 2,
+    },
+    headerWrapper: {
+        display: "flex",
+        flexDirection: "column",
+    },
+    safeAreaView: {
+        backgroundColor: colorBgPrimaryLight,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { InfoBox, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./CustomerDecissionBanner.style";
+const i18nMessageForCheckoutItemStatus = {
+    [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
+    [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
+    [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
+};
+const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
+    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+    const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
+    const screenSize = useScreenSize();
+    const isSmallScreen = screenSize === "S";
+    return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },
+        React.createElement(InfoBox, { text: decissionText },
+            React.createElement(Pressable, { testID: "customer-decission-banner", onPress: onPress },
+                React.createElement(Text, { level: isSmallScreen ? 2 : 1, detail: true, underlined: true }, bannerButtonText)))));
+};
+export { CustomerDecissionBanner };

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space4, space6 } = theme();
+const style = StyleSheet.create({
+    container: {
+        marginBottom: space4,
+    },
+    smallContainer: {
+        marginHorizontal: space6,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./GetOutOfCheckoutModal.style";
+const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
+    const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
+    const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
+    return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
+        React.createElement(View, { style: style.modalContent },
+            React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
+            React.createElement(Text, { level: 3, style: style.description }, descriptionText),
+            React.createElement(Button, { style: style.button, onPress: onDismiss },
+                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, dismissButtonText)),
+            React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
+                React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
+};
+export { GetOutOfCheckoutModal };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -0,0 +1,22 @@
+declare const style: {
+    button: {
+        flex: number;
+    };
+    buttonText: {
+        width: "100%";
+    };
+    confirmButton: {
+        marginTop: number;
+    };
+    description: {
+        marginVertical: number;
+        width: "100%";
+    };
+    modalContent: {
+        paddingHorizontal: number;
+    };
+    title: {
+        width: "100%";
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+    button: {
+        flex: 0,
+    },
+    buttonText: {
+        width: "100%",
+    },
+    confirmButton: {
+        marginTop: space8,
+    },
+    description: {
+        marginVertical: space8,
+        width: "100%",
+    },
+    modalContent: {
+        paddingHorizontal: space6,
+    },
+    title: {
+        width: "100%",
+    },
+});
+export { style };

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { LayoutRectangle } from "react-native";
+import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
+import { Country } from "../../../../../../projection/shared/country";
+interface ItemActionsProps {
+    readonly productVariants?: ProductVariantProjection[];
+    readonly currentProductVariant: ProductVariantProjection;
+    readonly country: Country;
+    readonly onShowSizeWithoutStockModal?: () => void;
+    readonly onKeep: () => void;
+    readonly onReturn: () => void;
+    readonly onReplace: (value: string) => void;
+    readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
+}
+declare const ItemActions: FC<ItemActionsProps>;
+export { ItemActions };

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

@@ -0,0 +1,39 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Sticky } from "@lookiero/sty-psp-ui";
+import { size } from "../../../../../../projection/shared/size";
+import { Body } from "../../../../components/layouts/body/Body";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { SelectModal } from "../selectModal/SelectModal";
+import { style } from "./ItemActions.style";
+const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const changeSizeButtonText = useI18nMessage({ id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
+    const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
+    const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
+    const sizeSelectorOptions = useMemo(() => (productVariants || []).map((productVariant) => ({
+        label: size({ size: productVariant.size, country }),
+        value: productVariant.id,
+    })), [country, productVariants]);
+    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 0 ||
+        (sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === currentProductVariant.id), [sizeSelectorOptions, currentProductVariant.id]);
+    const handleOnPressSelectField = useCallback(() => {
+        if (disabledSizeSelector) {
+            onShowSizeWithoutStockModal();
+        }
+        else {
+            setModalVisible(true);
+        }
+    }, [onShowSizeWithoutStockModal, setModalVisible, disabledSizeSelector]);
+    const handleOnModalClose = useCallback(() => setModalVisible(false), []);
+    return (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
+        React.createElement(Body, { style: { row: style.row } },
+            React.createElement(View, { style: style.actionsRow },
+                !currentProductVariant.size.unique && productVariants ? (React.createElement(Button, { style: style.sizeSelector, testID: "size-selector", variant: BUTTON_VARIANT.SECONDARY, small: true, onPress: handleOnPressSelectField }, changeSizeButtonText)) : null,
+                React.createElement(Button, { style: style.returnButton, testID: "return-button", variant: BUTTON_VARIANT.SECONDARY, small: true, onPress: onReturn }, returnButtonText)),
+            React.createElement(Button, { testID: "keep-button", small: true, onPress: onKeep }, keepButtonText)),
+        React.createElement(SelectModal, { modalVisible: modalVisible, options: sizeSelectorOptions, testID: "select-field-modal", title: changeSizeButtonText, value: currentProductVariant.id, onChange: onReplace, onClose: handleOnModalClose })));
+};
+export { ItemActions };

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

@@ -0,0 +1,26 @@
+declare const style: {
+    actionsRow: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginBottom: number;
+    };
+    inputDisabled: {
+        color: string;
+    };
+    returnButton: {
+        flex: number;
+    };
+    row: {
+        paddingHorizontal: number;
+    };
+    sizeSelector: {
+        flex: number;
+        marginRight: number;
+    };
+    sticky: {
+        paddingBottom: number;
+        paddingHorizontal: number;
+        paddingTop: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { colorTextDisabled, space3, space2, space4, space6 } = theme();
+const style = StyleSheet.create({
+    actionsRow: {
+        alignItems: "center",
+        flexDirection: "row",
+        marginBottom: space4,
+    },
+    inputDisabled: {
+        color: colorTextDisabled,
+    },
+    returnButton: {
+        flex: 1,
+    },
+    row: {
+        paddingHorizontal: space3,
+    },
+    sizeSelector: {
+        flex: 1,
+        marginRight: space2,
+    },
+    sticky: {
+        paddingBottom: space6,
+        paddingHorizontal: 0,
+        paddingTop: space6,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { COLOR, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { size } from "../../../../../../projection/shared/size";
+import { Price } from "../../../../components/atoms/price/Price";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./ProductVariantDescription.style";
+const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, country, }) => {
+    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    const screenDevice = useScreenSize();
+    const isDesktopScreen = screenDevice !== "S";
+    return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },
+        React.createElement(View, { style: style.info },
+            React.createElement(View, { style: style.brand },
+                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 1, detail: true }, brand),
+                React.createElement(Text, { level: 1, detailBold: true }, name)),
+            React.createElement(Price, { price: price, withPercentage: true })),
+        React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
+};
+export { ProductVariantDescription };

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space4, space6 } = theme();
+const style = StyleSheet.create({
+    brand: {
+        flex: 1,
+    },
+    container: {
+        width: "100%",
+    },
+    info: {
+        display: "flex",
+        flexDirection: "row",
+        marginBottom: space4,
+    },
+    smallContainer: {
+        paddingHorizontal: space6,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from "react";
+import { Image } from "react-native";
+import { Bullets, Carousel, theme, useScreenSize, } from "@lookiero/sty-psp-ui";
+import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { AspectRatioView } from "../../../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
+import { useMediaImage } from "../../../../hooks/useMediaImage";
+import { style } from "./ProductVariantSlider.style";
+const { space16 } = theme();
+const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
+    const cdnImageUrl = useMediaImage();
+    const screenSize = useScreenSize();
+    const isDesktopScreen = screenSize !== "S";
+    const [activeIndex, setActiveIndex] = useState(0);
+    const handleOnActiveChanged = useCallback((activeIndex) => {
+        setActiveIndex(activeIndex);
+        onChanged?.(activeIndex);
+    }, [onChanged]);
+    const renderItem = useCallback(({ item, index }) => {
+        const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
+        const isLastItem = index === producVariantMedia.length - 1;
+        return (React.createElement(AspectRatioView, { aspectRatio: 4 / 3, multiplier: isCollageImage && isLastItem ? 2 : 1, style: {
+                marginTop: isCollageImage && !isDesktopScreen ? space16 : 0,
+                alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
+            } },
+            React.createElement(Image, { resizeMode: "stretch", style: [style.image, isDesktopScreen ? style.largeImage : null], testID: "product-variant-image", source: {
+                    uri: cdnImageUrl({
+                        url: item.url,
+                        width: 600,
+                    }),
+                } })));
+    }, [cdnImageUrl, isDesktopScreen, producVariantMedia.length]);
+    const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
+    return (React.createElement(Carousel, { activeIndex: activeIndex, bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
+};
+export { ProductVariantSlider };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4 } = theme();
+const PAGINATION_SIZE = 37;
+const style = StyleSheet.create({
+    image: {
+        flex: 1,
+    },
+    largeImage: {
+        borderRadius: borderRadius4,
+    },
+    paginationActiveItemStyle: {
+        borderColor: colorBorderActionSecondary,
+    },
+    paginationImage: {
+        flex: 1,
+    },
+    paginationItemStyle: {
+        backgroundColor: colorBgBase,
+        borderColor: colorBgPrimaryMediumLight,
+        borderRadius: 0,
+        borderWidth: 1,
+        height: PAGINATION_SIZE,
+        width: PAGINATION_SIZE,
+    },
+    paginationStyle: {
+        bottom: 0,
+        marginTop: space4,
+        position: "relative",
+    },
+});
+export { style };

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+import { ButtonIcon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+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 } from "../../../../i18n/i18n";
+import { style } from "./ReturnQuestionsFeedback.style";
+const returnQuestionItems = {
+    [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_TEXTAREA]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_SELECT]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_STACK]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.TEXTAREA]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
+};
+const ReturnQuestionsFeedback = ({ returnQuestions, onEditFeedback }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
+    return (React.createElement(View, null,
+        React.createElement(View, { style: style.titleContainer },
+            React.createElement(Text, { level: 2 }, titleText),
+            React.createElement(ButtonIcon, { name: "pencil", testID: "edit-feedback", onPress: onEditFeedback })),
+        React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+            React.createElement(ReturnQuestions, { returnQuestions: returnQuestions }))));
+};
+export { ReturnQuestionsFeedback };

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

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space4 } = theme();
+const style = StyleSheet.create({
+    titleContainer: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: space4,
+    },
+});
+export { style };