feat(mobile): add tracking to walletv4 tour drawer

Author: tonykhaov

.changeset/quick-pugs-perform.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+feat: add trackings wallet v4 tour

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -143,6 +143,7 @@ jest.mock("~/analytics/segment", () => ({
   track: jest.fn(),
   setAnalyticsFeatureFlagMethod: jest.fn(),
   screen: jest.fn(),
+  useTrack: jest.fn(() => jest.fn()),
   useAnalytics: jest.fn(() => ({
     track: jest.fn(),
     screen: jest.fn(),

apps/ledger-live-mobile/src/mvvm/features/Portfolio/screens/Portfolio/index.tsx

@@ -63,7 +63,8 @@ export const PortfolioScreen = ({ navigation }: NavigationProps) => {
 
   const progressViewOffset = getProgressViewOffset(Platform.OS, shouldDisplayWallet40MainNav);
 
-  const { isDrawerOpen, handleCloseDrawer, slides } = useWalletV4TourDrawer();
+  const { isDrawerOpen, handleCloseDrawer, closeDrawer, onSlideChange, slides } =
+    useWalletV4TourDrawer();
 
   const data = useMemo(() => {
     const sections: React.JSX.Element[] = [];
@@ -167,6 +168,8 @@ export const PortfolioScreen = ({ navigation }: NavigationProps) => {
       <WalletV4TourDrawer
         isDrawerOpen={isDrawerOpen}
         handleCloseDrawer={handleCloseDrawer}
+        closeDrawer={closeDrawer}
+        onSlideChange={onSlideChange}
         slides={slides}
       />
     </>

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Debug/__tests__/WalletV4TourDebug.test.tsx

@@ -7,6 +7,9 @@ jest.mock("../../Drawer", () => ({
     isDrawerOpen: false,
     handleOpenDrawer: jest.fn(),
     handleCloseDrawer: jest.fn(),
+    closeDrawer: jest.fn(),
+    onSlideChange: jest.fn(),
+    slides: [],
   }),
   WalletV4TourDrawer: () => null,
 }));

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Debug/index.tsx

@@ -12,7 +12,8 @@ function WalletV4TourScreenDebug() {
   const dispatch = useDispatch();
 
   const hasSeenTour = useSelector(hasSeenWalletV4TourSelector);
-  const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer, slides } = useWalletV4TourDrawer();
+  const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer, closeDrawer, onSlideChange, slides } =
+    useWalletV4TourDrawer();
 
   const handleToggleHasSeenTour = useCallback(() => {
     dispatch(setHasSeenWalletV4Tour(!hasSeenTour));
@@ -57,6 +58,8 @@ function WalletV4TourScreenDebug() {
       <WalletV4TourDrawer
         isDrawerOpen={isDrawerOpen}
         handleCloseDrawer={handleCloseDrawer}
+        closeDrawer={closeDrawer}
+        onSlideChange={onSlideChange}
         slides={slides}
       />
     </View>

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/__integrations__/walletV4TourDrawer.test.tsx

@@ -27,14 +27,17 @@ const SLIDES = [
 ];
 
 const TestComponent = () => {
-  const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer } = useWalletV4TourDrawer();
+  const { isDrawerOpen, handleOpenDrawer, handleCloseDrawer, closeDrawer, onSlideChange } =
+    useWalletV4TourDrawer();
 
   return (
     <>
       <Button onPress={handleOpenDrawer} title="Open Drawer" />
       <WalletV4TourDrawer
         isDrawerOpen={isDrawerOpen}
         handleCloseDrawer={handleCloseDrawer}
+        closeDrawer={closeDrawer}
+        onSlideChange={onSlideChange}
         slides={SLIDES}
       />
     </>

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/components/SlideFooterButton.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
-import { useSlidesContext } from "@ledgerhq/native-ui";
 import { useTranslation } from "~/context/Locale";
 import { Button } from "@ledgerhq/lumen-ui-rnative";
 import { useStyleSheet } from "@ledgerhq/lumen-ui-rnative/styles";
+import { useSlideFooterButtonViewModel } from "../hooks/useSlideFooterButtonViewModel";
 
 interface SlideFooterButtonProps {
   readonly onClose: () => void;
 }
 
 export const SlideFooterButton = ({ onClose }: SlideFooterButtonProps) => {
-  const { totalSlides, currentIndex, goToNext, scrollProgressSharedValue } = useSlidesContext();
+  const { lastIndex, isLastSlide, scrollProgressSharedValue, goNext, complete } =
+    useSlideFooterButtonViewModel(onClose);
 
   const styles = useStyleSheet(
     () => ({
@@ -28,9 +29,7 @@ export const SlideFooterButton = ({ onClose }: SlideFooterButtonProps) => {
   );
   const { t } = useTranslation();
 
-  const lastIndex = totalSlides - 1;
   const fadeStart = lastIndex - 0.5;
-  const isLastSlide = currentIndex >= lastIndex;
   const isInTest = process.env.NODE_ENV === "test";
 
   const continueStyle = useAnimatedStyle(
@@ -63,7 +62,7 @@ export const SlideFooterButton = ({ onClose }: SlideFooterButtonProps) => {
         style={[styles.button, continueStyle]}
         pointerEvents={isLastSlide ? "none" : "box-none"}
       >
-        <Button appearance="base" size="lg" onPress={goToNext}>
+        <Button appearance="base" size="lg" onPress={goNext}>
           {t("walletV4Tour.cta.continue")}
         </Button>
       </Animated.View>
@@ -72,7 +71,7 @@ export const SlideFooterButton = ({ onClose }: SlideFooterButtonProps) => {
         style={[styles.button, exploreStyle]}
         pointerEvents={isLastSlide || isInTest ? "box-none" : "none"}
       >
-        <Button appearance="base" size="lg" onPress={onClose}>
+        <Button appearance="base" size="lg" onPress={complete}>
           {t("walletV4Tour.cta.explore")}
         </Button>
       </Animated.View>

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/components/SlideItem.tsx

@@ -121,7 +121,6 @@ export function SlideItem({ title, description, index, lottieSrc, speed }: Slide
       <Box
         lx={{
           flex: 1,
-          marginBottom: "s40",
         }}
       >
         {shouldRender && isActive ? (
@@ -145,17 +144,24 @@ export function SlideItem({ title, description, index, lottieSrc, speed }: Slide
       </Box>
 
       <Animated.View style={textAnimatedStyle} pointerEvents="none">
-        <Text
-          typography="heading2SemiBold"
+        <Box
           lx={{
-            textAlign: "center",
-            color: "base",
-            marginBottom: "s8",
+            justifyContent: "center",
+            minHeight: "s56", // the height of 2 lines of text
           }}
-          numberOfLines={1}
         >
-          {title}
-        </Text>
+          <Text
+            typography="heading2SemiBold"
+            lx={{
+              textAlign: "center",
+              color: "base",
+              marginBottom: "s8",
+            }}
+            numberOfLines={2}
+          >
+            {title}
+          </Text>
+        </Box>
 
         <Text
           typography="body2"

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/hooks/useSlideFooterButtonViewModel.ts

@@ -0,0 +1,35 @@
+import { useCallback } from "react";
+import { useSlidesContext } from "@ledgerhq/native-ui";
+import { track } from "~/analytics";
+
+export const useSlideFooterButtonViewModel = (onClose: () => void) => {
+  const { totalSlides, currentIndex, goToNext, scrollProgressSharedValue } = useSlidesContext();
+
+  const lastIndex = totalSlides - 1;
+  const isLastSlide = currentIndex >= lastIndex;
+
+  const goNext = useCallback(() => {
+    goToNext();
+    track("button_clicked", {
+      button: "Next",
+      page: "Product Tour WV4",
+      card: currentIndex + 1,
+    });
+  }, [currentIndex, goToNext]);
+
+  const complete = useCallback(() => {
+    onClose();
+    track("button_clicked", {
+      button: "Discover my new portfolio",
+      page: "Product Tour WV4",
+    });
+  }, [onClose]);
+
+  return {
+    lastIndex,
+    isLastSlide,
+    scrollProgressSharedValue,
+    goNext,
+    complete,
+  };
+};

apps/ledger-live-mobile/src/mvvm/features/WalletV4Tour/Drawer/hooks/useWalletV4TourDrawerViewModel.ts

@@ -1,16 +1,19 @@
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useRef } from "react";
 import { useDispatch, useSelector } from "~/context/hooks";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { setHasSeenWalletV4Tour } from "~/actions/settings";
 import { hasCompletedOnboardingSelector, hasSeenWalletV4TourSelector } from "~/reducers/settings";
 import type { WalletV4TourDrawerViewModel } from "../types";
 import { useTranslation } from "~/context/Locale";
+import { useTrack } from "~/analytics";
 import animation01 from "../animations/01.lottie";
 import animation02 from "../animations/02.lottie";
 import animation03 from "../animations/03.lottie";
 
 export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel => {
   const dispatch = useDispatch();
+  const track = useTrack();
+  const currentIndexRef = useRef(0);
   const hasSeenTour = useSelector(hasSeenWalletV4TourSelector);
   const hasCompletedOnboarding = useSelector(hasCompletedOnboardingSelector);
   const lwmWallet40 = useFeature("lwmWallet40");
@@ -21,8 +24,9 @@ export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel =>
   const handleOpenDrawer = useCallback(() => {
     if (!hasCompletedOnboarding) {
       dispatch(setHasSeenWalletV4Tour(true));
-    } else if (!hasSeenTour) setIsDrawerOpen(true);
-    return;
+    } else if (!hasSeenTour) {
+      setIsDrawerOpen(true);
+    }
   }, [hasCompletedOnboarding, hasSeenTour, dispatch]);
 
   const handleCloseDrawer = useCallback(() => {
@@ -32,6 +36,26 @@ export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel =>
     }
   }, [dispatch, hasSeenTour]);
 
+  const closeDrawer = useCallback(() => {
+    track("button_clicked", {
+      button: "Close",
+      page: "Product Tour WV4",
+      card: currentIndexRef.current + 1,
+    });
+    handleCloseDrawer();
+  }, [handleCloseDrawer, track]);
+
+  const onSlideChange = useCallback(
+    (index: number) => {
+      currentIndexRef.current = index;
+      track("product_tour_card", {
+        page: "Product Tour WV4",
+        card: index + 1,
+      });
+    },
+    [track],
+  );
+
   const { t } = useTranslation();
   const slides = useMemo(
     () => [
@@ -61,6 +85,8 @@ export const useWalletV4TourDrawerViewModel = (): WalletV4TourDrawerViewModel =>
     isDrawerOpen,
     handleOpenDrawer,
     handleCloseDrawer,
+    closeDrawer,
+    onSlideChange,
     slides,
   };
 };