feat(INJI-503): add configurable issuer details (#1040)

* feat(INJI-503): add configurable issuer title & description Signed-off-by: Kiruthika Jeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com> * refactor(INJI-503): extract search bar component Signed-off-by: Kiruthika Jeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com> * refactor(INJI-503): modify display data type Signed-off-by: Kiruthika Jeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com> --------- Signed-off-by: Kiruthika Jeyashankar <81218987+KiruthikaJeyashankar@users.noreply.github.com>
2026-01-10 05:58:01 -05:00 · 2023-11-30 15:49:25 +05:30
parent 74b4d62a34
commit e27c6a2a4b
7 changed files with 107 additions and 83 deletions
--- a/.talismanrc
+++ b/.talismanrc
@@ -42,8 +42,7 @@ fileignoreconfig:
 - filename: shared/storage.ts
  checksum: c8d874aa373bdf526bf59192139822f56915e702ef673bac4e0d7549b0fea3d0
 - filename: screens/Issuers/IssuersScreen.tsx
-  checksum: bc12c43ccc27ac04e5763fa6a6ed3cee63e4362ba5666c160b5e53269de924ab
-  checksum: 9a61cd59a3718adf1f14faf3024fec66a3295ef373878a878a28e5cb1287afaa
+  checksum: 9c53e3770dbefe26e0de67ee4b7d5cc9c52d9823cbb136a1a5104dcb0a101071
 - filename: ios/Podfile.lock
  checksum: edad9c2d11b0b3ed819cb0dcbfaf0515d31adb8116223c07f7b7b79e6689fe96
 - filename: screens/Home/IntroSlidersScreen.tsx
--- a/components/openId4VCI/Issuer.tsx
+++ b/components/openId4VCI/Issuer.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import {Image, Pressable} from 'react-native';
 import {Theme} from '../ui/styleUtils';
-import {useTranslation} from 'react-i18next';
 import testIDProps from '../../shared/commonUtil';
 import {Text} from '../ui';
+import {displayType} from '../../machines/issuersMachine';

 export const Issuer: React.FC<IssuerProps> = (props: IssuerProps) => {
-  const {t} = useTranslation('IssuersScreen');
-
  function getIssuerLogo() {
-    return {uri: props.logoUrl};
+    return {uri: props.displayDetails.logo.url};
  }

  return (
@@ -30,26 +28,25 @@ export const Issuer: React.FC<IssuerProps> = (props: IssuerProps) => {
      <Image
        {...testIDProps(`issuerIcon-${props.testID}`)}
        style={Theme.IssuersScreenStyles.issuerIcon}
+        alt={props.displayDetails.logo.alt_text}
        source={getIssuerLogo()}
      />
      <Text
        testID={`issuerHeading-${props.testID}`}
        style={Theme.IssuersScreenStyles.issuerHeading}>
-        {t('itemHeading', {issuer: props.displayName})}
+        {props.displayDetails.title}
      </Text>
      <Text
        testID={`issuerDescription-${props.testID}`}
        style={Theme.IssuersScreenStyles.issuerDescription}>
-        {t('itemSubHeading')}
+        {props.displayDetails.description}
      </Text>
    </Pressable>
  );
 };

 interface IssuerProps {
-  id: string;
-  displayName: string;
-  logoUrl: string;
+  displayDetails: displayType;
  onPress: () => void;
  testID: string;
 }
--- a/components/ui/SearchBar.tsx
+++ b/components/ui/SearchBar.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {TextInput} from 'react-native';
+import {Icon} from 'react-native-elements';
+import {Row} from './Layout';
+import {Theme} from './styleUtils';
+
+export const SearchBar = (props: SearchBarProps) => {
+  return (
+    <Row margin="3">
+      <Icon
+        testID={props.searchIconTestID}
+        name="search"
+        color={Theme.Colors.GrayIcon}
+        size={27}
+        style={Theme.SearchBarStyles.searchIcon}
+      />
+      <TextInput
+        testID={props.searchBarTestID}
+        style={Theme.SearchBarStyles.searchBar}
+        placeholder={props.placeholder}
+        value={props.search}
+        onChangeText={searchText => props.onChangeText(searchText)}
+        onLayout={props.onLayout}
+      />
+    </Row>
+  );
+};
+
+interface SearchBarProps {
+  searchIconTestID: string;
+  searchBarTestID: string;
+  search: string;
+  placeholder: string;
+  onChangeText: (searchText: string) => void;
+  onLayout: () => void;
+}
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -774,6 +774,30 @@ export const DefaultTheme = {
      flexDirection: 'column',
    },
  }),
+  SearchBarStyles: StyleSheet.create({
+    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,
+    },
+    searchBar: {
+      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,
+    },
+  }),
  ButtonStyles: StyleSheet.create({
    fill: {
      flex: 1,
@@ -1184,28 +1208,6 @@ export const DefaultTheme = {
    },
  }),
  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,
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -778,6 +778,30 @@ export const PurpleTheme = {
      flexDirection: 'column',
    },
  }),
+  SearchBarStyles: StyleSheet.create({
+    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,
+    },
+    searchBar: {
+      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,
+    },
+  }),
  ButtonStyles: StyleSheet.create({
    fill: {
      flex: 1,
@@ -1188,28 +1212,6 @@ export const PurpleTheme = {
    },
  }),
  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,
--- a/machines/issuersMachine.ts
+++ b/machines/issuersMachine.ts
@@ -710,6 +710,8 @@ export interface displayType {
  name: string;
  logo: logoType;
  language: string;
+  title: string;
+  description: string;
 }
 export interface issuerType {
  credential_issuer: string;
--- a/screens/Issuers/IssuersScreen.tsx
+++ b/screens/Issuers/IssuersScreen.tsx
@@ -1,6 +1,6 @@
 import React, {useLayoutEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {FlatList, Image, TextInput, 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';
@@ -23,8 +23,8 @@ import {
  sendStartEvent,
 } from '../../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
-import {Icon} from 'react-native-elements';
 import {MessageOverlay} from '../../components/MessageOverlay';
+import {SearchBar} from '../../components/ui/SearchBar';

 export const IssuersScreen: React.FC<
  HomeRouteProps | RootRouteProps
@@ -190,23 +190,14 @@ export const IssuersScreen: React.FC<
            }}>
            {t('description')}
          </Text>
-          <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>
+          <SearchBar
+            searchIconTestID="searchIssuerIcon"
+            searchBarTestID="issuerSearchBar"
+            search={search}
+            placeholder={t('searchByIssuersName')}
+            onChangeText={filterIssuers}
+            onLayout={() => filterIssuers('')}
+          />

          <View style={Theme.IssuersScreenStyles.issuersContainer}>
            {controller.issuers.length > 0 && (
@@ -216,14 +207,9 @@ export const IssuersScreen: React.FC<
                  <Issuer
                    testID={removeWhiteSpace(item.credential_issuer)}
                    key={item.credential_issuer}
-                    id={item.credential_issuer}
-                    displayName={
-                      getDisplayObjectForCurrentLanguage(item.display)?.name
-                    }
-                    logoUrl={
-                      getDisplayObjectForCurrentLanguage(item.display)?.logo
-                        ?.url
-                    }
+                    displayDetails={getDisplayObjectForCurrentLanguage(
+                      item.display,
+                    )}
                    onPress={() =>
                      onPressHandler(item.credential_issuer, item.protocol)
                    }
@@ -231,7 +217,7 @@ export const IssuersScreen: React.FC<
                  />
                )}
                numColumns={2}
-                keyExtractor={item => item.id}
+                keyExtractor={item => item.credential_issuer}
              />
            )}
          </View>