@lookiero/checkout 5.2.0-LK-34381-2024.5.14.94607 → 5.2.0-beta.0

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

@@ -11,6 +11,10 @@ const useReturnCheckoutItem = ({ checkoutItemId, logger }) => {
     const returnCheckoutItem = useCallback(async ({ feedbacks }) => {
         try {
             await commandBus(returnCheckoutItemCommand({ aggregateId: checkoutItemId, feedbacks }));
+            createNotification({
+                bodyI18nKey: I18nMessages.RETURN_QUESTION_TOAST_SUCCESS,
+                level: NotificationLevel.SUCCESS,
+            });
         }
         catch (error) {
             logger.captureException(error);

package/dist/infrastructure/ui/components/layouts/banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+interface BannerProps {
+    readonly children?: ReactNode;
+    readonly text: string;
+}
+declare const Banner: FC<BannerProps>;
+export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.js

@@ -0,0 +1,8 @@
+import { ALIGN, Text } from "@lookiero/aurora";
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Banner.style";
+const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
+    React.createElement(Text, { align: ALIGN.CENTER, level: 2, detail: true }, text),
+    children));
+export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorInfo, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorInfo,
+        paddingHorizontal: spaceL,
+        paddingVertical: spaceM,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.js

@@ -29,6 +29,8 @@ const TabList = ({ labels = [], tabIndex = 0, style: customStyle, onSelect }) =>
                     width: springs.width,
                     transform: [{ translateX: springs.left }],
                 },
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 customStyle?.indicator,
             ] })));
 };

package/dist/infrastructure/ui/components/layouts/tabs/Tabs.style.d.ts

@@ -1,6 +1,6 @@
 declare const style: {
     container: {
-        width: string;
+        width: "100%";
     };
     indicator: {
         backgroundColor: string;

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { SvgProps } from "react-native-svg";
+type Icon = FC<SvgProps>;
+export type { Icon };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.js

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

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

@@ -1,13 +1,27 @@
 import { Text, View } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
+import { useAssignedVariationByExperimentId } from "../../../../../../testing/react/useAssignedVariationByExperimentId";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children }) => {
     const titleText = useI18nMessage({ id: returnQuestion.name });
     const isAllOptions = returnQuestion.name === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
+    /* Kameleoon experiment */
+    const { kameleoon } = useStaticInfo();
+    const { experiments: { newFeedback: { id: newFeedbackId = "", variations = {} } = {} }, } = kameleoon;
+    const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+        experimentId: newFeedbackId,
+    });
+    const isReturnPage = newFeedbackVariation?.id === Number(variations.v2);
+    /* Kameleoon experiment */
     return (React.createElement(React.Fragment, null,
-        titleText && titleText !== " " ? (React.createElement(View, { style: [style.title, isAllOptions ? style.allOptionsTitle : undefined] },
+        titleText && titleText !== " " ? (React.createElement(View, { style: [
+                style.title,
+                isAllOptions ? style.allOptionsTitle : undefined,
+                isReturnPage ? style.formTitle : undefined,
+            ] },
             React.createElement(Text, { level: 3, action: true }, titleText))) : null,
         children));
 };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.d.ts

@@ -2,10 +2,13 @@ declare const style: {
     allOptionsTitle: {
         display: "none";
     };
+    formTitle: {
+        paddingLeft: number;
+    };
     title: {
         backgroundColor: string;
         paddingBottom: number;
-        paddingHorizontal: number;
+        paddingRight: number;
         paddingTop: number;
     };
 };

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

@@ -5,10 +5,13 @@ const style = StyleSheet.create({
     allOptionsTitle: {
         display: "none",
     },
+    formTitle: {
+        paddingLeft: space6,
+    },
     title: {
         backgroundColor: colorBgBase,
         paddingBottom: space4,
-        paddingHorizontal: space6,
+        paddingRight: space6,
         paddingTop: space6,
     },
 });

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.d.ts

@@ -0,0 +1,3 @@
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
+declare const HostStackReturnQuestionItem: ReturnQuestionItem;
+export { HostStackReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.js

@@ -0,0 +1,27 @@
+import { COLOR, Text } from "@lookiero/aurora";
+import { useIntl } from "@lookiero/i18n-react";
+import { animated, useSpring } from "@react-spring/native";
+import React, { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import ReturnQuestion from "../../ReturnQuestion";
+import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
+import { style } from "./HostStackReturnQuestionItem.style";
+const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
+    const { formatMessage } = useIntl();
+    const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
+    const feedbackReturnQuestion = feedback
+        ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
+        : undefined;
+    const titleText = useMemo(() => (returnQuestion.name ? formatMessage({ id: returnQuestion.name }) : undefined), [formatMessage, returnQuestion.name]);
+    const feedbackText = useMemo(() => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.name }) : undefined), [feedbackReturnQuestion, formatMessage]);
+    const [stackHeight, setStackHeight] = useState();
+    const handleOnLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setStackHeight(height), []);
+    const stackSyle = useSpring({ height: stackHeight });
+    return (React.createElement(animated.View, { style: stackSyle },
+        React.createElement(View, { onLayout: handleOnLayout },
+            titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
+            feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
+                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id }))))) : (children))));
+};
+export { HostStackReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    title: {
+        marginBottom: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.js

@@ -0,0 +1,9 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+const { space1 } = Theme.get();
+const style = StyleSheet.create({
+    title: {
+        marginBottom: space1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -2,14 +2,24 @@ import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { useAssignedVariationByExperimentId } from "../../../../../../testing/react/useAssignedVariationByExperimentId";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./TextareaReturnQuestionItem.style";
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { formatMessage } = useIntl();
+    /* Kameleoon experiment */
+    const { kameleoon } = useStaticInfo();
+    const { experiments: { newFeedback: { id: newFeedbackId = "", variations = {} } = {} }, } = kameleoon;
+    const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+        experimentId: newFeedbackId,
+    });
+    const isReturnPage = newFeedbackVariation?.id === Number(variations.v2);
+    /* Kameleoon experiment */
     const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
-    return (React.createElement(View, { style: style.wrapper },
-        React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange })));
+    const fieldComponent = (React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return isReturnPage ? React.createElement(View, { style: style.wrapper }, fieldComponent) : fieldComponent;
 };
 export { TextareaReturnQuestionItem };

package/dist/infrastructure/ui/components/templates/header/Header.style.d.ts

@@ -9,7 +9,7 @@ declare const style: {
         justifyContent: "space-between";
         overflow: "visible";
         paddingHorizontal: number;
-        width: string;
+        width: "100%";
     };
 };
 export { style };

package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts

@@ -0,0 +1,9 @@
+declare const HEADER_HEIGHT: number;
+declare const style: {
+    logo: {
+        left: number;
+        position: "absolute";
+        top: number;
+    };
+};
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXXXL } = theme();
+const HEADER_HEIGHT = spaceXXXL;
+const style = StyleSheet.create({
+    logo: {
+        left: 0,
+        position: "absolute",
+        top: 0,
+    },
+});
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    logo: {
+        height: number;
+        width: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    logo: {
+        height: 54,
+        width: 217,
+    },
+});
+export { style };

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

@@ -26,6 +26,7 @@ declare enum I18nMessages {
     RETURN_QUESTIONS_DESCRIPTION = "return_questions.description",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
     RETURN_QUESTION_MAIN_ALL_OPINION = "return_question.main.all.opinion",
+    RETURN_QUESTION_TOAST_SUCCESS = "return_question.thankyou",
     SUMMARY_TITLE = "summary.title",
     SUMMARY_DESCRIPTION = "summary.description",
     BANNER_DISCOUNT_TEXT = "summary.banner.text",

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

@@ -28,6 +28,7 @@ var I18nMessages;
     I18nMessages["RETURN_QUESTIONS_DESCRIPTION"] = "return_questions.description";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
     I18nMessages["RETURN_QUESTION_MAIN_ALL_OPINION"] = "return_question.main.all.opinion";
+    I18nMessages["RETURN_QUESTION_TOAST_SUCCESS"] = "return_question.thankyou";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";
     I18nMessages["SUMMARY_DESCRIPTION"] = "summary.description";
     I18nMessages["BANNER_DISCOUNT_TEXT"] = "summary.banner.text";

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

@@ -0,0 +1,10 @@
+import { DefaultTheme } from "@lookiero/aurora";
+type Remove$PrefixFromKeys<T> = {
+    [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
+};
+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,3 @@
+import { Theme } from "@lookiero/aurora";
+const theme = () => Theme.get();
+export { theme };

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

@@ -3,20 +3,20 @@ declare const style: {
         flex: number;
     };
     buttonText: {
-        width: string;
+        width: "100%";
     };
     confirmButton: {
         marginTop: number;
     };
     description: {
         marginVertical: number;
-        width: string;
+        width: "100%";
     };
     modal: {
         padding: number;
     };
     title: {
-        width: string;
+        width: "100%";
     };
 };
 export { style };

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

@@ -3,7 +3,7 @@ declare const style: {
         flex: number;
     };
     container: {
-        width: string;
+        width: "100%";
     };
     info: {
         display: "flex";

package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts

@@ -2,11 +2,11 @@ declare const style: {
     description: {
         color: string;
         marginBottom: number;
-        width: string;
+        width: "100%";
     };
     title: {
         marginBottom: number;
-        width: string;
+        width: "100%";
     };
 };
 export { style };

package/dist/infrastructure/ui/views/notFound/NotFound.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { Country } from "../../../../projection/shared/country";
+import { Layout } from "../../components/layouts/layout/Layout";
+interface NotFoundProps {
+    readonly customerId: string;
+    readonly country: Country;
+    readonly layout: Layout;
+}
+declare const NotFound: FC<NotFoundProps>;
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.js

@@ -0,0 +1,40 @@
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useCallback } from "react";
+import { Image } from "react-native";
+import { useNavigate } from "react-router-native";
+import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { AspectRatioView } from "../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { Body } from "../../components/layouts/body/Body";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./NotFound.style";
+const NotFound = ({ customerId, country, layout: Layout }) => {
+    const descriptionText = useI18nMessage({ id: I18nMessages.NOT_FOUND_DESCRIPTION });
+    const buttonText = useI18nMessage({ id: I18nMessages.NOT_FOUND_BUTTON });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    useTrackPageView({
+        page: TrackingPage.NOT_FOUND,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const handleOnPress = useCallback(() => navigate(`${basePath}/${Routes.HOME}`), [basePath, navigate]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
+    return (React.createElement(Layout, { style: { scrollView: style.container } },
+        React.createElement(Body, { style: { column: style.bodyColumn } },
+            React.createElement(AspectRatioView, { aspectRatio: 1.25 },
+                React.createElement(Image, { resizeMode: "contain", source: require("../../../../public/images/not-found.png"), style: style.image, testID: "not-found-image" })),
+            React.createElement(Text, { level: 1, style: style.description }, descriptionText),
+            React.createElement(Button, { onPress: handleOnPress }, buttonText))));
+};
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.style.d.ts

@@ -0,0 +1,17 @@
+declare const style: {
+    bodyColumn: {
+        paddingHorizontal: number;
+    };
+    container: {
+        flex: number;
+        paddingBottom: number;
+    };
+    description: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    image: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/notFound/NotFound.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { spaceXL, spaceXXL } = theme();
+const style = StyleSheet.create({
+    bodyColumn: {
+        paddingHorizontal: spaceXL,
+    },
+    container: {
+        flex: 1,
+        paddingBottom: spaceXXL,
+    },
+    description: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
+    image: {
+        flex: 1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/return/Return.js

@@ -1,16 +1,16 @@
 import { PortalHost } from "@gorhom/portal";
-import { Button, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
+import { ScrollView } from "react-native";
 import { generatePath, useNavigate, useParams } from "react-router-native";
 import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
 import { useLogger } from "../../../../shared/logging/useLogger";
 import { useTrackPressNext } from "../../../../shared/tracking/infrastructure/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../../shared/tracking/infrastructure/useTrackPressPrevious";
 import { useTrackReturnItem } from "../../../../shared/tracking/infrastructure/useTrackReturnItem";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
-import { Column } from "../../../../shared/ui/components/layouts/column/Column";
-import { Row } from "../../../../shared/ui/components/layouts/row/Row";
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -23,10 +23,12 @@ import { HostRadioGroupReturnQuestionItem } from "../../components/organisms/ret
 import { HostStackReturnQuestionItem } from "../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/form/HostStackReturnQuestionItem";
 import { RadioReturnQuestionItem } from "../../components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Return.style";
+import { ProductVariantPreview } from "./components/productVariantPreview/ProductVariantPreview";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
     [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
@@ -41,6 +43,7 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     const logger = useLogger();
     const basePath = useBasePath();
     const trackPressNext = useTrackPressNext();
+    const trackPressPrevious = useTrackPressPrevious();
     const checkoutId = checkout.id;
     const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
@@ -75,6 +78,21 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
         });
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, checkout?.items, checkoutId, checkoutItem, country, navigate, trackPressNext]);
+    const navigateToPreviousItem = useCallback(() => {
+        const item = checkoutItem;
+        const items = checkout?.items;
+        const itemIndex = items.indexOf(item);
+        const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
+        const previousItem = items[previousItemIndex];
+        trackPressPrevious({
+            page: TrackingPage.ITEM,
+            country,
+            checkoutId: checkout?.id,
+            from: item.id,
+            to: previousItem.id,
+        });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
+    }, [basePath, checkout?.id, checkout?.items, checkoutItem, country, navigate, trackPressPrevious]);
     const returnItem = useCallback(async (feedbacks) => {
         returnCheckoutItem({ feedbacks });
         trackReturnItem();
@@ -82,6 +100,8 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     }, [navigateToNextItem, returnCheckoutItem, trackReturnItem]);
     const feedback = useReturnQuestionFeedback();
     const handleOnSubmit = useCallback(() => returnItem(feedback), [feedback, returnItem]);
+    const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
+        React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: navigateToNextItem, onPrevious: navigateToPreviousItem }))), [checkout?.items, checkoutItem, navigateToNextItem, navigateToPreviousItem]);
     /* ReturnCheckoutItem */
     const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded) {
@@ -89,13 +109,15 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     }
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: "return-question-form-portal" }),
-        React.createElement(LocalLayout, { scrollEnabled: true, style: {
+        React.createElement(LocalLayout, { header: header, scrollEnabled: false, style: {
                 header: style.header,
                 safeAreaView: style.safeAreaView,
+                scrollView: style.scrollView,
             } },
-            React.createElement(Row, { style: [style.row, isSmallScreen ? undefined : style.desktopRow] },
-                React.createElement(Column, { size: { M: "2/3", L: "2/3" } },
-                    React.createElement(View, null,
+            React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
+            React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+                React.createElement(Layout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                    React.createElement(Box, { size: { L: "2/3" } },
                         React.createElement(View, { style: [style.info, isSmallScreen ? undefined : style.desktopInfo] },
                             React.createElement(Text, { level: 3, heading: true }, titleText),
                             React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),

package/dist/infrastructure/ui/views/return/Return.style.d.ts

@@ -6,19 +6,23 @@ declare const style: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
-    desktopRow: {
-        marginVertical: number;
+    desktopLayoutSpacing: {
+        paddingVertical: number;
     };
     header: {
         height: number;
     };
+    headerWrapper: {
+        display: "flex";
+        flexDirection: "column";
+    };
     info: {
         backgroundColor: string;
         paddingBottom: number;
         paddingHorizontal: number;
         paddingTop: number;
     };
-    row: {
+    layout: {
         flex: number;
         justifyContent: "center";
     };
@@ -26,8 +30,13 @@ declare const style: {
         backgroundColor: string;
         flex: number;
     };
+    scrollView: {
+        flex: number;
+    };
     submit: {
         backgroundColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
         padding: number;
     };
 };