chore(IT Wallet): [SIW-664] Format date in credentials claims list (#…

…5218)

## Short description
This PR adds the date formatting in the credentials claims list. 
The proposed function is applied to every claim and checks wether or not
the string representing the claim is a string in the format
`YYYY-DD-MM`. Then it formats it with the current locale in short
format. Otherwise it returns the input string untouched.
Trying to parse a date with `new Date()` is not enough as it converts to
date any number and that means some claims would be incorrectly
formatted as date.

The regex used to match the string is basically a mock because it
currently suits our needs with the only issued credential at this point.
It could be different in the future.

## List of changes proposed in this pull request
- Adds a function which formats dates when parsing the claims.

## How to test
Try to obtain a credential and check the preview screen. Each date
should be properly formatted according to the current locale in short
format.

Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it>

ts/features/it-wallet/components/ItwCredentialClaimsList.tsx

@@ -6,7 +6,7 @@ import * as t from "io-ts";
 import { pipe } from "fp-ts/lib/function";
 import * as E from "fp-ts/Either";
 import { IssuanceResultData } from "../store/reducers/new/itwIssuanceReducer";
-import { getClaimsFullLocale } from "../utils/locales";
+import { getClaimsFullLocale, localeDateFormatOrSame } from "../utils/locales";
 import I18n from "../../../i18n";
 import { CredentialCatalogDisplay } from "../utils/mocks";
 
@@ -44,6 +44,7 @@ const EvidenceDecoder = t.array(
  * The key of the object is used to get the value from the parsedCredential.
  * If the value is not available, the value is set to undefined which is then
  * wrapped in an Option.
+ * If the value is a date, it is formatted using the localeDateFormat function which otherwise returns the same value.
  * The value of the object is used to get the label from the credentialConfigurationSchema
  * by filtering the display array for the current locale.
  * If the label is not available for the current locale, the label is set to undefined which is then
@@ -59,7 +60,7 @@ const parseClaims = (
 ): ClaimList =>
   Object.entries(schema)
     .map(([key, elem]) => ({
-      value: O.fromNullable(parsedCredential[key]),
+      value: O.fromNullable(localeDateFormatOrSame(parsedCredential[key])),
       label: O.fromNullable(
         elem.display.filter(e => e.locale === getClaimsFullLocale())[0]?.name
       )

ts/features/it-wallet/utils/locales.ts

@@ -1,5 +1,9 @@
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/Option";
 import { Locales } from "../../../../locales/locales";
 import I18n from "../../../i18n";
+import { localeDateFormat } from "../../../utils/locale";
+import { dateFormatRegex } from "./mocks";
 
 /**
  * Enum for the claims locales.
@@ -26,3 +30,23 @@ const localeToClaimsLocales = new Map<Locales, ClaimsLocales>([
  */
 export const getClaimsFullLocale = (): ClaimsLocales =>
   localeToClaimsLocales.get(I18n.currentLocale()) ?? ClaimsLocales.it;
+
+/**
+ * Converts a string in the YYYY-MM-DD format to a locale date string.
+ * @param str - the date string to convert
+ * @param format - the format to use
+ * @returns the converted date string or the original string if the format is not YYYY-MM-DD
+ */
+export const localeDateFormatOrSame = (str: string) =>
+  pipe(
+    dateFormatRegex,
+    O.fromPredicate(p => p.test(str)),
+    O.fold(
+      () => str,
+      () =>
+        localeDateFormat(
+          new Date(str),
+          I18n.t("global.dateFormats.shortFormat")
+        )
+    )
+  );

ts/features/it-wallet/utils/mocks.ts

@@ -232,3 +232,8 @@ export const rpMock: RpMock = {
     }
   ]
 };
+
+/**
+ * Regex to validate the date format of a credential.
+ */
+export const dateFormatRegex = new RegExp(/^\d{4}-\d{2}-\d{2}$/);