[INJIMOB-781]:start and stop the copilot in the same instance

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>

components/CopilotTooltip.tsx

@@ -1,19 +1,28 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {View} from 'react-native';
 import {useCopilot, TooltipProps} from 'react-native-copilot';
 import {Theme} from './../components/ui/styleUtils';
 import {Text, Button, Row} from './../components/ui';
 import {useTranslation} from 'react-i18next';
+import {GlobalContext} from '../shared/GlobalContext';
+import {AuthEvents} from '../machines/auth';
 
-export const CopilotTooltip = ({labels}: TooltipProps) => {
-  const {goToNext, goToPrev, stop, currentStep, isFirstStep, isLastStep} =
+export const CopilotTooltip = ({labels}: TooltipProps, props) => {
+  const {goToNext, goToPrev, currentStep, isFirstStep, isLastStep} =
     useCopilot();
 
   const {t} = useTranslation();
+  const {appService} = useContext(GlobalContext);
+  const authService = appService.children.get('auth');
+  const RESET_COPILOT = () =>
+    authService?.send(AuthEvents.RESET_INITIAL_LAUNCH());
 
-  const handleStop = () => {
-    void stop();
+  const handleStop = async () => {
+    RESET_COPILOT();
+    props.onStop();
+    console.log('Stopping the copilot walkthrough ===>>');
   };
+
   const handleNext = () => {
     void goToNext();
   };
@@ -24,11 +33,13 @@ export const CopilotTooltip = ({labels}: TooltipProps) => {
 
   return (
     <View style={Theme.CopilotTooltip.tooltipContainer}>
-      <Text testID="stepTitle">{currentStep?.name}</Text>
+      <Text testID="stepTitle" weight="semibold" margin="0 0 10 0">
+        {currentStep?.name}
+      </Text>
       <Text testID="stepDescription">{currentStep?.text}</Text>
       <Row
         align="center"
-        margin="10 0 0 0"
+        margin="25 0 0 0"
         style={{justifyContent: 'flex-end'}}>
         {!isFirstStep ? (
           <Button

components/ui/themes/DefaultTheme.ts

@@ -1555,9 +1555,7 @@ export const DefaultTheme = {
     tooltipContainer: {
       flex: 1,
       backgroundColor: Colors.White,
-      minHeight: Dimensions.get('screen').height * 0.2,
-      minWidth: Dimensions.get('screen').width * 0.8,
-      padding: 20,
+      minWidth: Dimensions.get('screen').width * 0.5,
     },
   }),
 

components/ui/themes/PurpleTheme.ts

@@ -740,8 +740,14 @@ export const PurpleTheme = {
       marginTop: isIOS() ? 5 : 15,
     },
     tabBarIconCopilot: {
-      height: 50,
-      width: 50,
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 100,
+      width: 70,
+      zIndex: -20,
+      overflow: 'visible',
+      marginBottom: -18,
     },
   }),
   BannerStyles: StyleSheet.create({
@@ -1548,7 +1554,9 @@ export const PurpleTheme = {
   }),
   CopilotTooltip: StyleSheet.create({
     tooltipContainer: {
+      flex: 1,
       backgroundColor: Colors.White,
+      minWidth: Dimensions.get('screen').width * 0.5,
     },
   }),
 

screens/Home/HomeScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect} from 'react';
 import {Icon} from 'react-native-elements';
 import {Column} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
@@ -16,24 +16,16 @@ import testIDProps from '../../shared/commonUtil';
 import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
 import {VCItemMachine} from '../../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
 import {VerifiableCredential} from '../../machines/VerifiableCredential/VCMetaMachine/vc';
-import {CopilotStep, walkthroughable, useCopilot} from 'react-native-copilot';
+import {CopilotStep, walkthroughable} from 'react-native-copilot';
 
 export const HomeScreen: React.FC<HomeRouteProps> = props => {
   const controller = useHomeScreen(props);
-  const hasRendered = useRef(1);
-  const {start, copilotEvents, stop} = useCopilot();
 
   useEffect(() => {
     if (controller.IssuersService) {
       navigateToIssuers();
     }
-
-    if (controller.isInitialLaunch && hasRendered.current !== 3) {
-      start();
-      console.log('Starting the copilot walkthrough ===>>');
-      hasRendered.current += 1;
-    }
-  }, [controller.IssuersService, controller.isInitialLaunch, start]);
+  }, [controller.IssuersService]);
 
   const navigateToIssuers = () => {
     props.navigation.navigate('IssuersScreen', {

screens/Home/HomeScreenController.ts

@@ -14,7 +14,6 @@ import {
   selectIsMinimumStorageLimitReached,
 } from './HomeScreenMachine';
 import {selectVc} from '../../machines/VerifiableCredential/VCItemMachine/VCItemSelectors';
-import {selectIsInitialLaunch} from '../../machines/auth';
 
 let homeMachineService;
 function useCreateHomeMachineService() {
@@ -35,8 +34,6 @@ export function getHomeMachineService() {
 export function useHomeScreen(props: HomeRouteProps) {
   const service = useCreateHomeMachineService();
   const {appService} = useContext(GlobalContext);
-  const authService = appService.children.get('auth');
-  const isInitialLaunch = useSelector(authService, selectIsInitialLaunch);
 
   useEffect(() => {
     if (props.route.params?.activeTab != null) {
@@ -60,7 +57,6 @@ export function useHomeScreen(props: HomeRouteProps) {
     DISMISS: () => service.send(HomeScreenEvents.DISMISS()),
     GOTO_ISSUERS: () => service.send(HomeScreenEvents.GOTO_ISSUERS()),
     DISMISS_MODAL: () => service.send(HomeScreenEvents.DISMISS_MODAL()),
-    isInitialLaunch,
   };
 
   function SELECT_TAB(index: number) {

screens/MainLayout.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useRef} from 'react';
 import {
   BottomTabNavigationOptions,
   createBottomTabNavigator,
@@ -15,15 +15,20 @@ import {isIOS} from '../shared/constants';
 import {
   CopilotProvider,
   CopilotStep,
+  useCopilot,
   walkthroughable,
 } from 'react-native-copilot';
-import {View} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import {CopilotTooltip} from '../components/CopilotTooltip';
+import {useSelector} from '@xstate/react';
+import {selectIsInitialLaunch} from '../machines/auth';
 
 const {Navigator, Screen} = createBottomTabNavigator();
 
 export const MainLayout: React.FC = () => {
   const {t} = useTranslation('MainLayout');
+  const hasRendered = useRef(1);
+
   const {appService} = useContext(GlobalContext);
   const scanService = appService.children.get('scan');
 
@@ -34,11 +39,27 @@ export const MainLayout: React.FC = () => {
   };
 
   const CopilotView = walkthroughable(View);
+  const {start, stop} = useCopilot();
+
+  const authService = appService.children.get('auth');
+  const isInitialLaunch =
+    authService && useSelector(authService, selectIsInitialLaunch);
+
+  if (isInitialLaunch) {
+    start();
+    console.log('Starting the copilot walkthrough ===>>');
+    hasRendered.current += 1;
+  }
 
   return (
     <CopilotProvider
+      stopOnOutsideClick
       androidStatusBarVisible
-      tooltipComponent={CopilotTooltip}
+      tooltipComponent={stop => <CopilotTooltip onStop={() => stop()} />}
+      tooltipStyle={{
+        width: Dimensions.get('screen').width * 1,
+        height: Dimensions.get('screen').height * 0.2,
+      }}
       animated>
       <Navigator
         initialRouteName={mainRoutes[0].name}