@lookiero/checkout 12.18.0 → 12.20.0

package/dist/src/ExpoRoot.js

@@ -18,7 +18,7 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
-const tradename = Tradename.OUTFITTERY;
+const tradename = Tradename.LOOKIERO;
 const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const subscription = "b";
@@ -28,8 +28,8 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "cee70989-f605-4930-8190-71e3e2502fa1",
-    country: Country.NL,
+    customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+    country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
     name: "Adèle Léonce Émilie",
@@ -47,7 +47,7 @@ const apiUrl = Platform.OS !== "web"
             ? "/local-to-dev"
             : "http://localhost:3004/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTIwMjgsImV4cCI6MTc1NzMxOTgyNSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMTgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiOTQxM2ZlM2EtMDlmYy00MjY0LTkwNWUtMDQwYmI3YjRjYTc1IiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NTQ2NDE0MjV9.n9OBM8mV1HoEzwg1v60XSjcgFythcrBRty1mcpE7KDM";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"

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

@@ -29,7 +29,7 @@ const Item = ({ layout: Layout }) => {
     const logger = useLogger();
     const navigate = useNavigate();
     const { customer: { customerId, country, segment }, basePath, tradename, } = useStaticInfo();
-    const style = useMemo(() => itemStyle(), []);
+    const { style, headerHeight, headerWithDoubleHeight } = useMemo(() => itemStyle(), []);
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
     const { id } = useParams();
@@ -144,11 +144,12 @@ const Item = ({ layout: Layout }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, { testID: "spinner" });
     }
+    const itemHeaderHeight = fiveItemsDiscount !== 0 ? headerWithDoubleHeight : headerHeight;
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
         React.createElement(Layout, { footer: null, header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
-                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+                header: { height: itemHeaderHeight },
                 scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
                 safeAreaView: isDesktopScreen ? style.safeAreaView : null,
-            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, onReturn: goToReturnPage })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: goToReturnPage })))));
+            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, headerHeight: itemHeaderHeight, onReturn: goToReturnPage })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, headerHeight: itemHeaderHeight, returnQuestions: returnQuestions, onEditFeedback: goToReturnPage })))));
 };
 export { Item };

package/dist/src/infrastructure/ui/views/item/Item.style.d.ts

@@ -1,19 +1,17 @@
 declare const style: () => {
-    fiveItemsDiscountPadding: {
-        paddingTop: number;
-    };
-    header: {
-        height: number;
-    };
-    headerWithDoubleHeight: {
-        height: number;
-    };
-    headerWrapper: {
-        display: "flex";
-        flexDirection: "column";
-    };
-    safeAreaView: {
-        backgroundColor: string;
+    style: {
+        fiveItemsDiscountPadding: {
+            paddingTop: number;
+        };
+        headerWrapper: {
+            display: "flex";
+            flexDirection: "column";
+        };
+        safeAreaView: {
+            backgroundColor: string;
+        };
     };
+    headerHeight: number;
+    headerWithDoubleHeight: number;
 };
 export { style };

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

@@ -3,16 +3,10 @@ import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 const style = () => {
     const { colorBgPrimaryLight, space12 } = theme();
-    return StyleSheet.create({
+    const style = StyleSheet.create({
         fiveItemsDiscountPadding: {
             paddingTop: space12,
         },
-        header: {
-            height: HEADER_HEIGHT,
-        },
-        headerWithDoubleHeight: {
-            height: HEADER_HEIGHT * 2,
-        },
         headerWrapper: {
             display: "flex",
             flexDirection: "column",
@@ -21,5 +15,10 @@ const style = () => {
             backgroundColor: colorBgPrimaryLight,
         },
     });
+    return {
+        style,
+        headerHeight: HEADER_HEIGHT,
+        headerWithDoubleHeight: HEADER_HEIGHT * 2,
+    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.d.ts

@@ -3,6 +3,7 @@ import { MediaProjection } from "../../../../../../projection/checkoutItem/check
 interface ProductVariantSlider {
     readonly producVariantMedia: MediaProjection[];
     readonly onChanged?: (active: number) => void;
+    readonly availableHeight: number;
 }
 declare const ProductVariantSlider: FC<ProductVariantSlider>;
 export { ProductVariantSlider };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
 import { AspectRatioView, Bullets, Carousel, LazyImage, useScreenSize, } from "@lookiero/sty-psp-ui";
 import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style as productVariantSliderStyle } from "./ProductVariantSlider.style";
-const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
+const ProductVariantSlider = ({ producVariantMedia, onChanged, availableHeight }) => {
     const cdnImageUrl = useMediaImage();
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
@@ -13,23 +14,28 @@ const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
         setActiveIndex(activeIndex);
         onChanged?.(activeIndex);
     }, [onChanged]);
+    const [width, setWidth] = useState(0);
+    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => setWidth(width), []);
+    const aspectRatio = Math.min(4 / 3, availableHeight / width);
     const renderItem = useCallback(({ item, index }) => {
         const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
         const isLastItem = index === producVariantMedia.length - 1;
-        return (React.createElement(AspectRatioView, { aspectRatio: 4 / 3, multiplier: isCollageImage && isLastItem ? 2 : 1, style: {
-                marginTop: isCollageImage && !isDesktopScreen ? style.imageContainerMarginTop : 0,
-                alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
-            } },
-            React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: item.url, width: 600 }), resizeMode: "stretch", src: cdnImageUrl({ url: item.url, width: 600, dpi: 1 }), style: { view: [style.image, isDesktopScreen ? style.largeImage : null] }, testID: "product-variant-image" })));
+        return (React.createElement(View, { onLayout: handleOnLayout },
+            React.createElement(AspectRatioView, { aspectRatio: aspectRatio, multiplier: isCollageImage && isLastItem ? 2 : 1, style: {
+                    alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
+                } },
+                React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: item.url, width: 600 }), resizeMode: isCollageImage ? "stretch" : "contain", src: cdnImageUrl({ url: item.url, width: 600, dpi: 1 }), style: { view: [style.image, isDesktopScreen ? style.largeImage : null] }, testID: "product-variant-image" }))));
     }, [
+        aspectRatio,
         cdnImageUrl,
+        handleOnLayout,
         isDesktopScreen,
         producVariantMedia.length,
         style.image,
-        style.imageContainerMarginTop,
         style.largeImage,
     ]);
     const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
+    console.log({ producVariantMedia });
     return (React.createElement(Carousel, { activeIndex: activeIndex, bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
 };
 export { ProductVariantSlider };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.d.ts

@@ -1,5 +1,4 @@
 declare const style: () => {
-    imageContainerMarginTop: number;
     image: {
         flex: number;
     };

package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js

@@ -2,8 +2,8 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const PAGINATION_SIZE = 37;
 const style = () => {
-    const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4, space16 } = theme();
-    const styles = StyleSheet.create({
+    const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4 } = theme();
+    return StyleSheet.create({
         image: {
             flex: 1,
         },
@@ -30,9 +30,5 @@ const style = () => {
             position: "relative",
         },
     });
-    return {
-        ...styles,
-        imageContainerMarginTop: space16,
-    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.d.ts

@@ -12,6 +12,7 @@ interface ItemWithCustomerDecissionProps {
     readonly returnQuestions: ReturnQuestionProjection[];
     readonly currentProductVariant: ProductVariantProjection;
     readonly onEditFeedback: () => void;
+    readonly headerHeight: number;
 }
 declare const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps>;
 export type { CheckoutItemWithCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import { View } from "react-native";
+import { useWindowDimensions, View } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -14,8 +14,9 @@ import { CustomerDecissionBanner, } from "../../components/banner/CustomerDeciss
 import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
 import { style as itemWithCustomerDecissionStyle } from "./ItemWithCustomerDecission.style";
-const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
+const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, headerHeight, }) => {
     const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
+    const { height } = useWindowDimensions();
     const screenSize = useScreenSize();
     const isMobile = screenSize === "S";
     const logger = useLogger();
@@ -42,8 +43,9 @@ const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions,
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, { testID: "spinner" });
     }
+    const sliderAvailableHeight = height - headerHeight;
     return (React.createElement(Body, { style: { row: style.container } },
-        React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, tradename: tradename, customerDecissionBanner: React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }) }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: [style.feedbackContainer, isMobile ? style.feedbackContainerMobile : undefined] },
+        React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, sliderAvailableHeight: sliderAvailableHeight, tradename: tradename, customerDecissionBanner: React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }) }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: [style.feedbackContainer, isMobile ? style.feedbackContainerMobile : undefined] },
             React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, onEditFeedback: onEditFeedback }))))));
 };
 export { ItemWithCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.d.ts

@@ -12,6 +12,7 @@ interface ItemWithoutCustomerDecissionProps {
     readonly bookedProductsVariants: BookedProductsVariantsProjection;
     readonly currentProductVariant: ProductVariantProjection;
     readonly onReturn: () => void;
+    readonly headerHeight: number;
 }
 declare const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps>;
 export type { CheckoutItemWithoutCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { Platform, ScrollView } from "react-native";
+import { Platform, ScrollView, useWindowDimensions } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -15,10 +15,11 @@ import { ItemActions } from "../../components/itemActions/ItemActions";
 import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/SizeWithoutStockModal";
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style as itemWithoutCustomerDecissionStyle } from "./ItemWithoutCustomerDecission.style";
-const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, }) => {
+const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, headerHeight, }) => {
     const logger = useLogger();
     const { customer: { country, segment }, tradename, } = useStaticInfo();
     const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
+    const { height } = useWindowDimensions();
     /* KeepCheckoutItem */
     const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
     const trackKeepItem = useTrackKeepItem({
@@ -62,12 +63,13 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, { testID: "spinner" });
     }
+    const sliderAvailableHeight = height - headerHeight - stickyHeight;
     return (React.createElement(React.Fragment, null,
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: checkoutItem.id },
             React.createElement(Body, { style: { row: style.container } },
-                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, tradename: tradename, style: {
-                        content: { paddingBottom: Platform.OS === "web" ? style.productVariantPaddingBottom : stickyHeight },
+                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, sliderAvailableHeight: sliderAvailableHeight, tradename: tradename, style: {
+                        content: { paddingBottom: Platform.OS === "web" ? 0 : stickyHeight },
                     } }))),
         React.createElement(ItemActions, { country: country, currentProductVariant: currentProductVariant, productVariants: bookedProductsVariants?.productVariants, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: onReturn, onShowSizeWithoutStockModal: handleOnShowSizeWithoutStockModal })));
 };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts

@@ -1,5 +1,4 @@
 declare const style: () => {
-    productVariantPaddingBottom: number;
     container: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js

@@ -1,16 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { space6, space10 } = theme();
-    const styles = StyleSheet.create({
+    const { space10 } = theme();
+    return StyleSheet.create({
         container: {
             paddingBottom: space10,
             paddingHorizontal: 0,
         },
     });
-    return {
-        ...styles,
-        productVariantPaddingBottom: space6,
-    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.d.ts

@@ -16,6 +16,7 @@ interface ProductVariantProps {
     readonly style?: Partial<Record<ProductVariantStyle, StyleProp<ViewStyle>>>;
     readonly children?: ReactNode;
     readonly customerDecissionBanner?: ReactNode;
+    readonly sliderAvailableHeight: number;
 }
 declare const ProductVariant: FC<ProductVariantProps>;
 export { ProductVariant };

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.js

@@ -7,7 +7,7 @@ import { useTrackImageView } from "../../../../../tracking/useTrackImageView";
 import { ProductVariantDescription } from "../../components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "../../components/productVariantSlider/ProductVariantSlider";
 import { style as productVariantStyle } from "./ProductVariant.style";
-const ProductVariant = ({ tradename, country, segment, checkoutId, checkoutItem, currentProductVariant, style: customStyle, children, customerDecissionBanner, }) => {
+const ProductVariant = ({ tradename, country, segment, checkoutId, checkoutItem, currentProductVariant, style: customStyle, children, customerDecissionBanner, sliderAvailableHeight, }) => {
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
     const style = useMemo(() => productVariantStyle(), []);
@@ -28,7 +28,7 @@ const ProductVariant = ({ tradename, country, segment, checkoutId, checkoutItem,
     const { media, brand, name } = checkoutItem.productVariant;
     const collage = media.find((m) => m.perspective === MediaPerspective.COLLAGE);
     return (React.createElement(View, { style: [style.container, isDesktopScreen ? style.largeContainer : null], testID: "product-variant" },
-        React.createElement(ProductVariantSlider, { producVariantMedia: collage ? [...media, collage] : media, onChanged: handleOnChangedProductVariantSlider }),
+        React.createElement(ProductVariantSlider, { availableHeight: sliderAvailableHeight, producVariantMedia: collage ? [...media, { ...collage, id: `${collage.id}-collage` }] : media, onChanged: handleOnChangedProductVariantSlider }),
         React.createElement(View, { style: [style.content, customStyle?.content] },
             customerDecissionBanner,
             React.createElement(ProductVariantDescription, { brand: brand, country: country, name: name, price: price, size: currentProductVariant.size }),

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.d.ts

@@ -3,13 +3,12 @@ declare const style: () => {
         backgroundColor: string;
     };
     content: {
-        paddingVertical: number;
+        paddingTop: number;
     };
     largeContainer: {
         borderRadius: number;
         marginTop: number;
         padding: number;
-        paddingBottom: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.js

@@ -1,19 +1,18 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 const style = () => {
-    const { space6, space12, colorBgBase, borderRadius4 } = theme();
+    const { space6, space8, colorBgBase, borderRadius4 } = theme();
     return StyleSheet.create({
         container: {
             backgroundColor: colorBgBase,
         },
         content: {
-            paddingVertical: space6,
+            paddingTop: space6,
         },
         largeContainer: {
             borderRadius: borderRadius4,
-            marginTop: space12,
-            padding: space12,
-            paddingBottom: 0,
+            marginTop: space8,
+            padding: space8,
         },
     });
 };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "12.18.0";
+export declare const VERSION = "12.20.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "12.18.0";
+export const VERSION = "12.20.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "12.18.0",
+  "version": "12.20.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -27,13 +27,13 @@
     "@lookiero/sty-psp-i18n": "^1.3",
     "@lookiero/sty-psp-locale": "^1.0",
     "@lookiero/sty-psp-logging": "^1.1",
-    "@lookiero/sty-psp-notifications": "^2.8",
+    "@lookiero/sty-psp-notifications": "^2.9",
     "@lookiero/sty-psp-react-native": "^1.0",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^2.1",
     "@lookiero/sty-psp-ui-settings": "^1.1",
-    "@lookiero/sty-psp-ui": "^2.6",
+    "@lookiero/sty-psp-ui": "^3.0",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",
@@ -71,7 +71,7 @@
   },
   "peerDependencies": {
     "@gorhom/portal": ">=1.0",
-    "@lookiero/aurora": ">=6",
+    "@lookiero/aurora": ">=7",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=3",

package/src/ExpoRoot.tsx

@@ -25,7 +25,7 @@ import { OrderProjection } from "./projection/order/order";
 import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const tradename = Tradename.OUTFITTERY;
+const tradename = Tradename.LOOKIERO;
 const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 
@@ -37,8 +37,8 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "cee70989-f605-4930-8190-71e3e2502fa1",
-  country: Country.NL,
+  customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+  country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
   name: "Adèle Léonce Émilie",
@@ -60,7 +60,7 @@ const apiUrl =
         : "http://localhost:3004/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTIwMjgsImV4cCI6MTc1NzMxOTgyNSwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMTgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiOTQxM2ZlM2EtMDlmYy00MjY0LTkwNWUtMDQwYmI3YjRjYTc1IiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJpYXQiOjE3NTQ2NDE0MjV9.n9OBM8mV1HoEzwg1v60XSjcgFythcrBRty1mcpE7KDM";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =

package/src/infrastructure/ui/views/item/Item.style.ts

@@ -5,16 +5,10 @@ import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 const style = () => {
   const { colorBgPrimaryLight, space12 } = theme();
 
-  return StyleSheet.create({
+  const style = StyleSheet.create({
     fiveItemsDiscountPadding: {
       paddingTop: space12,
     },
-    header: {
-      height: HEADER_HEIGHT,
-    },
-    headerWithDoubleHeight: {
-      height: HEADER_HEIGHT * 2,
-    },
     headerWrapper: {
       display: "flex",
       flexDirection: "column",
@@ -23,6 +17,12 @@ const style = () => {
       backgroundColor: colorBgPrimaryLight,
     },
   });
+
+  return {
+    style,
+    headerHeight: HEADER_HEIGHT,
+    headerWithDoubleHeight: HEADER_HEIGHT * 2,
+  };
 };
 
 export { style };

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

@@ -66,7 +66,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     tradename,
   } = useStaticInfo();
 
-  const style = useMemo(() => itemStyle(), []);
+  const { style, headerHeight, headerWithDoubleHeight } = useMemo(() => itemStyle(), []);
 
   const screenSize = useScreenSize();
   const isDesktopScreen = screenSize !== "S";
@@ -223,6 +223,8 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     return <Spinner testID="spinner" />;
   }
 
+  const itemHeaderHeight = fiveItemsDiscount !== 0 ? headerWithDoubleHeight : headerHeight;
+
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
       <Layout
@@ -230,7 +232,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
         header={header}
         scrollEnabled={!itemWithoutCustomerDecission}
         style={{
-          header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+          header: { height: itemHeaderHeight },
           scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
           safeAreaView: isDesktopScreen ? style.safeAreaView : null,
         }}
@@ -241,6 +243,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
             currentProductVariant={currentProductVariant}
+            headerHeight={itemHeaderHeight}
             onReturn={goToReturnPage}
           />
         ) : (
@@ -248,6 +251,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
             checkoutId={checkout.id}
             checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
             currentProductVariant={currentProductVariant}
+            headerHeight={itemHeaderHeight}
             returnQuestions={returnQuestions}
             onEditFeedback={goToReturnPage}
           />

package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.ts

@@ -4,10 +4,9 @@ import { theme } from "@lookiero/sty-psp-ui";
 const PAGINATION_SIZE = 37;
 
 const style = () => {
-  const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4, space16 } =
-    theme();
+  const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4 } = theme();
 
-  const styles = StyleSheet.create({
+  return StyleSheet.create({
     image: {
       flex: 1,
     },
@@ -34,11 +33,6 @@ const style = () => {
       position: "relative",
     },
   });
-
-  return {
-    ...styles,
-    imageContainerMarginTop: space16,
-  };
 };
 
 export { style };