--amend

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
2026-01-07 20:53:54 -05:00 · 2024-05-21 15:01:18 +05:30
parent fa00b951f1
commit f3b500d56b
8 changed files with 63 additions and 25 deletions
--- a/components/CopilotTooltip.tsx
+++ b/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}
--- a/components/ui/themes/DefaultTheme.ts
+++ b/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,
    },
--- a/locales/en.json
+++ b/locales/en.json
@@ -434,13 +434,7 @@
    "share": "Share",
    "history": "History",
    "request": "Request",
-    "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."
+    "settings": "Settings"
  },
  "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"
  }
 }
--- a/patches/react-native-copilot+3.3.2.patch
+++ b/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,
--- a/screens/Home/HomeScreen.tsx
+++ b/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);
--- a/screens/Home/MyVcsTab.tsx
+++ b/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();
--- a/screens/HomeScreenLayout.tsx
+++ b/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}>
--- a/screens/MainLayout.tsx
+++ b/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>
                  )}