@lookiero/checkout 0.8.26 → 0.8.27

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback.d.ts

@@ -3,12 +3,14 @@ import { CheckoutFeedbackProjection } from "../../../../../../projection/checkou
 interface OnChangeCheckoutQuestionFeedbackFunctionArgs {
     readonly checkoutQuestionId: string;
     readonly checkoutQuestionFeedback: string | undefined;
+    readonly hasFeedback?: boolean;
 }
 interface OnChangeCheckoutQuestionFeedbackFunction {
     (args: OnChangeCheckoutQuestionFeedbackFunctionArgs): void;
 }
 interface CheckoutQuestionFeedbackContextProviderProps {
     readonly feedback: CheckoutFeedbackProjection | undefined;
+    readonly onChanged?: OnChangeCheckoutQuestionFeedbackFunction;
     readonly children: ReactNode;
 }
 declare const CheckoutQuestionFeedbackProvider: FC<CheckoutQuestionFeedbackContextProviderProps>;

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback.js

@@ -1,11 +1,18 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import invariant from "tiny-invariant";
 const CheckoutQuestionFeedbackContext = createContext(null);
-const CheckoutQuestionFeedbackProvider = ({ feedback = {}, children, }) => {
+const CheckoutQuestionFeedbackProvider = ({ feedback = {}, onChanged, children, }) => {
     const [contextFeedback, setContextFeedback] = useState(feedback);
-    const onChange = useCallback(({ checkoutQuestionId, checkoutQuestionFeedback }) => setContextFeedback((feedback) => checkoutQuestionFeedback
-        ? { ...feedback, [checkoutQuestionId]: checkoutQuestionFeedback }
-        : Object.entries(feedback).reduce((acc, [id, feedback]) => (id !== checkoutQuestionId ? { ...acc, [id]: feedback } : acc), {})), []);
+    const onChange = useCallback(({ checkoutQuestionId, checkoutQuestionFeedback }) => {
+        setContextFeedback((feedback) => checkoutQuestionFeedback
+            ? { ...feedback, [checkoutQuestionId]: checkoutQuestionFeedback }
+            : Object.entries(feedback).reduce((acc, [id, feedback]) => (id !== checkoutQuestionId ? { ...acc, [id]: feedback } : acc), {}));
+        onChanged?.({
+            checkoutQuestionId,
+            checkoutQuestionFeedback,
+            hasFeedback: Boolean(contextFeedback[checkoutQuestionId]),
+        });
+    }, [contextFeedback, onChanged]);
     useEffect(() => setContextFeedback(feedback), [feedback]);
     const value = useMemo(() => ({
         feedback: contextFeedback,

package/dist/infrastructure/ui/views/feedback/Feedback.js

@@ -1,8 +1,11 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useRef } from "react";
 import { Platform } from "react-native";
+import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useLogger } from "../../../../shared/logging/useLogger";
+import { useTrackChangeFeedback } from "../../../../shared/tracking/infrastructure/useTrackChangeFeedback";
 import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { useTrackPressContinue } from "../../../../shared/tracking/infrastructure/useTrackPressContinue";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -20,23 +23,45 @@ const Feedback = ({ customerId, country }) => {
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,
     });
+    useTrackPageView({
+        page: TrackingPage.FEEDBACK,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const trackChangeFeedback = useTrackChangeFeedback({
+        page: TrackingPage.FEEDBACK,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const handleOnChangedFeedback = useCallback(({ checkoutQuestionId, checkoutQuestionFeedback, hasFeedback }) => {
+        const question = checkoutQuestions?.find((question) => question.id === checkoutQuestionId);
+        if (question?.type === CheckoutQuestionType.HOST_TEXTAREA && hasFeedback) {
+            return;
+        }
+        trackChangeFeedback({
+            questionId: checkoutQuestionId,
+            questionName: question?.name,
+            feedback: checkoutQuestionFeedback,
+        });
+    }, [checkoutQuestions, trackChangeFeedback]);
     const [giveCheckoutFeedback, giveCheckoutFeedbackStatus] = useGiveCheckoutFeedback({
         checkoutId: checkout?.id,
         logger,
     });
     const checkoutFeedbackGivenRef = useRef(false);
+    const trackPressContinue = useTrackPressContinue({
+        page: TrackingPage.FEEDBACK,
+        country,
+        checkoutId: checkout?.id,
+    });
     const handleOnSubmit = useCallback(async (feedbacks) => {
         try {
+            trackPressContinue();
             await giveCheckoutFeedback({ feedbacks });
             checkoutFeedbackGivenRef.current = true;
         }
         catch (e) { }
-    }, [giveCheckoutFeedback]);
-    useTrackPageView({
-        page: TrackingPage.FEEDBACK,
-        country,
-        checkoutId: checkout?.id,
-    });
+    }, [giveCheckoutFeedback, trackPressContinue]);
     /**
      * Give empty feedback when this view is unmounted
      * (if feedback has not already been given)
@@ -50,7 +75,7 @@ const Feedback = ({ customerId, country }) => {
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
+    return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {}, onChanged: handleOnChangedFeedback },
         React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));

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

@@ -0,0 +1,20 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface ChangeFeedbackFunctionArgs {
+    readonly questionId: string;
+    readonly questionName: string;
+    readonly feedback: string | undefined;
+}
+interface ChangeFeedbackFunction {
+    (args: ChangeFeedbackFunctionArgs): void;
+}
+interface UseTrackChangeFeedbackArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId?: string;
+}
+interface UseTrackChangeFeedback {
+    (agrs: UseTrackChangeFeedbackArgs): ChangeFeedbackFunction;
+}
+declare const useTrackChangeFeedback: UseTrackChangeFeedback;
+export { useTrackChangeFeedback };

package/dist/shared/tracking/infrastructure/useTrackChangeFeedback.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const useTrackChangeFeedback = ({ page, country, checkoutId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    const changeFeedback = useCallback(({ questionId, questionName, feedback }) => {
+        if (!checkoutId) {
+            return;
+        }
+        const changeFeedbackTrackingEvent = {
+            event: TrackingEvent.CHANGE_FEEDBACK,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            questionId,
+            questionName,
+            feedback,
+        };
+        emitUserEvent(changeFeedbackTrackingEvent);
+    }, [checkoutId, country, emitUserEvent, page]);
+    return changeFeedback;
+};
+export { useTrackChangeFeedback };

package/dist/shared/tracking/tracking.d.ts

@@ -10,7 +10,8 @@ declare enum TrackingEvent {
     PRESS_PRICING = "press-pricing",
     PRESS_ITEM = "press-item",
     PRESS_CONTINUE = "press-continue",
-    TAB_VIEW = "tab-view"
+    TAB_VIEW = "tab-view",
+    CHANGE_FEEDBACK = "change-feedback"
 }
 declare enum TrackingEventCategory {
     NAVIGATION = "navigation"
@@ -58,5 +59,10 @@ type PressContinueTrackingEvent = BaseTrackingEvent;
 interface TabViewTrackingEvent<T> extends BaseTrackingEvent {
     readonly tab: T;
 }
-export type { BaseTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, };
+interface ChangeFeedbackTrackingEvent extends BaseTrackingEvent {
+    readonly questionId: string;
+    readonly questionName: string;
+    readonly feedback: string | undefined;
+}
+export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, };
 export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -10,6 +10,7 @@ var TrackingEvent;
     TrackingEvent["PRESS_ITEM"] = "press-item";
     TrackingEvent["PRESS_CONTINUE"] = "press-continue";
     TrackingEvent["TAB_VIEW"] = "tab-view";
+    TrackingEvent["CHANGE_FEEDBACK"] = "change-feedback";
 })(TrackingEvent || (TrackingEvent = {}));
 var TrackingEventCategory;
 (function (TrackingEventCategory) {

package/package.json

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