feat: [IOCOM-840] Preconditions bottom sheet, new DS

ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap

@@ -43,48 +43,6 @@ Object {
   "calendarEvents": Object {
     "byMessageId": Object {},
   },
-  "messages": Object {
-    "allPaginated": Object {
-      "archive": Object {
-        "data": Object {
-          "kind": "PotNone",
-        },
-        "lastRequest": Object {
-          "_tag": "None",
-        },
-      },
-      "inbox": Object {
-        "data": Object {
-          "kind": "PotNone",
-        },
-        "lastRequest": Object {
-          "_tag": "None",
-        },
-      },
-      "migration": Object {
-        "_tag": "None",
-      },
-      "shownCategory": "INBOX",
-    },
-    "detailsById": Object {},
-    "downloads": Object {},
-    "messageGetStatus": Object {
-      "status": "idle",
-    },
-    "messagePrecondition": Object {
-      "content": Object {
-        "kind": "undefined",
-      },
-      "messageId": Object {
-        "_tag": "None",
-      },
-    },
-    "paginatedById": Object {},
-    "payments": Object {
-      "userSelectedPayments": Set {},
-    },
-    "thirdPartyById": Object {},
-  },
   "messagesStatus": Object {},
   "organizations": Object {
     "all": Array [],

ts/boot/__tests__/persistedStore.test.ts

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import { applicationChangeState } from "../../store/actions/application";
 import { appReducer } from "../../store/reducers";
 import { GlobalState } from "../../store/reducers/types";
@@ -43,7 +44,8 @@ describe("Check the addition for new fields to the persisted store. If one of th
     expect(globalState.crossSessions).toMatchSnapshot();
   });
   it("Freeze 'entities' state", () => {
-    expect(globalState.entities).toMatchSnapshot();
+    const entitiesWithoutMessages = _.omit(globalState.entities, "messages");
+    expect(entitiesWithoutMessages).toMatchSnapshot();
   });
   it("Freeze 'authentication' state", () => {
     expect(globalState.authentication).toMatchSnapshot();

ts/components/services/SpecialServices/LegacySpecialServicesCTA.tsx

@@ -14,7 +14,7 @@ import {
   isCdcEnabledSelector,
   isCGNEnabledSelector,
   isPnEnabledSelector,
-  isPnSupportedSelector
+  isPnAppVersionSupportedSelector
 } from "../../../store/reducers/backendStatus";
 import { openAppStoreUrl } from "../../../utils/url";
 
@@ -69,7 +69,7 @@ const LegacySpecialServicesCTA = (props: Props) => {
   const isCdcEnabled = cdcEnabledSelector && cdcEnabled;
 
   const isPnEnabled = useIOSelector(isPnEnabledSelector);
-  const isPnSupported = useIOSelector(isPnSupportedSelector);
+  const isPnSupported = useIOSelector(isPnAppVersionSupportedSelector);
 
   const mapSpecialServiceConfig = new Map<string, SpecialServiceConfig>([
     ["cgn", { isEnabled: isCGNEnabled, isSupported: true }],

ts/features/messages/components/Home/Preconditions.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect } from "react";
+import { useIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet";
+import {
+  useIODispatch,
+  useIOSelector,
+  useIOStore
+} from "../../../../store/hooks";
+import {
+  preconditionsCategoryTagSelector,
+  preconditionsRequireAppUpdateSelector,
+  shouldPresentPreconditionsBottomSheetSelector
+} from "../../store/reducers/messagePrecondition";
+import {
+  clearLegacyMessagePrecondition,
+  idlePreconditionStatusAction,
+  retrievingDataPreconditionStatusAction,
+  toIdlePayload,
+  toRetrievingDataPayload,
+  toUpdateRequiredPayload,
+  updateRequiredPreconditionStatusAction
+} from "../../store/actions/preconditions";
+import { MESSAGES_ROUTES } from "../../navigation/routes";
+import { trackDisclaimerOpened } from "../../analytics";
+import { UIMessageId } from "../../types";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { PreconditionsTitle } from "./PreconditionsTitle";
+import { PreconditionsContent } from "./PreconditionsContent";
+import { PreconditionsFooter } from "./PreconditionsFooter";
+
+export const Preconditions = () => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+  const store = useIOStore();
+  const onDismissCallback = useCallback(() => {
+    dispatch(clearLegacyMessagePrecondition());
+    dispatch(idlePreconditionStatusAction(toIdlePayload()));
+  }, [dispatch]);
+  const onNavigationCallback = useCallback(
+    (messageId: UIMessageId) => {
+      navigation.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+        screen: MESSAGES_ROUTES.MESSAGE_ROUTER,
+        params: {
+          messageId,
+          fromNotification: false
+        }
+      });
+    },
+    [navigation]
+  );
+  const modal = useIOBottomSheetModal({
+    snapPoint: [500],
+    title: <PreconditionsTitle />,
+    component: <PreconditionsContent />,
+    footer: (
+      <PreconditionsFooter
+        onDismiss={() => modal.dismiss()}
+        onNavigation={onNavigationCallback}
+      />
+    ),
+    onDismiss: onDismissCallback
+  });
+  const shouldPresentBottomSheet = useIOSelector(
+    shouldPresentPreconditionsBottomSheetSelector
+  );
+
+  useEffect(() => {
+    if (shouldPresentBottomSheet) {
+      const state = store.getState();
+      const categoryTag = preconditionsCategoryTagSelector(state);
+      if (categoryTag) {
+        trackDisclaimerOpened(categoryTag);
+      }
+      modal.present();
+
+      const requiresAppUpdate = preconditionsRequireAppUpdateSelector(state);
+      if (requiresAppUpdate) {
+        dispatch(
+          updateRequiredPreconditionStatusAction(toUpdateRequiredPayload())
+        );
+      } else {
+        dispatch(
+          retrievingDataPreconditionStatusAction(toRetrievingDataPayload())
+        );
+      }
+    }
+  }, [dispatch, modal, shouldPresentBottomSheet, store]);
+  return modal.bottomSheet;
+};

ts/features/messages/components/Home/PreconditionsContent.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import Placeholder from "rn-placeholder";
+import { VSpacer } from "@pagopa/io-app-design-system";
+import {
+  useIODispatch,
+  useIOSelector,
+  useIOStore
+} from "../../../../store/hooks";
+import {
+  preconditionsCategoryTagSelector,
+  preconditionsContentMarkdownSelector,
+  preconditionsContentSelector
+} from "../../store/reducers/messagePrecondition";
+import I18n from "../../../../i18n";
+import { pnMinAppVersionSelector } from "../../../../store/reducers/backendStatus";
+import { MessageMarkdown } from "../MessageDetail/MessageMarkdown";
+import {
+  errorPreconditionStatusAction,
+  shownPreconditionStatusAction,
+  toErrorPayload,
+  toShownPayload
+} from "../../store/actions/preconditions";
+import { trackDisclaimerLoadError } from "../../analytics";
+import { PreconditionsFeedback } from "./PreconditionsFeedback";
+
+export const PreconditionsContent = () => {
+  const content = useIOSelector(preconditionsContentSelector);
+  switch (content) {
+    case "content":
+      return <PreconditionsContentMarkdown />;
+    case "error":
+      return <PreconditionsContentError />;
+    case "loading":
+      return <PreconditionsContentSkeleton />;
+    case "update":
+      return <PreconditionsContentUpdate />;
+  }
+  return null;
+};
+
+const PreconditionsContentMarkdown = () => {
+  const dispatch = useIODispatch();
+  const store = useIOStore();
+
+  const markdown = useIOSelector(preconditionsContentMarkdownSelector);
+
+  const onLoadEndCallback = useCallback(() => {
+    dispatch(shownPreconditionStatusAction(toShownPayload()));
+  }, [dispatch]);
+  const onErrorCallback = useCallback(
+    (anyError: any) => {
+      const state = store.getState();
+      const category = preconditionsCategoryTagSelector(state);
+      if (category) {
+        trackDisclaimerLoadError(category);
+      }
+      dispatch(
+        errorPreconditionStatusAction(
+          toErrorPayload(`Markdown loading failure (${anyError})`)
+        )
+      );
+    },
+    [dispatch, store]
+  );
+
+  if (!markdown) {
+    return null;
+  }
+
+  return (
+    <MessageMarkdown
+      loadingLines={7}
+      onLoadEnd={onLoadEndCallback}
+      onError={onErrorCallback}
+      testID="preconditions_content_message_markdown"
+    >
+      {markdown}
+    </MessageMarkdown>
+  );
+};
+
+const PreconditionsContentError = () => (
+  <PreconditionsFeedback
+    pictogram="umbrellaNew"
+    title={I18n.t("global.genericError")}
+  />
+);
+
+const PreconditionsContentSkeleton = () => (
+  <View accessible={false}>
+    {Array.from({ length: 3 }).map((_, i) => (
+      <View key={`pre_content_ske_${i}`}>
+        <Placeholder.Box
+          width={"100%"}
+          animate={"fade"}
+          height={21}
+          radius={4}
+        />
+        <VSpacer size={8} />
+        <Placeholder.Box
+          width={"100%"}
+          animate={"fade"}
+          height={21}
+          radius={4}
+        />
+        <VSpacer size={8} />
+        <Placeholder.Box
+          width={"90%"}
+          animate={"fade"}
+          height={21}
+          radius={4}
+        />
+        <VSpacer size={8} />
+      </View>
+    ))}
+  </View>
+);
+
+const PreconditionsContentUpdate = () => {
+  const pnMinAppVersion = useIOSelector(pnMinAppVersionSelector);
+  return (
+    <PreconditionsFeedback
+      pictogram="umbrellaNew"
+      title={I18n.t("features.messages.updateBottomSheet.title")}
+      subtitle={I18n.t("features.messages.updateBottomSheet.subtitle", {
+        value: pnMinAppVersion
+      })}
+    />
+  );
+};

ts/features/messages/components/Home/legacy/MessageFeedback.tsx → ts/features/messages/components/Home/PreconditionsFeedback.tsx

@@ -27,7 +27,11 @@ type Props = {
   subtitle?: string;
 };
 
-export const MessageFeedback = ({ pictogram, title, subtitle }: Props) => (
+export const PreconditionsFeedback = ({
+  pictogram,
+  title,
+  subtitle
+}: Props) => (
   <View style={styles.container}>
     <Pictogram name={pictogram} size={120} />
     <VSpacer size={24} />