@lookiero/checkout 6.6.0 → 7.0.0-beta.0

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

@@ -1,112 +0,0 @@
-import { PortalHost } from "@gorhom/portal";
-import React, { useCallback, useMemo } from "react";
-import { ScrollView } from "react-native";
-import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
-import { useI18nMessage } from "@lookiero/i18n-react";
-import { CommandStatus } 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 { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
-import { TrackingPage } from "../../../../../tracking/tracking";
-import { useTrackPageView } from "../../../../../tracking/useTrackPageView";
-import { useTrackPressBack } from "../../../../../tracking/useTrackPressBack";
-import { useTrackPressNext } from "../../../../../tracking/useTrackPressNext";
-import { useTrackReturnItem } from "../../../../../tracking/useTrackReturnItem";
-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 { 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 { ItemDetailHeader } from "../../../../components/templates/header/itemDetailHeader/ItemDetailHeader";
-import { I18nMessages } from "../../../../i18n/i18n";
-import { Routes } from "../../../../routing/routes";
-import { useBasePath } from "../../../../routing/useBasePath";
-import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
-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]: HostRadioGroupReturnQuestionItem,
-    [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
-    [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
-    [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
-};
-const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, }) => {
-    const navigate = useNavigate();
-    const basePath = useBasePath();
-    const logger = useLogger();
-    const { screen } = useDevice();
-    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 feedback = useReturnQuestionFeedback();
-    const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
-        checkoutItemId: checkoutItem.id,
-    });
-    const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
-        checkoutItemId: checkoutItem.id,
-        logger,
-    });
-    const trackReturnItem = useTrackReturnItem({
-        page: TrackingPage.RETURN,
-        country,
-        segment,
-        checkoutId: checkout.id,
-        checkoutItemId: checkoutItem.id,
-    });
-    useTrackPageView({ checkoutId: checkout.id, country, segment, page: TrackingPage.RETURN });
-    const trackPressBack = useTrackPressBack({
-        page: TrackingPage.ITEM,
-        country,
-        segment,
-        checkoutId: checkout?.id,
-    });
-    const handleOnBack = useCallback(() => {
-        trackPressBack();
-        navigate(-1);
-    }, [navigate, trackPressBack]);
-    const trackPressNext = useTrackPressNext({
-        page: TrackingPage.ITEM,
-        country,
-        segment,
-        checkoutId: checkout.id,
-    });
-    const handleOnSubmit = useCallback(async () => {
-        returnCheckoutItem({ feedbacks: feedback });
-        trackReturnItem();
-        const itemIndex = checkout.items.indexOf(checkoutItem);
-        const nextItemIndex = itemIndex === checkout.items.length - 1 ? 0 : itemIndex + 1;
-        const nextItem = checkout.items[nextItemIndex];
-        trackPressNext({ from: checkoutItem.id, to: nextItem.id });
-        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
-    }, [basePath, checkout.items, checkoutItem, feedback, navigate, returnCheckoutItem, trackPressNext, trackReturnItem]);
-    const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
-        React.createElement(ItemDetailHeader, { onBack: handleOnBack }))), [handleOnBack]);
-    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_HOST_NAME }),
-        React.createElement(Layout, { header: header, scrollEnabled: false, style: {
-                safeAreaView: style.safeAreaView,
-                scrollView: style.scrollView,
-            } },
-            React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
-            React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
-                React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
-                    React.createElement(Box, { size: { L: "2/3" } },
-                        React.createElement(View, { style: [style.info, !screen.S && 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_HOST_NAME, returnQuestions: returnQuestions }),
-                        React.createElement(View, { style: style.submit },
-                            React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
-};
-export { ReturnQuestionsForm };

package/src/infrastructure/projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId.test.ts

@@ -1,45 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
-import { bootstrap, QueryStatus } from "@lookiero/messaging-react";
-import { CheckoutProjection } from "../../../../projection/checkout/checkout";
-import {
-  viewFirstAvailableCheckoutByCustomerIdHandler,
-  VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID,
-} from "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
-import {
-  viewIsCheckoutAccessibleByCustomerIdHandler,
-  VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID,
-} from "../../../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-import {
-  viewIsCheckoutEnabledByCustomerIdHandler,
-  VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID,
-} from "../../../../projection/checkout/viewIsCheckoutEnabledByCustomerId";
-import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
-import { useViewIsCheckoutAccessibleByCustomerId as sut } from "./useViewIsCheckoutAccessibleByCustomerId";
-
-const customerId = "29790d24-b139-4ab8-b618-d796d101e974";
-const checkoutProjection: CheckoutProjection = { id: "75574065-5838-42de-9924-c712f7854347" } as CheckoutProjection;
-const firstAvailableCheckoutByCustomerIdViewMock = jest.fn().mockReturnValue(checkoutProjection);
-const isCheckoutAccessibleByCustomerIdViewMock = jest.fn().mockReturnValue(checkoutProjection);
-
-const { Component: Messaging } = bootstrap({ id: MESSAGING_CONTEXT_ID })
-  .query(VIEW_FIRST_AVAILABLE_CHECKOUT_BY_CUSTOMER_ID, viewFirstAvailableCheckoutByCustomerIdHandler, {
-    view: firstAvailableCheckoutByCustomerIdViewMock,
-  })
-  .query(VIEW_IS_CHECKOUT_ENABLED_BY_CUSTOMER_ID, viewIsCheckoutEnabledByCustomerIdHandler, {
-    view: isCheckoutAccessibleByCustomerIdViewMock,
-  })
-  .query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler)
-  .build();
-
-describe("useViewIsCheckoutAccessibleByCustomerId integration hook", () => {
-  it("returns success as the query status and the result itself after rendering the hook", async () => {
-    const { result } = renderHook(() => sut({ customerId }), { wrapper: Messaging });
-
-    await waitFor(() => {
-      const [projection, status] = result.current;
-
-      expect(projection).toBe(true);
-      expect(status).toBe(QueryStatus.SUCCESS);
-    });
-  });
-});

package/src/infrastructure/projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId.ts

@@ -1,33 +0,0 @@
-import { useQuery, UseQueryFunctionResult } from "@lookiero/messaging-react";
-import { isCheckoutFeedbackGiven } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
-import {
-  IsCheckoutAccessibleByCustomerIdProjection,
-  viewIsCheckoutAccessibleByCustomerId,
-} from "../../../../projection/checkout/viewIsCheckoutAccessibleByCustomerId";
-import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
-
-interface UseViewIsCheckoutAccessibleByCustomerIdFunctionArgs {
-  readonly customerId: string | undefined;
-}
-
-interface UseViewIsCheckoutAccessibleByCustomerIdFunction {
-  (
-    args: UseViewIsCheckoutAccessibleByCustomerIdFunctionArgs,
-  ): UseQueryFunctionResult<IsCheckoutAccessibleByCustomerIdProjection>;
-}
-
-const useViewIsCheckoutAccessibleByCustomerId: UseViewIsCheckoutAccessibleByCustomerIdFunction = ({ customerId }) =>
-  useQuery({
-    query: viewIsCheckoutAccessibleByCustomerId({ customerId }),
-    contextId: MESSAGING_CONTEXT_ID,
-    invalidation: isCheckoutFeedbackGiven,
-    options: {
-      refetchOnMount: "always",
-      staleTime: Infinity,
-      retry: false,
-      refetchOnWindowFocus: false,
-      cacheTime: 0,
-    },
-  });
-
-export { useViewIsCheckoutAccessibleByCustomerId };

package/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.test.tsx

@@ -1,74 +0,0 @@
-import { render, RenderResult } from "@testing-library/react-native";
-import React from "react";
-import { Text } from "react-native";
-import { MemoryRouter, Outlet, Route, Routes } from "react-router-native";
-import { QueryStatus } from "@lookiero/messaging-react";
-import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
-import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
-
-jest.mock("../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId", () => ({
-  useViewIsCheckoutAccessibleByCustomerId: jest.fn(),
-}));
-
-const customerId = "29790d24-b139-4ab8-b618-d796d101e974";
-const checkoutRouteText = "checkout-route-component";
-const loaderText = "loader-component";
-
-interface RenderCheckoutAccessibilityMiddlewareArgs {
-  readonly onNotAccessible?: () => void;
-}
-
-interface RenderCheckoutAccessibilityMiddlewareFunction {
-  (args?: RenderCheckoutAccessibilityMiddlewareArgs): RenderResult;
-}
-
-const renderCheckoutAccessibilityMiddleware: RenderCheckoutAccessibilityMiddlewareFunction = ({
-  onNotAccessible = () => void 0,
-} = {}) =>
-  render(
-    <MemoryRouter initialEntries={["/"]}>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <CheckoutAccessibilityMiddleware
-              customerId={customerId}
-              loader={<Text>{loaderText}</Text>}
-              onNotAccessible={onNotAccessible}
-            >
-              <Outlet />
-            </CheckoutAccessibilityMiddleware>
-          }
-        >
-          <Route element={<Text>{checkoutRouteText}</Text>} path="/" />
-        </Route>
-      </Routes>
-    </MemoryRouter>,
-  );
-
-describe("CheckoutAccessibilityMiddleware component", () => {
-  it("renders a loader while processing viewIsCheckoutAccessibleByCustomerId use-case", async () => {
-    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([undefined, QueryStatus.LOADING]);
-    const { findByText } = renderCheckoutAccessibilityMiddleware();
-    const loader = await findByText(loaderText);
-
-    expect(loader).toBeTruthy();
-  });
-
-  it("renders its Outlet's content if it is accessible", async () => {
-    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
-    const { findByText } = renderCheckoutAccessibilityMiddleware();
-    const checkoutContent = await findByText(checkoutRouteText);
-
-    expect(checkoutContent).toBeTruthy();
-  });
-
-  it("calls onNotAccessible callback if it is not accessible", async () => {
-    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([false, QueryStatus.SUCCESS]);
-    const onNotAccessibleFn = jest.fn();
-    const { toJSON } = renderCheckoutAccessibilityMiddleware({ onNotAccessible: onNotAccessibleFn });
-
-    expect(toJSON()).toBeNull();
-    expect(onNotAccessibleFn).toHaveBeenCalled();
-  });
-});

package/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.tsx

@@ -1,39 +0,0 @@
-import React, { FC, useEffect, useRef } from "react";
-import { Spinner } from "@lookiero/aurora";
-import { QueryStatus } from "@lookiero/messaging-react";
-import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
-
-interface CheckoutAccessibilityMiddlewareProps {
-  readonly customerId: string | undefined;
-  readonly onNotAccessible: () => void;
-  readonly loader?: JSX.Element;
-  readonly children: JSX.Element;
-}
-
-const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps> = ({
-  customerId,
-  onNotAccessible,
-  loader = <Spinner />,
-  children,
-}) => {
-  const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
-
-  const onNotAccessibleRef = useRef(onNotAccessible);
-  onNotAccessibleRef.current = onNotAccessible;
-
-  const notAccessible = accessible === false || status === QueryStatus.ERROR;
-
-  useEffect(() => {
-    if (notAccessible) {
-      onNotAccessibleRef.current();
-    }
-  }, [notAccessible]);
-
-  return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
-    ? loader
-    : accessible
-      ? children
-      : null;
-};
-
-export { CheckoutAccessibilityMiddleware };

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

@@ -1,54 +0,0 @@
-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/components/productVariantPreview/ProductVariantPreview.test.tsx

@@ -1,32 +0,0 @@
-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/__snapshots__/ProductVariantPreview.test.tsx.snap

@@ -1,221 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProductVariantPreview matches the snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "flex": 1,
-      },
-    ]
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignSelf": "center",
-          "left": 0,
-          "marginHorizontal": "auto",
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": "100%",
-          "zIndex": 5,
-        },
-      ]
-    }
-  >
-    <RCTSafeAreaView />
-  </View>
-  <View
-    style={
-      [
-        false,
-        {
-          "backgroundColor": "#FFFFFF",
-          "flexDirection": "row",
-          "padding": 16,
-        },
-      ]
-    }
-    testID="product-variant-preview"
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "flexBasis": "auto",
-            "flexWrap": "wrap",
-            "justifyContent": "flex-start",
-            "width": "100%",
-          },
-          {
-            "paddingHorizontal": 24,
-          },
-          {
-            "flex": 1,
-            "justifyContent": "center",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "width": "100%",
-            },
-            undefined,
-            {
-              "flexDirection": "row",
-            },
-          ]
-        }
-      >
-        <Image
-          resizeMode="stretch"
-          source={
-            {
-              "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=70&f=auto",
-            }
-          }
-          style={
-            {
-              "borderRadius": 4,
-              "width": 35,
-            }
-          }
-          testID="product-variant-image"
-        />
-        <View
-          style={
-            [
-              {
-                "flex": 1,
-                "marginLeft": 8,
-              },
-            ]
-          }
-        >
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#837C7C",
-                  "fontFamily": "AreaNormal-Semibold",
-                  "fontSize": 12,
-                  "letterSpacing": 0.1,
-                  "lineHeight": 16,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                },
-              ]
-            }
-          >
-            CKS
-          </Text>
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#0C0A0A",
-                  "fontFamily": "AreaNormal-Semibold",
-                  "fontSize": 12,
-                  "letterSpacing": 0.1,
-                  "lineHeight": 16,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                },
-              ]
-            }
-          >
-            Sari Tshirt lines
-          </Text>
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#837C7C",
-                  "fontFamily": "AreaNormal-Semibold",
-                  "fontSize": 12,
-                  "letterSpacing": 0.1,
-                  "lineHeight": 16,
-                  "paddingBottom": 0,
-                  "paddingLeft": 0,
-                  "paddingRight": 0,
-                  "paddingTop": 0,
-                },
-              ]
-            }
-          >
-            item.size M
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "justifyContent": "flex-end",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              {
-                "flexDirection": "row",
-              }
-            }
-            testID="price"
-          >
-            <View
-              style={
-                {
-                  "alignItems": "flex-end",
-                  "marginLeft": 8,
-                }
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                selectable={false}
-                style={
-                  [
-                    {
-                      "color": "#0C0A0A",
-                      "fontFamily": "AreaNormal-Semibold",
-                      "fontSize": 13,
-                      "letterSpacing": 0.1,
-                      "lineHeight": 17,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 4,
-                    },
-                  ]
-                }
-                testID="price-text"
-              >
-                €39.99
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;