chore: [IOCOM-1678] FIMS history single listItem error state (#6136)

## Short description addition of said error state when the service details' fetch fails. <img width="250" alt="Screenshot 2024-08-30 at 12 38 40" src="https://github.com/user-attachments/assets/d0d1847b-c867-421f-8947-bfedae4302f5"> ## List of changes proposed in this pull request - required I18n entries - addition of said component and its rendering logic ## How to test update the dev server's code to return the following line in `src/routers/service.ts, line 58/59` ```ts res.status(Math.random() > 0.3 ? 200 : 404).json(service) ``` this way, as long as you have a big enough FIMS history list (dev-server, config.ts, I recommend something around 50), you should be able to see some failed fetches. make sure everything works as intended and follows the given design.
pagopa · Aug 30, 2024 · 8c410f2 · 8c410f2
1 parent cfc9874
commit 8c410f2
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} />