@lookiero/checkout 5.1.4-beta.0 → 5.1.5

package/dist/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.js

@@ -11,6 +11,10 @@ const useReturnCheckoutItem = ({ checkoutItemId, logger }) => {
     const returnCheckoutItem = useCallback(async ({ feedbacks }) => {
         try {
             await commandBus(returnCheckoutItemCommand({ aggregateId: checkoutItemId, feedbacks }));
+            createNotification({
+                bodyI18nKey: I18nMessages.RETURN_QUESTION_TOAST_SUCCESS,
+                level: NotificationLevel.SUCCESS,
+            });
         }
         catch (error) {
             logger.captureException(error);

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

@@ -1,13 +1,27 @@
 import { Text, View } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
+import { useAssignedVariationByExperimentId } from "../../../../../../testing/react/useAssignedVariationByExperimentId";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 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;
+    /* Kameleoon experiment */
+    const { kameleoon } = useStaticInfo();
+    const { experiments: { newFeedback: { id: newFeedbackId = "", variations = {} } = {} }, } = kameleoon;
+    const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+        experimentId: newFeedbackId,
+    });
+    const isReturnPage = newFeedbackVariation?.id === Number(variations.v2);
+    /* Kameleoon experiment */
     return (React.createElement(React.Fragment, null,
-        titleText && titleText !== " " ? (React.createElement(View, { style: [style.title, isAllOptions ? style.allOptionsTitle : undefined] },
+        titleText && titleText !== " " ? (React.createElement(View, { style: [
+                style.title,
+                isAllOptions ? style.allOptionsTitle : undefined,
+                isReturnPage ? style.formTitle : undefined,
+            ] },
             React.createElement(Text, { level: 3, action: true }, titleText))) : null,
         children));
 };

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

@@ -2,10 +2,13 @@ declare const style: {
     allOptionsTitle: {
         display: "none";
     };
+    formTitle: {
+        paddingLeft: number;
+    };
     title: {
         backgroundColor: string;
         paddingBottom: number;
-        paddingHorizontal: number;
+        paddingRight: number;
         paddingTop: number;
     };
 };

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

@@ -5,10 +5,13 @@ const style = StyleSheet.create({
     allOptionsTitle: {
         display: "none",
     },
+    formTitle: {
+        paddingLeft: space6,
+    },
     title: {
         backgroundColor: colorBgBase,
         paddingBottom: space4,
-        paddingHorizontal: space6,
+        paddingRight: space6,
         paddingTop: space6,
     },
 });

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -2,15 +2,25 @@ import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { useAssignedVariationByExperimentId } from "../../../../../../testing/react/useAssignedVariationByExperimentId";
+import { useStaticInfo } from "../../../../../hooks/useStaticInfo";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./TextareaReturnQuestionItem.style";
 const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { formatMessage } = useIntl();
+    /* Kameleoon experiment */
+    const { kameleoon } = useStaticInfo();
+    const { experiments: { newFeedback: { id: newFeedbackId = "", variations = {} } = {} }, } = kameleoon;
+    const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+        experimentId: newFeedbackId,
+    });
+    const isReturnPage = newFeedbackVariation?.id === Number(variations.v2);
+    /* Kameleoon experiment */
     const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
-    return (React.createElement(View, { style: style.wrapper },
-        React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange })));
+    const fieldComponent = (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return isReturnPage ? React.createElement(View, { style: style.wrapper }, fieldComponent) : fieldComponent;
 };
 export { TextareaReturnQuestionItem };

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

@@ -26,6 +26,7 @@ declare enum I18nMessages {
     RETURN_QUESTIONS_DESCRIPTION = "return_questions.description",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
     RETURN_QUESTION_MAIN_ALL_OPINION = "return_question.main.all.opinion",
+    RETURN_QUESTION_TOAST_SUCCESS = "return_question.thankyou",
     SUMMARY_TITLE = "summary.title",
     SUMMARY_DESCRIPTION = "summary.description",
     BANNER_DISCOUNT_TEXT = "summary.banner.text",

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

@@ -28,6 +28,7 @@ var I18nMessages;
     I18nMessages["RETURN_QUESTIONS_DESCRIPTION"] = "return_questions.description";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
     I18nMessages["RETURN_QUESTION_MAIN_ALL_OPINION"] = "return_question.main.all.opinion";
+    I18nMessages["RETURN_QUESTION_TOAST_SUCCESS"] = "return_question.thankyou";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";
     I18nMessages["SUMMARY_DESCRIPTION"] = "summary.description";
     I18nMessages["BANNER_DISCOUNT_TEXT"] = "summary.banner.text";

package/dist/infrastructure/ui/views/return/Return.js

@@ -1,16 +1,16 @@
 import { PortalHost } from "@gorhom/portal";
-import { Button, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
+import { ScrollView } from "react-native";
 import { generatePath, useNavigate, useParams } from "react-router-native";
 import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
 import { useLogger } from "../../../../shared/logging/useLogger";
 import { useTrackPressNext } from "../../../../shared/tracking/infrastructure/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../../shared/tracking/infrastructure/useTrackPressPrevious";
 import { useTrackReturnItem } from "../../../../shared/tracking/infrastructure/useTrackReturnItem";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
-import { Column } from "../../../../shared/ui/components/layouts/column/Column";
-import { Row } from "../../../../shared/ui/components/layouts/row/Row";
 import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -23,10 +23,12 @@ import { HostRadioGroupReturnQuestionItem } from "../../components/organisms/ret
 import { HostStackReturnQuestionItem } from "../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/form/HostStackReturnQuestionItem";
 import { RadioReturnQuestionItem } from "../../components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Return.style";
+import { ProductVariantPreview } from "./components/productVariantPreview/ProductVariantPreview";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
     [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
@@ -41,6 +43,7 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     const logger = useLogger();
     const basePath = useBasePath();
     const trackPressNext = useTrackPressNext();
+    const trackPressPrevious = useTrackPressPrevious();
     const checkoutId = checkout.id;
     const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
     const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
@@ -75,6 +78,21 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
         });
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, checkout?.items, checkoutId, checkoutItem, country, navigate, trackPressNext]);
+    const navigateToPreviousItem = useCallback(() => {
+        const item = checkoutItem;
+        const items = checkout?.items;
+        const itemIndex = items.indexOf(item);
+        const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
+        const previousItem = items[previousItemIndex];
+        trackPressPrevious({
+            page: TrackingPage.ITEM,
+            country,
+            checkoutId: checkout?.id,
+            from: item.id,
+            to: previousItem.id,
+        });
+        navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
+    }, [basePath, checkout?.id, checkout?.items, checkoutItem, country, navigate, trackPressPrevious]);
     const returnItem = useCallback(async (feedbacks) => {
         returnCheckoutItem({ feedbacks });
         trackReturnItem();
@@ -82,6 +100,8 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     }, [navigateToNextItem, returnCheckoutItem, trackReturnItem]);
     const feedback = useReturnQuestionFeedback();
     const handleOnSubmit = useCallback(() => returnItem(feedback), [feedback, returnItem]);
+    const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
+        React.createElement(ItemHeader, { item: checkoutItem, items: checkout?.items, onNext: navigateToNextItem, onPrevious: navigateToPreviousItem }))), [checkout?.items, checkoutItem, navigateToNextItem, navigateToPreviousItem]);
     /* ReturnCheckoutItem */
     const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded) {
@@ -89,13 +109,15 @@ const ReturnForm = ({ checkout, checkoutItem, country, layout: LocalLayout }) =>
     }
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: "return-question-form-portal" }),
-        React.createElement(LocalLayout, { scrollEnabled: true, style: {
+        React.createElement(LocalLayout, { header: header, scrollEnabled: false, style: {
                 header: style.header,
                 safeAreaView: style.safeAreaView,
+                scrollView: style.scrollView,
             } },
-            React.createElement(Row, { style: [style.row, isSmallScreen ? undefined : style.desktopRow] },
-                React.createElement(Column, { size: { M: "2/3", L: "2/3" } },
-                    React.createElement(View, null,
+            React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
+            React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+                React.createElement(Layout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                    React.createElement(Box, { size: { L: "2/3" } },
                         React.createElement(View, { style: [style.info, isSmallScreen ? undefined : style.desktopInfo] },
                             React.createElement(Text, { level: 3, heading: true }, titleText),
                             React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),

package/dist/infrastructure/ui/views/return/Return.style.d.ts

@@ -6,19 +6,23 @@ declare const style: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
-    desktopRow: {
-        marginVertical: number;
+    desktopLayoutSpacing: {
+        paddingVertical: number;
     };
     header: {
         height: number;
     };
+    headerWrapper: {
+        display: "flex";
+        flexDirection: "column";
+    };
     info: {
         backgroundColor: string;
         paddingBottom: number;
         paddingHorizontal: number;
         paddingTop: number;
     };
-    row: {
+    layout: {
         flex: number;
         justifyContent: "center";
     };
@@ -26,8 +30,13 @@ declare const style: {
         backgroundColor: string;
         flex: number;
     };
+    scrollView: {
+        flex: number;
+    };
     submit: {
         backgroundColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
         padding: number;
     };
 };

package/dist/infrastructure/ui/views/return/Return.style.js

@@ -1,7 +1,7 @@
 import { Theme } from "@lookiero/aurora";
 import { StyleSheet } from "react-native";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = Theme.get();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space2, space4, space6, space8 } = Theme.get();
 const style = StyleSheet.create({
     description: {
         color: colorTextMedium,
@@ -10,11 +10,15 @@ const style = StyleSheet.create({
         borderTopLeftRadius: borderRadius5,
         borderTopRightRadius: borderRadius5,
     },
-    desktopRow: {
-        marginVertical: space8,
+    desktopLayoutSpacing: {
+        paddingVertical: space8,
     },
     header: {
-        height: HEADER_HEIGHT,
+        height: HEADER_HEIGHT - space2,
+    },
+    headerWrapper: {
+        display: "flex",
+        flexDirection: "column",
     },
     info: {
         backgroundColor: colorBgBase,
@@ -22,7 +26,7 @@ const style = StyleSheet.create({
         paddingHorizontal: space6,
         paddingTop: space8,
     },
-    row: {
+    layout: {
         flex: 1,
         justifyContent: "center",
     },
@@ -30,8 +34,13 @@ const style = StyleSheet.create({
         backgroundColor: colorBgPrimaryLight,
         flex: 1,
     },
+    scrollView: {
+        flex: 1,
+    },
     submit: {
         backgroundColor: colorBgBase,
+        borderBottomLeftRadius: borderRadius5,
+        borderBottomRightRadius: borderRadius5,
         padding: space6,
     },
 });

package/dist/infrastructure/ui/views/return/components/price/Price.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { PriceProjection } from "../../../../../../projection/shared/price";
+interface PriceProps {
+    readonly price: PriceProjection;
+    readonly withPercentage?: boolean;
+}
+declare const Price: FC<PriceProps>;
+export { Price };

package/dist/infrastructure/ui/views/return/components/price/Price.js

@@ -0,0 +1,25 @@
+import { Text } from "@lookiero/aurora";
+import { useI18nNumber } from "@lookiero/i18n-react";
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Price.style";
+const Price = ({ price, withPercentage = false }) => {
+    const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
+    const productPrice = useI18nNumber({
+        value: price.amount / 100,
+        style: "currency",
+        currency: price.currency,
+    });
+    const productDiscountedPrice = useI18nNumber({
+        value: (price.discountedPrice?.amount || 0) / 100,
+        style: "currency",
+        currency: price.currency,
+    });
+    const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
+    return (React.createElement(View, { style: style.price, testID: "price" },
+        isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", detail: true, lineThrough: true }, productPrice)),
+        React.createElement(View, { style: style.discountedPriceInfo },
+            React.createElement(Text, { level: 1, testID: "price-text", detail: true }, priceValue),
+            isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", detail: true }, `-${price.discountedPrice.percentage}%`)) : null)));
+};
+export { Price };

package/dist/infrastructure/ui/views/return/components/price/Price.style.d.ts

@@ -0,0 +1,16 @@
+declare const style: {
+    discountedPercentage: {
+        color: string;
+    };
+    discountedPriceInfo: {
+        alignItems: "flex-end";
+        marginLeft: number;
+    };
+    discountedPriceText: {
+        color: string;
+    };
+    price: {
+        flexDirection: "row";
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/return/components/price/Price.style.js

@@ -0,0 +1,19 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+const { colorTextError, colorTextMedium, space2 } = Theme.get();
+const style = StyleSheet.create({
+    discountedPercentage: {
+        color: colorTextError,
+    },
+    discountedPriceInfo: {
+        alignItems: "flex-end",
+        marginLeft: space2,
+    },
+    discountedPriceText: {
+        color: colorTextMedium,
+    },
+    price: {
+        flexDirection: "row",
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { Country } from "../../../../../../projection/shared/country";
+interface ProductVariantPreviewProps {
+    readonly item: CheckoutItemProjection;
+    readonly country: Country;
+}
+declare const ProductVariantPreview: FC<ProductVariantPreviewProps>;
+export { ProductVariantPreview };

package/dist/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -0,0 +1,37 @@
+import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { Image } from "react-native";
+import { size } from "../../../../../../projection/shared/size";
+import { Column } from "../../../../../../shared/ui/components/layouts/column/Column";
+import { Row } from "../../../../../../shared/ui/components/layouts/row/Row";
+import { useMediaImage } from "../../../../hooks/useMediaImage";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Price } from "../price/Price";
+import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
+const ProductVariantPreview = ({ item, country }) => {
+    const cdnImageUrl = useMediaImage();
+    const { screen } = useDevice();
+    const isSmallScreen = screen.S;
+    const { productVariant, price } = item;
+    const { media, brand, name, size: sizeProjection } = productVariant;
+    const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
+    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    return (React.createElement(View, { style: [style.wrapper, isSmallScreen ? style.mobileWrapper : undefined] },
+        React.createElement(Row, { style: style.row },
+            React.createElement(Column, { size: { M: "2/3", L: "2/3" }, style: style.content },
+                mainImage ? (React.createElement(Image, { resizeMode: "stretch", style: style.image, testID: "product-variant-image", source: {
+                        uri: cdnImageUrl({
+                            url: mainImage.url,
+                            width: IMAGE_SIZE,
+                        }),
+                    } })) : null,
+                React.createElement(View, { style: style.info },
+                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),
+                    React.createElement(Text, { level: 2, detail: true }, name),
+                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
+                React.createElement(View, { style: style.price },
+                    React.createElement(Price, { price: price, withPercentage: true }))))));
+};
+export { ProductVariantPreview };

package/dist/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.style.d.ts

@@ -0,0 +1,31 @@
+declare const IMAGE_SIZE = 35;
+declare const style: {
+    content: {
+        flexDirection: "row";
+    };
+    image: {
+        borderRadius: number;
+        width: number;
+    };
+    info: {
+        flex: number;
+        marginLeft: number;
+    };
+    mobileWrapper: {
+        borderBottomWidth: number;
+        borderColor: string;
+    };
+    price: {
+        justifyContent: "flex-end";
+    };
+    row: {
+        flex: number;
+        justifyContent: "center";
+    };
+    wrapper: {
+        backgroundColor: string;
+        flexDirection: "row";
+        padding: number;
+    };
+};
+export { style, IMAGE_SIZE };

package/dist/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.style.js

@@ -0,0 +1,34 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = Theme.get();
+const IMAGE_SIZE = 35;
+const style = StyleSheet.create({
+    content: {
+        flexDirection: "row",
+    },
+    image: {
+        borderRadius: borderRadius2,
+        width: IMAGE_SIZE,
+    },
+    info: {
+        flex: 1,
+        marginLeft: space2,
+    },
+    mobileWrapper: {
+        borderBottomWidth: borderWidth1,
+        borderColor: colorBorderInput,
+    },
+    price: {
+        justifyContent: "flex-end",
+    },
+    row: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    wrapper: {
+        backgroundColor: colorBgBase,
+        flexDirection: "row",
+        padding: space4,
+    },
+});
+export { style, IMAGE_SIZE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "5.1.4-beta.0",
+  "version": "5.1.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -35,6 +35,7 @@
     "@react-spring/native": "9.6.1",
     "@sentry/react-native": "^4.13.0",
     "inline-style-prefixer": "6.0.1",
+    "lodash": "^4.17.21",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-svg": "^13.4.0",

package/dist/infrastructure/ui/components/layouts/banner/Banner.d.ts

@@ -1,7 +0,0 @@
-import { FC, ReactNode } from "react";
-interface BannerProps {
-    readonly children?: ReactNode;
-    readonly text: string;
-}
-declare const Banner: FC<BannerProps>;
-export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.js

@@ -1,8 +0,0 @@
-import { ALIGN, Text } from "@lookiero/aurora";
-import React from "react";
-import { View } from "react-native";
-import { style } from "./Banner.style";
-const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
-    React.createElement(Text, { align: ALIGN.CENTER, level: 2, detail: true }, text),
-    children));
-export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.d.ts

@@ -1,9 +0,0 @@
-declare const style: {
-    container: {
-        alignItems: "center";
-        backgroundColor: string;
-        paddingHorizontal: number;
-        paddingVertical: number;
-    };
-};
-export { style };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.js

@@ -1,12 +0,0 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
-const { colorInfo, spaceM, spaceL } = theme();
-const style = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        backgroundColor: colorInfo,
-        paddingHorizontal: spaceL,
-        paddingVertical: spaceM,
-    },
-});
-export { style };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import { SvgProps } from "react-native-svg";
-type Icon = FC<SvgProps>;
-export type { Icon };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.js

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

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.d.ts

@@ -1,3 +0,0 @@
-import { ReturnQuestionItem } from "../ReturnQuestionItem";
-declare const HostStackReturnQuestionItem: ReturnQuestionItem;
-export { HostStackReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.js

@@ -1,27 +0,0 @@
-import { COLOR, Text } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
-import { animated, useSpring } from "@react-spring/native";
-import React, { useCallback, useMemo, useState } from "react";
-import { View } from "react-native";
-import ReturnQuestion from "../../ReturnQuestion";
-import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
-import { style } from "./HostStackReturnQuestionItem.style";
-const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const { formatMessage } = useIntl();
-    const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
-    const feedbackReturnQuestion = feedback
-        ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
-        : undefined;
-    const titleText = useMemo(() => (returnQuestion.name ? formatMessage({ id: returnQuestion.name }) : undefined), [formatMessage, returnQuestion.name]);
-    const feedbackText = useMemo(() => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.name }) : undefined), [feedbackReturnQuestion, formatMessage]);
-    const [stackHeight, setStackHeight] = useState();
-    const handleOnLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setStackHeight(height), []);
-    const stackSyle = useSpring({ height: stackHeight });
-    return (React.createElement(animated.View, { style: stackSyle },
-        React.createElement(View, { onLayout: handleOnLayout },
-            titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
-            feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 3 }, feedbackText),
-                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id }))))) : (children))));
-};
-export { HostStackReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.d.ts

@@ -1,6 +0,0 @@
-declare const style: {
-    title: {
-        marginBottom: number;
-    };
-};
-export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem.style.js

@@ -1,9 +0,0 @@
-import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { space1 } = Theme.get();
-const style = StyleSheet.create({
-    title: {
-        marginBottom: space1,
-    },
-});
-export { style };

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

@@ -1,9 +0,0 @@
-declare const HEADER_HEIGHT: number;
-declare const style: {
-    logo: {
-        left: number;
-        position: "absolute";
-        top: number;
-    };
-};
-export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

@@ -1,12 +0,0 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../../../theme/theme";
-const { spaceXXXL } = theme();
-const HEADER_HEIGHT = spaceXXXL;
-const style = StyleSheet.create({
-    logo: {
-        left: 0,
-        position: "absolute",
-        top: 0,
-    },
-});
-export { style, HEADER_HEIGHT };