feat: [IOCOM-1172] Update business logic for payment reminder on a message details screen with the new DS

ts/features/messages/components/MessageDetail/MessageDetailsReminder.tsx

@@ -1,15 +1,13 @@
-import React, { useCallback } from "react";
-import { Alert } from "@pagopa/io-app-design-system";
+import React from "react";
+import { VSpacer } from "@pagopa/io-app-design-system";
 import { UIMessageId } from "../../types";
-import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import I18n from "../../../../i18n";
-import { localeDateFormat } from "../../../../utils/locale";
 import { useIOSelector } from "../../../../store/hooks";
-import { useMessageReminder } from "../../hooks/useMessageReminder";
-import { preferredCalendarSelector } from "../../../../store/reducers/persistedPreferences";
+import { paymentExpirationBannerStateSelector } from "../../store/reducers/payments";
+import { MessageDetailsReminderExpiring } from "./MessageDetailsReminderExpiring";
+import { MessageDetailsReminderExpired } from "./MessageDetailsReminderExpired";
 
 export type MessageDetailsReminderProps = {
-  dueDate: Date;
+  dueDate?: Date;
   messageId: UIMessageId;
   title: string;
 };
@@ -19,41 +17,29 @@ export const MessageDetailsReminder = ({
   messageId,
   title
 }: MessageDetailsReminderProps) => {
-  const navigation = useIONavigation();
-
-  const preferredCalendar = useIOSelector(preferredCalendarSelector);
-
-  const navigate = useCallback(() => {
-    navigation.navigate("MESSAGES_NAVIGATOR", {
-      screen: "MESSAGE_DETAIL_CALENDAR",
-      params: {
-        messageId
-      }
-    });
-  }, [messageId, navigation]);
-
-  const { isEventInDeviceCalendar, upsertReminder } = useMessageReminder(
-    messageId,
-    navigate
+  const reminderVisibility = useIOSelector(state =>
+    paymentExpirationBannerStateSelector(state, messageId)
   );
+  if (reminderVisibility === "hidden" || !dueDate) {
+    return null;
+  }
 
+  const isExpiring = reminderVisibility === "visibleExpiring";
   return (
-    <Alert
-      testID="due-date-alert"
-      variant="warning"
-      action={
-        isEventInDeviceCalendar
-          ? I18n.t("features.messages.alert.removeReminder")
-          : I18n.t("features.messages.alert.addReminder")
-      }
-      onPress={() => upsertReminder(dueDate, title, preferredCalendar)}
-      content={I18n.t("features.messages.alert.content", {
-        date: localeDateFormat(
-          dueDate,
-          I18n.t("global.dateFormats.shortFormat")
-        ),
-        time: localeDateFormat(dueDate, I18n.t("global.dateFormats.timeFormat"))
-      })}
-    />
+    <>
+      {isExpiring ? (
+        <MessageDetailsReminderExpiring
+          dueDate={dueDate}
+          messageId={messageId}
+          title={title}
+        />
+      ) : (
+        <MessageDetailsReminderExpired
+          dueDate={dueDate}
+          isLoading={reminderVisibility === "loading"}
+        />
+      )}
+      <VSpacer size={8} />
+    </>
   );
 };

ts/features/messages/components/MessageDetail/MessageDetailsReminderExpired.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Alert, IOAlertRadius } from "@pagopa/io-app-design-system";
+import Placeholder from "rn-placeholder";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+
+type MessageDetailsReminderExpiredProps = {
+  dueDate: Date;
+  isLoading: boolean;
+};
+
+export const MessageDetailsReminderExpired = ({
+  dueDate,
+  isLoading
+}: MessageDetailsReminderExpiredProps) =>
+  isLoading ? (
+    <Placeholder.Box
+      animate="shine"
+      height={84}
+      width={"100%"}
+      radius={IOAlertRadius}
+    />
+  ) : (
+    <Alert
+      testID="due-date-alert"
+      variant="warning"
+      content={I18n.t("features.messages.badge.dueDate", {
+        date: localeDateFormat(
+          dueDate,
+          I18n.t("global.dateFormats.dayMonthWithoutTime")
+        ),
+        time: localeDateFormat(dueDate, I18n.t("global.dateFormats.timeFormat"))
+      })}
+    />
+  );

ts/features/messages/components/MessageDetail/MessageDetailsReminderExpiring.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from "react";
+import { Alert } from "@pagopa/io-app-design-system";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { preferredCalendarSelector } from "../../../../store/reducers/persistedPreferences";
+import { UIMessageId } from "../../types";
+import { useMessageReminder } from "../../hooks/useMessageReminder";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+
+type MessageDetailsReminderExpiringProps = {
+  dueDate: Date;
+  messageId: UIMessageId;
+  title: string;
+};
+
+export const MessageDetailsReminderExpiring = ({
+  dueDate,
+  messageId,
+  title
+}: MessageDetailsReminderExpiringProps) => {
+  const navigation = useIONavigation();
+  const preferredCalendar = useIOSelector(preferredCalendarSelector);
+
+  const navigate = useCallback(() => {
+    navigation.navigate("MESSAGES_NAVIGATOR", {
+      screen: "MESSAGE_DETAIL_CALENDAR",
+      params: {
+        messageId
+      }
+    });
+  }, [messageId, navigation]);
+
+  const { isEventInDeviceCalendar, upsertReminder } = useMessageReminder(
+    messageId,
+    navigate
+  );
+  return (
+    <Alert
+      testID="due-date-alert"
+      variant="warning"
+      action={
+        isEventInDeviceCalendar
+          ? I18n.t("features.messages.alert.removeReminder")
+          : I18n.t("features.messages.alert.addReminder")
+      }
+      onPress={() => upsertReminder(dueDate, title, preferredCalendar)}
+      content={I18n.t("features.messages.alert.content", {
+        date: localeDateFormat(
+          dueDate,
+          I18n.t("global.dateFormats.shortFormat")
+        ),
+        time: localeDateFormat(dueDate, I18n.t("global.dateFormats.timeFormat"))
+      })}
+    />
+  );
+};

ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminder.test.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { createStore } from "redux";
+import { MessageDetailsReminder } from "../MessageDetailsReminder";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { UIMessageId } from "../../../types";
+import * as payments from "../../../store/reducers/payments";
+
+const dueDate = new Date(2024, 2, 21, 18, 44, 31);
+
+describe("MessageDetailsReminder", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+  it("should match snapshot when the reminder is hidden", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the due date is missing", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpired");
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is loading", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "loading");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is visible an expiring", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpiring");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is visible and expired", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpired");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (dueDate?: Date) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminder
+        dueDate={dueDate}
+        messageId={"01HSG6H6M4KK36CV6QWP2VJW3S" as UIMessageId}
+        title="The title"
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};

ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpired.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { createStore } from "redux";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsReminderExpired } from "../MessageDetailsReminderExpired";
+
+describe("MessageDetailsReminderExpired", () => {
+  it("should match snapshot when loading", () => {
+    const component = renderScreen(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when not loading", () => {
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (isLoading: boolean = false) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminderExpired
+        dueDate={new Date(2024, 2, 21, 10, 33, 42)}
+        isLoading={isLoading}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};

ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpiring.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { createStore } from "redux";
+import { MessageDetailsReminderExpiring } from "../MessageDetailsReminderExpiring";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { UIMessageId } from "../../../types";
+
+describe("MessageDetailsReminderExpiring", () => {
+  it("should match snapshot", () => {
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = () => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminderExpiring
+        dueDate={new Date(2024, 2, 21, 10, 33, 42)}
+        messageId={"01HSG6GR1JT2E23AJ5RBTAMZZP" as UIMessageId}
+        title="The title"
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};