@lookiero/checkout 0.2.17 → 0.2.18

package/dist/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionItem.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionItem } from "../components/ReturnQuestionItem";
+declare type ReturnQuestionItems = Record<ReturnQuestionType, ReturnQuestionItem>;
+interface ReturnQuestionItemContextProviderProps {
+    readonly returnQuestionItems: ReturnQuestionItems;
+    readonly children: ReactNode;
+}
+declare const ReturnQuestionItemProvider: FC<ReturnQuestionItemContextProviderProps>;
+interface UseReturnQuestionItemFunctionArgs {
+    readonly type: ReturnQuestionType;
+}
+interface UseReturnQuestionItemFunction {
+    (args: UseReturnQuestionItemFunctionArgs): ReturnQuestionItem;
+}
+declare const useReturnQuestionItem: UseReturnQuestionItemFunction;
+export type { ReturnQuestionItems };
+export { useReturnQuestionItem, ReturnQuestionItemProvider };

package/dist/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionItem.js

@@ -0,0 +1,12 @@
+import React, { createContext, useContext, useMemo } from "react";
+import invariant from "tiny-invariant";
+const ReturnQuestionItemContext = createContext({});
+const ReturnQuestionItemProvider = ({ returnQuestionItems, children }) => (React.createElement(ReturnQuestionItemContext.Provider, { value: returnQuestionItems }, children));
+const useReturnQuestionItem = ({ type }) => {
+    const items = useContext(ReturnQuestionItemContext);
+    const item = useMemo(() => items[type], [items, type]);
+    invariant(items, "Your are trying to use the useReturnQuestionItem hook without wrapping your app with the <ReturnQuestionItemProvider>.");
+    invariant(item, `The provided ReturnQuestionType (${type}) is NOT SUPPORTED`);
+    return item;
+};
+export { useReturnQuestionItem, ReturnQuestionItemProvider };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface OnChangeReturnQuestionItemFunctionArgs {
+    readonly feedback: string | undefined;
+}
+interface OnChangeReturnQuestionItemFunction {
+    (args: OnChangeReturnQuestionItemFunctionArgs): void;
+}
+interface ReturnQuestionItemProps {
+    readonly returnQuestion: ReturnQuestionProjection;
+    readonly onChange: OnChangeReturnQuestionItemFunction;
+    readonly children?: JSX.Element;
+}
+declare type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
+export type { ReturnQuestionItem, ReturnQuestionItemProps, OnChangeReturnQuestionItemFunction };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.js

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

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

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

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

@@ -0,0 +1,12 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { style } from "./HostDefaultReturnQuestionItem.style";
+const HostDefaultReturnQuestionItem = ({ returnQuestion, children }) => {
+    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { level: 2, style: style.title }, titleText),
+        children));
+};
+export { HostDefaultReturnQuestionItem };

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

@@ -0,0 +1,8 @@
+declare const style: {
+    title: {
+        marginTop: number;
+        marginBottom: number;
+        textAlign: "center";
+    };
+};
+export { style };

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../theme/theme";
+const { spaceL, spaceXXXL } = theme();
+const style = StyleSheet.create({
+    title: {
+        marginTop: spaceXXXL,
+        marginBottom: spaceL,
+        textAlign: "center",
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.d.ts

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

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -0,0 +1,30 @@
+import { ButtonIcon } from "@lookiero/aurora-next/build/components/atoms/ButtonIcon/ButtonIcon";
+import { InputField } from "@lookiero/aurora-next/build/components/atoms/InputField/InputField";
+import { Modal } from "@lookiero/aurora-next/build/components/molecules/Modal/Modal";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback, useState } from "react";
+import { useIntl } from "react-intl";
+import { TouchableHighlight, View } from "react-native";
+import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
+import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
+import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
+const HostSelectReturnQuestionItem = ({ returnQuestion, children }) => {
+    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
+    const [modalVisible, setModalVisible] = useState(false);
+    const handleOnPress = useCallback(() => setModalVisible(true), []);
+    const handleOnModalClose = useCallback(() => setModalVisible(false), []);
+    const feedback = useReturnQuestionFeedback();
+    const intl = useIntl();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: `${RETURN_QUESTIONS_PREFIX}${returnQuestionName}`, defaultMessage: returnQuestionName }), [intl]);
+    const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TouchableHighlight, { style: style.container, onPress: handleOnPress, underlayColor: containerUnderlayColor },
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(InputField, { label: placeholderText, value: inputValue, name: returnQuestion.name, icon: "arrow-down", type: "text", testID: returnQuestion.name }))),
+        React.createElement(Modal, { style: style.modal, size: "1/2", isVisible: modalVisible },
+            React.createElement(View, { style: style.modalContent },
+                React.createElement(ButtonIcon, { name: "close", style: style.backButton, onPress: handleOnModalClose }),
+                children))));
+};
+export { HostSelectReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.d.ts

@@ -0,0 +1,20 @@
+declare const containerUnderlayColor: string;
+declare const style: {
+    container: {
+        marginVertical: number;
+    };
+    modal: {
+        zIndex: number;
+    };
+    modalContent: {
+        marginTop: number;
+        paddingBottom: number;
+    };
+    backButton: {
+        top: number;
+        right: number;
+        alignSelf: "flex-end";
+        zIndex: number;
+    };
+};
+export { style, containerUnderlayColor };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../theme/theme";
+const { spaceM, spaceXL, colorGrayscaleS } = theme();
+const containerUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    container: {
+        marginVertical: spaceM,
+    },
+    modal: {
+        zIndex: 10,
+    },
+    modalContent: {
+        marginTop: -spaceXL,
+        paddingBottom: spaceXL,
+    },
+    backButton: {
+        top: 0,
+        right: -spaceM,
+        alignSelf: "flex-end",
+        zIndex: 20,
+    },
+});
+export { style, containerUnderlayColor };

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

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

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

@@ -0,0 +1,33 @@
+import { ButtonIcon } from "@lookiero/aurora-next/build/components/atoms/ButtonIcon/ButtonIcon";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback } from "react";
+import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import ReturnQuestion from "../../ReturnQuestion";
+import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
+import { style } from "./HostStackReturnQuestionItem.style";
+const HostStackReturnQuestionItem = ({ returnQuestion, children }) => {
+    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
+    const feedbackReturnQuestion = feedback
+        ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)
+        : undefined;
+    const feedbackText = useI18nMessage({ id: feedbackReturnQuestion?.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const handleOnBackButtonPress = useCallback(() => {
+        onChange({ returnQuestionId: returnQuestion.id, returnQuestionFeedback: undefined });
+    }, [onChange, returnQuestion.id]);
+    const questionTitle = titleText && (React.createElement(Text, { level: 2, style: style.title }, titleText));
+    if (feedbackReturnQuestion) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ButtonIcon, { name: "arrow-left", style: style.backButton, onPress: handleOnBackButtonPress }),
+            questionTitle,
+            React.createElement(Text, { level: 3, style: style.feedback }, feedbackText),
+            feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id })))));
+    }
+    else {
+        return (React.createElement(React.Fragment, null,
+            questionTitle,
+            children));
+    }
+};
+export { HostStackReturnQuestionItem };

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

@@ -0,0 +1,17 @@
+declare const style: {
+    backButton: {
+        position: "absolute";
+        top: number;
+        left: number;
+        zIndex: number;
+    };
+    title: {
+        marginVertical: number;
+        textAlign: "center";
+    };
+    feedback: {
+        color: string;
+        marginVertical: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../theme/theme";
+const { colorGrayscaleL, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    backButton: {
+        position: "absolute",
+        top: 0,
+        left: -spaceM,
+        zIndex: 20,
+    },
+    title: {
+        marginVertical: spaceL,
+        textAlign: "center",
+    },
+    feedback: {
+        color: colorGrayscaleL,
+        marginVertical: spaceM,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.d.ts

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

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -0,0 +1,13 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback } from "react";
+import { TouchableHighlight } from "react-native";
+import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
+const OptionReturnQuestionItem = ({ returnQuestion, onChange }) => {
+    const optionText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
+    const handleOnPress = useCallback(() => onChange({ feedback: returnQuestion.id }), [onChange, returnQuestion.id]);
+    return (React.createElement(TouchableHighlight, { style: style.container, onPress: handleOnPress, underlayColor: containerUnderlayColor },
+        React.createElement(Text, { level: 3 }, optionText)));
+};
+export { OptionReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.style.d.ts

@@ -0,0 +1,9 @@
+declare const containerUnderlayColor: string;
+declare const style: {
+    container: {
+        paddingVertical: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+};
+export { style, containerUnderlayColor };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../theme/theme";
+const { spaceM, colorGrayscaleS } = theme();
+const containerUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    container: {
+        paddingVertical: spaceM,
+        borderBottomWidth: 1,
+        borderBottomColor: colorGrayscaleS,
+    },
+});
+export { style, containerUnderlayColor };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.d.ts

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

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

@@ -0,0 +1,12 @@
+import { InputField } from "@lookiero/aurora-next/build/components/atoms/InputField/InputField";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback } from "react";
+import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
+const TextareaReturnQuestionItem = ({ returnQuestion, onChange }) => {
+    const placeholderText = useI18nMessage({ id: returnQuestion.placeholder, prefix: RETURN_QUESTIONS_PREFIX });
+    const { feedback } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
+    const handleOnChange = useCallback((value) => onChange({ feedback: value }), [onChange]);
+    return (React.createElement(InputField, { name: returnQuestion.name, type: "text", multiLine: true, label: placeholderText, placeholder: placeholderText, value: feedback, onChange: handleOnChange }));
+};
+export { TextareaReturnQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/util/returnQuestionFeedback.d.ts

@@ -0,0 +1,13 @@
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface RecursiveFeedbackForReturnQuestionFunctionArgs {
+    readonly feedback: FeedbackProjection | undefined;
+    readonly returnQuestion: ReturnQuestionProjection;
+    readonly translate: (i18nString: string) => string;
+    readonly acc?: string[];
+}
+interface RecursiveFeedbackForReturnQuestionFunction {
+    (args: RecursiveFeedbackForReturnQuestionFunctionArgs): string[];
+}
+declare const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction;
+export { feedbackForReturnQuestion };

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

@@ -0,0 +1,31 @@
+import { validate } from "uuid";
+const isUuid = (value) => validate(value);
+const feedbackForReturnQuestion = ({ feedback, returnQuestion, translate, acc = [], }) => {
+    if (!feedback) {
+        return [];
+    }
+    const returnQuestionId = Object.keys(feedback).find((id) => id === returnQuestion.id);
+    if (returnQuestionId) {
+        const returnQuestionFeedback = feedback[returnQuestionId];
+        if (returnQuestionFeedback !== undefined) {
+            if (isUuid(returnQuestionFeedback)) {
+                const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
+                if (feebackReturnQuestionChild) {
+                    return [
+                        ...acc,
+                        translate(feebackReturnQuestionChild?.name),
+                        ...feedbackForReturnQuestion({ feedback, returnQuestion: feebackReturnQuestionChild, translate, acc }),
+                    ];
+                }
+                return acc;
+            }
+            return [...acc, returnQuestionFeedback];
+        }
+        return acc;
+    }
+    return (returnQuestion.children?.reduce((acc, childReturnQuestion) => [
+        ...acc,
+        ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
+    ], []) || []);
+};
+export { feedbackForReturnQuestion };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface SafeAreaScrollViewProps {
+    readonly children: JSX.Element;
+}
+declare const SafeAreaScrollView: FC<SafeAreaScrollViewProps>;
+export { SafeAreaScrollView };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { SafeAreaView, ScrollView } from "react-native";
+import { style } from "./SafeAreaScrollView.style";
+const SafeAreaScrollView = ({ children }) => (React.createElement(SafeAreaView, { style: style.container },
+    React.createElement(ScrollView, { contentContainerStyle: style.scrollContainer, showsVerticalScrollIndicator: false }, children)));
+export { SafeAreaScrollView };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.d.ts

@@ -0,0 +1,10 @@
+declare const style: {
+    container: {
+        flex: number;
+    };
+    scrollContainer: {
+        flex: number;
+        flexGrow: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    scrollContainer: {
+        flex: 1,
+        flexGrow: 1,
+    },
+});
+export { style };

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

@@ -1,4 +1,5 @@
 declare const COLOR_I18N_PREFIX = "color.";
+declare const RETURN_QUESTIONS_PREFIX = "return_questions.";
 declare enum I18nMessages {
     INTRO_TITLE = "intro.title",
     INTRO_SUBTITLE = "intro.subtitle",
@@ -28,4 +29,4 @@ declare enum I18nMessages {
     GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
     GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button"
 }
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX };

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

@@ -1,4 +1,5 @@
 const COLOR_I18N_PREFIX = "color.";
+const RETURN_QUESTIONS_PREFIX = "return_questions.";
 var I18nMessages;
 (function (I18nMessages) {
     I18nMessages["INTRO_TITLE"] = "intro.title";
@@ -29,4 +30,4 @@ var I18nMessages;
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON"] = "get_out_of_checkout_modal.dismiss_button";
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON"] = "get_out_of_checkout_modal.confirm_button";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX };

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -4,11 +4,12 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { useSetCheckoutIntroShown } from "../../../domain/uiSetting/react/useSetCheckoutIntroShown";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { Spinner } from "../../components/atoms/spinner/Spinner";
 import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
@@ -29,7 +30,7 @@ const Intro = ({ customerId }) => {
     const handleOnPress = useCallback(() => setCheckoutIntroShown(), [setCheckoutIntroShown]);
     if (fiveItemsDiscountState === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaView, { style: style.safeAreaContainer },
+    return (React.createElement(SafeAreaScrollView, null,
         React.createElement(Body, null,
             React.createElement(View, { style: style.container },
                 React.createElement(View, { style: style.content },

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -1,7 +1,4 @@
 declare const style: {
-    safeAreaContainer: {
-        flex: number;
-    };
     container: {
         flex: number;
         justifyContent: "space-between";

package/dist/infrastructure/ui/views/intro/Intro.style.js

@@ -2,9 +2,6 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
 const style = StyleSheet.create({
-    safeAreaContainer: {
-        flex: 1,
-    },
     container: {
         flex: 1,
         justifyContent: "space-between",

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

@@ -1,26 +1,41 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { QueryStatus } from "@lookiero/messaging-react";
-import React from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 import { useParams } from "react-router-native";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { returnQuestions as returnQuestionsMock } from "../../../projection/returnQuestion/returnQuestions.mock";
 import { Spinner } from "../../components/atoms/spinner/Spinner";
 import { Body } from "../../components/layouts/body/Body";
+import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { style } from "./Item.style";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
+import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
+// const feedback: FeedbackProjection = {
+//   ["bb02cedd-09a7-43ed-8e78-ee5b3ad56914"]: "7f336540-4453-4280-9b5f-3bfd4e03ff25",
+// };
+const feedback = {};
 const Item = ({ customerId }) => {
     const { id } = useParams();
     const [checkout, status] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(true);
+    const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
+    const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
     if (status === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
-    const { media, brand, name, price, size, color } = checkoutItem?.productVariant;
-    return (React.createElement(SafeAreaView, { style: style.container },
-        React.createElement(ScrollView, { contentContainerStyle: style.scrollContainer, showsVerticalScrollIndicator: false },
+    const { price } = checkoutItem;
+    const { media, brand, name, size, color } = checkoutItem.productVariant;
+    const returnQuestions = returnQuestionsMock;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SafeAreaScrollView, null,
             React.createElement(Body, null,
                 React.createElement(View, { style: style.sliderContainer },
                     React.createElement(ProductVariantSlider, { producVariantMedia: media })),
-                React.createElement(ProductVariantDescription, { brand: brand, name: name, price: price, size: size, color: color })))));
+                React.createElement(ProductVariantDescription, { brand: brand, name: name, price: price, size: size, color: color }),
+                React.createElement(Button, { onPress: handleOnShowReturnQuestions }, "show return questions"))),
+        React.createElement(ReturnQuestionsForm, { feedback: feedback, returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions })));
 };
 export { Item };

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

@@ -1,11 +1,4 @@
 declare const style: {
-    container: {
-        flex: number;
-    };
-    scrollContainer: {
-        flex: number;
-        flexGrow: number;
-    };
     sliderContainer: {
         flex: number;
         marginBottom: number;

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

@@ -2,13 +2,6 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollContainer: {
-        flex: 1,
-        flexGrow: 1,
-    },
     sliderContainer: {
         flex: 1,
         marginBottom: spaceXL,

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionsFormProps {
+    readonly visible: boolean;
+    readonly feedback: FeedbackProjection;
+    readonly returnQuestions: ReturnQuestionProjection[];
+    readonly onClose: () => void;
+}
+declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
+export { ReturnQuestionsForm };

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -0,0 +1,29 @@
+import { ButtonIcon } from "@lookiero/aurora-next/build/components/atoms/ButtonIcon/ButtonIcon";
+import { Modal } from "@lookiero/aurora-next/build/components/molecules/Modal/Modal";
+import React from "react";
+import { ScrollView, View } from "react-native";
+import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { ReturnQuestionFeedbackProvider } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostSelectReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem";
+import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/HostStackReturnQuestionItem";
+import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
+import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { style } from "./ReturnQuestionsForm.style";
+const returnQuestionItems = {
+    [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+    [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+    [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+    [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+    [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+const ReturnQuestionsForm = ({ feedback, returnQuestions, onClose, visible }) => (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
+    React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+        React.createElement(Modal, { style: style.modal, fullHeight: true, size: "1/2", isVisible: visible },
+            React.createElement(ButtonIcon, { name: "close", style: style.backButton, onPress: onClose }),
+            React.createElement(ScrollView, { contentContainerStyle: style.scrollContainer, showsVerticalScrollIndicator: false },
+                React.createElement(View, { style: style.returnQuestionsContainer },
+                    React.createElement(ReturnQuestions, { returnQuestions: returnQuestions })))))));
+export { ReturnQuestionsForm };

package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -0,0 +1,19 @@
+declare const style: {
+    scrollContainer: {
+        flex: number;
+        flexGrow: number;
+    };
+    modal: {
+        zIndex: number;
+    };
+    backButton: {
+        top: number;
+        right: number;
+        alignSelf: "flex-end";
+        zIndex: number;
+    };
+    returnQuestionsContainer: {
+        paddingBottom: number;
+    };
+};
+export { style };