[INJIMOB-781] feat:Add copilot walkthrought to downloaded vc

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
2026-01-09 13:38:01 -05:00 · 2024-05-17 19:11:08 +05:30
parent a577fe74ac
commit 9a81d319ab
8 changed files with 74 additions and 53 deletions
--- a/.talismanrc
+++ b/.talismanrc
@@ -302,7 +302,7 @@ fileignoreconfig:
  - filename: machines/VerifiableCredential/VCItemMachine/VCItemMachine.typegen.ts
    checksum: c19a4c3d148d606d4ad138fe33dd8ae5d13a3689f0fd98dbbff80814d7ab72c1
  - filename: screens/MainLayout.tsx
-    checksum: f0acd97b97a28ee939e3f16c3201cc7be861721c049c1482afbc3a541480ae6f       
+    checksum: e293dce188ed0fcad5b29968b799f959a8fdd5de616cbabab63805c44596c24e       
  - filename: machines/backupAndRestore/backupWithEncryption.typegen.ts        
    checksum: 19ccac58df42ce0b6e36c66592e53441d709713fb1bff64454e0039dd3b0ac97 
  - filename: machines/VerifiableCredential/VCItemMachine/VCItemMachine.ts     
--- a/components/CopilotTooltip.tsx
+++ b/components/CopilotTooltip.tsx
@@ -5,7 +5,8 @@ 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';
+import {AuthEvents, selectIsInitialLaunch} from '../machines/auth';
+import {useSelector} from '@xstate/react';

 export const CopilotTooltip = ({labels}: TooltipProps, props) => {
  const {
@@ -16,16 +17,21 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
    isFirstStep,
    isLastStep,
    totalStepsNumber,
+    copilotEvents,
  } = useCopilot();

  const {t} = useTranslation();
  const {appService} = useContext(GlobalContext);
  const authService = appService.children.get('auth');
+  const isInitialLaunch =
+    authService && useSelector(authService, selectIsInitialLaunch);
  const RESET_COPILOT = () =>
    authService?.send(AuthEvents.RESET_INITIAL_LAUNCH());

  const handleStop = async () => {
-    RESET_COPILOT();
+    if (currentStep?.order === 6 && isInitialLaunch) {
+      RESET_COPILOT();
+    }
    stop();
  };

@@ -37,6 +43,12 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
    void goToPrev();
  };

+  copilotEvents.on('stop', () => {
+    if (currentStep?.order === 6) {
+      RESET_COPILOT();
+    }
+  });
+
  return (
    <View style={Theme.CopilotTooltip.tooltipContainer}>
      <Text testID="stepTitle" weight="semibold" margin="0 0 10 0">
@@ -50,14 +62,14 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
        style={{justifyContent: 'space-between'}}>
        <Text>{currentStep?.order + ' of ' + totalStepsNumber}</Text>
        <Row>
-          {!isFirstStep ? (
+          {isFirstStep || currentStep?.order === 6 ? null : (
            <Button
              title={labels?.previous}
              type="outline"
              styles={{width: 104, height: 40}}
              onPress={handlePrev}
            />
-          ) : null}
+          )}
          {!isLastStep ? (
            <Button
              title={labels?.next}
--- a/screens/Home/HomeScreen.tsx
+++ b/screens/Home/HomeScreen.tsx
@@ -69,7 +69,7 @@ export const HomeScreen: React.FC<HomeRouteProps> = props => {

  return (
    <View
-      onLayout={controller.isInitialLaunch ? () => start() : null}
+      onLayout={controller.isInitialLaunch ? () => start() : undefined}
      style={{
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height * 0.78,
--- a/screens/Home/MyVcsTab.tsx
+++ b/screens/Home/MyVcsTab.tsx
@@ -59,7 +59,7 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
    setClearSearchIcon(false);
    setShowPinVc(true);
  };
-  const {start} = useCopilot();
+  const {start, goToNth} = useCopilot();

  useEffect(() => {
    filterVcs(search);
@@ -206,11 +206,6 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {

  const CopilotView = walkthroughable(View);

-  if (controller.vcMetadatas.length == 1) {
-    console.log('restarting the copilot at 6th ===>>');
-    start('6');
-  }
-
  return (
    <React.Fragment>
      <Column fill style={{display: props.isVisible ? 'flex' : 'none'}}>
@@ -277,7 +272,16 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
                        text="Your card displays your verified identity information. Tap for a detailed view or click on … for additional options."
                        order={6}
                        name="Card">
-                        <CopilotView>
+                        <CopilotView
+                          onLayout={
+                            controller.vcMetadatas.length == 1 &&
+                            controller.isInitialLaunch
+                              ? () => {
+                                  start();
+                                  goToNth(6);
+                                }
+                              : undefined
+                          }>
                          <VcItemContainer
                            key={vcMetadata.getVcKey()}
                            vcMetadata={vcMetadata}
--- a/screens/Home/MyVcsTabController.ts
+++ b/screens/Home/MyVcsTabController.ts
@@ -32,12 +32,14 @@ import {
 } from '../../machines/settings';
 import {VCItemMachine} from '../../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
 import {VcMetaEvents} from '../../machines/VerifiableCredential/VCMetaMachine/VCMetaMachine';
+import {selectIsInitialLaunch} from '../../machines/auth';

 export function useMyVcsTab(props: HomeScreenTabProps) {
  const service = props.service as ActorRefFrom<typeof MyVcsTabMachine>;
  const {appService} = useContext(GlobalContext);
  const vcMetaService = appService.children.get('vcMeta')!!;
  const settingsService = appService.children.get('settings')!!;
+  const authService = appService.children.get('auth');

  return {
    service,
@@ -104,5 +106,6 @@ export function useMyVcsTab(props: HomeScreenTabProps) {
    RESET_VERIFY_ERROR: () => {
      vcMetaService?.send(VcMetaEvents.RESET_VERIFY_ERROR());
    },
+    isInitialLaunch: useSelector(authService, selectIsInitialLaunch),
  };
 }
--- a/screens/MainLayout.tsx
+++ b/screens/MainLayout.tsx
@@ -46,6 +46,7 @@ export const MainLayout: React.FC = () => {
        width: Dimensions.get('screen').width * 1,
        height: Dimensions.get('screen').height * 0.2,
      }}
+      stepNumberComponent={() => null}
      animated>
      <Navigator
        initialRouteName={mainRoutes[0].name}
@@ -80,6 +81,7 @@ export const MainLayout: React.FC = () => {
                    </View>
                  ) : (
                    <CopilotStep
+                      key={t(route.name)}
                      text={t(route.name + 'Message')}
                      order={2 + index}
                      name={t(route.name + 'Title')}>
--- a/screens/Settings/SettingScreen.tsx
+++ b/screens/Settings/SettingScreen.tsx
@@ -132,36 +132,37 @@ export const SettingScreen: React.FC<
          />

          <LanguageSetting />
-            <ListItem topDivider disabled={!controller.canUseBiometrics}>
-              <Icon
-                type={'MaterialCommunityIcons'}
-                name={'fingerprint'}
-                color={Theme.Colors.Icon}
-                size={25}
-              />
-              <ListItem.Content>
-                <ListItem.Title
-                  {...testIDProps('bioUnlock')}
-                  style={{paddingTop: 3}}>
-                  <Text weight="semibold" color={Theme.Colors.settingsLabel}>
-                    {t('bioUnlock')}
-                  </Text>
-                </ListItem.Title>
-              </ListItem.Content>
-              <Switch
-                {...testIDProps('biometricToggle')}
-                value={controller.isBiometricUnlockEnabled}
-                onValueChange={handleBiometricToggle}
-                trackColor={{
-                  false: Theme.Colors.switchTrackFalse,
-                  true:
-                    Platform.OS == 'ios'
-                      ? Theme.Colors.switchHead
-                      : Theme.Colors.switchTrackTrue,
-                }}
-                color={Theme.Colors.switchHead}
-              />
-            </ListItem>
+
+          <ListItem topDivider disabled={!controller.canUseBiometrics}>
+            <Icon
+              type={'MaterialCommunityIcons'}
+              name={'fingerprint'}
+              color={Theme.Colors.Icon}
+              size={25}
+            />
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps('bioUnlock')}
+                style={{paddingTop: 3}}>
+                <Text weight="semibold" color={Theme.Colors.settingsLabel}>
+                  {t('bioUnlock')}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+            <Switch
+              {...testIDProps('biometricToggle')}
+              value={controller.isBiometricUnlockEnabled}
+              onValueChange={handleBiometricToggle}
+              trackColor={{
+                false: Theme.Colors.switchTrackFalse,
+                true:
+                  Platform.OS == 'ios'
+                    ? Theme.Colors.switchHead
+                    : Theme.Colors.switchTrackTrue,
+              }}
+              color={Theme.Colors.switchHead}
+            />
+          </ListItem>

          <AboutInji appId={controller.appId} />

@@ -198,12 +199,7 @@ export const SettingScreen: React.FC<
            topDivider
            bottomDivider
            onPress={() => controller.INJI_TOUR_GUIDE()}>
-            <Icon
-              type={'antdesign'}
-              name={'book'}
-              color={Theme.Colors.Icon}
-              size={25}
-            />
+            {SvgImage.coloredInfo()}
            <ListItem.Content>
              <ListItem.Title
                {...testIDProps('injiTourGuide')}
--- a/screens/Settings/SettingScreenController.ts
+++ b/screens/Settings/SettingScreenController.ts
@@ -29,7 +29,8 @@ import {
 import {GlobalContext} from '../../shared/GlobalContext';
 import {useTranslation} from 'react-i18next';
 import {RequestRouteProps, RootRouteProps} from '../../routes';
-import {REQUEST_ROUTES} from '../../routes/routesConstants';
+import {BOTTOM_TAB_ROUTES, REQUEST_ROUTES} from '../../routes/routesConstants';
+import {useCopilot} from 'react-native-copilot';

 export function useSettingsScreen(props: RootRouteProps & RequestRouteProps) {
  const {appService} = useContext(GlobalContext);
@@ -102,6 +103,8 @@ export function useSettingsScreen(props: RootRouteProps & RequestRouteProps) {
    setHasAlertMsg('');
  };

+  const {start} = useCopilot();
+
  return {
    isVisible,
    alertMsg,
@@ -167,9 +170,10 @@ export function useSettingsScreen(props: RootRouteProps & RequestRouteProps) {
    },

    INJI_TOUR_GUIDE: () => {
-      settingsService.send(SettingsEvents.INJI_TOUR_GUIDE()),
-        props.navigation.navigate('IntroSliders'),
-        setIsVisible(false);
+      settingsService.send(SettingsEvents.INJI_TOUR_GUIDE());
+      props.navigation.navigate(BOTTOM_TAB_ROUTES.home);
+      setIsVisible(false);
+      start();
    },

    TOGGLE_BIOMETRIC: (enable: boolean) => {