@lookiero/checkout 0.2.22 → 0.2.24

package/dist/infrastructure/projection/feedback/feedback.mock.d.ts

@@ -0,0 +1,3 @@
+import { FeedbackProjection } from "../../../projection/feedback/feedback";
+declare const feedback: FeedbackProjection;
+export { feedback };

package/dist/infrastructure/projection/feedback/feedback.mock.js

@@ -0,0 +1,6 @@
+const feedback = {
+    ["0ad1dba8-b02c-4121-a1e3-981f1c30800d"]: "9251dc2c-d76a-484d-9299-346929af932f",
+    ["542c4d24-e1da-484f-8c3a-7d89ee135adc"]: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+    ["1123a37d-bc00-43a4-9d28-cee1dfaf356c"]: "Free text comment",
+};
+export { feedback };

package/dist/infrastructure/ui/components/layouts/body/Body.style.d.ts

@@ -1,14 +1,10 @@
 declare const style: {
-    container: {
-        flex: number;
-    };
     row: {
         flex: number;
         justifyContent: "center";
-        paddingVertical: number;
     };
     column: {
-        height: string;
+        paddingHorizontal: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/components/layouts/body/Body.style.js

@@ -1,17 +1,13 @@
-import { Platform, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { theme } from "../../../theme/theme";
 const { spaceXL } = theme();
 const style = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
     row: {
         flex: 1,
         justifyContent: "center",
-        paddingVertical: Platform.OS === "web" ? spaceXL : 0,
     },
     column: {
-        height: "100%",
+        paddingHorizontal: spaceXL,
     },
 });
 export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem.d.ts

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

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem.js

@@ -0,0 +1,3 @@
+import React from "react";
+const HostDefaultReturnQuestionFeedbackItem = ({ children }) => (React.createElement(React.Fragment, null, children));
+export { HostDefaultReturnQuestionFeedbackItem };

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

@@ -2,30 +2,34 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback, useState } from "react";
 import { useIntl } from "react-intl";
 import { TouchableHighlight, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
 import { Modal } from "../../../../../shared/components/layouts/modal/Modal";
+import { ButtonIcon } from "../../../../../shared/components/molecules/buttonIcon/ButtonIcon";
 import { InputField } from "../../../../../shared/components/molecules/inputField/InputField";
-import { theme } from "../../../../../theme/theme";
-import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
-import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
+import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
+import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
-const { spaceXL } = theme();
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     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 { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
     const intl = useIntl();
     const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: `${RETURN_QUESTIONS_PREFIX}${returnQuestionName}`, defaultMessage: returnQuestionName }), [intl]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
+    const deepestReturnQuestionWithFeedback = deepestReturnQuestionWithFeedbackForReturnQuestion({
+        feedback,
+        returnQuestion,
+    });
+    const handleOnBackButtonPress = useCallback(() => deepestReturnQuestionWithFeedback &&
+        onChange({ returnQuestionId: deepestReturnQuestionWithFeedback.id, returnQuestionFeedback: undefined }), [deepestReturnQuestionWithFeedback, onChange]);
     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, icon: "arrow-down", editable: false }))),
-        React.createElement(Modal, { visible: modalVisible, onClose: handleOnModalClose, portalHostName: portalHostName },
-            React.createElement(View, { style: [style.modalContent, { paddingBottom: spaceXL + safeAreaInsetBottom }] }, children))));
+        React.createElement(Modal, { visible: modalVisible, onClose: handleOnModalClose, portalHostName: portalHostName, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", onPress: handleOnBackButtonPress, testID: "modal-back-button" })), scroll: true },
+            React.createElement(View, { style: style.modalContent }, children))));
 };
 export { HostSelectReturnQuestionItem };

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

@@ -1,33 +1,27 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback } from "react";
+import { animated, useSpring } from "@react-spring/native";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
-import { ButtonIcon } from "../../../../../shared/components/molecules/buttonIcon/ButtonIcon";
 import ReturnQuestion from "../../ReturnQuestion";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
     const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_PREFIX });
-    const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestion.id });
+    const { feedback } = 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: { icon: 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, portalHostName: portalHostName })))));
-    }
-    else {
-        return (React.createElement(React.Fragment, null,
-            questionTitle,
-            children));
-    }
+    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: 2, style: style.title }, titleText)),
+            feedbackReturnQuestion ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { level: 3, style: style.feedback }, feedbackText),
+                feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, returnQuestion: childReturnQuestion, returnQuestionParentId: feedbackReturnQuestion.id, portalHostName: portalHostName }))))) : (children))));
 };
 export { HostStackReturnQuestionItem };

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

@@ -1,10 +1,4 @@
 declare const style: {
-    backButton: {
-        position: "absolute";
-        top: number;
-        left: number;
-        zIndex: number;
-    };
     title: {
         marginVertical: number;
         textAlign: "center";

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

@@ -1,16 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../../theme/theme";
-const { colorGrayscaleL, spaceS, spaceM, spaceL, iconSize } = theme();
-const headerPadding = spaceM;
-const buttonIconPadding = spaceS;
-const backButtonTop = (iconSize + headerPadding + buttonIconPadding * 2) * -1;
+const { colorGrayscaleL, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
-    backButton: {
-        position: "absolute",
-        top: backButtonTop,
-        left: spaceM,
-        zIndex: 20,
-    },
     title: {
         marginVertical: spaceL,
         textAlign: "center",

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.d.ts

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

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -0,0 +1,27 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { View } from "react-native";
+import { I18nMessages, RETURN_QUESTIONS_FEEDBACK_PREFIX, RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
+import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
+import { style } from "./ReturnQuestionFeedbackItem.style";
+const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
+    const titleText = useI18nMessage({ id: returnQuestion.name, prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX });
+    const unansweredText = useI18nMessage({
+        id: I18nMessages.FEEDBACK_UNANSWERED,
+        prefix: RETURN_QUESTIONS_FEEDBACK_PREFIX,
+    });
+    const returnQuestionFeedback = useReturnQuestionFeedback();
+    const intl = useIntl();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({
+        id: `${RETURN_QUESTIONS_PREFIX}${returnQuestionName}`,
+        defaultMessage: returnQuestionName,
+    }), [intl]);
+    const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { detail: true, level: 2, style: style.title }, titleText),
+        React.createElement(Text, { level: 3 }, feedback || unansweredText)));
+};
+export { ReturnQuestionFeedbackItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.style.d.ts

@@ -0,0 +1,10 @@
+declare const style: {
+    container: {
+        marginBottom: number;
+    };
+    title: {
+        color: string;
+        marginBottom: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.style.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../theme/theme";
+const { colorGrayscaleL, spaceM, spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        marginBottom: spaceXL,
+    },
+    title: {
+        color: colorGrayscaleL,
+        marginBottom: spaceM,
+    },
+});
+export { style };

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

@@ -10,4 +10,13 @@ interface RecursiveFeedbackForReturnQuestionFunction {
     (args: RecursiveFeedbackForReturnQuestionFunctionArgs): string[];
 }
 declare const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction;
-export { feedbackForReturnQuestion };
+interface RecursiveDeepestReturnQuestionWithFeedbackFunctionArgs {
+    readonly feedback: FeedbackProjection | undefined;
+    readonly returnQuestion: ReturnQuestionProjection;
+    readonly deepestReturnQuestion?: ReturnQuestionProjection;
+}
+interface RecursiveDeepestReturnQuestionWithFeedbackFunction {
+    (args: RecursiveDeepestReturnQuestionWithFeedbackFunctionArgs): ReturnQuestionProjection | undefined;
+}
+declare const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturnQuestionWithFeedbackFunction;
+export { feedbackForReturnQuestion, deepestReturnQuestionWithFeedbackForReturnQuestion };

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

@@ -7,25 +7,52 @@ const feedbackForReturnQuestion = ({ feedback, returnQuestion, translate, acc =
     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;
+        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, returnQuestionFeedback];
+            return acc;
         }
-        return acc;
+        return [...acc, returnQuestionFeedback];
     }
     return (returnQuestion.children?.reduce((acc, childReturnQuestion) => [
         ...acc,
         ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
     ], []) || []);
 };
-export { feedbackForReturnQuestion };
+const deepestReturnQuestionWithFeedbackForReturnQuestion = ({ feedback, returnQuestion, deepestReturnQuestion, }) => {
+    if (!feedback) {
+        return;
+    }
+    const returnQuestionId = Object.keys(feedback).find((id) => id === returnQuestion.id);
+    if (returnQuestionId) {
+        const returnQuestionFeedback = feedback[returnQuestionId];
+        if (isUuid(returnQuestionFeedback)) {
+            const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
+            if (feebackReturnQuestionChild) {
+                return deepestReturnQuestionWithFeedbackForReturnQuestion({
+                    feedback,
+                    returnQuestion: feebackReturnQuestionChild,
+                    deepestReturnQuestion: returnQuestion,
+                });
+            }
+            return returnQuestion;
+        }
+        return returnQuestion;
+    }
+    const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) => Object.keys(feedback).find((id) => id === childReturnQuestion.id));
+    if (feebackReturnQuestionChild) {
+        return deepestReturnQuestionWithFeedbackForReturnQuestion({
+            feedback,
+            returnQuestion: feebackReturnQuestionChild,
+            deepestReturnQuestion: feebackReturnQuestionChild,
+        });
+    }
+    return deepestReturnQuestion;
+};
+export { feedbackForReturnQuestion, deepestReturnQuestionWithFeedbackForReturnQuestion };

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

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from "react";
+import { Edge } from "react-native-safe-area-context";
 interface SafeAreaScrollViewProps {
     readonly children: ReactNode;
+    readonly edges?: Edge[];
 }
 declare const SafeAreaScrollView: FC<SafeAreaScrollViewProps>;
 export { SafeAreaScrollView };

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

@@ -1,7 +1,15 @@
 import React from "react";
-import { ScrollView } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { style } from "./SafeAreaScrollView.style";
-const SafeAreaScrollView = ({ children }) => (React.createElement(SafeAreaView, { style: style.container },
-    React.createElement(ScrollView, { contentContainerStyle: style.scrollContainer, showsVerticalScrollIndicator: false }, children)));
+import { ScrollView, View } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../theme/theme";
+const { spaceXL } = theme();
+const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"] }) => {
+    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    return (React.createElement(SafeAreaView, { edges: edges },
+        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+            React.createElement(View, { style: {
+                    paddingTop: !safeAreaInsetTop ? spaceXL : 0,
+                    paddingBottom: !safeAreaInsetBottom ? spaceXL : 0,
+                } }, children))));
+};
 export { SafeAreaScrollView };

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

@@ -1,5 +1,6 @@
 declare const COLOR_I18N_PREFIX = "color.";
 declare const RETURN_QUESTIONS_PREFIX = "return_questions.";
+declare const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
 declare enum I18nMessages {
     INTRO_TITLE = "intro.title",
     INTRO_SUBTITLE = "intro.subtitle",
@@ -27,6 +28,8 @@ declare enum I18nMessages {
     GET_OUT_OF_CHECKOUT_MODAL_TITLE = "get_out_of_checkout_modal.title",
     GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION = "get_out_of_checkout_modal.description",
     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"
+    GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button",
+    FEEDBACK_TITLE = "feedback.title",
+    FEEDBACK_UNANSWERED = "feedback.unanswered"
 }
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

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

@@ -1,5 +1,6 @@
 const COLOR_I18N_PREFIX = "color.";
 const RETURN_QUESTIONS_PREFIX = "return_questions.";
+const RETURN_QUESTIONS_FEEDBACK_PREFIX = "return_questions_feedback.";
 var I18nMessages;
 (function (I18nMessages) {
     I18nMessages["INTRO_TITLE"] = "intro.title";
@@ -29,5 +30,7 @@ var I18nMessages;
     I18nMessages["GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION"] = "get_out_of_checkout_modal.description";
     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["FEEDBACK_TITLE"] = "feedback.title";
+    I18nMessages["FEEDBACK_UNANSWERED"] = "feedback.unanswered";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX, RETURN_QUESTIONS_PREFIX, RETURN_QUESTIONS_FEEDBACK_PREFIX };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.d.ts

@@ -9,6 +9,7 @@ interface ModalProps {
     readonly onClose?: () => void;
     readonly header?: ReactNode;
     readonly portalHostName?: string;
+    readonly scroll?: boolean;
     readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
     readonly style?: Partial<Record<ModalStyle, ViewProps>>;
 }

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -1,14 +1,14 @@
 import { Portal } from "@gorhom/portal";
 import { animated, useTransition } from "@react-spring/native";
-import React, { useCallback, useState } from "react";
-import { Dimensions, Platform, TouchableWithoutFeedback, View } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Dimensions, Platform, ScrollView, TouchableWithoutFeedback, View, } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScreenSize } from "../../../hooks/useScreenSize";
 import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
 import { style } from "./Modal.style";
 const TRANSITION_MODAL_SCALE = 0.9;
-const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, }) => {
+const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
     const { height: screenHeight } = Dimensions.get("screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     const screenSizeWithoutInsets = screenHeight - safeAreaInsetTop;
@@ -37,6 +37,7 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
             : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
         unique: true,
     });
+    const ModalContentView = useMemo(() => (scroll ? ScrollView : View), [scroll]);
     return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { style: style.container, pointerEvents: visible ? "auto" : "none", testID: "modal" },
         React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
             React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),
@@ -54,7 +55,8 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
                     ], onLayout: handleOnModalLayout, pointerEvents: visible ? "auto" : "none" },
                     (header || onClose) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
-                        onClose && (React.createElement(ButtonIcon, { style: { button: [style.closeButton, customStyle?.closeButton] }, name: "close", onPress: onClose })))),
-                    children))))))));
+                        onClose && (React.createElement(ButtonIcon, { style: { button: customStyle?.closeButton }, name: "close", onPress: onClose })))),
+                    React.createElement(ModalContentView, null,
+                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom } }, children))))))))));
 };
 export { Modal };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.d.ts

@@ -42,8 +42,5 @@ declare const style: {
         padding: number;
         flexDirection: "row";
     };
-    closeButton: {
-        alignSelf: "flex-end";
-    };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.js

@@ -55,8 +55,5 @@ const style = StyleSheet.create({
         padding: spaceM,
         flexDirection: "row",
     },
-    closeButton: {
-        alignSelf: "flex-end",
-    },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.d.ts

@@ -1,14 +1,16 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, TouchableHighlightProps, ViewStyle } from "react-native";
 import { IconName, IconStyle } from "../../atoms/icon/Icon";
 interface ButtonIconStyle {
     readonly button: StyleProp<ViewStyle>;
     readonly icon: IconStyle;
 }
-interface ButtonIconProps {
+interface ButtonIconBaseProps {
     readonly name: IconName;
+    readonly testID?: string;
     readonly style?: Partial<ButtonIconStyle>;
-    readonly onPress: () => void;
+}
+interface ButtonIconProps extends Omit<TouchableHighlightProps, keyof ButtonIconBaseProps>, ButtonIconBaseProps {
 }
 declare const ButtonIcon: FC<ButtonIconProps>;
 export { ButtonIcon };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.js

@@ -2,6 +2,6 @@ import React from "react";
 import { TouchableHighlight } from "react-native";
 import { Icon } from "../../atoms/icon/Icon";
 import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
-const ButtonIcon = ({ name, style: customStyle, onPress }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], onPress: onPress, underlayColor: buttonIconUnderlayColor, testID: "button-icon" },
+const ButtonIcon = ({ name, style: customStyle, testID = "button-icon", onPress, ...restProps }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], onPress: onPress, underlayColor: buttonIconUnderlayColor, testID: testID, ...restProps },
     React.createElement(Icon, { name: name, style: customStyle?.icon })));
 export { ButtonIcon };

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

@@ -4,6 +4,7 @@ import { Text, TouchableHighlight, View } from "react-native";
 import { useParams } from "react-router-native";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { feedback as feedbackMock } from "../../../projection/feedback/feedback.mock";
 import { returnQuestions as returnQuestionsMock } from "../../../projection/returnQuestion/returnQuestions.mock";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
@@ -11,11 +12,8 @@ import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Item.style";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
+import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 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 });
@@ -23,19 +21,24 @@ const Item = ({ customerId }) => {
     const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
     const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
     const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
+    const handleOnEditFeedback = useCallback(() => void 0, []);
     if (status === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
     const { price } = checkoutItem;
     const { media, brand, name, size, color } = checkoutItem.productVariant;
     const returnQuestions = returnQuestionsMock;
+    const feedback = feedbackMock;
     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(TouchableHighlight, { onPress: handleOnShowReturnQuestions },
-                    React.createElement(Text, { style: { padding: 16 } }, "show return questions")))),
+                Object.entries(feedback).length !== 0 && (React.createElement(View, { style: style.feedbackContainer },
+                    React.createElement(ReturnQuestionsFeedback, { feedback: feedback, returnQuestions: returnQuestions, onEditFeedback: handleOnEditFeedback }))),
+                React.createElement(View, { style: { flexDirection: "row", justifyContent: "center" } },
+                    React.createElement(TouchableHighlight, { onPress: handleOnShowReturnQuestions },
+                        React.createElement(Text, { style: { padding: 16 } }, "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,7 +1,12 @@
 declare const style: {
     sliderContainer: {
-        flex: number;
+        minHeight: number;
         marginBottom: number;
     };
+    feedbackContainer: {
+        marginVertical: number;
+        borderTopColor: string;
+        borderTopWidth: number;
+    };
 };
 export { style };

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

@@ -1,10 +1,15 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../theme/theme";
-const { spaceXL } = theme();
+const { borderSize, colorGrayscaleM, spaceXL } = theme();
 const style = StyleSheet.create({
     sliderContainer: {
-        flex: 1,
+        minHeight: 500,
         marginBottom: spaceXL,
     },
+    feedbackContainer: {
+        marginVertical: spaceXL,
+        borderTopColor: colorGrayscaleM,
+        borderTopWidth: borderSize,
+    },
 });
 export { style };

package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface ReturnQuestionsFeedbackProps {
+    readonly feedback: FeedbackProjection;
+    readonly returnQuestions: ReturnQuestionProjection[];
+    readonly onEditFeedback: () => void;
+}
+declare const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps>;
+export { ReturnQuestionsFeedback };

package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -0,0 +1,32 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { 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 { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
+import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
+import { I18nMessages, RETURN_QUESTIONS_PREFIX } from "../../../../i18n/i18n";
+import { ButtonIcon } from "../../../../shared/components/molecules/buttonIcon/ButtonIcon";
+import { style } from "./ReturnQuestionsFeedback.style";
+const returnQuestionItems = {
+    [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_SELECT]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.HOST_STACK]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.TEXTAREA]: ReturnQuestionFeedbackItem,
+    [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
+};
+const ReturnQuestionsFeedback = ({ feedback, returnQuestions, onEditFeedback }) => {
+    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE, prefix: RETURN_QUESTIONS_PREFIX });
+    return (React.createElement(View, null,
+        React.createElement(View, { style: style.titleContainer },
+            React.createElement(Text, { level: 2, style: style.title }, titleText),
+            React.createElement(ButtonIcon, { name: "pencil", onPress: onEditFeedback })),
+        React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
+            React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+                React.createElement(ReturnQuestions, { returnQuestions: returnQuestions })))));
+};
+export { ReturnQuestionsFeedback };

package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+    titleContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    title: {
+        marginTop: number;
+        marginBottom: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceL, spaceXL } = theme();
+const style = StyleSheet.create({
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    title: {
+        marginTop: spaceXL,
+        marginBottom: spaceL,
+    },
+});
+export { style };

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

@@ -1,7 +1,6 @@
 import { PortalHost } from "@gorhom/portal";
 import React from "react";
-import { ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { 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";
@@ -12,9 +11,7 @@ import { HostStackReturnQuestionItem } from "../../../../components/organisms/re
 import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
 import { Modal } from "../../../../shared/components/layouts/modal/Modal";
-import { theme } from "../../../../theme/theme";
 import { style } from "./ReturnQuestionsForm.style";
-const { spaceXL } = theme();
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
@@ -24,14 +21,10 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
     [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
 };
-const ReturnQuestionsForm = ({ feedback, returnQuestions, onClose, visible }) => {
-    const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
-    return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
-        React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
-            React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
-            React.createElement(Modal, { visible: visible, onClose: onClose, portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME },
-                React.createElement(ScrollView, null,
-                    React.createElement(View, { style: [style.returnQuestionsContainer, { paddingBottom: spaceXL + safeAreaInsetBottom }] },
-                        React.createElement(ReturnQuestions, { returnQuestions: returnQuestions, portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME })))))));
-};
+const ReturnQuestionsForm = ({ feedback, returnQuestions, onClose, visible }) => (React.createElement(ReturnQuestionFeedbackProvider, { feedback: feedback },
+    React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+        React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
+        React.createElement(Modal, { visible: visible, onClose: onClose, portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, scroll: true },
+            React.createElement(View, { style: style.returnQuestionsContainer },
+                React.createElement(ReturnQuestions, { returnQuestions: returnQuestions, portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }))))));
 export { ReturnQuestionsForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

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

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

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

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