@lookiero/checkout 6.6.0 → 7.0.0-beta.0

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

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+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 { QueryStatus } from "@lookiero/messaging-react";
+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";
@@ -16,14 +17,17 @@ 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 }) => {
@@ -37,6 +41,10 @@ const Item = ({ layout: Layout }) => {
     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,
@@ -64,9 +72,28 @@ const Item = ({ layout: Layout }) => {
     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 }
@@ -136,7 +163,8 @@ const Item = ({ layout: Layout }) => {
         bookedProductsVariantsStatus !== QueryStatus.LOADING &&
         fiveItemsDiscountStatus !== QueryStatus.LOADING &&
         sizeChangeEnabledStatus !== QueryStatus.LOADING &&
-        (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true);
+        (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true) &&
+        returnCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, { testID: "spinner" });
     }
@@ -145,6 +173,7 @@ const Item = ({ layout: Layout }) => {
                 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: goToReturnPage })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: goToReturnPage })))));
+            } }, 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/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

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

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

@@ -0,0 +1,40 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { useReturnQuestionFeedback } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostSelectReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem";
+import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem";
+import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
+import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./ReturnQuestionsForm.style";
+const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
+const returnQuestionItems = {
+    [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+    [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+    [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+    [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+    [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+    [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+const ReturnQuestionsForm = ({ returnQuestions, visible, onSubmit, onClose }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+    const feedback = useReturnQuestionFeedback();
+    const handleOnSubmit = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
+    return (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, testID: "return-questions-form-modal", visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
+            React.createElement(View, { style: style.modalContent },
+                React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
+                React.createElement(Button, { style: style.submit, testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))));
+};
+export { ReturnQuestionsForm };

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

@@ -0,0 +1,12 @@
+declare const style: {
+    modalContent: {
+        paddingHorizontal: number;
+    };
+    submit: {
+        marginTop: number;
+    };
+    title: {
+        marginBottom: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+    modalContent: {
+        paddingHorizontal: space6,
+    },
+    submit: {
+        marginTop: space8,
+    },
+    title: {
+        marginBottom: space6,
+    },
+});
+export { style };

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

@@ -1,12 +1,131 @@
-import React from "react";
-import { useParams } from "react-router-native";
-import { Spinner } from "@lookiero/aurora";
-import { QueryStatus } from "@lookiero/messaging-react";
+import { PortalHost } from "@gorhom/portal";
+import React, { useCallback, useMemo } from "react";
+import { ScrollView } from "react-native";
+import { generatePath, useNavigate, useParams } from "react-router-native";
+import { Box, Button, Layout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { useTrackPageView } from "../../../tracking/useTrackPageView";
+import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
+import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
+import { ReturnQuestions } from "../../components/organisms/returnQuestions/ReturnQuestions";
+import { ReturnQuestionFeedbackProvider, useReturnQuestionFeedback, } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider, } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostRadioGroupReturnQuestionItem } from "../../components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem";
+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 { useStaticInfo } from "../../hooks/useStaticInfo";
-import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
-const Return = ({ layout }) => {
+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,
+    [ReturnQuestionType.HOST_SELECT]: HostRadioGroupReturnQuestionItem,
+    [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+    [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+    [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
+};
+const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: UiLayout }) => {
+    const { screen } = useDevice();
+    const navigate = useNavigate();
+    const logger = useLogger();
+    const basePath = useBasePath();
+    const checkoutId = checkout.id;
+    const trackPressNext = useTrackPressNext({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId,
+    });
+    const trackPressPrevious = useTrackPressPrevious({
+        page: TrackingPage.ITEM,
+        country,
+        segment,
+        checkoutId,
+    });
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+    const isSmallScreen = screen.S;
+    useTrackPageView({ checkoutId, country, segment, page: TrackingPage.RETURN });
+    /* ReturnCheckoutItem */
+    const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
+        checkoutItemId: checkoutItem.id,
+    });
+    const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+        logger,
+    });
+    const trackReturnItem = useTrackReturnItem({
+        page: TrackingPage.RETURN,
+        country,
+        segment,
+        checkoutId: checkoutId,
+        checkoutItemId: checkoutItem.id,
+    });
+    const navigateToNextItem = useCallback(() => {
+        const item = checkoutItem;
+        const items = checkout?.items;
+        const itemIndex = items.indexOf(item);
+        const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
+        const nextItem = items[nextItemIndex];
+        trackPressNext({ from: item.id, to: nextItem.id });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
+    }, [basePath, checkout?.items, checkoutItem, 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({ from: item.id, to: previousItem.id });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
+    }, [basePath, checkout?.items, checkoutItem, navigate, trackPressPrevious]);
+    const returnItem = useCallback(async (feedbacks) => {
+        returnCheckoutItem({ feedbacks });
+        trackReturnItem();
+        navigateToNextItem();
+    }, [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) {
+        return React.createElement(Spinner, null);
+    }
+    return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+        React.createElement(PortalHost, { name: "return-question-form-portal" }),
+        React.createElement(UiLayout, { header: header, scrollEnabled: false, style: {
+                safeAreaView: style.safeAreaView,
+                scrollView: style.scrollView,
+            } },
+            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)),
+                        React.createElement(ReturnQuestions, { portalHostName: "return-question-form-portal", returnQuestions: returnQuestions }),
+                        React.createElement(View, { style: style.submit },
+                            React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
+};
+const Return = ({ layout: UiLayout }) => {
     const { id } = useParams();
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -16,6 +135,6 @@ const Return = ({ layout }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(ReturnQuestionsForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: layout, segment: segment })));
+        React.createElement(ReturnForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: UiLayout, segment: segment })));
 };
 export { Return };

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -11,19 +11,21 @@ import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
 const ProductVariantPreview = ({ item, country }) => {
     const cdnImageUrl = useMediaImage();
     const { screen } = useDevice();
+    const isSmallScreen = screen.S;
+    const { productVariant, price } = item;
+    const { media, brand, name, size: sizeProjection } = productVariant;
+    const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
     const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
     const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
-    const { productVariant: { media, brand, name, size: sizeProjection }, price, } = item;
-    const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
-    return (React.createElement(View, { style: [style.wrapper, !screen.S && style.mobileWrapper], testID: "product-variant-preview" },
+    return (React.createElement(View, { style: [style.wrapper, isSmallScreen ? style.mobileWrapper : undefined] },
         React.createElement(Row, { style: style.row },
             React.createElement(Column, { size: { M: "2/3", L: "2/3" }, style: style.content },
-                mainImage && (React.createElement(Image, { resizeMode: "stretch", style: style.image, testID: "product-variant-image", source: {
+                mainImage ? (React.createElement(Image, { resizeMode: "stretch", style: style.image, testID: "product-variant-image", source: {
                         uri: cdnImageUrl({
                             url: mainImage.url,
                             width: IMAGE_SIZE,
                         }),
-                    } })),
+                    } })) : null,
                 React.createElement(View, { style: style.info },
                     React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),
                     React.createElement(Text, { level: 2, detail: true }, name),

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
-import { Box, Text, Layout as AuroraLayout, useDevice, Spinner } from "@lookiero/aurora";
+import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Sticky } from "@lookiero/sty-psp-ui";
@@ -21,7 +21,7 @@ import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
-const Summary = ({ layout: Layout, children }) => {
+const Summary = ({ layout: UiLayout, children }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
@@ -79,13 +79,13 @@ const Summary = ({ layout: Layout, children }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(Layout, { scrollEnabled: false, style: {
+    return (React.createElement(UiLayout, { scrollEnabled: false, style: {
             header: style.header,
             scrollView: style.scrollView,
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
             fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
-            React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
+            React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
                 React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
                     React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
                         React.createElement(View, { style: !screen.L && style.mobileInfo },

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { LayoutRectangle } from "react-native";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+interface StickyPricingProps {
+    readonly pricing: PricingProjection;
+    readonly totalCheckoutItemsKept: number;
+    readonly collapsed: boolean;
+    readonly onPress: () => void;
+    readonly onSubmit: () => void;
+    readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
+}
+declare const StickyPricing: FC<StickyPricingProps>;
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Sticky } from "@lookiero/sty-psp-ui";
+import { Body } from "../../../../components/layouts/body/Body";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./StickyPricing.style";
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
+    React.createElement(Body, null,
+        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    sticky: {
+        paddingBottom: number;
+        paddingTop: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space3, space4 } = theme();
+const style = StyleSheet.create({
+    sticky: {
+        paddingBottom: space4,
+        paddingTop: space3,
+    },
+});
+export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.6.0";
+export declare const VERSION = "7.0.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "6.6.0";
+export const VERSION = "7.0.0-beta.0";

package/index.ts

@@ -12,22 +12,10 @@ import { fetchTranslations } from "./src/infrastructure/ui/i18n/fetchTranslation
 import { translationEndpoint, translationExternalEndpoint } from "./src/infrastructure/ui/i18n/translationEndpoint";
 import { CheckoutProjection } from "./src/projection/checkout/checkout";
 import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
-import {
-  IsCheckoutAccessibleByCustomerIdProjection,
-  viewIsCheckoutAccessibleByCustomerId,
-} from "./src/projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 import { Customer } from "./src/projection/shared/customer";
 import { Order } from "./src/projection/shared/order";
 import { Subscription } from "./src/projection/shared/subscription";
 
-interface IsCheckoutAccessibleFunctionArgs {
-  readonly customerId: string | undefined;
-}
-
-interface IsCheckoutAccessibleFunction {
-  (args: IsCheckoutAccessibleFunctionArgs): Promise<IsCheckoutAccessibleByCustomerIdProjection>;
-}
-
 interface FirstAvailableCheckoutByCustomerIdFunctionArgs {
   readonly customerId: string | undefined;
 }
@@ -46,7 +34,6 @@ interface BootstrapFunctionArgs {
 
 interface BootstrapFunctionReturn {
   readonly root: (args: SentryLoggerFunctionArgs) => ComponentType<RootProps>;
-  readonly isCheckoutAccessible: IsCheckoutAccessibleFunction;
   readonly firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction;
 }
 
@@ -61,15 +48,11 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, translations, sent
     contextId: "CheckoutI18n",
   });
 
-  const isCheckoutAccessible: IsCheckoutAccessibleFunction = ({ customerId }) =>
-    queryBus(viewIsCheckoutAccessibleByCustomerId({ customerId }));
-
   const firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction = ({ customerId }) =>
     queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId as string }));
 
   return {
     root: root({ Messaging, I18n, getAuthToken, sentry, kameleoon }),
-    isCheckoutAccessible,
     firstAvailableCheckoutByCustomerId,
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.6.0",
+  "version": "7.0.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -32,8 +32,6 @@
     "@lookiero/sty-psp-uuid": "^0.1.0",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-spring/native": "9.6.1",
-    "react-native-gesture-handler": "^2.12.0",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-svg": "^13.4.0",
     "tiny-invariant": "^1.3.1"
   },

package/src/Expo.tsx

@@ -1,7 +1,4 @@
 import { registerRootComponent } from "expo";
-import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import { ExpoRoot } from "./ExpoRoot";
 
-enableLegacyWebImplementation(true);
-
 registerRootComponent(ExpoRoot);

package/src/ExpoRoot.tsx

@@ -117,7 +117,14 @@ setPaymentsBridge({
 
 const kameleoonConfig: KameleoonEnvironment = {
   siteCode: "aplm4v3ckn",
-  experiments: {},
+  experiments: {
+    newFeedback: {
+      id: "245000",
+      variations: {
+        v1: "964072",
+      },
+    },
+  },
 };
 
 // const { Component: Messaging } = checkoutMockBootstrap();

package/src/infrastructure/ab-testing/kameleoonEnvironment.ts

@@ -1,9 +1,13 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Experiments {}
+interface Experiment {
+  readonly id: string;
+  readonly variations: Record<string, string>;
+}
 
 interface KameleoonEnvironment {
   readonly siteCode: string;
-  readonly experiments: Experiments;
+  readonly experiments: {
+    readonly newFeedback: Experiment;
+  };
 }
 
 export type { KameleoonEnvironment };

package/src/infrastructure/delivery/baseBootstrap.ts

@@ -72,10 +72,6 @@ import {
   viewFiveItemsDiscountByCustomerIdHandler,
   VIEW_FIVE_ITEMS_DISCOUNT_BY_CUSTOMER_ID,
 } from "../../projection/checkout/viewFiveItemsDiscountByCustomerId";
-import {
-  viewIsCheckoutAccessibleByCustomerIdHandler,
-  VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID,
-} from "../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
 import {
   IsCheckoutEnabledByCustomerIdView,
   viewIsCheckoutEnabledByCustomerIdHandler,
@@ -261,7 +257,6 @@ const baseBootstrap: BaseBootstrapFunction = ({
     .query(VIEW_IS_SIZE_CHANGE_ENABLED_BY_CHECKOUT_ID, viewIsSizeChangeEnabledByCheckoutIdHandler, {
       view: isSizeChangeEnabledByCheckoutIdView,
     })
-    .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler)
     .command(START_CHECKOUT, startCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
     .command(SUBMIT_CHECKOUT, submitCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
     .query(VIEW_CHECKOUT_ITEM_BY_ID, viewCheckoutItemByIdHandler, {

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

@@ -4,10 +4,16 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { colorBgBase, space4, space6 } = theme();
 
 const style = StyleSheet.create({
+  allOptionsTitle: {
+    display: "none",
+  },
+  formTitle: {
+    paddingLeft: space6,
+  },
   title: {
     backgroundColor: colorBgBase,
     paddingBottom: space4,
-    paddingHorizontal: space6,
+    paddingRight: space6,
     paddingTop: space6,
   },
 });

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.test.tsx

@@ -12,6 +12,11 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
   useReturnQuestionFeedbackForReturnQuestion: () => ({ feedback: "", onChange: mockOnChange }),
 }));
 
+jest.mock("../../../../../hooks/useNewFeedbackExperiment", () => ({
+  ...jest.requireActual("../../../../../hooks/useNewFeedbackExperiment"),
+  useNewFeedbackExperiment: () => "control",
+}));
+
 const returnQuestion: ReturnQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
   name: "size_large",