[INJIMOB-698]: FAQ additions for Activation of card & Retriving ID re…

…lated processes. (mosip#1213) * [INJIMOB-698]: FAQ additions for Activation of card & Retriving ID related processes Signed-off-by: anil_majji <[email protected]> * [INJIMOB-698]: Updated URL links, kept queries in order. Signed-off-by: anil_majji <[email protected]> * [INJIMOB-698]: Replaced 1-time using variables into hardcode link Signed-off-by: anil_majji <[email protected]> * [INJIMOB-698]: Added new text styles in the both the themes of Help screen Signed-off-by: anil_majji <[email protected]> --------- Signed-off-by: anil_majji <[email protected]>
idpass · Jan 30, 2024 · 5ee3c62 · 5ee3c62
1 parent 8aaa2e6
commit 5ee3c62
Show file tree

Hide file tree

Showing 13 changed files with 374 additions and 117 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -163,4 +163,26 @@ fileignoreconfig:
     checksum: acc8934db32c3398082b1f89d9908765d3deb4dd49eaf5f68496a89fbd02b7a8
   - filename: machines/settings.typegen.ts
     checksum: e4ae05822f1b1c23f3f70d03dd46fd8f29ba6b52d40f2f24c121f536fbb5f2c4
+  - filename: .env
+    checksum: f26489ce4ac607884437ad06c3117cc34d6cbcbcd3dd5719790fbe01a0853ee5
+  - filename: machines/backup.ts
+    checksum: df40cc92db9e459ab19d8382713afb24ae89c88a944623bbc21a7e6b9bc327a3
+  - filename: locales/en.json
+    checksum: e87723f4bb733fa3d95cc0d4f3831ecaa8310975c177af4f4c73c35b69fa025e
+  - filename: locales/fil.json
+    checksum: 9b3aa32c09ab18c29bfd5fdbe822e1bda511627a887f8f232c52959d2170c3d3
+  - filename: locales/hin.json
+    checksum: a5f388edb087d12a9395643ba2fbafc93dfde3a3347c3dc17e89d252045660b7
+  - filename: locales/kan.json
+    checksum: c0cc2ca567eaa8a5abaa4c9a361b9b612436d10b50d60ef239fcff633eeeff57
+  - filename: locales/ara.json
+    checksum: 104f58031271f6ba6115de6e7cb5ba7a586ab6e648314c8940b035f60cab692f
+  - filename: locales/tam.json
+    checksum: a257d03d7d011602c50160d044926e7ee8a29e8f8afb3c355c05fd8aa7473534
+  - filename: locales/en.json
+    checksum: b4d07aca4534fb9fd2bb62b146bb41e588e4bc5cad6afc9531f97043ed08dbba
+  - filename: locales/spa.json
+    checksum: 06fca76095c99f313714e2d7b732e2bebb96f18be762e778ee7e3481a5a4e9ef
+  - filename: locales/fil.json
+    checksum: e9eaeb9204e4a6659e0f2a432e57e62cfb8f02b0a2f8d5a6ac81c4cdf4fa4786
     version: ""
diff --git a/components/HelpScreen.tsx b/components/HelpScreen.tsx
@@ -1,15 +1,39 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Pressable} from 'react-native';
+import {Linking, Pressable} from 'react-native';
 import {Modal} from './ui/Modal';
 import {ScrollView} from 'react-native-gesture-handler';
 import {Column, Text} from './ui';
 import {Theme} from './ui/styleUtils';
+import getAllConfigurations from '../shared/commonprops/commonProps';
 
 export const HelpScreen: React.FC<HelpScreenProps> = props => {
   const {t} = useTranslation('HelpScreen');
 
   const [showHelpPage, setShowHelpPage] = useState(false);
+  var [injiHelpUrl, setInjiHelpUrl] = useState('');
+
+  useEffect(() => {
+    getAllConfigurations().then(response => {
+      setInjiHelpUrl(response.aboutInjiUrl);
+    });
+  }, []);
+
+  const hyperLinkString = (
+    word: string,
+    urlString: string,
+    extension?: string,
+  ) => {
+    return (
+      <Text
+        style={Theme.TextStyles.urlLinkText}
+        onPress={() => {
+          urlString && Linking.openURL(urlString + extension);
+        }}>
+        {t(word)}
+      </Text>
+    );
+  };
 
   return (
     <React.Fragment>
@@ -30,40 +54,105 @@ export const HelpScreen: React.FC<HelpScreenProps> = props => {
         }}>
         <ScrollView>
           <Column fill padding="10" align="space-between">
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('whatIsDigitalCredential?')}
+            <Text style={Theme.TextStyles.helpHeader}>{t('whatIsAnId?')}</Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-10')}</Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatAreTheDifferentTypesOfId?')}
+            </Text>
+            <Text margin="5">
+              <Text style={Theme.TextStyles.helpDetails}>{t('detail-11')}</Text>
+              <Text
+                style={Theme.TextStyles.urlLinkText}
+                onPress={() => {
+                  Linking.openURL(
+                    'https://docs.mosip.io/1.2.0/id-lifecycle-management/identifiers',
+                  );
+                }}>
+                {t('here')}
+              </Text>
+            </Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whereCanIFindTheseIds?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-12a')}</Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-12b')}</Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-12c')}</Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatIsaDigitalCredential?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-1')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('whatCanDoWithDigitalCredential?')}
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatCanWeDoWithDigitalCredential?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-2')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatIsAVerifiableCredential?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-15')}</Text>
+            <Text style={Theme.TextStyles.helpHeader}>
               {t('howToAddCard?')}
             </Text>
-            <Text style={Theme.TextStyles.helpDetails}>{t('detail-3')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('howToRemoveCardFromWallet?')}
+            <Text style={Theme.TextStyles.helpDetails}>
+              {t('detail-3')}
+              {hyperLinkString(
+                'here',
+                injiHelpUrl,
+                '/end-user-guide#downloading-vc',
+              )}
             </Text>
-            <Text style={Theme.TextStyles.helpDetails}>{t('detail-4')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('canWeAddMultipleCards?')}
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('canIAddMultipleCards?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-5')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('howToShareCard?')}
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whyDoesMyVcSayActivationIsPending?')}
             </Text>
-            <Text style={Theme.TextStyles.helpDetails}>{t('detail-6')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('howToActivateCardForOnlineLogin?')}
+            <Text style={Theme.TextStyles.helpDetails}>
+              {t('detail-13')}
+              {hyperLinkString(
+                'here',
+                injiHelpUrl,
+                '/end-user-guide#activating-a-vc',
+              )}
+            </Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatDoYouMeanByActivatedForOnlineLogin?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>
+              {t('detail-14a')}
+              {hyperLinkString(
+                'here',
+                injiHelpUrl,
+                '/overview/features/feature-workflows#id-4.-qr-code-login-process',
+              )}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-14b')}</Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('howToActivateACardForOnlineLogin?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-7')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('howToViewActivity?')}
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('howToShareACard?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>{t('detail-6')}</Text>
+            <Text style={Theme.TextStyles.header}>
+              {t('howToRemoveACardFromTheWallet?')}
+            </Text>
+            <Text style={Theme.TextStyles.helpDetails}>
+              {t('detail-4a')}
+              {hyperLinkString(
+                'here',
+                injiHelpUrl,
+                '/end-user-guide#deleting-a-vc',
+              )}
+              {t('detail-4b')}
+            </Text>
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('howToViewActivityLogs?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-8')}</Text>
-            <Text margin="7" style={Theme.TextStyles.header}>
-              {t('whatCanDoBiometricsChanged?')}
+            <Text style={Theme.TextStyles.helpHeader}>
+              {t('whatHappensWhenAndroidKeystoreBiometricIsChanged?')}
             </Text>
             <Text style={Theme.TextStyles.helpDetails}>{t('detail-9')}</Text>
           </Column>

diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
@@ -42,12 +42,9 @@ export const Modal: React.FC<ModalProps> = props => {
             <Row
               fill
               align={props.headerLeft ? 'flex-start' : 'center'}
-              margin={'16 0 0 0'}>
+              margin={props.arrowLeft ? '16 0 0 -15' : '16 0 0 10'}>
               <Column>
-                <Text
-                  testID={props.testID}
-                  style={Theme.TextStyles.header}
-                  margin="0 0 0 -15">
+                <Text testID={props.testID} style={Theme.TextStyles.header}>
                   {props.headerTitle || props.headerLeft}
                 </Text>
                 {!props.requester ? (

diff --git a/components/ui/Text.tsx b/components/ui/Text.tsx
@@ -22,7 +22,8 @@ export const Text: React.FC<TextProps> = (props: TextProps) => {
       style={textStyles}
       numberOfLines={props.numLines}
       ellipsizeMode={props.ellipsizeMode}
-      accessible={props.accessible}>
+      accessible={props.accessible}
+      onPress={props.onPress}>
       {props.children}
     </RNText>
   );
@@ -41,4 +42,5 @@ interface TextProps {
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;
   style?: StyleProp<TextStyle>;
   accessible?: boolean | true;
+  onPress?: () => void;
 }
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -25,6 +25,7 @@ const Colors = {
   DimGray: '#737373',
   platinumGrey: '#EDEDED',
   Orange: '#F2811D',
+  Blue: '#0000FF',
   LightGrey: '#F7F7F7',
   ShadeOfGrey: '#6F6F6F',
   mediumDarkGrey: '#7B7B7B',
@@ -128,6 +129,7 @@ export const DefaultTheme = {
     warningLogoBgColor: Colors.warningLogoBg,
     tooltipIcon: Colors.toolTip,
     toolTipPointerColor: Colors.toolTipPointer,
+    urlLink: Colors.Orange,
   },
   Styles: StyleSheet.create({
     title: {
@@ -748,11 +750,23 @@ export const DefaultTheme = {
       fontFamily: 'Inter_600SemiBold',
       lineHeight: 18,
     },
+    helpHeader: {
+      color: Colors.Black,
+      fontFamily: 'Inter_700Bold',
+      fontSize: 18,
+      lineHeight: 19,
+      paddingTop: 5,
+      margin: 7,
+    },
     helpDetails: {
       margin: 5,
       color: Colors.Gray44,
       fontFamily: 'Inter_600SemiBold',
     },
+    urlLinkText: {
+      color: Colors.Orange,
+      fontFamily: 'Inter_600SemiBold',
+    },
     aboutDetails: {
       color: Colors.Black,
       fontSize: 18,

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -25,6 +25,7 @@ const Colors = {
   DimGray: '#737373',
   platinumGrey: '#EDEDED',
   Orange: '#F2811D',
+  Blue: '#0000FF',
   LightOrange: '#FDF1E6',
   LightGrey: '#FAF9FF',
   ShadeOfGrey: '#6F6F6F',
@@ -131,6 +132,7 @@ export const PurpleTheme = {
     warningLogoBgColor: Colors.warningLogoBg,
     tooltipIcon: Colors.tooltip,
     toolTipPointerColor: Colors.toolTipPointer,
+    urlLink: Colors.Purple,
   },
   Styles: StyleSheet.create({
     title: {
@@ -752,11 +754,23 @@ export const PurpleTheme = {
       fontFamily: 'Inter_600SemiBold',
       lineHeight: 18,
     },
+    helpHeader: {
+      color: Colors.Black,
+      fontFamily: 'Inter_700Bold',
+      fontSize: 18,
+      lineHeight: 19,
+      paddingTop: 5,
+      margin: 7,
+    },
     helpDetails: {
       margin: 5,
       color: Colors.Gray44,
       fontFamily: 'Inter_600SemiBold',
     },
+    urlLinkText: {
+      color: Colors.Purple,
+      fontFamily: 'Inter_600SemiBold',
+    },
     aboutDetails: {
       color: Colors.Black,
       fontSize: 18,