[INJIWEB-1429] show the credential types of an issuer only if issuer …

…wellknown has language support for selected or default language

Signed-off-by: PuBHARGAVI <[email protected]>

inji-web/src/components/Credentials/CredentialList.tsx

@@ -9,15 +9,54 @@ import {SpinningLoader} from "../Common/SpinningLoader";
 import {CredentialListProps} from "../../types/components";
 import {HeaderTile} from "../Common/HeaderTile";
 import {DownloadResult} from "../Redirection/DownloadResult";
-import {IssuerObject} from "../../types/data";
+import {CredentialConfigurationObject} from "../../types/data";
+import {defaultLanguage} from "../../utils/i18n";
 
 export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
     const [errorObj, setErrorObj] = useState({
         code: "",
         message: ""
     });
-
+    const selectedLanguage = useSelector(
+        (state: RootState) => state.common.language
+    );
+
     const credentials = useSelector((state: RootState) => state.credentials);
+
+    const filterCredentialsBySelectedOrDefaultLanguage = () => {
+        const missingLanguageSupport: string[] = [];
+
+        const filteredCredentialsList = Object.entries(
+            credentials?.filtered_credentials
+                ?.credential_configurations_supported || {}
+        ).filter(([credentialType, credential]) => {
+            const {display, credential_definition} =
+                credential as CredentialConfigurationObject; // Destructure
+            const hasMatchingDisplay = display?.some(
+                ({locale}) =>
+                    locale === selectedLanguage || locale === defaultLanguage
+            );
+
+            if (!hasMatchingDisplay) {
+                missingLanguageSupport.push(credential_definition.type[1]);
+            }
+
+            return hasMatchingDisplay;
+        });
+
+        if (missingLanguageSupport.length) {
+            console.error(
+                `Language support missing for these credential types of issuer: ${missingLanguageSupport.join(
+                    ", "
+                )}`
+            );
+        }
+        return Object.fromEntries(filteredCredentialsList);
+    };
+
+    const filteredCredentialsWithLangSupport =
+        filterCredentialsBySelectedOrDefaultLanguage();
+
     const {t} = useTranslation("CredentialsPage");
 
     if (state === RequestStatus.LOADING) {
@@ -26,6 +65,7 @@ export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
 
     if (
         state === RequestStatus.ERROR ||
+        Object.keys(filteredCredentialsWithLangSupport).length == 0 ||
         !credentials?.filtered_credentials
             ?.credential_configurations_supported ||
         (credentials?.filtered_credentials
@@ -61,21 +101,22 @@ export const CredentialList: React.FC<CredentialListProps> = ({state}) => {
                 subContent={t("containerSubHeading")}
             />
             <div className="flex flex-wrap gap-3 p-4 pb-20 justify-start">
-                {credentials?.filtered_credentials &&
-                    Object.keys(
-                        credentials?.filtered_credentials
-                            ?.credential_configurations_supported
-                    ).map((credentialId: string, index: number) => (
+                {Object.keys(filteredCredentialsWithLangSupport).map(
+                    (credentialId: string, index: number) => (
                         <Credential
                             credentialId={credentialId}
                             credentialWellknown={
                                 credentials?.filtered_credentials
+                                    ?.credential_configurations_supported[
+                                    credentialId
+                                ]
                             }
                             key={index}
                             index={index}
                             setErrorObj={setErrorObj}
                         />
-                    ))}
+                    )
+                )}
             </div>
         </>
     );

inji-web/src/components/Credentials/Crendential.tsx

@@ -20,13 +20,13 @@ export const Credential: React.FC<CredentialProps> = (props) => {
     const authServerWellknownResponse: AuthServerWellknownObject = useSelector(
         (state: RootState) => state.credentials.credentials.authorization
     );
-    const selectedIssuer = useSelector((state: RootState) => state.issuers.selected_issuer);
+    const selectedIssuer = useSelector(
+        (state: RootState) => state.issuers.selected_issuer
+    );
     const [credentialExpiry, setCredentialExpiry] = useState<boolean>(false);
     const language = useSelector((state: RootState) => state.common.language);
     const filteredCredentialConfig: CredentialConfigurationObject =
-        props.credentialWellknown.credential_configurations_supported[
-            props.credentialId
-        ];
+        props.credentialWellknown;
     const credentialObject = getObjectForCurrentLanguage(
         filteredCredentialConfig.display,
         language
@@ -98,8 +98,7 @@ export const Credential: React.FC<CredentialProps> = (props) => {
                 url={credentialObject.logo.url}
                 title={credentialObject.name}
                 onClick={() => {
-                    selectedIssuer.qr_code_type ===
-                    "OnlineSharing"
+                    selectedIssuer.qr_code_type === "OnlineSharing"
                         ? setCredentialExpiry(true)
                         : onSuccess(-1);
                 }}

inji-web/src/types/components.d.ts

@@ -26,10 +26,10 @@ interface ErrorObj {
 
 export type CredentialProps = {
     credentialId: string;
-    credentialWellknown: IssuerWellknownObject;
+    credentialWellknown: CredentialConfigurationObject;
     index: number;
     setErrorObj: Dispatch<SetStateAction<ErrorObj>>;
-}
+};
 
 export type HelpAccordionItemProps = {
     id: number;