Feat(Inji-502): Enable user to search issuer from the list in Add New card

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>

components/ui/themes/DefaultTheme.ts

@@ -1156,13 +1156,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,

components/ui/themes/PurpleTheme.ts

@@ -1158,13 +1158,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,
@@ -1273,7 +1298,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/
 

locales/ara.json

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

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.",
+    "addCardDescription": "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": {

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.",
+    "addCardDescription": "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": {

locales/hin.json

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

locales/kan.json

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

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.",
+		"addCardDescription": "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": {

locales/tam.json

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

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';
@@ -22,13 +22,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({
@@ -124,10 +129,27 @@ export const IssuersScreen: React.FC<
     );
   }
 
+  const filterIssuers = text => {
+    let filterdData = issuers;
+    if (text.length > 0) {
+      filterdData = issuers.filter(item => {
+        if (
+          getDisplayObjectForCurrentLanguage(item.display)
+            ?.name.toLowerCase()
+            .includes(text.toLowerCase())
+        ) {
+          return getDisplayObjectForCurrentLanguage(item.display);
+        }
+      }, []);
+    }
+    setFilteredSearchData(filterdData);
+    setSearch(text);
+  };
+
   return (
     <React.Fragment>
       {controller.issuers.length > 0 && (
-        <Column style={Theme.issuersScreenStyles.issuerListOuterContainer}>
+        <Column style={Theme.IssuersScreenStyles.issuerListOuterContainer}>
           <Text
             {...testIDProps('addCardDescription')}
             style={{
@@ -136,12 +158,30 @@ export const IssuersScreen: React.FC<
               marginVertical: 14,
               marginHorizontal: 9,
             }}>
-            {t('header')}
+            {t('addCardDescription')}
           </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={text => filterIssuers(text)}
+              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)}