--amend

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

components/CopilotTooltip.tsx

@@ -1,12 +1,13 @@
 import React, {useContext} from 'react';
-import {useCopilot, TooltipProps} from 'react-native-copilot';
+import {useCopilot} from 'react-native-copilot';
 import {Text, Button, Row, Column} from './../components/ui';
 import {useTranslation} from 'react-i18next';
 import {GlobalContext} from '../shared/GlobalContext';
 import {AuthEvents, selectIsInitialDownload} from '../machines/auth';
 import {useSelector} from '@xstate/react';
 
-export const CopilotTooltip = ({labels}: TooltipProps, props) => {
+export const CopilotTooltip = () => {
+  const {t} = useTranslation('copilot');
   const {
     goToNext,
     goToPrev,
@@ -18,7 +19,6 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
     copilotEvents,
   } = useCopilot();
 
-  const {t} = useTranslation();
   const {appService} = useContext(GlobalContext);
   const authService = appService.children.get('auth');
   const ONBOARDING_DONE = () => authService?.send(AuthEvents.ONBOARDING_DONE());
@@ -60,7 +60,7 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
         crossAlign="center"
         margin="25 0 0 0"
         style={{justifyContent: 'space-between'}}>
-        <Text>
+        <Text weight="bold">
           {currentStep?.order === 6 && isInitialDownloading
             ? '1 of 1'
             : currentStep?.order + ' of ' + totalStepsNumber}
@@ -69,7 +69,7 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
           {isFirstStep ||
           (currentStep?.order === 6 && isInitialDownloading) ? null : (
             <Button
-              title={labels?.previous}
+              title={t('previous')}
               type="outline"
               styles={{width: 104, height: 40}}
               onPress={handlePrev}
@@ -77,14 +77,14 @@ export const CopilotTooltip = ({labels}: TooltipProps, props) => {
           )}
           {!isLastStep ? (
             <Button
-              title={labels?.next}
+              title={t('next')}
               type="solid"
               styles={{width: 104, height: 40, marginLeft: 10}}
               onPress={handleNext}
             />
           ) : (
             <Button
-              title={t('common:done')}
+              title={t('done')}
               type="solid"
               styles={{width: 104, height: 40, marginLeft: 10}}
               onPress={handleStop}

components/ui/themes/DefaultTheme.ts

@@ -749,6 +749,7 @@ export const DefaultTheme = {
       position: 'absolute',
       left: 10,
       right: 10,
+      borderRadius: 8,
       maxWidth: Dimensions.get('screen').width,
       height: Dimensions.get('screen').height * 0.2,
     },

locales/en.json

@@ -434,13 +434,7 @@
     "share": "Share",
     "history": "History",
     "request": "Request",
-    "settings": "Settings",
+    "settings": "Settings"
-    "shareTitle": "Share Card",
-    "shareMessage": "Share your card with ease in offline mode using bluetooth, empowering you to provide verified information whenever required.",
-    "historyTitle": "Access to History",
-    "historyMessage": "View your activity history to track your interactions and stay informed about your past actions within the app.",
-    "settingsTitle": "App Settings",
-    "settingsMessage": "Customize your app experience with personalized settings as per your preferences."
   },
   "PasscodeScreen": {
     "header": "Set Passcode",
@@ -878,7 +872,6 @@
     "tryAgain": "Try again",
     "goBack": "Go Back",
     "ignore": "Ignore",
-    "done": "Done",
     "camera": {
       "errors": {
         "missingPermission": "This app uses the camera to scan the QR code of another device."
@@ -896,5 +889,23 @@
       "title": "Unlock App",
       "description": "Please use fingerprint to unlock the app"
     }
+  },
+  "copilot": {
+    "helpTitle": "Help/FAQs",
+    "helpMessage": "Find answers to common questions and access helpful resources in our FAQ section, ensuring you have the support whenever you need it.",
+    "downloadTitle": "Download Card",
+    "downloadMessage": "Easily download and securely store your card in the app for convenient access whenever you need them.",
+    "shareTitle": "Share Card",
+    "shareMessage": "Share your card with ease in offline mode using bluetooth, empowering you to provide verified information whenever required.",
+    "historyTitle": "Access to History",
+    "historyMessage": "View your activity history to track your interactions and stay informed about your past actions within the app.",
+    "settingsTitle": "App Settings",
+    "settingsMessage": "Customize your app experience with personalized settings as per your preferences.",
+    "cardTitle": "Card",
+    "cardMessage": "Your card displays your verified identity information. Tap for a detailed view or click on … for additional options.",
+    "next": "Next",
+    "previous": "Previous",
+    "skip": "Skip",
+    "final": "Done"
   }
 }

patches/react-native-copilot+3.3.2.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/react-native-copilot/dist/index.js b/node_modules/react-native-copilot/dist/index.js
+index b9127da..509b57a 100644
+--- a/node_modules/react-native-copilot/dist/index.js
++++ b/node_modules/react-native-copilot/dist/index.js
+@@ -188,12 +188,12 @@ var init_SvgMask = __esm({
+       position,
+       canvasSize
+     }) => {
++      const cornerRadius = 10;
+       const positionX = position.x._value;
+       const positionY = position.y._value;
+       const sizeX = size.x._value;
+       const sizeY = size.y._value;
+-      return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
+-    };
++      return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX + cornerRadius}, ${positionY}H${positionX + sizeX - cornerRadius}Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}V${positionY + sizeY - cornerRadius}Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}H${positionX + cornerRadius}Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}V${positionY + cornerRadius}Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}Z`}
+     SvgMask = ({
+       size,
+       position,

screens/Home/HomeScreen.tsx

@@ -16,7 +16,7 @@ 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, useCopilot, walkthroughable} from 'react-native-copilot';
+import {CopilotStep, walkthroughable} from 'react-native-copilot';
 
 export const HomeScreen: React.FC<HomeRouteProps> = props => {
   const controller = useHomeScreen(props);

screens/Home/MyVcsTab.tsx

@@ -271,14 +271,13 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
                 </Row>
                 {showPinVc &&
                   vcMetadataOrderedByPinStatus.map((vcMetadata, index) => {
-                    return index === 0 ? (
+                    return index === 0 || controller.isInitialDownloading ? (
                       <CopilotStep
-                        text="Your card displays your verified identity information. Tap for a detailed view or click on … for additional options."
+                        text={t('copilot:cardMessage')}
                         order={6}
-                        name="Card">
+                        name={t('copilot:cardTitle')}>
                         <CopilotView
                           onLayout={
-                            controller.vcMetadatas.length == 1 &&
                             controller.isInitialDownloading
                               ? () => {
                                   start();

screens/HomeScreenLayout.tsx

@@ -49,9 +49,9 @@ export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
       source={'Inji'}
       triggerComponent={
         <CopilotStep
-          text="Find answers to common questions and access helpful resources in our FAQ section, ensuring you have the support whenever you need it."
+          text={t('copilot:helpMessage')}
           order={1}
-          name="Help/FAQs">
+          name={t('copilot:helpTitle')}>
           <CopilotView testID="help" style={Theme.HelpScreenStyle.viewStyle}>
             <Row crossAlign="center" style={Theme.HelpScreenStyle.rowStyle}>
               <View testID="helpIcon" style={Theme.HelpScreenStyle.iconStyle}>

screens/MainLayout.tsx

@@ -18,7 +18,7 @@ import {
   CopilotStep,
   walkthroughable,
 } from 'react-native-copilot';
-import {Dimensions, View} from 'react-native';
+import {View} from 'react-native';
 import {CopilotTooltip} from '../components/CopilotTooltip';
 
 const {Navigator, Screen} = createBottomTabNavigator();
@@ -75,7 +75,11 @@ export const MainLayout: React.FC = () => {
                   {route.name === 'home' ? (
                     <View style={Theme.Styles.tabBarIconCopilot}>
                       {SvgImage[`${route.name}`](focused)}
-                      <Text margin="6 0 0 0">{t(route.name)}</Text>
+                      <Text
+                        color={focused && Theme.Colors.Icon}
+                        margin="6 0 0 0">
+                        {t(route.name)}
+                      </Text>
                     </View>
                   ) : (
                     <CopilotStep
@@ -85,7 +89,11 @@ export const MainLayout: React.FC = () => {
                       name={t(route.name + 'Title')}>
                       <CopilotView style={Theme.Styles.tabBarIconCopilot}>
                         {SvgImage[`${route.name}`](focused)}
-                        <Text margin="6 0 0 0">{t(route.name)}</Text>
+                        <Text
+                          color={focused && Theme.Colors.Icon}
+                          margin="6 0 0 0">
+                          {t(route.name)}
+                        </Text>
                       </CopilotView>
                     </CopilotStep>
                   )}