@lookiero/checkout 5.0.3 → 5.0.4

package/dist/infrastructure/tracking/tracking.d.ts

@@ -3,6 +3,7 @@ declare enum TrackingPage {
     ITEM = "item",
     CHECKOUT = "checkout",
     SUMMARY = "summary",
-    FEEDBACK = "feedback"
+    FEEDBACK = "feedback",
+    RETURN = "return"
 }
 export { PROJECT, TrackingPage };

package/dist/infrastructure/tracking/tracking.js

@@ -5,5 +5,6 @@ var TrackingPage;
     TrackingPage["CHECKOUT"] = "checkout";
     TrackingPage["SUMMARY"] = "summary";
     TrackingPage["FEEDBACK"] = "feedback";
+    TrackingPage["RETURN"] = "return";
 })(TrackingPage || (TrackingPage = {}));
 export { PROJECT, TrackingPage };

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

@@ -23,6 +23,7 @@ declare enum I18nMessages {
     FEEDBACK_TITLE = "return_questions_feedback.feedback.title",
     FEEDBACK_UNANSWERED = "return_questions_feedback.feedback.unanswered",
     RETURN_QUESTIONS_TITLE = "return_questions.title",
+    RETURN_QUESTIONS_DESCRIPTION = "return_questions.description",
     RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
     RETURN_QUESTION_MAIN_ALL_OPINION = "return_question.main.all.opinion",
     SUMMARY_TITLE = "summary.title",

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

@@ -25,6 +25,7 @@ var I18nMessages;
     I18nMessages["FEEDBACK_TITLE"] = "return_questions_feedback.feedback.title";
     I18nMessages["FEEDBACK_UNANSWERED"] = "return_questions_feedback.feedback.unanswered";
     I18nMessages["RETURN_QUESTIONS_TITLE"] = "return_questions.title";
+    I18nMessages["RETURN_QUESTIONS_DESCRIPTION"] = "return_questions.description";
     I18nMessages["RETURN_QUESTIONS_SUBMIT_BUTTON"] = "return_questions.submit_button";
     I18nMessages["RETURN_QUESTION_MAIN_ALL_OPINION"] = "return_question.main.all.opinion";
     I18nMessages["SUMMARY_TITLE"] = "summary.title";

package/dist/infrastructure/ui/routing/Routing.js

@@ -71,7 +71,7 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
                 {
                     path: Routes.RETURN,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Return, null))),
+                        React.createElement(Return, { country: customer?.country, customerId: customer?.customerId, layout: layout }))),
                 },
                 {
                     path: "*",

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

@@ -1,3 +1,10 @@
 import { FC } from "react";
-declare const Return: FC;
+import { Country } from "../../../../projection/shared/country";
+import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
+interface ReturnProps {
+    readonly customerId: string;
+    readonly country: Country;
+    readonly layout: LocalLayout;
+}
+declare const Return: FC<ReturnProps>;
 export { Return };

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

@@ -1,11 +1,95 @@
-import { Text, View } from "@lookiero/aurora";
-import React from "react";
+import { PortalHost } from "@gorhom/portal";
+import { Button, Text, View, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import React, { useCallback } from "react";
+import { useParams } from "react-router-native";
+import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
+import { useLogger } from "../../../../shared/logging/useLogger";
+import { useTrackReturnItem } from "../../../../shared/tracking/infrastructure/useTrackReturnItem";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
-const Return = () => {
-    const dependenciesLoaded = true;
-    if (!dependenciesLoaded)
+import { Column } from "../../../../shared/ui/components/layouts/column/Column";
+import { Row } from "../../../../shared/ui/components/layouts/row/Row";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { ReturnQuestions } from "../../components/organisms/returnQuestions/ReturnQuestions";
+import { ReturnQuestionFeedbackProvider, useReturnQuestionFeedback, } 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 { I18nMessages } from "../../i18n/i18n";
+import { style } from "./Return.style";
+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 ReturnForm = ({ checkoutItem, checkoutId, country, layout: LocalLayout }) => {
+    const { screen } = useDevice();
+    const logger = useLogger();
+    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+    const isSmallScreen = screen.S;
+    /* ReturnCheckoutItem */
+    const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
+        checkoutItemId: checkoutItem.id,
+    });
+    const hideReturnQuestions = useCallback(() => void 0, []);
+    const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+        checkoutItemId: checkoutItem.id,
+        logger,
+    });
+    const trackReturnItem = useTrackReturnItem({
+        page: TrackingPage.RETURN,
+        country,
+        checkoutId: checkoutId,
+        checkoutItemId: checkoutItem.id,
+    });
+    const returnItem = useCallback(async (feedbacks) => {
+        hideReturnQuestions();
+        returnCheckoutItem({ feedbacks });
+        trackReturnItem();
+    }, [hideReturnQuestions, returnCheckoutItem, trackReturnItem]);
+    const feedback = useReturnQuestionFeedback();
+    const handleOnSubmit = useCallback(() => returnItem(feedback), [feedback, returnItem]);
+    /* ReturnCheckoutItem */
+    const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
+    if (!dependenciesLoaded) {
+        return React.createElement(Spinner, null);
+    }
+    return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
+        React.createElement(PortalHost, { name: "return-question-form-portal" }),
+        React.createElement(LocalLayout, { scrollEnabled: true, style: {
+                header: style.header,
+                scrollView: style.scrollView,
+            } },
+            React.createElement(Row, { style: [style.row, isSmallScreen ? undefined : style.desktopRow] },
+                React.createElement(Column, { size: { M: "2/3", L: "2/3" } },
+                    React.createElement(View, { style: [style.container, isSmallScreen ? undefined : style.desktopContainer] },
+                        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                        React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText),
+                        React.createElement(ReturnQuestions, { portalHostName: "return-question-form-portal", returnQuestions: returnQuestions }),
+                        React.createElement(View, { style: style.submit },
+                            React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
+};
+const Return = ({ customerId, country, layout: LocalLayout }) => {
+    const { id } = useParams();
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING && checkout && checkoutItem;
+    if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
-    return (React.createElement(View, null,
-        React.createElement(Text, null, "RETURN VIEW")));
+    }
+    return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
+        React.createElement(ReturnForm, { checkoutId: checkout.id, checkoutItem: checkoutItem, country: country, layout: LocalLayout })));
 };
 export { Return };

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

@@ -0,0 +1,33 @@
+declare const style: {
+    container: {
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingTop: number;
+    };
+    description: {
+        color: string;
+        marginBottom: number;
+    };
+    desktopContainer: {
+        borderRadius: number;
+    };
+    desktopRow: {
+        marginTop: number;
+    };
+    header: {
+        height: number;
+    };
+    row: {
+        flex: number;
+        justifyContent: "center";
+    };
+    scrollView: {
+        backgroundColor: string;
+        flex: number;
+    };
+    submit: {
+        paddingVertical: number;
+    };
+    title: {};
+};
+export { style };

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

@@ -0,0 +1,37 @@
+import { Theme } from "@lookiero/aurora";
+import { StyleSheet } from "react-native";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = Theme.get();
+const style = StyleSheet.create({
+    container: {
+        backgroundColor: colorBgBase,
+        paddingHorizontal: space6,
+        paddingTop: space8,
+    },
+    description: {
+        color: colorTextMedium,
+        marginBottom: space4,
+    },
+    desktopContainer: {
+        borderRadius: borderRadius5,
+    },
+    desktopRow: {
+        marginTop: space8,
+    },
+    header: {
+        height: HEADER_HEIGHT,
+    },
+    row: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    scrollView: {
+        backgroundColor: colorBgPrimaryLight,
+        flex: 1,
+    },
+    submit: {
+        paddingVertical: space6,
+    },
+    title: {},
+});
+export { style };

package/package.json

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