refactor(INJI-472): update issuerScreen content (#942)

* refactor(INJI-472): update issuer screen content modify IssuersScreen page description and issuer description Signed-off-by: Kiruthika Jeyashankar <[email protected]> * refactor(INJI-472): move loader component styles to LoaderStyles Signed-off-by: Kiruthika Jeyashankar <[email protected]> * fix(INJI-472): hindi text matras getting hidden IssuersScreen was hiding matras in hindi text displayed, padding is added to resolve this Signed-off-by: Kiruthika Jeyashankar <[email protected]> * refactor(INJI-472): disable back action in loader hardware back button press or gesture back action is disable in loader Signed-off-by: Kiruthika Jeyashankar <[email protected]> --------- Signed-off-by: Kiruthika Jeyashankar <[email protected]>
mosip · Oct 22, 2023 · c9afb89 · c9afb89
1 parent 3a8e2cc
commit c9afb89
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 39 deletions.
diff --git a/components/ui/Loader.tsx b/components/ui/Loader.tsx
@@ -1,14 +1,22 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Image, SafeAreaView, View} from 'react-native';
+import {BackHandler, Image, SafeAreaView, View} from 'react-native';
 import Spinner from 'react-native-spinkit';
 import {Button, Centered, Column, Row, Text} from '../../components/ui';
-import {Theme} from '../../components/ui/styleUtils';
+import {Theme} from './styleUtils';
 import testIDProps from '../../shared/commonUtil';
 
 export const Loader: React.FC<LoaderProps> = props => {
   const {t} = useTranslation('ScanScreen');
 
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => true,
+    );
+    return () => backHandler.remove();
+  }, []);
+
   return (
     <Fragment>
       <Row style={{backgroundColor: Theme.Colors.whiteBackgroundColor}}>
@@ -17,7 +25,7 @@ export const Loader: React.FC<LoaderProps> = props => {
             fill
             align={'flex-start'}
             style={Theme.LoaderStyles.titleContainer}>
-            <View style={Theme.issuersScreenStyles.loaderHeadingText}>
+            <View style={Theme.LoaderStyles.heading}>
               <Text
                 style={Theme.TextStyles.semiBoldHeader}
                 testID="loaderTitle">
@@ -81,7 +89,7 @@ export const Loader: React.FC<LoaderProps> = props => {
 
 export interface LoaderProps {
   isVisible: boolean;
-  title?: string;
+  title: string;
   subTitle?: string;
   label?: string;
   hint?: string;

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -730,6 +730,10 @@ export const DefaultTheme = {
       marginBottom: 17,
       marginTop: 22,
     },
+    heading: {
+      flex: 1,
+      flexDirection: 'column',
+    },
   }),
   ButtonStyles: StyleSheet.create({
     fill: {
@@ -1175,13 +1179,15 @@ export const DefaultTheme = {
       lineHeight: 17,
       paddingHorizontal: 3,
       paddingBottom: 4,
+      paddingTop: 1.7,
     },
     issuerDescription: {
       fontSize: 11,
       lineHeight: 14,
       color: Colors.ShadeOfGrey,
       paddingVertical: 5,
       paddingHorizontal: 3,
+      paddingTop: 1.4,
     },
     issuerIcon: {
       resizeMode: 'contain',
@@ -1191,10 +1197,6 @@ export const DefaultTheme = {
       marginTop: 8,
       marginLeft: 2.5,
     },
-    loaderHeadingText: {
-      flex: 1,
-      flexDirection: 'column',
-    },
   }),
   ErrorStyles: StyleSheet.create({
     image: {marginTop: -60, paddingBottom: 26},

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -732,6 +732,10 @@ export const PurpleTheme = {
       marginBottom: 17,
       marginTop: 22,
     },
+    heading: {
+      flex: 1,
+      flexDirection: 'column',
+    },
   }),
   ButtonStyles: StyleSheet.create({
     fill: {
@@ -1175,11 +1179,13 @@ export const PurpleTheme = {
       fontFamily: 'Inter_600SemiBold',
       fontSize: 14,
       lineHeight: 17,
+      paddingTop: 1.7,
     },
     issuerDescription: {
       fontSize: 11,
       lineHeight: 14,
       color: Colors.ShadeOfGrey,
+      paddingTop: 1.4,
     },
     issuerIcon: {
       resizeMode: 'contain',
@@ -1189,10 +1195,6 @@ export const PurpleTheme = {
       marginTop: 8,
       marginLeft: 2.5,
     },
-    loaderHeadingText: {
-      flex: 1,
-      flexDirection: 'column',
-    },
   }),
   ErrorStyles: StyleSheet.create({
     image: {marginTop: -60, paddingBottom: 26},

diff --git a/locales/ara.json b/locales/ara.json
@@ -159,13 +159,15 @@
   },
   "IssuersScreen": {
     "title": "أضف بطاقة جديدة",
-    "header": "يرجى تحديد الطريقة المفضلة من الأسفل لإضافة بطاقة جديدة",
+    "header": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.",
+    "itemHeading": "التنزيل عبر {{issuer}}",
+    "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.",
     "loaders": {
       "loading": "جار التحميل...",
       "subTitle": {
-        "displayIssuers": "Fetching Issuers",
-        "settingUp": "Setting up",
-        "downloadingCredentials": "Downloading Credentials",
+        "displayIssuers": "جلب جهات الإصدار",
+        "settingUp": "اعداد",
+        "downloadingCredentials": "تنزيل بيانات الاعتماد"
       }
     },
     "errors":{

diff --git a/locales/en.json b/locales/en.json
@@ -160,13 +160,9 @@
   },
   "IssuersScreen": {
     "title": "Add new card",
-    "header": "Please select a preferred method from below to add a new card",
+    "header": "Please choose your preferred issuer from the options below to add a new card.",
     "itemHeading": "Download via {{issuer}}",
-    "itemSubHeading": "Enter the mentioned ID and get your card",
-    "modal": {
-      "title": "In Progress",
-      "hint": "downloading your credential from issuer"
-    },
+    "itemSubHeading": "Enter your national ID to download your card.",
     "loaders": {
       "loading": "Loading...",
       "subTitle": {

diff --git a/locales/fil.json b/locales/fil.json
@@ -158,13 +158,15 @@
   },
   "IssuersScreen": {
     "title": "Magdagdag ng bagong card",
-    "header": "Mangyaring pumili ng gustong paraan mula sa ibaba upang magdagdag ng bagong card",
+    "header": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.",
+    "itemHeading": "I-download sa pamamagitan ng {{issuer}}",
+    "itemSubHeading": "Ilagay ang iyong national ID para i-download ang iyong card.",
     "loaders": {
       "loading": "Naglo-load...",
       "subTitle": {
-        "displayIssuers": "Fetching Issuers",
-        "settingUp": "Setting up",
-        "downloadingCredentials": "Downloading Credentials",
+        "displayIssuers": "Kinukuha ang mga Isyu",
+        "settingUp": "Inaayos",
+        "downloadingCredentials": "Nagda-download ng Mga Kredensyal"
       }
     },
     "errors": {

diff --git a/locales/hin.json b/locales/hin.json
@@ -156,8 +156,9 @@
   },
   "IssuersScreen": {
     "title": "नया कार्ड जोड़ें",
-    "header": "नया कार्ड जोड़ने के लिए कृपया नीचे से कोई पसंदीदा विधि चुनें",
-
+    "header": "नया कार्ड जोड़ने के लिए कृपया नीचे दिए गए विकल्पों में से अपना पसंदीदा जारीकर्ता चुनें।",
+    "itemHeading": "{{issuer}} के माध्यम से डाउनलोड करें",
+    "itemSubHeading": "अपना कार्ड डाउनलोड करने के लिए अपनी राष्ट्रीय आईडी दर्ज करें।",
     "loaders": {
       "loading": "लोड हो रहा है...",
       "subTitle": {

diff --git a/locales/kan.json b/locales/kan.json
@@ -155,13 +155,15 @@
   },
   "IssuersScreen": {
     "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ",
-    "header": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನಿಂದ ಆದ್ಯತೆಯ ವಿಧಾನವನ್ನು ಆಯ್ಕೆಮಾಡಿ",
+    "header": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.",
+    "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
+    "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.",
     "loaders": {
       "loading": "ಲೋಡ್ ಆಗುತ್ತಿದೆ...",
       "subTitle": {
-        "displayIssuers": "Fetching Issuers",
-        "settingUp": "Setting up",
-        "downloadingCredentials": "Downloading Credentials"
+        "displayIssuers": "ವಿತರಕರನ್ನು ಪಡೆಯಲಾಗುತ್ತಿದೆ",
+        "settingUp": "ಸ್ಥಾಪನೆಗೆ",
+        "downloadingCredentials": "ರುಜುವಾತುಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ"
       }
     },
     "errors": {

diff --git a/locales/spa.json b/locales/spa.json
@@ -272,6 +272,30 @@
 		"logout": "Cerrar sesión",
 		"resetInjiProps": "Restableciendo accesorios Inji..."
 	},
+  "IssuersScreen": {
+		"title": "Agregar nueva tarjeta",
+		"header": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.",
+		"itemHeading": "Descargar vía {{issuer}}",
+    "itemSubHeading": "Introduce tu DNI para descargar tu tarjeta.",
+    "loaders": {
+      "loading": "Cargando...",
+      "subTitle": {
+        "displayIssuers": "Obteniendo emisores",
+        "settingUp": "Configurando",
+        "downloadingCredentials": "Descarga de credenciales"
+      }
+    },
+    "errors": {
+      "noInternetConnection": {
+        "title": "Sin conexión a Internet",
+        "message": "Por favor verifique su conexión y vuelva a intentarlo"
+      },
+      "generic": {
+        "title": "¡Algo salió mal!",
+        "message": "Estamos teniendo algunos problemas con su solicitud. Inténtalo de nuevo."
+      }
+    }
+	},
 	"QrLogin": {
 		"title": "Inicio de sesión con código QR",
 		"alignQr": "Alinea el código QR dentro del marco para escanearlo",

diff --git a/locales/tam.json b/locales/tam.json
@@ -155,13 +155,15 @@
   },
   "IssuersScreen": {
     "title": "புதிய அட்டையைச் சேர்க்கவும்",
-    "header": "புதிய கார்டைச் சேர்க்க கீழே இருந்து விருப்பமான முறையைத் தேர்ந்தெடுக்கவும்",
+    "header": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.",
+    "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்",
+    "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.",
     "loaders": {
       "loading": "ஏற்றுகிறது...",
       "subTitle": {
-        "displayIssuers": "Fetching Issuers",
-        "settingUp": "Setting up",
-        "downloadingCredentials": "Downloading Credentials",
+        "displayIssuers": "வழங்குபவர்களைப் பெறுதல்",
+        "settingUp": "அமைக்கிறது",
+        "downloadingCredentials": "நற்சான்றிதழ்களைப் பதிவிறக்குகிறது"
       }
     },
     "errors": {

diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx
@@ -1,10 +1,10 @@
 import React, {useLayoutEffect} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Image, Text, View} from 'react-native';
+import {FlatList, Image, View} from 'react-native';
 import {Issuer} from '../../components/openId4VCI/Issuer';
 import {Error} from '../../components/ui/Error';
 import {Header} from '../../components/ui/Header';
-import {Column} from '../../components/ui';
+import {Column, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
 import {RootRouteProps} from '../../routes';
 import {HomeRouteProps} from '../../routes/main';
@@ -132,6 +132,7 @@ export const IssuersScreen: React.FC<
             {...testIDProps('addCardDescription')}
             style={{
               ...Theme.TextStyles.regularGrey,
+              paddingTop: 0.5,
               marginVertical: 14,
               marginHorizontal: 9,
             }}>