@lookiero/checkout 0.5.5 → 0.5.7

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

@@ -0,0 +1,9 @@
+declare const PROJECT = "checkout";
+declare enum TrackingPage {
+    ITEM = "item",
+    CHECKOUT = "checkout",
+    SUMMARY = "summary",
+    FEEDBACK = "feedback",
+    NOT_FOUND = "not_found"
+}
+export { PROJECT, TrackingPage };

package/dist/infrastructure/tracking/tracking.js

@@ -0,0 +1,10 @@
+const PROJECT = "checkout";
+var TrackingPage;
+(function (TrackingPage) {
+    TrackingPage["ITEM"] = "item";
+    TrackingPage["CHECKOUT"] = "checkout";
+    TrackingPage["SUMMARY"] = "summary";
+    TrackingPage["FEEDBACK"] = "feedback";
+    TrackingPage["NOT_FOUND"] = "not_found";
+})(TrackingPage || (TrackingPage = {}));
+export { PROJECT, TrackingPage };

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

@@ -61,12 +61,12 @@ const Routing = ({ basePath = "", customer, locale, I18n, menu, tabBar, getAuthT
                 {
                     path: Routes.FEEDBACK,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Feedback, { customerId: customer?.customerId }))),
+                        React.createElement(Feedback, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
                     path: Routes.NOT_FOUND,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(NotFound, null))),
+                        React.createElement(NotFound, { country: customer?.country, customerId: customer?.customerId }))),
                 },
                 {
                     path: "*",

package/dist/infrastructure/ui/views/checkout/Checkout.js

@@ -6,9 +6,11 @@ import React, { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
@@ -24,6 +26,11 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     const paymentInstrumentSelectRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    usePageView({
+        page: TrackingPage.CHECKOUT,
+        country,
+        checkoutId: checkout?.id,
+    });
     const navigate = useNavigate();
     const basePath = useBasePath();
     const { returnUrl } = useRedirect();

package/dist/infrastructure/ui/views/feedback/Feedback.d.ts

@@ -1,6 +1,8 @@
 import { FC } from "react";
+import { Country } from "../../../../projection/shared/country";
 interface FeedbackProps {
     readonly customerId: string;
+    readonly country: Country;
 }
 declare const Feedback: FC<FeedbackProps>;
 export { Feedback };

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

@@ -1,17 +1,19 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
-const Feedback = ({ customerId }) => {
+const Feedback = ({ customerId, country }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,
@@ -25,6 +27,11 @@ const Feedback = ({ customerId }) => {
         }
         catch (e) { }
     }, [giveCheckoutFeedback]);
+    usePageView({
+        page: TrackingPage.FEEDBACK,
+        country,
+        checkoutId: checkout?.id,
+    });
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
     if (!dependenciesLoaded)

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

@@ -4,6 +4,7 @@ import { Platform, View } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
@@ -12,6 +13,7 @@ import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useRet
 import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
@@ -33,6 +35,12 @@ const Item = ({ customerId, country }) => {
     const { id } = useParams();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id);
+    usePageView({
+        page: TrackingPage.ITEM,
+        country,
+        checkoutId: checkout?.id,
+        checkoutItemId: checkoutItem.id,
+    });
     const basePath = useBasePath();
     const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
     const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);

package/dist/infrastructure/ui/views/notFound/NotFound.d.ts

@@ -1,3 +1,8 @@
 import { FC } from "react";
-declare const NotFound: FC;
+import { Country } from "../../../../projection/shared/country";
+interface NotFoundProps {
+    readonly customerId: string;
+    readonly country: Country;
+}
+declare const NotFound: FC<NotFoundProps>;
 export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.js

@@ -1,10 +1,15 @@
 import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
 import { Image, Platform } from "react-native";
 import { useNavigate } from "react-router-native";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { AspectRatioView } from "../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
@@ -12,12 +17,22 @@ import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 import { style } from "./NotFound.style";
-const NotFound = () => {
+const NotFound = ({ customerId, country }) => {
     const descriptionText = useI18nMessage({ id: I18nMessages.NOT_FOUND_DESCRIPTION });
     const buttonText = useI18nMessage({ id: I18nMessages.NOT_FOUND_BUTTON });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    usePageView({
+        page: TrackingPage.NOT_FOUND,
+        country,
+        checkoutId: checkout?.id,
+    });
     const navigate = useNavigate();
     const basePath = useBasePath();
     const handleOnPress = useCallback(() => navigate(`${basePath}/${Routes.HOME}`), [basePath, navigate]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
     return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { scrollView: style.container } },
         React.createElement(Body, { style: { column: style.bodyColumn } },
             React.createElement(AspectRatioView, { aspectRatio: 1.25 },

package/dist/infrastructure/ui/views/summary/Summary.js

@@ -5,10 +5,12 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
 import { I18nMessages } from "../../i18n/i18n";
@@ -29,6 +31,11 @@ const Summary = ({ customerId, country }) => {
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+    usePageView({
+        page: TrackingPage.SUMMARY,
+        country,
+        checkoutId: checkout?.id,
+    });
     const navigate = useNavigate();
     const basePath = useBasePath();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);

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

@@ -0,0 +1,6 @@
+import { BaseTrackingEvent } from "../tracking";
+interface EmitUserEventFunction<T extends BaseTrackingEvent> {
+    (args: T): void;
+}
+declare const useEmitUserEvent: <T extends BaseTrackingEvent>() => EmitUserEventFunction<T>;
+export { useEmitUserEvent };

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

@@ -0,0 +1,7 @@
+import { emitUserEvent as emit } from "@lookiero/user-tracking-front";
+import { useCallback } from "react";
+const useEmitUserEvent = () => {
+    const emitUserEvent = useCallback((event) => emit(event), []);
+    return emitUserEvent;
+};
+export { useEmitUserEvent };

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

@@ -0,0 +1,13 @@
+import { TrackingPage } from "../../../infrastructure/tracking/tracking";
+import { Country } from "../../../projection/shared/country";
+interface UsePageViewFunctionArgs {
+    readonly page: TrackingPage;
+    readonly country: Country;
+    readonly checkoutId?: string;
+    readonly checkoutItemId?: string;
+}
+interface UsePageViewFunction {
+    (agrs: UsePageViewFunctionArgs): void;
+}
+declare const usePageView: UsePageViewFunction;
+export { usePageView };

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

@@ -0,0 +1,21 @@
+import { useLayoutEffect } from "react";
+import { PROJECT } from "../../../infrastructure/tracking/tracking";
+import { TrackingEvent, TrackingEventCategory } from "../tracking";
+import { useEmitUserEvent } from "./useEmitUserEvent";
+const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
+    const emitUserEvent = useEmitUserEvent();
+    useLayoutEffect(() => {
+        if (!checkoutId) {
+            return;
+        }
+        emitUserEvent({
+            event: TrackingEvent.PAGEVIEW,
+            eventCategory: TrackingEventCategory.NAVIGATION,
+            section: `${PROJECT}_${page}`,
+            store: country,
+            checkoutId,
+            checkoutItemId,
+        });
+    }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
+};
+export { usePageView };

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

@@ -0,0 +1,19 @@
+import { Country } from "../../projection/shared/country";
+declare enum TrackingEvent {
+    PAGEVIEW = "pageview"
+}
+declare enum TrackingEventCategory {
+    NAVIGATION = "navigation"
+}
+interface BaseTrackingEvent {
+    readonly event: TrackingEvent;
+    readonly eventCategory: TrackingEventCategory;
+    readonly section: string;
+    readonly store: Country;
+    readonly checkoutId: string;
+}
+interface PageViewTrackingEvent extends BaseTrackingEvent {
+    readonly checkoutItemId?: string;
+}
+export type { BaseTrackingEvent, PageViewTrackingEvent };
+export { TrackingEvent, TrackingEventCategory };

package/dist/shared/tracking/tracking.js

@@ -0,0 +1,9 @@
+var TrackingEvent;
+(function (TrackingEvent) {
+    TrackingEvent["PAGEVIEW"] = "pageview";
+})(TrackingEvent || (TrackingEvent = {}));
+var TrackingEventCategory;
+(function (TrackingEventCategory) {
+    TrackingEventCategory["NAVIGATION"] = "navigation";
+})(TrackingEventCategory || (TrackingEventCategory = {}));
+export { TrackingEvent, TrackingEventCategory };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -47,6 +47,7 @@
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
     "@lookiero/payments-front": "^0.16.9",
+    "@lookiero/user-tracking-front": "0.0.37",
     "apollo-boost": "0.4.4",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
@@ -68,8 +69,11 @@
     "@lookiero/event": "^0.3",
     "@lookiero/locale": "^0.3",
     "@lookiero/payments-front": "^0.16.9",
+    "@lookiero/user-tracking-front": "0.0.37",
     "@pact-foundation/pact": "^10.1.4",
     "@pact-foundation/pact-node": "^10.17.6",
+    "@react-native-firebase/analytics": "10.5.1",
+    "@react-native-firebase/app": "10.5.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.5.0",
@@ -106,6 +110,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": "^0.70.6",
+    "react-native-adjust": "^4.33.0",
     "react-native-get-random-values": "^1.8.0",
     "react-native-unimodules": "^0.14.10",
     "react-native-web": "^0.18.9",