@lookiero/checkout 6.6.0 → 7.0.0-beta.0

package/src/infrastructure/ui/views/item/Item.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef } from "react";
+import React, { FC, 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 { Layout } from "@lookiero/sty-psp-ui";
@@ -11,7 +11,9 @@ import {
   ProductVariantProjection,
 } from "../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
+import { FeedbackProjection } from "../../../../projection/feedback/feedback";
 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";
@@ -22,14 +24,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 {
   CheckoutItemWithCustomerDecission,
   ItemWithCustomerDecission,
@@ -73,6 +78,11 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id) as CheckoutItemProjection;
 
+  /* Kameleoon experiment */
+  const newFeedbackVariation = useNewFeedbackExperiment();
+  const redirectToReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+  /* Kameleoon experiment */
+
   /* SizeChange and Booking */
   const [isSizeChangeEnabled, sizeChangeEnabledStatus] = useViewIsSizeChangeEnabledByCheckoutId({
     checkoutId: checkout?.id,
@@ -101,9 +111,32 @@ const Item: FC<ItemProps> = ({ 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: FeedbackProjection) => {
+      hideReturnQuestions();
+      returnCheckoutItem({ feedbacks });
+      trackReturnItem();
+    },
+    [hideReturnQuestions, returnCheckoutItem, trackReturnItem],
+  );
   /* ReturnCheckoutItem */
 
   const currentProductVariant: ProductVariantProjection = useMemo(
@@ -209,7 +242,8 @@ const Item: FC<ItemProps> = ({ 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 <Spinner testID="spinner" />;
@@ -232,7 +266,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
             currentProductVariant={currentProductVariant}
-            onReturn={goToReturnPage}
+            onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
           />
         ) : (
           <ItemWithCustomerDecission
@@ -240,10 +274,19 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
             currentProductVariant={currentProductVariant}
             returnQuestions={returnQuestions}
-            onEditFeedback={goToReturnPage}
+            onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
           />
         )}
       </Layout>
+
+      {!redirectToReturnPage ? (
+        <ReturnQuestionsForm
+          returnQuestions={returnQuestions}
+          visible={returnQuestionsVisible}
+          onClose={hideReturnQuestions}
+          onSubmit={returnItem}
+        />
+      ) : null}
     </ReturnQuestionFeedbackProvider>
   );
 };

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

@@ -0,0 +1,18 @@
+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/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -0,0 +1,79 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { FC, 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 { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import {
+  ReturnQuestionProjection,
+  ReturnQuestionType,
+} from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { useReturnQuestionFeedback } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import {
+  ReturnQuestionItemProvider,
+  ReturnQuestionItems,
+} 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: ReturnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+  [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+
+interface ReturnQuestionsFormProps {
+  readonly visible: boolean;
+  readonly returnQuestions: ReturnQuestionProjection[];
+  readonly onSubmit: (feedback: FeedbackProjection) => void;
+  readonly onClose: () => void;
+}
+
+const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({ 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 (
+    <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
+      <PortalHost name={RETURN_QUESTION_FORM_PORTAL_HOST_NAME} />
+      <Modal
+        portalHostName={RETURN_QUESTION_FORM_PORTAL_HOST_NAME}
+        testID="return-questions-form-modal"
+        visible={visible}
+        scroll
+        showCloseButton
+        onClose={onClose}
+      >
+        <View style={style.modalContent}>
+          <Text level={3} style={style.title} heading>
+            {titleText}
+          </Text>
+
+          <ReturnQuestions portalHostName={RETURN_QUESTION_FORM_PORTAL_HOST_NAME} returnQuestions={returnQuestions} />
+
+          <Button style={style.submit} testID="return-questions-button" onPress={handleOnSubmit}>
+            {submitButtonText}
+          </Button>
+        </View>
+      </Modal>
+    </ReturnQuestionItemProvider>
+  );
+};
+
+export { ReturnQuestionsForm };

package/src/infrastructure/ui/views/return/Return.tsx

@@ -1,28 +1,216 @@
-import React, { FC } 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, { FC, 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 { Segment } from "@lookiero/sty-psp-segment";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+import { CheckoutProjection } from "../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
+import { FeedbackProjection } from "../../../../projection/feedback/feedback";
+import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
+import { Country } from "../../../../projection/shared/country";
+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,
+  ReturnQuestionItems,
+} 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";
+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: ReturnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostRadioGroupReturnQuestionItem,
+  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+  [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
+};
+
+interface ReturnFormProps {
+  readonly checkoutItem: CheckoutItemProjection;
+  readonly country: Country;
+  readonly segment: Segment;
+  readonly layout: UiLayout;
+  readonly checkout: CheckoutProjection;
+}
+
+const ReturnForm: FC<ReturnFormProps> = ({ 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 as CheckoutItemProjection[];
+    const itemIndex = items.indexOf(item);
+    const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
+    const nextItem = items[nextItemIndex] as CheckoutItemProjection;
+
+    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 as CheckoutItemProjection[];
+    const itemIndex = items.indexOf(item);
+    const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
+    const previousItem = items[previousItemIndex] as CheckoutItemProjection;
+
+    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: FeedbackProjection) => {
+      returnCheckoutItem({ feedbacks });
+      trackReturnItem();
+      navigateToNextItem();
+    },
+    [navigateToNextItem, returnCheckoutItem, trackReturnItem],
+  );
+
+  const feedback = useReturnQuestionFeedback();
+
+  const handleOnSubmit = useCallback(() => returnItem(feedback), [feedback, returnItem]);
+
+  const header = useMemo(
+    () => (
+      <Box style={style.headerWrapper}>
+        <ItemHeader
+          item={checkoutItem}
+          items={checkout?.items as CheckoutItemProjection[]}
+          onNext={navigateToNextItem}
+          onPrevious={navigateToPreviousItem}
+        />
+      </Box>
+    ),
+    [checkout?.items, checkoutItem, navigateToNextItem, navigateToPreviousItem],
+  );
+
+  /* ReturnCheckoutItem */
+
+  const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
+
+  if (!dependenciesLoaded) {
+    return <Spinner />;
+  }
+
+  return (
+    <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
+      <PortalHost name="return-question-form-portal" />
+      <UiLayout
+        header={header}
+        scrollEnabled={false}
+        style={{
+          safeAreaView: style.safeAreaView,
+          scrollView: style.scrollView,
+        }}
+      >
+        <ProductVariantPreview country={country} item={checkoutItem} />
+
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <Layout fullWidth={!screen.L} style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}>
+            <Box size={{ L: "2/3" }}>
+              <View style={[style.info, isSmallScreen ? undefined : style.desktopInfo]}>
+                <Text level={3} heading>
+                  {titleText}
+                </Text>
+                <Text level={1} style={style.description} detail>
+                  {descriptionText}
+                </Text>
+              </View>
+
+              <ReturnQuestions portalHostName="return-question-form-portal" returnQuestions={returnQuestions} />
+
+              <View style={style.submit}>
+                <Button testID="return-questions-button" onPress={handleOnSubmit}>
+                  {submitButtonText}
+                </Button>
+              </View>
+            </Box>
+          </Layout>
+        </ScrollView>
+      </UiLayout>
+    </ReturnQuestionItemProvider>
+  );
+};
 
 interface ReturnProps {
   readonly layout: UiLayout;
 }
 
-const Return: FC<ReturnProps> = ({ layout }) => {
+const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
   const { id } = useParams();
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
-
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-
   const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id) as CheckoutItemProjection;
-
   const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING && checkout && checkoutItem;
 
   if (!dependenciesLoaded) {
@@ -31,11 +219,11 @@ const Return: FC<ReturnProps> = ({ layout }) => {
 
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
-      <ReturnQuestionsForm
+      <ReturnForm
         checkout={checkout}
         checkoutItem={checkoutItem}
         country={country}
-        layout={layout}
+        layout={UiLayout}
         segment={segment}
       />
     </ReturnQuestionFeedbackProvider>

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -19,22 +19,19 @@ interface ProductVariantPreviewProps {
 const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ 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 (
-    <View style={[style.wrapper, !screen.S && style.mobileWrapper]} testID="product-variant-preview">
+    <View style={[style.wrapper, isSmallScreen ? style.mobileWrapper : undefined]}>
       <Row style={style.row}>
         <Column size={{ M: "2/3", L: "2/3" }} style={style.content}>
-          {mainImage && (
+          {mainImage ? (
             <Image
               resizeMode="stretch"
               style={style.image}
@@ -46,8 +43,7 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
                 }),
               }}
             />
-          )}
-
+          ) : null}
           <View style={style.info}>
             <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
               {brand}
@@ -59,7 +55,6 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
               {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
             </Text>
           </View>
-
           <View style={style.price}>
             <Price price={price} withPercentage />
           </View>

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutRectangle, 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 { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
@@ -27,7 +27,7 @@ interface SummaryProps {
   readonly children: ReactNode;
 }
 
-const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
+const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -110,7 +110,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   }
 
   return (
-    <Layout
+    <UiLayout
       scrollEnabled={false}
       style={{
         header: style.header,
@@ -120,7 +120,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
       <ScrollView showsVerticalScrollIndicator={false}>
         {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
 
-        <AuroraLayout
+        <Layout
           fullWidth={!screen.L}
           style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
         >
@@ -153,7 +153,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
               </View>
             </Box>
           ) : null}
-        </AuroraLayout>
+        </Layout>
       </ScrollView>
 
       {pricing && !screen.L ? (
@@ -170,7 +170,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
           </Body>
         </Sticky>
       ) : null}
-    </Layout>
+    </UiLayout>
   );
 };
 

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

@@ -1,15 +0,0 @@
-import { FC } from "react";
-import { Segment } from "@lookiero/sty-psp-segment";
-import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
-import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
-import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { Country } from "../../../../../../projection/shared/country";
-interface ReturnQuestionsFormProps {
-    readonly checkout: CheckoutProjection;
-    readonly checkoutItem: CheckoutItemProjection;
-    readonly country: Country;
-    readonly layout: UiLayout;
-    readonly segment: Segment;
-}
-declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
-export { ReturnQuestionsForm };