@lookiero/checkout 0.2.21 → 0.2.22

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

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+import { ViewProps } from "react-native";
+import { ScreenSize } from "../../../hooks/useScreenSize";
+declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
+declare type ModalStyle = "overlay" | "row" | "modal" | "header" | "closeButton";
+interface ModalProps {
+    readonly children: ReactNode;
+    readonly visible: boolean;
+    readonly onClose?: () => void;
+    readonly header?: ReactNode;
+    readonly portalHostName?: string;
+    readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
+    readonly style?: Partial<Record<ModalStyle, ViewProps>>;
+}
+declare const Modal: FC<ModalProps>;
+export type { ColumnSize };
+export { Modal };

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

@@ -0,0 +1,60 @@
+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 { 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 { height: screenHeight } = Dimensions.get("screen");
+    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    const screenSizeWithoutInsets = screenHeight - safeAreaInsetTop;
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S" || Platform.OS !== "web";
+    const columnSizeForScreenSize = size[screenSize];
+    const [modalHeight, setModalHeight] = useState();
+    const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
+    const transitions = useTransition(visible, {
+        from: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        enter: { modalOpacity: 1, overlayOpacity: 1, modalTranslateY: 0, modalScale: 1 },
+        leave: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        unique: true,
+    });
+    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] })),
+        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], style: style.safeArea, pointerEvents: "box-none" },
+            React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row], pointerEvents: "box-none" },
+                React.createElement(animated.View, { style: [
+                        style.modal,
+                        columnSizeForScreenSize && style.modal[columnSizeForScreenSize],
+                        {
+                            opacity: modalOpacity,
+                            transform: [{ translateY: modalTranslateY }, { scale: modalScale }],
+                            maxHeight: screenSizeWithoutInsets,
+                        },
+                        customStyle?.modal,
+                    ], 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))))))));
+};
+export { Modal };

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

@@ -0,0 +1,49 @@
+import { ViewStyle } from "react-native";
+declare const style: {
+    container: {
+        position: "absolute";
+        width: string;
+        height: string;
+        overflow: "hidden";
+    };
+    overlay: {
+        zIndex: number;
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        height: string;
+        cursor: string;
+    };
+    safeArea: {
+        flex: number;
+        zIndex: number;
+    };
+    row: {
+        flex: number;
+        alignContent: "center";
+        justifyContent: "center";
+    };
+    rowSmall: {
+        justifyContent: "flex-end";
+    };
+    modal: {
+        "1/4": ViewStyle;
+        "1/3": ViewStyle;
+        "1/2": ViewStyle;
+        "2/3": ViewStyle;
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+    header: {
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: number;
+        flexDirection: "row";
+    };
+    closeButton: {
+        alignSelf: "flex-end";
+    };
+};
+export { style };

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

@@ -0,0 +1,62 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceM, colorBase, colorOverlay } = theme();
+const modalStylesForColumSize = {
+    ["1/4"]: {
+        maxWidth: `${100 * (1 / 4)}%`,
+    },
+    ["1/3"]: {
+        maxWidth: `${100 * (1 / 3)}%`,
+    },
+    ["1/2"]: {
+        maxWidth: `${100 * (1 / 2)}%`,
+    },
+    ["2/3"]: {
+        maxWidth: `${100 * (2 / 3)}%`,
+    },
+};
+const style = StyleSheet.create({
+    container: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+    },
+    overlay: {
+        zIndex: 1,
+        backgroundColor: colorOverlay,
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        cursor: "pointer",
+    },
+    safeArea: {
+        flex: 1,
+        zIndex: 2,
+    },
+    row: {
+        flex: 1,
+        alignContent: "center",
+        justifyContent: "center",
+    },
+    rowSmall: {
+        justifyContent: "flex-end",
+    },
+    modal: {
+        backgroundColor: colorBase,
+        position: "absolute",
+        width: "100%",
+        zIndex: 3,
+        ...modalStylesForColumSize,
+    },
+    header: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: spaceM,
+        flexDirection: "row",
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { ViewProps } from "react-native";
+interface RowProps extends ViewProps {
+}
+declare const Row: FC<RowProps>;
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { style } from "./Row.style";
+const Row = ({ children, style: customStyle, ...restProps }) => {
+    const screenSize = useScreenSize();
+    const largeStyle = screenSize !== "S" && style.rowLarge;
+    return (React.createElement(View, { style: [style.row, largeStyle, customStyle], ...restProps }, children));
+};
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    row: {
+        flexWrap: "wrap";
+        maxWidth: number;
+        width: string;
+        alignItems: "center";
+        marginHorizontal: string;
+    };
+    rowLarge: {
+        maxWidth: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXXL, layoutMaxWidth } = theme();
+const rowLargeMaxWidth = layoutMaxWidth - 2 * spaceXXL;
+const style = StyleSheet.create({
+    row: {
+        flexWrap: "wrap",
+        maxWidth: layoutMaxWidth,
+        width: "100%",
+        alignItems: "center",
+        marginHorizontal: "auto",
+    },
+    rowLarge: {
+        maxWidth: rowLargeMaxWidth,
+    },
+});
+export { style };

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Pagination.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface PaginationProps {
     readonly touchable?: boolean;
@@ -8,7 +8,7 @@ interface PaginationProps {
     readonly count?: number;
     readonly activeIndex?: number;
     readonly onChange: (index: number) => void;
-    readonly renderItem?: (index: number) => JSX.Element;
+    readonly renderItem?: (index: number) => ReactNode;
 }
 declare const Pagination: FC<PaginationProps>;
 export { Pagination };

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Pagination.style.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 const { colorGrayscaleS, colorGrayscaleXL } = theme();
 const DOT_SIZE = 8;
 const style = StyleSheet.create({

package/dist/infrastructure/ui/{components → shared/components}/layouts/slider/Slider.d.ts

@@ -14,7 +14,7 @@ interface SliderProps {
     readonly onSliderStart?: () => void;
     readonly onSliderEnd?: () => void;
     readonly onChanged?: (index: number) => void;
-    readonly paginationRenderItem?: (index: number) => JSX.Element;
+    readonly paginationRenderItem?: (index: number) => ReactNode;
 }
 declare const Slider: FC<SliderProps>;
 export { Slider };

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

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

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

@@ -0,0 +1,7 @@
+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" },
+    React.createElement(Icon, { name: name, style: customStyle?.icon })));
+export { ButtonIcon };

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

@@ -0,0 +1,7 @@
+declare const buttonIconUnderlayColor: string;
+declare const style: {
+    buttonIcon: {
+        padding: number;
+    };
+};
+export { style, buttonIconUnderlayColor };

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceS, colorGrayscaleS } = theme();
+const buttonIconUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    buttonIcon: {
+        padding: spaceS,
+    },
+});
+export { style, buttonIconUnderlayColor };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.d.ts

@@ -2,21 +2,23 @@ import { FC } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { ErrorStyle } from "../../atoms/error/Error";
 import { FieldStyle } from "../../atoms/field/Field";
-import { InputStyle } from "../../atoms/input/Input";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+import { InputProps, InputStyle } from "../../atoms/input/Input";
 declare type InputFieldStyle = FieldStyle & {
     readonly inputField: StyleProp<ViewStyle>;
     readonly input: InputStyle;
     readonly error: ErrorStyle;
+    readonly icon: IconStyle;
 };
-interface InputFieldProps {
+interface InputFieldBaseProps {
     readonly label: string;
-    readonly placeholder?: string;
-    readonly value: string | undefined;
     readonly multiline?: boolean;
-    readonly minHeight?: number;
     readonly error?: string | null;
     readonly style?: Partial<InputFieldStyle>;
-    readonly onChange: (value: string) => void;
+    readonly onChange?: (value: string) => void;
+    readonly icon?: IconName;
+}
+interface InputFieldProps extends Omit<InputProps, keyof InputFieldBaseProps>, InputFieldBaseProps {
 }
 declare const InputField: FC<InputFieldProps>;
 export { InputField };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.js

@@ -1,18 +1,20 @@
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
-import { theme } from "../../../theme/theme";
+import { theme } from "../../../../theme/theme";
 import { Error } from "../../atoms/error/Error";
 import { Field } from "../../atoms/field/Field";
+import { Icon } from "../../atoms/icon/Icon";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
-const { colorContent, colorGrayscaleL, colorPrimary } = theme();
-const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange, }) => {
+const { colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
+const inputPaddingRightWithIcon = iconSize + spaceM * 2;
+const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
     const handleOnChange = useCallback((text) => onChange(text), [onChange]);
     const handleOnBlur = useCallback(() => setIsFocused(false), []);
     const handleOnFocus = useCallback(() => setIsFocused(true), []);
     const color = error ? colorPrimary : isFocused ? colorContent : colorGrayscaleL;
-    return (React.createElement(View, { style: customStyle?.inputField },
+    return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
         React.createElement(Field, { label: label, isFocused: isFocused || !!value, style: {
                 field: { ...style.field, ...customStyle?.field },
                 fieldText: {
@@ -20,7 +22,8 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
                     ...customStyle?.fieldText,
                 },
             } }),
-        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [{ borderColor: color }, customStyle?.input] }),
+        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [!!icon ? { paddingRight: inputPaddingRightWithIcon } : {}, { borderColor: color }, customStyle?.input], ...inputRestProps }),
+        !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };
 export { InputField };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.style.d.ts

@@ -7,5 +7,11 @@ declare const style: {
         marginTop: number;
         marginLeft: number;
     };
+    icon: {
+        position: "absolute";
+        right: number;
+        top: number;
+        zIndex: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/{components → shared/components}/molecules/inputField/InputField.style.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from "react-native";
-import { theme } from "../../../theme/theme";
-const { spaceXS, spaceL } = theme();
+import { theme } from "../../../../theme/theme";
+const { spaceXS, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
     field: {
         position: "absolute",
@@ -10,5 +10,11 @@ const style = StyleSheet.create({
         marginTop: spaceXS,
         marginLeft: spaceL,
     },
+    icon: {
+        position: "absolute",
+        right: spaceM,
+        top: spaceM,
+        zIndex: 4,
+    },
 });
 export { style };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.d.ts

@@ -0,0 +1,4 @@
+declare type ScreenSize = "S" | "M" | "L";
+declare const useScreenSize: () => ScreenSize;
+export type { ScreenSize };
+export { useScreenSize };

package/dist/infrastructure/ui/shared/hooks/useScreenSize.js

@@ -0,0 +1,9 @@
+import { useDevice } from "@lookiero/aurora-next/build/contexts/Device/Device";
+const useScreenSize = () => {
+    const { screen } = useDevice();
+    const screenSize = Object.entries(screen)
+        .filter(([key]) => ["S", "M", "L"].includes(key))
+        .find(([, value]) => value);
+    return screenSize?.[0];
+};
+export { useScreenSize };

package/dist/infrastructure/ui/views/App.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const App: FC;
+export { App };

package/dist/infrastructure/ui/views/App.js

@@ -0,0 +1,8 @@
+import { PortalProvider } from "@gorhom/portal";
+import React from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Outlet } from "react-router-native";
+const App = () => (React.createElement(SafeAreaProvider, null,
+    React.createElement(PortalProvider, null,
+        React.createElement(Outlet, null))));
+export { App };

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

@@ -7,10 +7,10 @@ import React, { useCallback } from "react";
 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 { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
     React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),

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

@@ -1,14 +1,13 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useState } from "react";
-import { View } from "react-native";
+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 { 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 { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Item.style";
 import { ProductVariantDescription } from "./components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
@@ -21,7 +20,7 @@ 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 [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
     const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
     const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
     if (status === QueryStatus.LOADING)
@@ -35,7 +34,8 @@ const Item = ({ customerId }) => {
                 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(Button, { onPress: handleOnShowReturnQuestions }, "show return questions"))),
+                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/components/productVariantSlider/ProductVariantSlider.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { Image } from "react-native";
-import { Slider } from "../../../../components/layouts/slider/Slider";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
+import { Slider } from "../../../../shared/components/layouts/slider/Slider";
 import { style } from "./ProductVariantSlider.style";
 const ProductVariantSlider = ({ producVariantMedia }) => {
     const cdnImageUrl = useMediaImage();

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

@@ -1,7 +1,7 @@
-import { ButtonIcon } from "@lookiero/aurora-next/build/components/atoms/ButtonIcon/ButtonIcon";
-import { Modal } from "@lookiero/aurora-next/build/components/molecules/Modal/Modal";
+import { PortalHost } from "@gorhom/portal";
 import React from "react";
 import { ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ReturnQuestionType, } from "../../../../../../projection/returnQuestion/returnQuestion";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import { ReturnQuestionFeedbackProvider } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
@@ -11,19 +11,27 @@ import { HostSelectReturnQuestionItem } from "../../../../components/organisms/r
 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 { 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,
+    [ReturnQuestionType.HOST_TEXTAREA]: 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 })))))));
+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 })))))));
+};
 export { ReturnQuestionsForm };

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

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

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

@@ -1,22 +1,10 @@
 import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
-const { spaceM, spaceXL } = theme();
+const { spaceXL } = theme();
 const style = StyleSheet.create({
-    scrollContainer: {
-        flex: 1,
-        flexGrow: 1,
-    },
-    modal: {
-        zIndex: 1,
-    },
-    backButton: {
-        top: -spaceXL,
-        right: -spaceM,
-        alignSelf: "flex-end",
-        zIndex: 20,
-    },
     returnQuestionsContainer: {
         paddingBottom: spaceXL,
+        paddingHorizontal: spaceXL,
     },
 });
 export { style };

package/dist/projection/returnQuestion/returnQuestion.d.ts

@@ -1,5 +1,6 @@
 declare enum ReturnQuestionType {
     HOST_DEFAULT = "HOST_DEFAULT",
+    HOST_TEXTAREA = "HOST_TEXTAREA",
     HOST_SELECT = "HOST_SELECT",
     HOST_STACK = "HOST_STACK",
     TEXTAREA = "TEXTAREA",

package/dist/projection/returnQuestion/returnQuestion.js

@@ -1,6 +1,7 @@
 var ReturnQuestionType;
 (function (ReturnQuestionType) {
     ReturnQuestionType["HOST_DEFAULT"] = "HOST_DEFAULT";
+    ReturnQuestionType["HOST_TEXTAREA"] = "HOST_TEXTAREA";
     ReturnQuestionType["HOST_SELECT"] = "HOST_SELECT";
     ReturnQuestionType["HOST_STACK"] = "HOST_STACK";
     ReturnQuestionType["TEXTAREA"] = "TEXTAREA";