@lookiero/checkout 0.2.21 → 0.2.23

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

@@ -1,41 +1,44 @@
-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 { feedback as feedbackMock } from "../../../projection/feedback/feedback.mock";
 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";
+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 });
     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), []);
+    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(Button, { onPress: handleOnShowReturnQuestions }, "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/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/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,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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -20,14 +20,17 @@
     "lint": "eslint --fix --cache --cache-location ./node_modules/.cache/.eslintcache --ext ts,tsx .",
     "format": "prettier --write \"**/*.+(json|css|ts|tsx|md)\"",
     "test": "tsc -p ./tsconfig.test.json --noemit && jest",
-    "test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent"
+    "test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
+    "prepare": "husky install"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "@lookiero/i18n": "^0.8.0",
     "@lookiero/i18n-react": "^0.8.0",
     "@lookiero/messaging": "^8.0.0",
     "@lookiero/messaging-react": "^8.0.0",
     "@react-spring/native": "^9.5.5",
+    "react-native-safe-area-context": "^4.4.1",
     "react-router-dom": "^6.4.1",
     "react-router-native": "^6.3.0",
     "tiny-invariant": "^1.2.0",

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 };