@lookiero/checkout 8.9.0 → 8.11.0-beta.0

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { Image, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { COLOR, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { LazyImage } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
@@ -16,12 +17,7 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
     return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },
             React.createElement(View, null,
-                React.createElement(Image, { resizeMode: "contain", style: [style.media, customStyle?.image], testID: "product-variant-media", source: {
-                        uri: cdnImageUrl({
-                            url: media[0]?.url,
-                            width: IMAGE_WIDTH,
-                        }),
-                    } })),
+                React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH }), resizeMode: "contain", src: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH, dpi: 1 }), style: { view: [style.media, customStyle?.image] }, testID: "product-variant-media" })),
             React.createElement(View, { style: style.descriptionContainer },
                 React.createElement(View, { style: style.infoProductVariant },
                     React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),

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/projection/checkout/viewIsCheckoutAccessibleByCustomerId.d.ts

@@ -0,0 +1,17 @@
+import { Query, QueryHandlerFunction, QueryHandlerFunctionArgs } from "@lookiero/messaging";
+type IsCheckoutAccessibleByCustomerIdProjection = boolean;
+declare const VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID = "view_is_checkout_accessible_by_customer_id";
+interface ViewIsCheckoutAccessibleByCustomerIdPayload {
+    readonly customerId: string | undefined;
+}
+interface ViewIsCheckoutAccessibleByCustomerId extends Query<typeof VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID>, ViewIsCheckoutAccessibleByCustomerIdPayload {
+}
+interface ViewIsCheckoutAccessibleByCustomerIdFunction {
+    (payload: ViewIsCheckoutAccessibleByCustomerIdPayload): ViewIsCheckoutAccessibleByCustomerId;
+}
+declare const viewIsCheckoutAccessibleByCustomerId: ViewIsCheckoutAccessibleByCustomerIdFunction;
+interface ViewIsCheckoutAccessibleByCustomerIdHandlerFunctionArgs extends QueryHandlerFunctionArgs {
+}
+declare const viewIsCheckoutAccessibleByCustomerIdHandler: QueryHandlerFunction<ViewIsCheckoutAccessibleByCustomerId, IsCheckoutAccessibleByCustomerIdProjection, ViewIsCheckoutAccessibleByCustomerIdHandlerFunctionArgs>;
+export type { IsCheckoutAccessibleByCustomerIdProjection };
+export { VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerId, viewIsCheckoutAccessibleByCustomerIdHandler, };

package/dist/src/projection/checkout/viewIsCheckoutAccessibleByCustomerId.js

@@ -0,0 +1,13 @@
+import { query } from "@lookiero/messaging";
+import { viewFirstAvailableCheckoutByCustomerId } from "./viewFirstAvailableCheckoutByCustomerId";
+import { viewIsCheckoutEnabledByCustomerId } from "./viewIsCheckoutEnabledByCustomerId";
+const VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID = "view_is_checkout_accessible_by_customer_id";
+const viewIsCheckoutAccessibleByCustomerId = (payload) => ({
+    ...query({ name: VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID }),
+    ...payload,
+});
+const isNonEmptyCustomerId = (customerId) => Boolean(customerId);
+const viewIsCheckoutAccessibleByCustomerIdHandler = ({ queryBus }) => async ({ customerId }) => isNonEmptyCustomerId(customerId) &&
+    Boolean(await queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId }))) &&
+    Boolean(await queryBus(viewIsCheckoutEnabledByCustomerId({ customerId })));
+export { VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerId, viewIsCheckoutAccessibleByCustomerIdHandler, };

package/dist/src/projection/shared/country.d.ts

@@ -0,0 +1,14 @@
+declare enum Country {
+    ES = "ES",
+    FR = "FR",
+    GB = "GB",
+    BE = "BE",
+    LU = "LU",
+    IT = "IT",
+    PT = "PT",
+    DE = "DE",
+    AT = "AT",
+    NL = "NL",
+    SE = "SE"
+}
+export { Country };

package/dist/src/projection/shared/country.js

@@ -0,0 +1,15 @@
+var Country;
+(function (Country) {
+    Country["ES"] = "ES";
+    Country["FR"] = "FR";
+    Country["GB"] = "GB";
+    Country["BE"] = "BE";
+    Country["LU"] = "LU";
+    Country["IT"] = "IT";
+    Country["PT"] = "PT";
+    Country["DE"] = "DE";
+    Country["AT"] = "AT";
+    Country["NL"] = "NL";
+    Country["SE"] = "SE";
+})(Country || (Country = {}));
+export { Country };

package/dist/src/projection/shared/customer.d.ts

@@ -0,0 +1,8 @@
+import { Country } from "@lookiero/sty-psp-locale";
+import { Segment } from "@lookiero/sty-psp-segment";
+interface Customer {
+    readonly customerId: string;
+    readonly country: Country;
+    readonly segment: Segment;
+}
+export type { Customer };

package/dist/src/projection/shared/customer.js

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

package/dist/src/projection/shared/locale.d.ts

@@ -0,0 +1,12 @@
+declare enum Locale {
+    ES = "es",
+    FR = "fr",
+    EN = "en",
+    IT = "it",
+    PT = "pt",
+    DE = "de",
+    AT = "at",
+    NL = "nl",
+    SE = "sv"
+}
+export { Locale };

package/dist/src/projection/shared/locale.js

@@ -0,0 +1,13 @@
+var Locale;
+(function (Locale) {
+    Locale["ES"] = "es";
+    Locale["FR"] = "fr";
+    Locale["EN"] = "en";
+    Locale["IT"] = "it";
+    Locale["PT"] = "pt";
+    Locale["DE"] = "de";
+    Locale["AT"] = "at";
+    Locale["NL"] = "nl";
+    Locale["SE"] = "sv";
+})(Locale || (Locale = {}));
+export { Locale };

package/dist/src/projection/shared/order.d.ts

@@ -0,0 +1,6 @@
+interface Order {
+    readonly orderNumber: number;
+    readonly isFirstOrder: boolean;
+    readonly coupon: string | null;
+}
+export type { Order };

package/dist/src/projection/shared/order.js

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

package/dist/src/projection/shared/price.d.ts

@@ -0,0 +1,10 @@
+import { Currency } from "../../domain/checkoutItem/model/currency";
+interface PriceProjection {
+    readonly amount: number;
+    readonly currency: Currency;
+    readonly discountedPrice?: {
+        readonly amount: number;
+        readonly percentage: number;
+    };
+}
+export type { PriceProjection };

package/dist/src/projection/shared/price.js

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

package/dist/src/projection/shared/size.d.ts

@@ -0,0 +1,20 @@
+import { Country } from "./country";
+interface SizeProjection {
+    readonly id: string;
+    readonly lookiero: string;
+    readonly uk: string;
+    readonly it: string;
+    readonly europe: string;
+    readonly unique: boolean;
+    readonly visualOrder?: number;
+}
+interface SizeFunctionArgs {
+    readonly size: SizeProjection;
+    readonly country: Country;
+}
+interface SizeFunction {
+    (args: SizeFunctionArgs): string;
+}
+declare const size: SizeFunction;
+export type { SizeProjection };
+export { size };

package/dist/src/projection/shared/size.js

@@ -0,0 +1,3 @@
+import { Country } from "./country";
+const size = ({ size, country }) => (country === Country.GB ? size.uk : size.lookiero);
+export { size };

package/dist/src/projection/shared/subscription.d.ts

@@ -0,0 +1,2 @@
+type Subscription = "o" | "m" | "b" | "q";
+export type { Subscription };

package/dist/src/projection/shared/subscription.js

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

package/dist/src/shared/ui/components/atoms/error/Error.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+type ErrorStyle = StyleProp<TextStyle>;
+interface ErrorProps {
+    readonly error?: string | null;
+    readonly style?: ErrorStyle;
+}
+declare const Error: FC<ErrorProps>;
+export type { ErrorStyle };
+export { Error };

package/dist/src/shared/ui/components/atoms/error/Error.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { COLOR, Text } from "@lookiero/aurora";
+const Error = ({ error, style: customStyle }) => (React.createElement(Text, { color: COLOR.TEXT_ERROR, level: 2, style: customStyle, detail: true }, error));
+export { Error };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "8.9.0";
+export declare const VERSION = "8.11.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "8.9.0";
+export const VERSION = "8.11.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "8.9.0",
+  "version": "8.11.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -15,21 +15,21 @@
   "dependencies": {
     "@lookiero/messaging": "^8.1.1",
     "@lookiero/messaging-react": "^8.1.1",
-    "@lookiero/sty-psp-ab-testing": "^0.2.3",
-    "@lookiero/sty-psp-expo-config": "^0.1.0",
-    "@lookiero/sty-psp-http": "^2.0.0",
-    "@lookiero/sty-psp-i18n": "^0.2.1",
-    "@lookiero/sty-psp-locale": "^0.4.0",
-    "@lookiero/sty-psp-logging": "^0.2.3",
-    "@lookiero/sty-psp-notifications": "^0.5.14",
-    "@lookiero/sty-psp-react-native": "^0.2.0",
-    "@lookiero/sty-psp-segment": "^0.1.1",
-    "@lookiero/sty-psp-storage": "^0.1.3",
-    "@lookiero/sty-psp-tracking": "^0.1.9",
-    "@lookiero/sty-psp-ui": "^0.5.10",
-    "@lookiero/sty-psp-ui-settings": "^0.1.2",
-    "@lookiero/sty-psp-units": "^0.1.1",
-    "@lookiero/sty-psp-uuid": "^0.1.0",
+    "@lookiero/sty-psp-ab-testing": "^0.2",
+    "@lookiero/sty-psp-expo-config": "^0.1",
+    "@lookiero/sty-psp-http": "^2.0",
+    "@lookiero/sty-psp-i18n": "^0.2",
+    "@lookiero/sty-psp-locale": "^0.4",
+    "@lookiero/sty-psp-logging": "^0.3",
+    "@lookiero/sty-psp-notifications": "^0.5",
+    "@lookiero/sty-psp-react-native": "^0.2",
+    "@lookiero/sty-psp-segment": "^0.1",
+    "@lookiero/sty-psp-storage": "^0.1",
+    "@lookiero/sty-psp-tracking": "^0.1",
+    "@lookiero/sty-psp-ui": "0.5.11-beta.0",
+    "@lookiero/sty-psp-ui-settings": "^0.1",
+    "@lookiero/sty-psp-units": "^0.1",
+    "@lookiero/sty-psp-uuid": "^0.1",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-spring/native": "9.6.1",
     "react-native-svg": "^13.4.0",

package/src/ExpoRoot.tsx

@@ -48,7 +48,7 @@ const sentryConfig: SentryEnvironment = {
 const apiUrl =
   Platform.OS !== "web" ? "https://web2.sp.dev.aws.lookiero.es/quiz/api" : __DEV__ ? "/local-to-dev" : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUyNTgzODQsImV4cCI6MTcyMzY0MTc3NCwiZGlzcGxheU5hbWUiOiJtYWlsLmRldithLnNhYXZlZHJhI2xvb2tpZXJvLmNvbUBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidXVpZCI6IjBlZGUyNzZjLTRkNTEtNDhiMC05ZGJjLTQ4MmY4OGNiZmM3NyIsImlhdCI6MTcyMzYxMjk3NH0.x7E9b7DWVZjVAHJO_L36f7ZMxe_8N2Pjr8xHPjP1qF0";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUzNzYyNDEsImV4cCI6MTcyNzAwMTc2MiwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTA4LTIwIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6IjRmMDg0ZTg0LWM5ZTEtNDE0NS1iMjM1LWE5ZjEyOWQ0OWMyMiIsImlhdCI6MTcyNDMyMzM2Mn0.mBDi_xW9DJLWLuWbxbC-TS6OWJriD4BTAXZAHoOMdcQ";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =

package/src/infrastructure/ui/Root.tsx

@@ -86,7 +86,7 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
    * It's important to not call sentryLoggerHOC each time this function gets called.
    * That's why its called outside this method.
    */
-  return ({ customerId }) => hoc({ customerId })(Root);
+  return ({ customerId, rootClient }) => hoc({ customerId, rootClient })(Root);
 };
 
 export type { RootProps };

package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useCallback, useState } from "react";
-import { Image } from "react-native";
 import {
   Bullets,
   Carousel,
+  LazyImage,
   RenderBulletsFunction,
   RenderItemFunction,
   theme,
@@ -46,16 +46,12 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
             alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
           }}
         >
-          <Image
+          <LazyImage
+            hiResSrc={cdnImageUrl({ url: item.url, width: 600 })}
             resizeMode="stretch"
-            style={[style.image, isDesktopScreen ? style.largeImage : null]}
+            src={cdnImageUrl({ url: item.url, width: 600, dpi: 1 })}
+            style={{ view: [style.image, isDesktopScreen ? style.largeImage : null] }}
             testID="product-variant-image"
-            source={{
-              uri: cdnImageUrl({
-                url: item.url,
-                width: 600,
-              }),
-            }}
           />
         </AspectRatioView>
       );

package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap

@@ -135,23 +135,130 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                       ]
                     }
                   >
-                    <Image
-                      resizeMode="stretch"
-                      source={
-                        {
-                          "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=1200&f=auto",
-                        }
-                      }
+                    <View
                       style={
                         [
                           {
-                            "flex": 1,
+                            "position": "relative",
                           },
-                          null,
+                          [
+                            {
+                              "flex": 1,
+                            },
+                            null,
+                          ],
                         ]
                       }
                       testID="product-variant-image"
-                    />
+                    >
+                      <View
+                        style={
+                          [
+                            {
+                              "flex": 1,
+                            },
+                          ]
+                        }
+                        testID="lazy-image-skeleton"
+                      >
+                        <View
+                          onLayout={[Function]}
+                          style={
+                            [
+                              {
+                                "backgroundColor": "#F8F7F7",
+                                "flex": 1,
+                                "height": undefined,
+                                "overflow": "hidden",
+                                "width": undefined,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            collapsable={false}
+                            duration={1200}
+                            style={
+                              {
+                                "height": "100%",
+                                "left": 0,
+                                "transform": [
+                                  {
+                                    "translateX": -375,
+                                  },
+                                ],
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            <View
+                              colors={
+                                [
+                                  "rgba(255, 255, 255, 0)",
+                                  "#DAD8D8",
+                                  "#DAD8D8",
+                                  "rgba(255, 255, 255, 0)",
+                                ]
+                              }
+                              end={
+                                {
+                                  "x": 1,
+                                  "y": 0,
+                                }
+                              }
+                              locations={
+                                [
+                                  0,
+                                  0.25,
+                                  0.75,
+                                  1,
+                                ]
+                              }
+                              start={
+                                {
+                                  "x": 0,
+                                  "y": 0,
+                                }
+                              }
+                              style={
+                                {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                            />
+                          </View>
+                        </View>
+                      </View>
+                      <Image
+                        animatedStyle={
+                          {
+                            "value": {
+                              "opacity": 0,
+                            },
+                          }
+                        }
+                        collapsable={false}
+                        onLoad={[Function]}
+                        resizeMode="stretch"
+                        source={
+                          {
+                            "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
+                          }
+                        }
+                        style={
+                          {
+                            "flex": 1,
+                            "height": "100%",
+                            "opacity": 0,
+                            "position": "absolute",
+                            "width": "100%",
+                            "zIndex": 10,
+                          }
+                        }
+                        testID="lazy-image-main-image"
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
@@ -186,23 +293,130 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                       ]
                     }
                   >
-                    <Image
-                      resizeMode="stretch"
-                      source={
-                        {
-                          "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=1200&f=auto",
-                        }
-                      }
+                    <View
                       style={
                         [
                           {
-                            "flex": 1,
+                            "position": "relative",
                           },
-                          null,
+                          [
+                            {
+                              "flex": 1,
+                            },
+                            null,
+                          ],
                         ]
                       }
                       testID="product-variant-image"
-                    />
+                    >
+                      <View
+                        style={
+                          [
+                            {
+                              "flex": 1,
+                            },
+                          ]
+                        }
+                        testID="lazy-image-skeleton"
+                      >
+                        <View
+                          onLayout={[Function]}
+                          style={
+                            [
+                              {
+                                "backgroundColor": "#F8F7F7",
+                                "flex": 1,
+                                "height": undefined,
+                                "overflow": "hidden",
+                                "width": undefined,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            collapsable={false}
+                            duration={1200}
+                            style={
+                              {
+                                "height": "100%",
+                                "left": 0,
+                                "transform": [
+                                  {
+                                    "translateX": -375,
+                                  },
+                                ],
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            <View
+                              colors={
+                                [
+                                  "rgba(255, 255, 255, 0)",
+                                  "#DAD8D8",
+                                  "#DAD8D8",
+                                  "rgba(255, 255, 255, 0)",
+                                ]
+                              }
+                              end={
+                                {
+                                  "x": 1,
+                                  "y": 0,
+                                }
+                              }
+                              locations={
+                                [
+                                  0,
+                                  0.25,
+                                  0.75,
+                                  1,
+                                ]
+                              }
+                              start={
+                                {
+                                  "x": 0,
+                                  "y": 0,
+                                }
+                              }
+                              style={
+                                {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                            />
+                          </View>
+                        </View>
+                      </View>
+                      <Image
+                        animatedStyle={
+                          {
+                            "value": {
+                              "opacity": 0,
+                            },
+                          }
+                        }
+                        collapsable={false}
+                        onLoad={[Function]}
+                        resizeMode="stretch"
+                        source={
+                          {
+                            "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
+                          }
+                        }
+                        style={
+                          {
+                            "flex": 1,
+                            "height": "100%",
+                            "opacity": 0,
+                            "position": "absolute",
+                            "width": "100%",
+                            "zIndex": 10,
+                          }
+                        }
+                        testID="lazy-image-main-image"
+                      />
+                    </View>
                   </View>
                 </View>
               </View>