Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 30, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a48dc51
feat(INJI-503): add configurable issuer title & description
KiruthikaJeyashankar Nov 29, 2023
99226e0
refactor(INJI-503): extract search bar component
KiruthikaJeyashankar Nov 29, 2023
999b74d
refactor(INJI-503): modify display data type
KiruthikaJeyashankar Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .talismanrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 6 additions & 9 deletions components/openId4VCI/Issuer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we take care of optional in case it happens in future when we fetch data direct from well-known env not from controlled env.
prop. displayDetails?.logo?.url

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make logo as optional when we bring in well-know change?
Because As of now , this type matches our current structure + when we bring in well-know change we should be changing some props to say if wellKnownLogo available take it or else do something. so can we keep it this way for now @swatigoel ?

}

return (
Expand All @@ -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;
}
36 changes: 36 additions & 0 deletions components/ui/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
46 changes: 24 additions & 22 deletions components/ui/themes/DefaultTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
46 changes: 24 additions & 22 deletions components/ui/themes/PurpleTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions machines/issuersMachine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -710,6 +710,8 @@ export interface displayType {
name: string;
logo: logoType;
language: string;
title: string;
description: string;
}
export interface issuerType {
credential_issuer: string;
Expand Down
42 changes: 14 additions & 28 deletions screens/Issuers/IssuersScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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 && (
Expand All @@ -216,22 +207,17 @@ 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)
}
{...props}
/>
)}
numColumns={2}
keyExtractor={item => item.id}
keyExtractor={item => item.credential_issuer}
/>
)}
</View>
Expand Down