Merge pull request #976 from tw-mosip/inji-502-enable-user-to-search-…

…issuer-from-the-list Feat(Inji-502): Enable user to search issuer from the list in Add New card
mosip · Nov 1, 2023 · 61ec52a · 61ec52a
2 parents 3d9d829 + 2fd4cec
commit 61ec52a
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 25 deletions.
diff --git a/components/openId4VCI/Issuer.tsx b/components/openId4VCI/Issuer.tsx
@@ -19,27 +19,27 @@ export const Issuer: React.FC<IssuerProps> = (props: IssuerProps) => {
       style={({pressed}) =>
         pressed
           ? [
-              Theme.issuersScreenStyles.issuerBoxContainerPressed,
+              Theme.IssuersScreenStyles.issuerBoxContainerPressed,
               Theme.Styles.boxShadow,
             ]
           : [
-              Theme.issuersScreenStyles.issuerBoxContainer,
+              Theme.IssuersScreenStyles.issuerBoxContainer,
               Theme.Styles.boxShadow,
             ]
       }>
       <Image
         {...testIDProps(`issuerIcon-${props.testID}`)}
-        style={Theme.issuersScreenStyles.issuerIcon}
+        style={Theme.IssuersScreenStyles.issuerIcon}
         source={getIssuerLogo()}
       />
       <Text
         testID={`issuerHeading-${props.testID}`}
-        style={Theme.issuersScreenStyles.issuerHeading}>
+        style={Theme.IssuersScreenStyles.issuerHeading}>
         {t('itemHeading', {issuer: props.displayName})}
       </Text>
       <Text
         testID={`issuerDescription-${props.testID}`}
-        style={Theme.issuersScreenStyles.issuerDescription}>
+        style={Theme.IssuersScreenStyles.issuerDescription}>
         {t('itemSubHeading')}
       </Text>
     </Pressable>

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -1181,13 +1181,38 @@ export const DefaultTheme = {
       backgroundColor: Colors.Transparent,
     },
   }),
-  issuersScreenStyles: StyleSheet.create({
+  IssuersScreenStyles: StyleSheet.create({
+    issuersSearchBar: {
+      borderWidth: 1,
+      borderColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.84,
+      paddingLeft: 12,
+      borderLeftWidth: 0,
+      borderTopRightRadius: 9,
+      borderBottomRightRadius: 9,
+    },
+    searchIcon: {
+      justifyContent: 'center',
+      paddingLeft: 15,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.1,
+      borderColor: Colors.Gray50,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderLeftWidth: 1,
+      borderTopLeftRadius: 9,
+      borderBottomLeftRadius: 9,
+    },
     issuerListOuterContainer: {
       padding: 10,
       flex: 1,
       backgroundColor: Colors.White,
     },
-    issuersContainer: {marginHorizontal: 3},
+    issuersContainer: {
+      marginHorizontal: 3,
+      marginTop: 5,
+    },
     issuerBoxContainer: {
       margin: 5,
       flex: 1,

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -1184,13 +1184,38 @@ export const PurpleTheme = {
       backgroundColor: Colors.Transparent,
     },
   }),
-  issuersScreenStyles: StyleSheet.create({
+  IssuersScreenStyles: StyleSheet.create({
+    issuersSearchBar: {
+      borderWidth: 1,
+      borderColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.84,
+      paddingLeft: 12,
+      borderLeftWidth: 0,
+      borderTopRightRadius: 9,
+      borderBottomRightRadius: 9,
+    },
+    searchIcon: {
+      justifyContent: 'center',
+      backgroundColor: Colors.Gray50,
+      height: Dimensions.get('window').height * 0.055,
+      width: Dimensions.get('window').width * 0.1,
+      borderColor: Colors.Gray50,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderLeftWidth: 1,
+      borderTopLeftRadius: 9,
+      borderBottomLeftRadius: 9,
+    },
     issuerListOuterContainer: {
       padding: 10,
       flex: 1,
       backgroundColor: Colors.White,
     },
-    issuersContainer: {marginHorizontal: 3},
+    issuersContainer: {
+      marginHorizontal: 3,
+      marginVertical: 5,
+    },
     issuerBoxContainer: {
       margin: 5,
       flex: 1,
@@ -1316,7 +1341,6 @@ export const PurpleTheme = {
   protectPrivacy: require('../../../assets/intro-unlock-method.png'),
   NoInternetConnection: require('../../../assets/no-internet-connection.png'),
   SomethingWentWrong: require('../../../assets/something-went-wrong.png'),
-
   elevation(level: ElevationLevel): ViewStyle {
     // https://ethercreative.github.io/react-native-shadow-generator/
 

diff --git a/locales/ara.json b/locales/ara.json
@@ -159,7 +159,8 @@
   },
   "IssuersScreen": {
     "title": "أضف بطاقة جديدة",
-    "header": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.",
+    "description": "يرجى اختيار جهة الإصدار المفضلة لديك من الخيارات أدناه لإضافة بطاقة جديدة.",
+    "searchByIssuersName": "البحث حسب اسم المصدر",
     "itemHeading": "التنزيل عبر {{issuer}}",
     "itemSubHeading": "أدخل رقم الهوية الوطنية الخاص بك لتنزيل بطاقتك.",
     "loaders": {

diff --git a/locales/en.json b/locales/en.json
@@ -160,7 +160,8 @@
   },
   "IssuersScreen": {
     "title": "Add new card",
-    "header": "Please choose your preferred issuer from the options below to add a new card.",
+    "description": "Please choose your preferred issuer from the options below to add a new card.",
+    "searchByIssuersName": "Search by Issuer’s name",
     "itemHeading": "Download via {{issuer}}",
     "itemSubHeading": "Enter your national ID to download your card.",
     "loaders": {

diff --git a/locales/fil.json b/locales/fil.json
@@ -158,7 +158,8 @@
   },
   "IssuersScreen": {
     "title": "Magdagdag ng bagong card",
-    "header": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.",
+    "description": "Mangyaring piliin ang iyong gustong tagabigay mula sa mga opsyon sa ibaba upang magdagdag ng bagong card.",
+    "searchByIssuersName": "Maghanap ayon sa pangalan ng Nag-isyu",
     "itemHeading": "I-download sa pamamagitan ng {{issuer}}",
     "itemSubHeading": "Ilagay ang iyong national ID para i-download ang iyong card.",
     "loaders": {

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

diff --git a/locales/kan.json b/locales/kan.json
@@ -155,7 +155,8 @@
   },
   "IssuersScreen": {
     "title": "ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಿ",
-    "header": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.",
+    "description": "ದಯವಿಟ್ಟು ಹೊಸ ಕಾರ್ಡ್ ಸೇರಿಸಲು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳಿಂದ ನಿಮ್ಮ ಆದ್ಯತೆ ನೀಡುವವರನ್ನು ಆಯ್ಕೆಮಾಡಿ.",
+    "searchByIssuersName": "ವಿತರಕರ ಹೆಸರಿನ ಮೂಲಕ ಹುಡುಕಿ",
     "itemHeading": "{{issuer}} ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
     "itemSubHeading": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ರಾಷ್ಟ್ರೀಯ ID ಅನ್ನು ನಮೂದಿಸಿ.",
     "loaders": {

diff --git a/locales/spa.json b/locales/spa.json
@@ -274,7 +274,8 @@
 	},
   "IssuersScreen": {
 		"title": "Agregar nueva tarjeta",
-		"header": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.",
+		"description": "Elija su emisor preferido entre las opciones siguientes para agregar una nueva tarjeta.",
+    "searchByIssuersName": "Buscar por nombre del emisor",
 		"itemHeading": "Descargar vía {{issuer}}",
     "itemSubHeading": "Introduce tu DNI para descargar tu tarjeta.",
     "loaders": {

diff --git a/locales/tam.json b/locales/tam.json
@@ -155,7 +155,8 @@
   },
   "IssuersScreen": {
     "title": "புதிய அட்டையைச் சேர்க்கவும்",
-    "header": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.",
+    "description": "புதிய கார்டைச் சேர்க்க, கீழே உள்ள விருப்பங்களிலிருந்து உங்களுக்கு விருப்பமான வழங்குபவரைத் தேர்ந்தெடுக்கவும்.",
+    "searchByIssuersName": "வழங்குபவரின் பெயரால் தேடவும்",
     "itemHeading": "{{issuer}} மூலம் பதிவிறக்கவும்",
     "itemSubHeading": "உங்கள் கார்டைப் பதிவிறக்க உங்கள் தேசிய ஐடியை உள்ளிடவும்.",
     "loaders": {

diff --git a/screens/Issuers/IssuersScreen.tsx b/screens/Issuers/IssuersScreen.tsx
@@ -1,10 +1,10 @@
-import React, {useLayoutEffect} from 'react';
+import React, {useLayoutEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Image, View} from 'react-native';
+import {FlatList, Image, View, TextInput, ScrollView} from 'react-native';
 import {Issuer} from '../../components/openId4VCI/Issuer';
 import {Error} from '../../components/ui/Error';
 import {Header} from '../../components/ui/Header';
-import {Column, Text} from '../../components/ui';
+import {Column, Row, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
 import {RootRouteProps} from '../../routes';
 import {HomeRouteProps} from '../../routes/main';
@@ -23,13 +23,18 @@ import {
   sendInteractEvent,
   sendStartEvent,
 } from '../../shared/telemetry/TelemetryUtils';
+import {Icon} from 'react-native-elements';
 
 export const IssuersScreen: React.FC<
   HomeRouteProps | RootRouteProps
 > = props => {
   const controller = useIssuerScreenController(props);
   const {t} = useTranslation('IssuersScreen');
 
+  const issuers = controller.issuers;
+  let [filteredSearchData, setFilteredSearchData] = useState(issuers);
+  const [search, setSearch] = useState('');
+
   useLayoutEffect(() => {
     if (controller.loadingReason || controller.errorMessageType) {
       props.navigation.setOptions({
@@ -131,24 +136,56 @@ export const IssuersScreen: React.FC<
     );
   }
 
+  const filterIssuers = (searchText: string) => {
+    let filterdData = issuers.filter(item => {
+      if (
+        getDisplayObjectForCurrentLanguage(item.display)
+          ?.name.toLowerCase()
+          .includes(searchText.toLowerCase())
+      ) {
+        return getDisplayObjectForCurrentLanguage(item.display);
+      }
+    });
+    setFilteredSearchData(filterdData);
+    setSearch(searchText);
+  };
+
   return (
     <React.Fragment>
       {controller.issuers.length > 0 && (
-        <Column style={Theme.issuersScreenStyles.issuerListOuterContainer}>
+        <Column style={Theme.IssuersScreenStyles.issuerListOuterContainer}>
           <Text
-            {...testIDProps('addCardDescription')}
+            {...testIDProps('issuersScreenDescription')}
             style={{
               ...Theme.TextStyles.regularGrey,
               paddingTop: 0.5,
               marginVertical: 14,
               marginHorizontal: 9,
             }}>
-            {t('header')}
+            {t('description')}
           </Text>
-          <View style={Theme.issuersScreenStyles.issuersContainer}>
+          <Row margin="3">
+            <Icon
+              testID="searchIssuerIcon"
+              name="search"
+              color={Theme.Colors.GrayIcon}
+              size={27}
+              style={Theme.IssuersScreenStyles.searchIcon}
+            />
+            <TextInput
+              testID="issuerSearchBar"
+              style={Theme.IssuersScreenStyles.issuersSearchBar}
+              placeholder={t('searchByIssuersName')}
+              value={search}
+              onChangeText={searchText => filterIssuers(searchText)}
+              onLayout={() => filterIssuers('')}
+            />
+          </Row>
+
+          <View style={Theme.IssuersScreenStyles.issuersContainer}>
             {controller.issuers.length > 0 && (
               <FlatList
-                data={controller.issuers}
+                data={filteredSearchData}
                 renderItem={({item}) => (
                   <Issuer
                     testID={removeWhiteSpace(item.credential_issuer)}