Merge branch 'master' into IOPID-2108-a11y-first-onboarding-email-ins…

…ertion
pagopa · Aug 30, 2024 · 90787fd · 90787fd
2 parents 989bc33 + 8c410f2
commit 90787fd
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3985,6 +3985,7 @@ permissionRequest:
 FIMS:
   history:
     errorStates:
+      dataUnavailable: "Dati non disponibili"
       ko:
         title: "C’è un problema temporaneo"
         body: "Il caricamento della lista degli accessi non è riuscito"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3985,6 +3985,7 @@ permissionRequest:
 FIMS:
   history:
     errorStates:
+      dataUnavailable: "Dati non disponibili"
       ko:
         title: "C’è un problema temporaneo"
         body: "Il caricamento della lista degli accessi non è riuscito"

diff --git a/ts/features/fims/history/components/FimsHistoryListItem.tsx b/ts/features/fims/history/components/FimsHistoryListItem.tsx
@@ -1,18 +1,37 @@
-import { ListItemNav } from "@pagopa/io-app-design-system";
+import {
+  Caption,
+  HSpacer,
+  Icon,
+  LabelSmall,
+  ListItemNav,
+  PressableListItemBase,
+  useIOTheme,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { constNull } from "fp-ts/lib/function";
 import * as React from "react";
+import { View } from "react-native";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
 import { Consent } from "../../../../../definitions/fims/Consent";
+import I18n from "../../../../i18n";
 import { dateToAccessibilityReadableFormat } from "../../../../utils/accessibility";
 import { potFoldWithDefault } from "../../../../utils/pot";
 import { useAutoFetchingServiceByIdPot } from "../../common/utils/hooks";
 import { LoadingFimsHistoryListItem } from "./FimsHistoryLoaders";
 
+// ------- TYPES
+
 type SuccessListItemProps = {
   serviceData: ServicePublic;
   consent: Consent;
 };
+type BaseHistoryListItemProps = {
+  item: Consent;
+};
+
+// --------- LISTITEMS
+
 const SuccessListItem = ({ serviceData, consent }: SuccessListItemProps) => (
   <ListItemNav
     onPress={constNull}
@@ -24,17 +43,49 @@ const SuccessListItem = ({ serviceData, consent }: SuccessListItemProps) => (
     hideChevron
   />
 );
-type HistoryListItemProps = {
-  item: Consent;
+
+const FailureListItem = ({ item }: BaseHistoryListItemProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <PressableListItemBase>
+      <View
+        style={{
+          paddingVertical: 15
+        }}
+      >
+        <View
+          style={{
+            alignSelf: "flex-start",
+            flexDirection: "row"
+          }}
+        >
+          <Icon name="calendar" size={16} color="grey-300" />
+          <HSpacer size={4} />
+          <Caption color={theme["textBody-tertiary"]}>
+            {dateToAccessibilityReadableFormat(item.timestamp)}
+          </Caption>
+        </View>
+        <VSpacer size={4} />
+        <LabelSmall weight="Semibold" color="error-600">
+          {I18n.t("FIMS.history.errorStates.dataUnavailable")}
+        </LabelSmall>
+      </View>
+      <Icon name="errorFilled" color="error-600" />
+    </PressableListItemBase>
+  );
 };
 
-export const FimsHistoryListItem = ({ item }: HistoryListItemProps) => {
+// ------- RENDERER
+
+export const FimsHistoryListItem = ({ item }: BaseHistoryListItemProps) => {
   const { serviceData } = useAutoFetchingServiceByIdPot(
     item.service_id as ServiceId
   );
 
   return potFoldWithDefault(serviceData, {
     default: LoadingFimsHistoryListItem,
+    noneError: _ => <FailureListItem item={item} />,
     some: data => <SuccessListItem serviceData={data} consent={item} />,
     someError: data => <SuccessListItem serviceData={data} consent={item} />,
     someLoading: data => <SuccessListItem serviceData={data} consent={item} />