fix: OF-529, OF-518 - just highlight help btn

Author: wsdt

mobile/components/OPageHeader/OPageHeader.tsx

@@ -1,24 +1,114 @@
-import { Title } from "@/GlobalStyles";
+import { Color, Title } from "@/GlobalStyles";
 import { MaterialIcons } from "@expo/vector-icons";
 import * as React from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import {
+    Animated,
+    Easing,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View,
+} from "react-native";
 
 interface IOPagerHeaderProps {
     title: string;
     onHelpPress?: () => void;
+    highlightHelpBtn?: boolean;
 }
 
-export const OPageHeader = ({ title, onHelpPress }: IOPagerHeaderProps) => {
+export const OPageHeader = ({
+    title,
+    onHelpPress,
+    highlightHelpBtn,
+}: IOPagerHeaderProps) => {
+    const scaleAnim = React.useRef(new Animated.Value(1)).current;
+    const rotateAnim = React.useRef(new Animated.Value(0)).current;
+    const colorAnim = React.useRef(new Animated.Value(0)).current;
+
+    React.useEffect(() => {
+        if (highlightHelpBtn) {
+            Animated.loop(
+                Animated.sequence([
+                    Animated.timing(scaleAnim, {
+                        toValue: 1.3,
+                        duration: 800,
+                        easing: Easing.elastic(1),
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(scaleAnim, {
+                        toValue: 1,
+                        duration: 600,
+                        useNativeDriver: true,
+                    }),
+                ]),
+            ).start();
+
+            const createTiltAnimation = () => {
+                return Animated.sequence([
+                    Animated.timing(rotateAnim, {
+                        toValue: Math.random() > 0.5 ? 0.3 : -0.3,
+                        duration: 150,
+                        easing: Easing.bounce,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(rotateAnim, {
+                        toValue: Math.random() > 0.5 ? -0.25 : 0.25,
+                        duration: 150,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(rotateAnim, {
+                        toValue: 0,
+                        duration: 150,
+                        useNativeDriver: true,
+                    }),
+                ]);
+            };
+
+            Animated.loop(
+                Animated.sequence([
+                    createTiltAnimation(),
+                    Animated.delay(Math.random() * 1000 + 500),
+                ]),
+            ).start();
+
+            Animated.loop(
+                Animated.sequence([
+                    Animated.timing(colorAnim, {
+                        toValue: 1,
+                        duration: 1500,
+                        useNativeDriver: false,
+                    }),
+                    Animated.timing(colorAnim, {
+                        toValue: 0,
+                        duration: 1500,
+                        useNativeDriver: false,
+                    }),
+                ]),
+            ).start();
+        }
+    }, [highlightHelpBtn]);
+
+    const spin = rotateAnim.interpolate({
+        inputRange: [-1, 1],
+        outputRange: ["-30deg", "30deg"],
+    });
+
     return (
         <View style={styles.container}>
             <Text style={Title}>{title}</Text>
             {onHelpPress && (
                 <TouchableOpacity onPress={onHelpPress}>
-                    <MaterialIcons
-                        name="help-outline"
-                        size={20}
-                        style={styles.icon}
-                    />
+                    <Animated.View
+                        style={{
+                            transform: [{ scale: scaleAnim }, { rotate: spin }],
+                        }}
+                    >
+                        <MaterialIcons
+                            name="help-outline"
+                            size={20}
+                            style={styles.icon}
+                        />
+                    </Animated.View>
                 </TouchableOpacity>
             )}
         </View>
@@ -27,5 +117,5 @@ export const OPageHeader = ({ title, onHelpPress }: IOPagerHeaderProps) => {
 
 const styles = StyleSheet.create({
     container: { flexDirection: "row", marginLeft: 12 },
-    icon: { color: "#999", padding: 6, paddingTop: 16 },
+    icon: { marginLeft: 3, padding: 6, paddingTop: 16, color: Color.primary },
 });

mobile/hooks/useSetupTourGuides.ts

@@ -6,13 +6,15 @@ import {
     useEncountersContext,
 } from "@/context/EncountersContext";
 import { useNotifications } from "@/hooks/useNotifications";
-import { useSetupTourGuides } from "@/hooks/useSetupTourGuides";
 import { TR, i18n } from "@/localization/translate.service";
 import { MainTabs } from "@/screens/main/MainScreenTabs.navigator";
-import { MOCK_ENCOUNTER } from "@/services/tourguide.service";
+import { LOCAL_VALUE, getLocalValue } from "@/services/storage.service";
+import { MOCK_ENCOUNTER, TOURKEY } from "@/services/tourguide.service";
 import { MaterialIcons } from "@expo/vector-icons";
+import * as Sentry from "@sentry/react-native";
 import * as React from "react";
-import { TourGuideZone } from "rn-tourguide";
+import { useEffect, useState } from "react";
+import { TourGuideZone, useTourGuideController } from "rn-tourguide";
 import { ROUTES } from "../routes";
 import { EncounterScreenStack } from "./EncounterStackNavigator";
 import FindPeople from "./FindPeople";
@@ -22,7 +24,32 @@ export const MainScreenTabs = ({ navigation }: any) => {
     useNotifications(navigation);
 
     const { dispatch: dispatchEncounters } = useEncountersContext();
-    const { tourKeyFind, startTourFind } = useSetupTourGuides();
+    const { tourKey: tourKeyFind, start: startTourFind } =
+        useTourGuideController(TOURKEY.FIND);
+
+    // @dev true by default to not unnecessarily distract user
+    const [hasDoneFindWalkthrough, setHasDoneFindWalkthrough] = useState(true);
+    const [hasDoneEncounterWalkthrough, setHasDoneEncounterWalkthrough] =
+        useState(true);
+    useEffect(() => {
+        const getValues = [
+            getLocalValue(LOCAL_VALUE.HAS_DONE_FIND_WALKTHROUGH),
+            getLocalValue(LOCAL_VALUE.HAS_DONE_ENCOUNTER_WALKTHROUGH),
+        ];
+
+        Promise.all(getValues)
+            .then((vals: boolean[]) => {
+                setHasDoneFindWalkthrough(vals[0]);
+                setHasDoneEncounterWalkthrough(vals[1]);
+            })
+            .catch((err) => {
+                Sentry.captureException(err, {
+                    tags: {
+                        mainScreenTabs: "getLocalValue:hasDoneWalkthrough",
+                    },
+                });
+            });
+    }, []);
 
     return (
         <MainTabs.Navigator
@@ -55,6 +82,7 @@ export const MainScreenTabs = ({ navigation }: any) => {
                     headerLeft: () => (
                         <OPageHeader
                             title={i18n.t(TR.findPeople)}
+                            highlightHelpBtn={!hasDoneFindWalkthrough}
                             onHelpPress={() => {
                                 requestAnimationFrame(() => {
                                     startTourFind();
@@ -80,6 +108,7 @@ export const MainScreenTabs = ({ navigation }: any) => {
                     headerLeft: () => (
                         <OPageHeader
                             title={i18n.t(TR.encounters)}
+                            highlightHelpBtn={!hasDoneEncounterWalkthrough}
                             onHelpPress={() => {
                                 dispatchEncounters({
                                     type: EACTION_ENCOUNTERS.PUSH_MULTIPLE,