[INJIMOB-967]: selection of credential types (#1367)

* [INJIMOB-967]: selection of credential types Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJIMOB-967]: selection of credential types Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJIMOB-967]: selection of credential types Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJIMOB-967]: selection of credential types Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJIMOB-967] change literal and typeof param Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> * [INJIMOB-967] change literal in all languages Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com> --------- Signed-off-by: Vijay <94220135+vijay151096@users.noreply.github.com>
2026-01-09 13:38:01 -05:00 · 2024-04-08 19:17:05 +05:30
parent 56c11cf0c4
commit 13f6730502
29 changed files with 1233 additions and 1048 deletions
--- a/screens/Issuers/CredentialTypeSelectionScreen.tsx
+++ b/screens/Issuers/CredentialTypeSelectionScreen.tsx
@@ -0,0 +1,62 @@
+import {Modal} from '../../components/ui/Modal';
+import React from 'react';
+import {useIssuerScreenController} from './IssuerScreenController';
+import {FlatList, View} from 'react-native';
+import {CredentialType} from '../../components/openId4VCI/CredentialType';
+import {removeWhiteSpace} from '../../shared/commonUtil';
+import {HomeRouteProps} from '../../routes/routeTypes';
+import {RootRouteProps} from '../../routes';
+import {getDisplayObjectForCurrentLanguage} from '../../shared/openId4VCI/Utils';
+import {Theme} from '../../components/ui/styleUtils';
+import {Column, Text} from '../../components/ui';
+import {useTranslation} from 'react-i18next';
+
+export const CredentialTypeSelectionScreen: React.FC<
+  HomeRouteProps | RootRouteProps
+> = props => {
+  const controller = useIssuerScreenController(props);
+  const {t} = useTranslation('IssuersScreen');
+  const selectedIssuerDisplayObject = getDisplayObjectForCurrentLanguage(
+    controller.selectedIssuer.display,
+  );
+
+  return (
+    <Modal
+      testID="credentialTypeSelectionScreen"
+      isVisible={controller.isSelectingCredentialType}
+      arrowLeft={true}
+      headerTitle={selectedIssuerDisplayObject.name}
+      headerElevation={2}
+      onDismiss={() => controller.CANCEL()}>
+      <Column style={Theme.IssuersScreenStyles.issuerListOuterContainer}>
+        <Text
+          testID="credentialTypeSelectionScreenDescription"
+          style={{
+            ...Theme.TextStyles.regularGrey,
+            ...Theme.IssuersScreenStyles.issuersSearchSubText,
+          }}>
+          {t('credentialTypeDescription')}
+        </Text>
+        <View style={Theme.IssuersScreenStyles.issuersContainer}>
+          <FlatList
+            data={controller.credentialTypes}
+            numColumns={1}
+            keyExtractor={item => item.id}
+            renderItem={({item}) => {
+              return (
+                <CredentialType
+                  testID={removeWhiteSpace(item.id)}
+                  key={item.id}
+                  displayDetails={selectedIssuerDisplayObject}
+                  item={item}
+                  onPress={() => controller.SELECTED_CREDENTIAL_TYPE(item)}
+                  {...props}
+                />
+              );
+            }}
+          />
+        </View>
+      </Column>
+    </Modal>
+  );
+};
--- a/screens/Issuers/IssuerScreenController.tsx
+++ b/screens/Issuers/IssuerScreenController.tsx
@@ -1,7 +1,6 @@
 import {useSelector} from '@xstate/react';
 import {
-  IssuerScreenTabEvents,
-  IssuersMachine,
+  selectCredentialTypes,
  selectErrorMessageType,
  selectIsBiometricCancelled,
  selectIsDone,
@@ -9,13 +8,20 @@ import {
  selectIsIdle,
  selectIssuers,
  selectLoadingReason,
+  selectSelectedIssuer,
+  selectSelectingCredentialType,
  selectStoring,
  selectVerificationErrorMessage,
-} from '../../machines/issuersMachine';
+} from '../../machines/Issuers/IssuersSelectors';
 import {ActorRefFrom} from 'xstate';
 import {BOTTOM_TAB_ROUTES} from '../../routes/routesConstants';
 import {logState} from '../../shared/commonUtil';
 import {isAndroid} from '../../shared/constants';
+import {
+  IssuerScreenTabEvents,
+  IssuersMachine,
+} from '../../machines/Issuers/IssuersMachine';
+import {CredentialTypes} from '../../machines/VerifiableCredential/VCMetaMachine/vc';

 export function useIssuerScreenController({route, navigation}) {
  const service = route.params.service;
@@ -23,6 +29,7 @@ export function useIssuerScreenController({route, navigation}) {

  return {
    issuers: useSelector(service, selectIssuers),
+    selectedIssuer: useSelector(service, selectSelectedIssuer),
    errorMessageType: useSelector(service, selectErrorMessageType),
    isDownloadingCredentials: useSelector(service, selectIsDownloadCredentials),
    isBiometricsCancelled: useSelector(service, selectIsBiometricCancelled),
@@ -30,6 +37,11 @@ export function useIssuerScreenController({route, navigation}) {
    isIdle: useSelector(service, selectIsIdle),
    loadingReason: useSelector(service, selectLoadingReason),
    isStoring: useSelector(service, selectStoring),
+    isSelectingCredentialType: useSelector(
+      service,
+      selectSelectingCredentialType,
+    ),
+    credentialTypes: useSelector(service, selectCredentialTypes),
    verificationErrorMessage: useSelector(
      service,
      selectVerificationErrorMessage,
@@ -44,6 +56,8 @@ export function useIssuerScreenController({route, navigation}) {
      service.send(IssuerScreenTabEvents.DOWNLOAD_ID());
      navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'});
    },
+    SELECTED_CREDENTIAL_TYPE: (credType: CredentialTypes) =>
+      service.send(IssuerScreenTabEvents.SELECTED_CREDENTIAL_TYPE(credType)),
    RESET_VERIFY_ERROR: () => {
      service.send(IssuerScreenTabEvents.RESET_VERIFY_ERROR());
      if (isAndroid()) {
--- a/screens/Issuers/IssuersScreen.tsx
+++ b/screens/Issuers/IssuersScreen.tsx
@@ -28,6 +28,7 @@ import {SearchBar} from '../../components/ui/SearchBar';
 import {SvgImage} from '../../components/ui/svg';
 import {Icon} from 'react-native-elements';
 import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
+import {CredentialTypeSelectionScreen} from './CredentialTypeSelectionScreen';

 export const IssuersScreen: React.FC<
  HomeRouteProps | RootRouteProps
@@ -139,6 +140,9 @@ export const IssuersScreen: React.FC<
      setClearSearchIcon(false);
    }
  };
+  if (controller.isSelectingCredentialType) {
+    return <CredentialTypeSelectionScreen {...props} />;
+  }

  if (isVerificationFailed) {
    return (