@lookiero/checkout 7.0.0-beta.0 → 7.0.1-beta.0

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

@@ -1,7 +1,7 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { FC, useCallback, useEffect, useMemo, useRef } 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 { 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,9 +11,7 @@ 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";
@@ -24,17 +22,14 @@ 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,
@@ -78,11 +73,6 @@ 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,
@@ -111,32 +101,9 @@ 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(
@@ -242,8 +209,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     bookedProductsVariantsStatus !== QueryStatus.LOADING &&
     fiveItemsDiscountStatus !== QueryStatus.LOADING &&
     sizeChangeEnabledStatus !== QueryStatus.LOADING &&
-    (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true) &&
-    returnCheckoutItemStatus !== CommandStatus.LOADING;
+    (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true);
 
   if (!dependenciesLoaded) {
     return <Spinner testID="spinner" />;
@@ -266,7 +232,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
             currentProductVariant={currentProductVariant}
-            onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+            onReturn={goToReturnPage}
           />
         ) : (
           <ItemWithCustomerDecission
@@ -274,19 +240,10 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
             currentProductVariant={currentProductVariant}
             returnQuestions={returnQuestions}
-            onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+            onEditFeedback={goToReturnPage}
           />
         )}
       </Layout>
-
-      {!redirectToReturnPage ? (
-        <ReturnQuestionsForm
-          returnQuestions={returnQuestions}
-          visible={returnQuestionsVisible}
-          onClose={hideReturnQuestions}
-          onSubmit={returnItem}
-        />
-      ) : null}
     </ReturnQuestionFeedbackProvider>
   );
 };

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { checkout } from "../../../projection/checkout/checkout.mock";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { returnQuestions as mockReturnQuestions } from "../../../projection/returnQuestion/returnQuestions.mock";
+import { render } from "../../test/render";
+import { Return } from "./Return";
+
+const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const mockCheckout = checkout({
+  items: [
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.RETURNED },
+    { status: CheckoutItemStatus.REPLACED },
+  ],
+});
+const mockFirstCheckoutItemId = mockCheckout.items[0]?.id;
+
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+}));
+
+jest.mock("react-router-native", () => ({
+  ...jest.requireActual("react-router-native"),
+  useLocation: () => jest.fn(),
+  useNavigate: () => jest.fn(),
+  useMatch: () => false,
+  useParams: () => ({ id: mockFirstCheckoutItemId }),
+}));
+
+jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
+jest.mock("../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId");
+jest.mock("../../../domain/checkoutItem/react/useReturnCheckoutItem");
+
+describe("Return", () => {
+  test("renders correctly", async () => {
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useListReturnQuestionsByCheckoutItemId as jest.Mock).mockReturnValue([mockReturnQuestions, QueryStatus.SUCCESS]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
+
+    const { findByTestId } = render(<Return layout={DummyLayout} />);
+
+    expect(await findByTestId("return-questions-form")).toBeTruthy();
+  });
+});

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

@@ -1,216 +1,28 @@
-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 React, { FC } from "react";
+import { useParams } from "react-router-native";
+import { Spinner } from "@lookiero/aurora";
+import { QueryStatus } from "@lookiero/messaging-react";
 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 { 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 { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-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>
-  );
-};
+import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
 
 interface ReturnProps {
   readonly layout: UiLayout;
 }
 
-const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
+const Return: FC<ReturnProps> = ({ layout }) => {
   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) {
@@ -219,11 +31,11 @@ const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
 
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
-      <ReturnForm
+      <ReturnQuestionsForm
         checkout={checkout}
         checkoutItem={checkoutItem}
         country={country}
-        layout={UiLayout}
+        layout={layout}
         segment={segment}
       />
     </ReturnQuestionFeedbackProvider>

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { checkoutItem } from "../../../../../projection/checkoutItem/checkoutItem.mock";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { render } from "../../../../test/render";
+import { ProductVariantPreview } from "./ProductVariantPreview";
+
+const country = Country.ES;
+const checkoutItemProjection = checkoutItem({ status: CheckoutItemStatus.RETURNED });
+
+describe("ProductVariantPreview", () => {
+  it("matches the snapshot", async () => {
+    const { toJSON } = render(<ProductVariantPreview country={country} item={checkoutItemProjection} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", async () => {
+    const { getByTestId, getByText } = render(
+      <ProductVariantPreview country={country} item={checkoutItemProjection} />,
+    );
+
+    expect(getByTestId("product-variant-preview")).toBeTruthy();
+    expect(getByTestId("product-variant-image")).toBeTruthy();
+    expect(getByTestId("price")).toBeTruthy();
+
+    expect(getByText(checkoutItemProjection.productVariant.brand)).toBeTruthy();
+    expect(getByText(checkoutItemProjection.productVariant.name)).toBeTruthy();
+    expect(getByText(`${I18nMessages.ITEM_SIZE} ${checkoutItemProjection.productVariant.size.lookiero}`)).toBeTruthy();
+  });
+});

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

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