@lookiero/checkout 5.0.0-update-aurora-version-2024.2.29.112652 → 5.0.0

package/dist/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -1,4 +1,4 @@
-import { InfoBox, INFOBOX_TYPE, Text, DISPLAY } from "@lookiero/aurora";
+import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { I18nMessages } from "../../../i18n/i18n";
@@ -11,6 +11,6 @@ const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
             b: (chunks) => (React.createElement(Text, { as: "span", display: DISPLAY.INLINE, level: 2, style: style.textBold }, chunks)),
         },
     });
-    return React.createElement(InfoBox, { icon: "info", testID: "five-items-discount-banner", text: bannerText, type: INFOBOX_TYPE.SQUARED });
+    return (React.createElement(InfoBox, { contentAlign: ALIGN.CENTER, icon: "info", testID: "five-items-discount-banner", text: bannerText, type: INFOBOX_TYPE.SQUARED }));
 };
 export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/components/layouts/layout/Layout.d.ts

@@ -3,6 +3,7 @@ import { LayoutChangeEvent, ScrollView, StyleProp, ViewStyle } from "react-nativ
 interface LayoutStyle {
     readonly safeAreaView: StyleProp<ViewStyle>;
     readonly scrollView: StyleProp<ViewStyle>;
+    readonly header: StyleProp<ViewStyle>;
 }
 interface LayoutProps {
     readonly children: ReactNode;

package/dist/infrastructure/ui/components/layouts/layout/components/header/Header.style.d.ts

@@ -1,5 +1,4 @@
-declare const HEADER_HEIGHT: number;
 declare const style: {
     header: {};
 };
-export { style, HEADER_HEIGHT };
+export { style };

package/dist/infrastructure/ui/components/layouts/layout/components/header/Header.style.js

@@ -1,7 +1,5 @@
-import { Theme } from "@lookiero/aurora";
 import { Platform, StyleSheet } from "react-native";
-const { space12 } = Theme.get();
-const HEADER_HEIGHT = space12;
+import { HEADER_HEIGHT } from "../../../../templates/header/Header.style";
 const style = StyleSheet.create({
     header: {
         ...Platform.select({
@@ -18,4 +16,4 @@ const style = StyleSheet.create({
         }),
     },
 });
-export { style, HEADER_HEIGHT };
+export { style };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestion.js

@@ -2,7 +2,6 @@ import React, { memo } from "react";
 import { useCheckoutQuestionItem } from "./behaviors/useCheckoutQuestionItem";
 const CheckoutQuestion = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
     const Item = useCheckoutQuestionItem({ type: checkoutQuestion.type });
-    return (React.createElement(Item, { checkoutQuestion: checkoutQuestion, checkoutQuestionParentId: checkoutQuestionParentId, testID: checkoutQuestion.id },
-        React.createElement(React.Fragment, null, checkoutQuestion.children?.map((childCheckoutQuestion) => (React.createElement(CheckoutQuestion, { key: childCheckoutQuestion.id, checkoutQuestion: childCheckoutQuestion, checkoutQuestionParentId: checkoutQuestion.id }))))));
+    return (React.createElement(Item, { checkoutQuestion: checkoutQuestion, checkoutQuestionParentId: checkoutQuestionParentId, testID: checkoutQuestion.id }, checkoutQuestion.children?.map((childCheckoutQuestion) => (React.createElement(CheckoutQuestion, { key: childCheckoutQuestion.id, checkoutQuestion: childCheckoutQuestion, checkoutQuestionParentId: checkoutQuestion.id })))));
 };
 export default memo(CheckoutQuestion);

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts

@@ -1,5 +1,6 @@
 declare const style: {
     button: {
+        flex: number;
         marginHorizontal: number;
     };
 };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native";
 const style = StyleSheet.create({
     button: {
+        flex: 1,
         marginHorizontal: 12,
     },
 });

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -1,11 +1,13 @@
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children }) => {
     const titleText = useI18nMessage({ id: returnQuestion.name });
+    const isAllOptions = returnQuestion.name === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { level: 3, style: style.title }, titleText),
+        titleText && titleText !== " " ? (React.createElement(Text, { level: 3, style: [style.title, isAllOptions ? style.allOptionsTitle : undefined] }, titleText)) : null,
         children));
 };
 export { HostDefaultReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.d.ts

@@ -1,4 +1,7 @@
 declare const style: {
+    allOptionsTitle: {
+        display: "none";
+    };
     title: {
         marginBottom: number;
     };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.style.js

@@ -2,6 +2,9 @@ import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
 const { space4 } = Theme.get();
 const style = StyleSheet.create({
+    allOptionsTitle: {
+        display: "none",
+    },
     title: {
         marginBottom: space4,
     },

package/dist/infrastructure/ui/components/organisms/returnQuestions/util/returnQuestionFeedback.js

@@ -1,5 +1,7 @@
-import { validate } from "uuid";
-const isUuid = (value) => validate(value);
+const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+const isUuid = (value) => {
+    return typeof value === "string" && REGEX.test(value);
+};
 const feedbackForReturnQuestion = ({ feedback, returnQuestion, translate, acc = [], }) => {
     const returnQuestionId = Object.keys(feedback).find((id) => id === returnQuestion.id);
     if (returnQuestionId) {

package/dist/infrastructure/ui/components/templates/header/Header.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
-import { Platform, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Platform, SafeAreaView, View } from "react-native";
 import { style } from "./Header.style";
 const Header = ({ children, style: customStyle, ...props }) => {
     const Component = useMemo(() => (Platform.OS === "android" ? SafeAreaView : View), []);

package/dist/infrastructure/ui/components/templates/header/Header.style.d.ts

@@ -1,3 +1,4 @@
+export declare const HEADER_HEIGHT: number;
 declare const style: {
     header: {
         alignItems: "center";

package/dist/infrastructure/ui/components/templates/header/Header.style.js

@@ -1,6 +1,7 @@
 import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
-const { colorBgBase, space2 } = Theme.get();
+const { colorBgBase, space2, space12 } = Theme.get();
+export const HEADER_HEIGHT = space12;
 const style = StyleSheet.create({
     header: {
         alignItems: "center",

package/dist/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.d.ts

@@ -1,4 +1,3 @@
-declare const HEADER_HEIGHT: number;
 declare const style: {
     buttonIconPlaceholder: {
         flexGrow: number;
@@ -6,4 +5,4 @@ declare const style: {
         width: number;
     };
 };
-export { style, HEADER_HEIGHT };
+export { style };

package/dist/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.js

@@ -1,7 +1,6 @@
 import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
-const { space10, space12 } = Theme.get();
-const HEADER_HEIGHT = space12;
+const { space10 } = Theme.get();
 const style = StyleSheet.create({
     buttonIconPlaceholder: {
         flexGrow: 0,
@@ -9,4 +8,4 @@ const style = StyleSheet.create({
         width: space10,
     },
 });
-export { style, HEADER_HEIGHT };
+export { style };

package/dist/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -1,14 +1,16 @@
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import { Box, ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import style from "./CheckoutHeader.style";
 const CheckoutHeader = ({ onBack }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
-    return (React.createElement(Header, { testID: "checkout-header" },
-        React.createElement(ButtonIcon, { name: "arrow_left", testID: "arrow-left-button-icon", onPress: onBack }),
-        React.createElement(Text, { level: 3, action: true }, title),
-        React.createElement(ButtonIconPlaceholder, null)));
+    return (React.createElement(Box, null,
+        React.createElement(Header, { testID: "checkout-header" },
+            React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
+            React.createElement(Text, { level: 3, action: true }, title),
+            React.createElement(ButtonIconPlaceholder, null))));
 };
 export { CheckoutHeader };

package/dist/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    button: {
+        height: number;
+        width: number;
+    };
+};
+export default style;

package/dist/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.js

@@ -0,0 +1,10 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+const { space10 } = Theme.get();
+const style = StyleSheet.create({
+    button: {
+        height: space10,
+        width: space10,
+    },
+});
+export default style;

package/dist/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -7,6 +7,7 @@ import { Routes } from "../../../../routing/routes";
 import { useBasePath } from "../../../../routing/useBasePath";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import style from "./ItemHeader.style";
 const ItemHeader = ({ items, item, onNext, onPrevious }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
@@ -27,8 +28,8 @@ const ItemHeader = ({ items, item, onNext, onPrevious }) => {
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(Header, { testID: "item-header" },
-        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
+        !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
         React.createElement(Text, { level: 3, action: true }, title),
-        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
+        !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: style.button, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
 };
 export { ItemHeader };

package/dist/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    button: {
+        height: number;
+        width: number;
+    };
+};
+export default style;

package/dist/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.js

@@ -0,0 +1,10 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+const { space10 } = Theme.get();
+const style = StyleSheet.create({
+    button: {
+        height: space10,
+        width: space10,
+    },
+});
+export default style;

package/dist/infrastructure/ui/i18n/i18n.d.ts

@@ -24,6 +24,7 @@ declare enum I18nMessages {
     FEEDBACK_UNANSWERED = "return_questions_feedback.feedback.unanswered",
     RETURN_QUESTIONS_TITLE = "return_questions.title",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
+    RETURN_QUESTION_MAIN_ALL_OPINION = "return_question.main.all.opinion",
     SUMMARY_TITLE = "summary.title",
     SUMMARY_DESCRIPTION = "summary.description",
     BANNER_DISCOUNT_TEXT = "summary.banner.text",

package/dist/infrastructure/ui/i18n/i18n.js

@@ -26,6 +26,7 @@ var I18nMessages;
     I18nMessages["FEEDBACK_UNANSWERED"] = "return_questions_feedback.feedback.unanswered";
     I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
+    I18nMessages["RETURN_QUESTION_MAIN_ALL_OPINION"] = "return_question.main.all.opinion";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";
     I18nMessages["SUMMARY_DESCRIPTION"] = "summary.description";
     I18nMessages["BANNER_DISCOUNT_TEXT"] = "summary.banner.text";

package/dist/infrastructure/ui/views/checkout/Checkout.d.ts

@@ -1,11 +1,11 @@
 import { FC, ReactNode } from "react";
 import { Country } from "../../../../projection/shared/country";
-import { Layout } from "../../components/layouts/layout/Layout";
+import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
 interface CheckoutProps {
     readonly children?: ReactNode;
     readonly customerId: string;
     readonly country: Country;
-    readonly layout: Layout;
+    readonly layout: LocalLayout;
     readonly useRedirect: () => Record<string, string>;
 }
 declare const Checkout: FC<CheckoutProps>;

package/dist/infrastructure/ui/views/checkout/Checkout.js

@@ -1,4 +1,4 @@
-import { Text } from "@lookiero/aurora";
+import { Box, Layout, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useMemo } from "react";
@@ -12,7 +12,6 @@ import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner"
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
-import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
@@ -22,8 +21,9 @@ import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
-const Checkout = ({ children, customerId, country, layout: Layout, useRedirect }) => {
+const Checkout = ({ children, customerId, country, layout: LocalLayout, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
+    const { screen } = useDevice();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     useTrackPageView({
@@ -58,18 +58,23 @@ const Checkout = ({ children, customerId, country, layout: Layout, useRedirect }
         dependenciesLoadedStatuses.includes(pricingStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(Layout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }) },
-        React.createElement(Body, null,
-            hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
-            React.createElement(View, { style: style.paymentSelector },
-                React.createElement(PaymentInstrument, { useRedirect: useRedirect })),
-            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
-            checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, style: style.itemsContainer, testID: "checkout-items-kept" },
-                React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
-                        ? checkoutItem.replacedFor.size
-                        : checkoutItem.productVariant.size })))),
-            pricing && (React.createElement(View, { style: style.pricingContainer },
-                React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit })))),
+    return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), style: {
+            header: style.header,
+            scrollView: style.scrollView,
+        } },
+        hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
+        React.createElement(Layout, { fullWidth: !screen.L, style: screen.L && style.desktopLayoutSpacing },
+            React.createElement(Box, { size: { L: "2/3" }, style: screen.L ? style.desktopListSpacing : undefined },
+                React.createElement(View, { style: [style.contentWrapper, screen.L ? style.contentWrapper : undefined] },
+                    React.createElement(View, { style: style.paymentSelector },
+                        React.createElement(PaymentInstrument, { useRedirect: useRedirect })),
+                    React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                    checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
+                        React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+                                ? checkoutItem.replacedFor.size
+                                : checkoutItem.productVariant.size })))))),
+            React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : undefined] }, pricing ? (React.createElement(View, { style: style.princingWrapper },
+                React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))) : null)),
         children));
 };
 export { Checkout };

package/dist/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -1,20 +1,48 @@
 declare const style: {
+    contentWrapper: {
+        backgroundColor: string;
+        flexGrow: number;
+        padding: number;
+    };
     deliveryBannerContainer: {
         marginBottom: number;
     };
-    itemsContainer: {
+    desktopContentWrapper: {
+        borderRadius: number;
+    };
+    desktopLayoutSpacing: {
+        paddingVertical: number;
+    };
+    desktopListSpacing: {
+        paddingRight: number;
+    };
+    desktopResume: {
+        borderRadius: number;
+    };
+    header: {
+        backgroundColor: string;
+        height: number;
+    };
+    mobileInfo: {
         paddingHorizontal: number;
+        paddingTop: number;
     };
     paymentSelector: {
-        margin: number;
+        marginBottom: number;
     };
     pricingContainer: {
         paddingHorizontal: number;
         paddingVertical: number;
     };
+    princingWrapper: {
+        padding: number;
+    };
+    resume: any;
+    scrollView: {
+        backgroundColor: string;
+    };
     title: {
-        marginBottom: number;
-        marginHorizontal: number;
+        marginVertical: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/views/checkout/Checkout.style.js

@@ -1,23 +1,63 @@
 import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { space2, space6, space8 } = Theme.get();
+import { StyleSheet, Platform } from "react-native";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space8, space12, space16 } = Theme.get();
 const style = StyleSheet.create({
+    contentWrapper: {
+        backgroundColor: colorBgBase,
+        flexGrow: 0,
+        padding: space6,
+    },
     deliveryBannerContainer: {
         marginBottom: space6,
     },
-    itemsContainer: {
+    desktopContentWrapper: {
+        borderRadius: borderRadius4,
+    },
+    desktopLayoutSpacing: {
+        paddingVertical: space12,
+    },
+    desktopListSpacing: {
+        paddingRight: space16,
+    },
+    desktopResume: {
+        borderRadius: borderRadius4,
+    },
+    header: {
+        backgroundColor: colorBgBase,
+        height: HEADER_HEIGHT,
+    },
+    mobileInfo: {
         paddingHorizontal: space6,
+        paddingTop: space6,
     },
     paymentSelector: {
-        margin: space6,
+        marginBottom: space4,
     },
     pricingContainer: {
         paddingHorizontal: space6,
         paddingVertical: space8,
     },
+    princingWrapper: {
+        padding: space6,
+    },
+    resume: {
+        overflow: "hidden",
+        backgroundColor: colorBgBase,
+        ...Platform.select({
+            web: {
+                position: "sticky",
+                top: space12,
+                alignSelf: "flex-start",
+            },
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    },
+    scrollView: {
+        backgroundColor: colorBgPrimaryLight,
+    },
     title: {
-        marginBottom: space2,
-        marginHorizontal: space6,
+        marginVertical: space4,
     },
 });
 export { style };

package/dist/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -1,9 +1,9 @@
-import { InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
 import { I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
-    const deliveryBannerText = useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER });
-    return React.createElement(InfoBox, { testID: "delivery-banner", text: deliveryBannerText, type: INFOBOX_TYPE.SQUARED });
+    const { screen } = useDevice();
+    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
 };
 export { DeliveryBanner };

package/dist/infrastructure/ui/views/feedback/Feedback.js

@@ -73,7 +73,7 @@ const Feedback = ({ customerId, country, layout: Layout }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {}, onChanged: handleOnChangedFeedback },
-        React.createElement(Layout, { style: { scrollView: style.container } },
+        React.createElement(Layout, { style: { header: style.header, scrollView: style.container } },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

package/dist/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -1,9 +1,13 @@
 declare const style: {
     bodyColumn: {
-        padding: number;
+        paddingBottom: number;
+        paddingHorizontal: number;
     };
     container: {
         paddingBottom: number;
     };
+    header: {
+        height: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,12 +1,17 @@
 import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 const { space8, space10 } = Theme.get();
 const style = StyleSheet.create({
     bodyColumn: {
-        padding: space8,
+        paddingBottom: space8,
+        paddingHorizontal: space8,
     },
     container: {
         paddingBottom: space10,
     },
+    header: {
+        height: HEADER_HEIGHT,
+    },
 });
 export { style };

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

@@ -133,7 +133,7 @@ const Item = ({ customerId, country, layout: Layout }) => {
     }, [checkout?.id, country, navigate, trackPressBack]);
     const basePath = useBasePath();
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
-    const header = useMemo(() => (React.createElement(Box, { style: style.header },
+    const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
         itemDetailRouteMatch ? (React.createElement(ItemDetailHeader, { onBack: handleOnBack })) : (React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: handleOnNext, onPrevious: handleOnPrevious })),
         fiveItemsDiscount !== 0 ? React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }) : null)), [
         checkout?.items,
@@ -144,8 +144,6 @@ const Item = ({ customerId, country, layout: Layout }) => {
         handleOnPrevious,
         itemDetailRouteMatch,
     ]);
-    const [height, setHeight] = useState(0);
-    const handleOnLayout = useCallback((event) => setHeight(event.nativeEvent.layout.height), []);
     const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
     const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING &&
         checkout &&
@@ -162,9 +160,10 @@ const Item = ({ customerId, country, layout: Layout }) => {
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
         React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
-                scrollView: { height: itemWithoutCustomerDecission ? height : "auto" },
+                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+                scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
                 safeAreaView: isDesktopScreen ? style.safeAreaView : null,
-            }, onLayout: handleOnLayout }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, onReturn: showReturnQuestions })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: showReturnQuestions }))),
+            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, onReturn: showReturnQuestions })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: showReturnQuestions }))),
         React.createElement(ReturnQuestionsForm, { returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: hideReturnQuestions, onSubmit: returnItem })));
 };
 export { Item };

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

@@ -1,5 +1,11 @@
 declare const style: {
     header: {
+        height: number;
+    };
+    headerWithDoubleHeight: {
+        height: number;
+    };
+    headerWrapper: {
         display: "flex";
         flexDirection: "column";
     };

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

@@ -1,8 +1,15 @@
 import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 const { colorBgPrimaryLight } = Theme.get();
 const style = StyleSheet.create({
     header: {
+        height: HEADER_HEIGHT,
+    },
+    headerWithDoubleHeight: {
+        height: HEADER_HEIGHT * 2,
+    },
+    headerWrapper: {
         display: "flex",
         flexDirection: "column",
     },

package/dist/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -15,7 +15,7 @@ const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, c
     return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },
         React.createElement(View, { style: style.info },
             React.createElement(View, { style: style.brand },
-                React.createElement(Text, { color: COLOR.GRAYSCALE_L, level: 1, detail: true }, brand),
+                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 1, detail: true }, brand),
                 React.createElement(Text, { level: 1, detailBold: true }, name)),
             React.createElement(Price, { price: price, withPercentage: true })),
         React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));

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

@@ -1,11 +1,14 @@
+import { Theme } from "@lookiero/aurora";
 import React, { useCallback, useState } from "react";
 import { Image } from "react-native";
+import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { AspectRatioView } from "../../../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
 import { Bullets } from "../../../../../../shared/ui/components/layouts/carousel/Bullets";
 import { Carousel, } from "../../../../../../shared/ui/components/layouts/carousel/Carousel";
 import { useScreenSize } from "../../../../../../shared/ui/hooks/useScreenSize";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { style } from "./ProductVariantSlider.style";
+const { space16 } = Theme.get();
 const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
     const cdnImageUrl = useMediaImage();
     const screenSize = useScreenSize();
@@ -15,13 +18,19 @@ const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
         setActiveIndex(activeIndex);
         onChanged?.(activeIndex);
     }, [onChanged]);
-    const renderItem = useCallback(({ item }) => (React.createElement(AspectRatioView, { aspectRatio: 4 / 3 },
-        React.createElement(Image, { resizeMode: "cover", style: [style.image, isDesktopScreen ? style.largeImage : null], testID: "product-variant-image", source: {
-                uri: cdnImageUrl({
-                    url: item.url,
-                    width: 600,
-                }),
-            } }))), [cdnImageUrl, isDesktopScreen]);
+    const renderItem = useCallback(({ item, isLastItem }) => {
+        const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
+        return (React.createElement(AspectRatioView, { aspectRatio: 4 / 3, multiplier: isCollageImage && isLastItem ? 2 : 1, style: {
+                marginTop: isCollageImage && !isDesktopScreen ? space16 : 0,
+                alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
+            } },
+            React.createElement(Image, { resizeMode: "stretch", style: [style.image, isDesktopScreen ? style.largeImage : null], testID: "product-variant-image", source: {
+                    uri: cdnImageUrl({
+                        url: item.url,
+                        width: 600,
+                    }),
+                } })));
+    }, [cdnImageUrl, isDesktopScreen]);
     const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
     return (React.createElement(Carousel, { activeIndex: activeIndex, bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
 };

package/dist/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -13,6 +13,6 @@ const SelectModal = ({ modalVisible, onChange = () => void 0, onClose = () => vo
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
             options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
+                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
 };
 export { SelectModal };

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

@@ -5,6 +5,7 @@ import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/
 import { useLogger } from "../../../../../../shared/logging/useLogger";
 import { useTrackResetItem } from "../../../../../../shared/tracking/infrastructure/useTrackResetItem";
 import { Spinner } from "../../../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useScreenSize } from "../../../../../../shared/ui/hooks/useScreenSize";
 import { useResetCheckoutItem } from "../../../../../domain/checkoutItem/react/useResetCheckoutItem";
 import { TrackingPage } from "../../../../../tracking/tracking";
 import { Body } from "../../../../components/layouts/body/Body";
@@ -13,6 +14,8 @@ import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedbac
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
 import { style } from "./ItemWithCustomerDecission.style";
 const ItemWithCustomerDecission = ({ country, checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
+    const screenSize = useScreenSize();
+    const isMobile = screenSize === "S";
     const logger = useLogger();
     /* ResetCheckoutItem */
     const [resetCheckoutItem, resetCheckoutItemStatus] = useResetCheckoutItem({
@@ -35,7 +38,7 @@ const ItemWithCustomerDecission = ({ country, checkoutId, checkoutItem, returnQu
         return React.createElement(Spinner, null);
     }
     return (React.createElement(Body, { style: { row: style.container } },
-        React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, customerDecissionBanner: React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }) }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
+        React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, 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/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.style.d.ts

@@ -8,5 +8,8 @@ declare const style: {
         marginTop: number;
         paddingTop: number;
     };
+    feedbackContainerMobile: {
+        paddingHorizontal: number;
+    };
 };
 export { style };

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

@@ -11,5 +11,8 @@ const style = StyleSheet.create({
         marginTop: space6,
         paddingTop: space6,
     },
+    feedbackContainerMobile: {
+        paddingHorizontal: space6,
+    },
 });
 export { style };

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import { View } from "react-native";
+import { MediaPerspective, } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useTrackImageView } from "../../../../../../shared/tracking/infrastructure/useTrackImageView";
 import { useScreenSize } from "../../../../../../shared/ui/hooks/useScreenSize";
 import { TrackingPage } from "../../../../../tracking/tracking";
@@ -22,8 +23,9 @@ const ProductVariant = ({ country, checkoutId, checkoutItem, currentProductVaria
     const handleOnChangedProductVariantSlider = useCallback((active) => trackImageView({ perspective: checkoutItem.productVariant.media[active]?.perspective }), [checkoutItem.productVariant.media, trackImageView]);
     const { price } = 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: media, onChanged: handleOnChangedProductVariantSlider }),
+        React.createElement(ProductVariantSlider, { producVariantMedia: collage ? [...media, 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/infrastructure/ui/views/summary/Summary.d.ts

@@ -1,10 +1,10 @@
 import { FC, ReactNode } from "react";
 import { Country } from "../../../../projection/shared/country";
-import { Layout } from "../../components/layouts/layout/Layout";
+import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
 interface SummaryProps {
     readonly customerId: string;
     readonly country: Country;
-    readonly layout: Layout;
+    readonly layout: LocalLayout;
     readonly children: ReactNode;
 }
 declare const Summary: FC<SummaryProps>;

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -1,4 +1,4 @@
-import { Text, Theme } from "@lookiero/aurora";
+import { Box, Text, Layout, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -14,18 +14,18 @@ import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checko
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
-import { Body } from "../../components/layouts/body/Body";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
+import { Pricing } from "./components/pricing/Pricing";
 import { StickyPricing } from "./components/stickyPricing/StickyPricing";
-const { space10 } = Theme.get();
-const Summary = ({ customerId, country, layout: Layout, children }) => {
+const Summary = ({ customerId, country, layout: LocalLayout, children }) => {
+    const [pricingCollapsed, setPricingCollapsed] = useState(true);
+    const [pricingHeight, setPricingHeight] = useState(0);
     const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
-    const [pricingHeight, setPricingHeight] = useState(0);
-    const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
+    const { screen } = useDevice();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
@@ -33,6 +33,17 @@ const Summary = ({ customerId, country, layout: Layout, children }) => {
     const basePath = useBasePath();
     const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
     const tab = match?.params.tab;
+    const trackPressPricing = useTrackPressPricing({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
+    const handleOnPressPricing = useCallback(() => {
+        const collapsed = !pricingCollapsed;
+        setPricingCollapsed(collapsed);
+        trackPressPricing({ collapse: collapsed });
+    }, [pricingCollapsed, trackPressPricing]);
     useEffect(() => {
         if (!tab) {
             navigate(generatePath(Routes.SUMMARY_TABS, {
@@ -47,17 +58,6 @@ const Summary = ({ customerId, country, layout: Layout, children }) => {
         country,
         checkoutId: checkout?.id,
     });
-    const trackPressPricing = useTrackPressPricing({
-        page: TrackingPage.SUMMARY,
-        country,
-        checkoutId: checkout?.id,
-    });
-    const [pricingCollapsed, setPricingCollapsed] = useState(true);
-    const handleOnPressPricing = useCallback(() => {
-        const collapsed = !pricingCollapsed;
-        setPricingCollapsed(collapsed);
-        trackPressPricing({ collapse: collapsed });
-    }, [pricingCollapsed, trackPressPricing]);
     const trackPressContinue = useTrackPressContinue({
         page: TrackingPage.SUMMARY,
         country,
@@ -68,21 +68,26 @@ const Summary = ({ customerId, country, layout: Layout, children }) => {
         navigate(`${basePath}/${Routes.CHECKOUT}`);
     }, [basePath, navigate, trackPressContinue]);
     const totalCheckoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED).length || 0, [checkout?.items]);
-    const [height, setHeight] = useState(0);
-    const handleOnLayout = useCallback((event) => Platform.OS !== "web" && setHeight(event.nativeEvent.layout.height), []);
-    const layoutProps = useMemo(() => (Platform.OS === "web" ? {} : { scrollEnabled: false, style: { scrollView: { height } } }), [height]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(pricingStatus) && dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(Layout, { ...layoutProps, onLayout: handleOnLayout },
+    return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
+            header: style.header,
+            scrollView: style.scrollView,
+        } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
             fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
-            React.createElement(Body, { style: { row: { paddingBottom: pricingHeight + space10 } } },
-                React.createElement(View, { style: style.content },
-                    React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
-                    React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
-                children)),
-        pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
+            React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L ? style.desktopLayoutSpacing : undefined, { paddingBottom: pricingHeight }] },
+                React.createElement(Box, { size: { L: "2/3" }, style: screen.L ? style.desktopListSpacing : undefined },
+                    React.createElement(View, { style: [style.contentWrapper, screen.L ? style.desktopContentWrapper : undefined] },
+                        React.createElement(View, { style: !screen.L ? style.mobileInfo : undefined },
+                            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                            React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
+                        children)),
+                pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
+                    React.createElement(View, { style: style.princingWrapper },
+                        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: false, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null)),
+        pricing && !screen.L ? (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) : null));
 };
 export { Summary };

package/dist/infrastructure/ui/views/summary/Summary.style.d.ts

@@ -1,10 +1,41 @@
 declare const style: {
-    content: {
-        padding: number;
+    contentWrapper: {
+        backgroundColor: string;
+        flexGrow: number;
     };
     description: {
         color: string;
-        marginTop: number;
+        marginBottom: number;
+    };
+    desktopContentWrapper: {
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    desktopLayoutSpacing: {
+        paddingVertical: number;
+    };
+    desktopListSpacing: {
+        paddingRight: number;
+    };
+    desktopResume: {
+        borderRadius: number;
+    };
+    header: {
+        height: number;
+    };
+    mobileInfo: {
+        paddingHorizontal: number;
+        paddingTop: number;
+    };
+    mobileResume: any;
+    princingWrapper: {
+        padding: number;
+    };
+    resume: any;
+    scrollView: {
+        backgroundColor: string;
+        flex: number;
     };
     title: {
         marginBottom: number;

package/dist/infrastructure/ui/views/summary/Summary.style.js

@@ -1,13 +1,67 @@
 import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { colorTextMedium, space2, space4, space6 } = Theme.get();
+import { Platform, StyleSheet } from "react-native";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space4, space6, space12, space16, borderRadius4, colorBgBase, } = Theme.get();
 const style = StyleSheet.create({
-    content: {
-        padding: space6,
+    contentWrapper: {
+        backgroundColor: colorBgBase,
+        flexGrow: 0,
     },
     description: {
         color: colorTextMedium,
-        marginTop: space4,
+        marginBottom: space4,
+    },
+    desktopContentWrapper: {
+        borderRadius: borderRadius4,
+        paddingHorizontal: space6,
+        paddingVertical: space12,
+    },
+    desktopLayoutSpacing: {
+        paddingVertical: space12,
+    },
+    desktopListSpacing: {
+        paddingRight: space16,
+    },
+    desktopResume: {
+        borderRadius: borderRadius4,
+    },
+    header: {
+        height: HEADER_HEIGHT,
+    },
+    mobileInfo: {
+        paddingHorizontal: space6,
+        paddingTop: space6,
+    },
+    mobileResume: {
+        shadowColor: colorText,
+        shadowOpacity: 0.15,
+        ...Platform.select({
+            web: {
+                shadowOffset: { width: 0, height: 8 },
+                shadowRadius: 18,
+                elevation: 0.5,
+            },
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    },
+    princingWrapper: {
+        padding: space6,
+    },
+    resume: {
+        overflow: "hidden",
+        backgroundColor: colorBgBase,
+        ...Platform.select({
+            web: {
+                position: "sticky",
+                top: space12,
+                alignSelf: "flex-start",
+            },
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    },
+    scrollView: {
+        backgroundColor: colorBgPrimaryLight,
+        flex: 1,
     },
     title: {
         marginBottom: space2,

package/dist/shared/ui/components/atoms/aspectRatioView/AspectRatioView.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 declare enum AspectRatioViewResizeDirection {
     VERTICAL = "VERTICAL",
     HORIZONTAL = "HORIZONTAL"
@@ -6,7 +7,9 @@ declare enum AspectRatioViewResizeDirection {
 interface AspectRatioViewProps {
     readonly aspectRatio?: number;
     readonly resizeDirection?: AspectRatioViewResizeDirection;
+    readonly multiplier?: number;
     readonly children: ReactNode;
+    readonly style?: StyleProp<ViewStyle>;
 }
 declare const AspectRatioView: FC<AspectRatioViewProps>;
 export { AspectRatioView, AspectRatioViewResizeDirection };

package/dist/shared/ui/components/atoms/aspectRatioView/AspectRatioView.js

@@ -5,12 +5,12 @@ var AspectRatioViewResizeDirection;
     AspectRatioViewResizeDirection["VERTICAL"] = "VERTICAL";
     AspectRatioViewResizeDirection["HORIZONTAL"] = "HORIZONTAL";
 })(AspectRatioViewResizeDirection || (AspectRatioViewResizeDirection = {}));
-const AspectRatioView = ({ aspectRatio = 1, resizeDirection = AspectRatioViewResizeDirection.HORIZONTAL, children, }) => {
+const AspectRatioView = ({ aspectRatio = 1, resizeDirection = AspectRatioViewResizeDirection.HORIZONTAL, multiplier = 1, style: customStyle = {}, children, }) => {
     const [{ width, height }, setDimension] = useState({});
     const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setDimension(resizeDirection === AspectRatioViewResizeDirection.HORIZONTAL
-        ? { width: layout.width, height: layout.width * aspectRatio }
-        : { width: layout.height * aspectRatio, height: layout.height }), [aspectRatio, resizeDirection]);
+        ? { width: layout.width * multiplier, height: layout.width * aspectRatio }
+        : { width: layout.height * aspectRatio, height: layout.height }), [aspectRatio, multiplier, resizeDirection]);
     return (React.createElement(View, { onLayout: handleOnLayout },
-        React.createElement(View, { style: { width, height } }, children)));
+        React.createElement(View, { style: [{ width, height }, customStyle] }, children)));
 };
 export { AspectRatioView, AspectRatioViewResizeDirection };

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

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

package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
 interface RenderItemFunctionArgs<T> {
     readonly item: T;
     readonly index: number;
+    readonly isLastItem: boolean;
 }
 interface RenderItemFunction<T> {
     (args: RenderItemFunctionArgs<T>): JSX.Element;

package/dist/shared/ui/components/layouts/carousel/Carousel.js

@@ -81,7 +81,7 @@ const Carousel = ({ activeIndex = 0, data, enabled = true, children, bullets, on
     return (React.createElement(View, { style: [style.container, customStyle?.container], testID: "carousel" },
         React.createElement(View, { style: style.carousel, testID: "carousel-layout", onLayout: handleOnLayout }, carouselWidth && (React.createElement(GestureHandlerRootView, { style: { flex: 1 } },
             React.createElement(GestureDetector, { gesture: panGesture },
-                React.createElement(Animated.View, { style: [style.carouselTrack, { width: carouselWidth * data.length }, animatedStyle], testID: "carousel-track" }, data.map((item, index) => (React.createElement(View, { key: index, style: [style.carouselItem, { width: carouselWidth }], testID: "carousel-item" }, children({ index, item }))))))))),
+                React.createElement(Animated.View, { style: [style.carouselTrack, { width: carouselWidth * data.length }, animatedStyle], testID: "carousel-track" }, data.map((item, index) => (React.createElement(View, { key: index, style: [style.carouselItem, { width: carouselWidth }], testID: "carousel-item" }, children({ index, item, isLastItem: index === data.length - 1 }))))))))),
         bullets && (React.createElement(View, { style: style.bullets, testID: "carousel-bullets" }, bullets({ activeIndex, count: data.length, onChange: handleOnActiveIndexChanged })))));
 };
 export { Carousel };

package/dist/shared/ui/components/layouts/sticky/Sticky.style.js

@@ -1,6 +1,6 @@
 import { Theme } from "@lookiero/aurora";
 import { Platform, StyleSheet } from "react-native";
-const { colorBgBase, elevationColor, elevationLayerL, elevationOffset, elevationOpacityM, elevationRadius, space3, space6, } = Theme.get();
+const { colorBgBase, shadowColor, elevationLayerL, shadowOffset, shadowOpacityM, shadowRadius, space3, space6 } = Theme.get();
 const style = StyleSheet.create({
     sticky: {
         backgroundColor: colorBgBase,
@@ -8,10 +8,10 @@ const style = StyleSheet.create({
         elevation: elevationLayerL,
         paddingHorizontal: space6,
         paddingVertical: space3,
-        shadowColor: elevationColor,
-        shadowOffset: elevationOffset,
-        shadowOpacity: elevationOpacityM,
-        shadowRadius: elevationRadius,
+        shadowColor: shadowColor,
+        shadowOffset: shadowOffset,
+        shadowOpacity: shadowOpacityM,
+        shadowRadius: shadowRadius,
         width: "100%",
         ...Platform.select({
             web: { position: "sticky" },

package/dist/shared/ui/components/molecules/inputField/InputField.js

@@ -5,20 +5,21 @@ import { Error } from "../../atoms/error/Error";
 import { Field } from "../../atoms/field/Field";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
-const { colorBgBase, colorBorderInput, colorBorderInputError, colorBorderInputFocus, colorTextMedium, iconSize, space6, } = Theme.get();
+const { colorBgBase, colorBorderInput, colorBorderInputError, colorBorderInputFocus, colorText, colorTextError, colorTextMedium, iconSize, space6, } = Theme.get();
 const inputPaddingRightWithIcon = iconSize + space6;
 const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
     const handleOnChange = useCallback((text) => onChange(text), [onChange]);
     const handleOnBlur = useCallback(() => setIsFocused(false), []);
     const handleOnFocus = useCallback(() => setIsFocused(true), []);
-    const color = error ? colorBorderInputError : isFocused ? colorBorderInputFocus : colorBorderInput;
+    const borderColor = error ? colorBorderInputError : isFocused ? colorBorderInputFocus : colorBorderInput;
+    const color = error ? colorTextError : isFocused ? colorText : colorTextMedium;
     return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
         React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
                 field: [style.field, customStyle?.field],
                 fieldText: [{ color }, customStyle?.fieldText],
             } }),
-        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorTextMedium : colorBgBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
+        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorTextMedium : colorBgBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor, color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
         !!icon && React.createElement(Icon, { color: COLOR.GRAYSCALE_L, name: icon, style: [style.icon, customStyle?.icon], testID: "icon" }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "5.0.0-update-aurora-version-2024.2.29.112652",
+  "version": "5.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -20,7 +20,7 @@
     "lint": "eslint --fix --cache --cache-location ./node_modules/.cache/.eslintcache --ext ts,tsx .",
     "format": "prettier --write \"**/*.+(json|css|ts|tsx|md)\"",
     "test": "tsc -p ./tsconfig.test.json --noemit && jest --passWithNoTests --colors --verbose --runInBand --detectOpenHandles --forceExit",
-    "test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
+    "report": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
     "test:contract": "TEST_ENV=CONTRACT jest --coverage false --detectOpenHandles --testMatch \"**/?(*.)+(pact).ts\" --testTimeout=3000  --watchAll=false --forceExit",
     "publish:contract": "BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) node pact.publish.js",
     "prepare": "husky install"
@@ -49,7 +49,7 @@
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "5.0.0-rebrand-2024.01.30.153213",
+    "@lookiero/payments-front": "5.0.0",
     "@lookiero/user-tracking-front": "0.0.37",
     "apollo-boost": "0.4.4",
     "graphql": "16.6.0",
@@ -67,13 +67,13 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@expo/webpack-config": "^0.17.4",
-    "@lookiero/aurora": "4.0.0-rebrand-2024.02.26.121638",
-    "@lookiero/aurora-fonts": "2.0.0-rebrand-2024.1.31.145401",
-    "@lookiero/aurora-iconfont": "3.0.0-rebrand-2024.2.8.133217",
+    "@lookiero/aurora": "^4.0.1",
+    "@lookiero/aurora-fonts": "2.0.0",
+    "@lookiero/aurora-iconfont": "3.0.0",
     "@lookiero/data-sources": "^0.3",
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
-    "@lookiero/payments-front": "5.0.0-rebrand-2024.01.30.153213",
+    "@lookiero/payments-front": "5.0.0",
     "@lookiero/user-tracking-front": "0.0.37",
     "@pact-foundation/pact": "^10.1.4",
     "@pact-foundation/pact-node": "^10.17.6",