feat: [EUDIW-205] Implement Wallet Home

locales/en/wallet.json

@@ -1,4 +1,11 @@
 {
+  "credentials": {
+    "names": {
+      "mdl": "Driving License",
+      "pid": "Digital Identity",
+      "unknown": "Unknown"
+    }
+  },
   "activationBanner": {
     "title": "Your digital documents always with you!",
     "description": "Activate the Wallet to keep your digital identity and personal documents on your device.",

ts/features/wallet/store/credentials.ts

@@ -82,6 +82,9 @@ export const credentialsReducer = persistReducer(
   credentialsSlice.reducer
 );
 
+export const credentialsSelector = (state: RootState) =>
+  state.wallet.credentials;
+
 /**
  * Exports the actions for the credentials slice.
  */

ts/features/wallet/utils/credentials.ts

@@ -0,0 +1,19 @@
+import i18next from 'i18next';
+
+type CredentialsKeys = 'DRIVING_LICENSE' | 'PID';
+
+export const wellKnownCredential: Record<CredentialsKeys, string> = {
+  DRIVING_LICENSE: 'MDL',
+  PID: 'PersonIdentificationData'
+};
+
+export const getCredentialNameByType = (type: string): string => {
+  switch (type) {
+    case wellKnownCredential.DRIVING_LICENSE:
+      return i18next.t(['wallet:credentials.names.mdl', 'Credential']);
+    case wellKnownCredential.PID:
+      return i18next.t(['wallet:credentials.names.pid', 'Credential']);
+    default:
+      return i18next.t(['wallet:credentials.names.unknown', 'Credential']);
+  }
+};

ts/features/wallet/utils/credentialsImage.ts

@@ -0,0 +1,15 @@
+import {ImageSourcePropType} from 'react-native/types';
+
+type CredentialAsset = {
+  asset: ImageSourcePropType;
+  textColor: string;
+};
+
+const credentialsImage: Record<string, CredentialAsset> = {
+  PersonIdentificationData: {
+    asset: require('../../../../assets/credentials/pid.png'),
+    textColor: '#000'
+  }
+};
+
+export default credentialsImage;

ts/i18n/types/resources.d.ts

@@ -162,6 +162,13 @@ interface Resources {
     };
   };
   wallet: {
+    credentials: {
+      names: {
+        mdl: 'Driving License';
+        pid: 'Digital Identity';
+        unknown: 'Unknown';
+      };
+    };
     activationBanner: {
       title: 'Your digital documents always with you!';
       description: 'Activate the Wallet to keep your digital identity and personal documents on your device.';

ts/screens/WalletHome.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import {View} from 'react-native';
-import {IOStyles, HeaderFirstLevel} from '@pagopa/io-app-design-system';
+import {FlatList, ImageBackground, StyleSheet, Text, View} from 'react-native';
+import {
+  IOStyles,
+  HeaderFirstLevel,
+  IOColors,
+  makeFontStyleObject
+} from '@pagopa/io-app-design-system';
 import {useTranslation} from 'react-i18next';
 import {useNavigation} from '@react-navigation/native';
 import {useAppSelector} from '../store';
 import {lifecycleIsOperationalSelector} from '../features/wallet/store/lifecycle';
 import {ActivationBanner} from '../features/wallet/components/ActivationBanner';
+import {credentialsSelector} from '../features/wallet/store/credentials';
+import {getCredentialNameByType} from '../features/wallet/utils/credentials';
+import credentialsImage from '../features/wallet/utils/credentialsImage';
 
 /**
  * Wallet home to be rendered as the first page in the tab navigator.
@@ -16,6 +24,7 @@ const WalletHome = () => {
   const {t} = useTranslation(['wallet', 'global']);
   const navigation = useNavigation();
   const isWalletOperational = useAppSelector(lifecycleIsOperationalSelector);
+  const credentials = useAppSelector(credentialsSelector);
 
   return (
     <>
@@ -39,11 +48,102 @@ const WalletHome = () => {
             />
           </View>
         ) : (
-          <></> // Needs to
+          <>
+            <FlatList
+              data={credentials.credentials}
+              renderItem={({item, index}) => {
+                if (index !== credentials.credentials.length - 1) {
+                  return (
+                    <View style={styles.previewContainer}>
+                      <View style={styles.cardContainer}>
+                        <View style={styles.card}>
+                          <View style={styles.border} />
+                          <View style={styles.header}>
+                            <Text style={styles.label}>
+                              {`${getCredentialNameByType(
+                                item.credentialType
+                              )}`}
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  );
+                } else {
+                  return (
+                    <View style={styles.cardContainer}>
+                      <ImageBackground
+                        source={credentialsImage[item.credentialType].asset}
+                        style={styles.card}>
+                        <View style={styles.border} />
+                        <View style={styles.header}>
+                          <Text
+                            style={[
+                              styles.label,
+                              {
+                                color:
+                                  credentialsImage[item.credentialType]
+                                    .textColor
+                              }
+                            ]}>
+                            {`${getCredentialNameByType(
+                              item.credentialType
+                            ).toUpperCase()}`}
+                          </Text>
+                        </View>
+                      </ImageBackground>
+                    </View>
+                  );
+                }
+              }}
+            />
+          </>
         )}
       </View>
     </>
   );
 };
 
+const styles = StyleSheet.create({
+  previewContainer: {
+    aspectRatio: 9 / 2,
+    overflow: 'hidden'
+  },
+  cardContainer: {
+    aspectRatio: 16 / 10,
+    borderRadius: 8,
+    overflow: 'hidden'
+  },
+  card: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: IOColors['grey-100']
+  },
+  border: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: IOColors['grey-50']
+  },
+  label: {
+    flex: 1,
+    ...makeFontStyleObject(16, 'TitilliumSansPro', 20, 'Bold')
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 14
+  }
+});
+
 export default WalletHome;