feat: [IOCOM-1413] Archiving/Restoring of user messages, new Messages Home

locales/en/index.yml

@@ -2014,6 +2014,9 @@ messages:
     archive:
       success: "Successfully archived!"
       failure: "Failed to archive"
+    generic:
+      failure: "Operation failed"
+      success: "Operazione successful!"
     restore:
       success: "Successfully unarchived."
       failure: "Failed to unarchive"

locales/it/index.yml

@@ -2014,6 +2014,9 @@ messages:
     archive:
       success: "Archiviazione riuscita!"
       failure: "L’archiviazione non è andata a buon fine"
+    generic:
+      failure: "L'operazione non è andata a buon fine"
+      success: "Operazione riuscita!"
     restore:
       success: "Ripristino effettuato."
       failure: "Il ripristino non è andato a buon fine"

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

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import { ButtonOutline, ButtonSolid } from "@pagopa/io-app-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useIODispatch,
+  useIOSelector,
+  useIOStore
+} from "../../../../store/hooks";
+import {
+  areThereEntriesForShownMessageListCategorySelector,
+  isArchivingDisabledSelector,
+  isArchivingInProcessingModeSelector
+} from "../../store/reducers/archiving";
+import { useIOTabNavigation } from "../../../../navigation/params/AppParamsList";
+import { shownMessageCategorySelector } from "../../store/reducers/allPaginated";
+import I18n from "../../../../i18n";
+import {
+  resetMessageArchivingAction,
+  startProcessingMessageArchivingAction
+} from "../../store/actions/archiving";
+import { MessageListCategory } from "../../types/messageListCategory";
+import { useHardwareBackButton } from "../../../../hooks/useHardwareBackButton";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    paddingHorizontal: 24,
+    paddingTop: 8
+  },
+  endButtonContainer: {
+    flex: 1,
+    marginStart: 4
+  },
+  startButtonContainer: {
+    flex: 1,
+    marginEnd: 4
+  }
+});
+
+type ArchiveRestoreCTAsProps = {
+  category: MessageListCategory;
+};
+
+export const ArchiveRestoreBar = () => {
+  const store = useIOStore();
+  const tabNavigation = useIOTabNavigation();
+
+  const isArchivingDisabled = useIOSelector(isArchivingDisabledSelector);
+  const shownCategory = useIOSelector(shownMessageCategorySelector);
+
+  const androidBackButtonCallback = useCallback(() => {
+    // Disable Android back button while processing archiving/restoring
+    const state = store.getState();
+    return isArchivingInProcessingModeSelector(state);
+  }, [store]);
+  useHardwareBackButton(androidBackButtonCallback);
+
+  useEffect(() => {
+    tabNavigation.setOptions({
+      tabBarStyle: {
+        display: isArchivingDisabled ? "flex" : "none"
+      }
+    });
+  }, [isArchivingDisabled, tabNavigation]);
+
+  if (isArchivingDisabled) {
+    return null;
+  }
+
+  return <ArchiveRestoreCTAs category={shownCategory} />;
+};
+
+const ArchiveRestoreCTAs = ({ category }: ArchiveRestoreCTAsProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const dispatch = useIODispatch();
+
+  const archiveRestoreCTAEnabled = useIOSelector(state =>
+    areThereEntriesForShownMessageListCategorySelector(state, category)
+  );
+  const isProcessing = useIOSelector(isArchivingInProcessingModeSelector);
+
+  const rightButtonLabel = I18n.t(
+    `messages.cta.${category === "ARCHIVE" ? "unarchive" : "archive"}`
+  );
+  return (
+    <View
+      style={[styles.container, { paddingBottom: 8 + safeAreaInsets.bottom }]}
+    >
+      <View style={styles.startButtonContainer}>
+        <ButtonOutline
+          label="Annulla"
+          fullWidth
+          onPress={() => dispatch(resetMessageArchivingAction(undefined))}
+        />
+      </View>
+      <View style={styles.endButtonContainer}>
+        <ButtonSolid
+          disabled={!archiveRestoreCTAEnabled}
+          label={rightButtonLabel}
+          loading={isProcessing}
+          fullWidth
+          onPress={() => dispatch(startProcessingMessageArchivingAction())}
+        />
+      </View>
+    </View>
+  );
+};

ts/features/messages/components/Home/DS/DoubleAvatar.tsx

@@ -175,7 +175,7 @@ export const DoubleAvatar = ({ backgroundLogoUri }: DoubleAvatarProps) => {
             }
           ]}
         >
-          <Icon name="productPagoPA" color="blueIO-500" size={20} />
+          <Icon name="productPagoPA" color="blueItalia-500" size={20} />
         </View>
       </View>
     </View>

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

@@ -1,12 +1,19 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
+import { constUndefined, pipe } from "fp-ts/lib/function";
+import * as B from "fp-ts/lib/boolean";
 import { ButtonSolidProps, IOPictograms } from "@pagopa/io-app-design-system";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import {
+  useIODispatch,
+  useIOSelector,
+  useIOStore
+} from "../../../../store/hooks";
 import { emptyListReasonSelector } from "../../store/reducers/allPaginated";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
 import I18n from "../../../../i18n";
 import { reloadAllMessages } from "../../store/actions";
 import { pageSize } from "../../../../config";
 import { MessageListCategory } from "../../types/messageListCategory";
+import { isArchivingInProcessingModeSelector } from "../../store/reducers/archiving";
 
 export type EmptyListProps = {
   category: MessageListCategory;
@@ -24,9 +31,31 @@ type ScreenDataType = {
 
 export const EmptyList = ({ category }: EmptyListProps) => {
   const dispatch = useIODispatch();
+  const store = useIOStore();
+
   const emptyListReason = useIOSelector(state =>
     emptyListReasonSelector(state, category)
   );
+  const onRetryCallback = useCallback(
+    () =>
+      pipe(
+        store.getState(),
+        isArchivingInProcessingModeSelector,
+        B.fold(
+          () =>
+            pipe(
+              {
+                pageSize,
+                filter: { getArchived: category === "ARCHIVE" }
+              },
+              reloadAllMessages.request,
+              dispatch
+            ),
+          constUndefined
+        )
+      ),
+    [category, dispatch, store]
+  );
 
   const screenData = useMemo((): ScreenDataType | undefined => {
     switch (emptyListReason) {
@@ -42,21 +71,15 @@ export const EmptyList = ({ category }: EmptyListProps) => {
           action: {
             testID: "home_emptyList_retry",
             label: I18n.t("global.buttons.retry"),
-            onPress: () =>
-              dispatch(
-                reloadAllMessages.request({
-                  pageSize,
-                  filter: { getArchived: category === "ARCHIVE" }
-                })
-              )
+            onPress: onRetryCallback
           },
           pictogram: "fatalError",
           title: I18n.t("messages.loadingErrorTitle")
         };
       default:
         return undefined;
     }
-  }, [category, dispatch, emptyListReason]);
+  }, [category, emptyListReason, onRetryCallback]);
 
   if (!screenData) {
     return null;

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

@@ -103,7 +103,13 @@ export const MessageList = React.forwardRef<FlatList, MessageListProps>(
               />
             );
           } else {
-            return <WrappedMessageListItem index={index} message={item} />;
+            return (
+              <WrappedMessageListItem
+                index={index}
+                listCategory={category}
+                message={item}
+              />
+            );
           }
         }}
         ListFooterComponent={<Footer category={category} />}

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

@@ -16,6 +16,7 @@ import {
   getMessagesViewPagerInitialPageIndex,
   messageViewPageIndexToListCategory
 } from "./homeUtils";
+import { ArchiveRestoreBar } from "./ArchiveRestoreBar";
 
 export const PagerViewContainer = React.forwardRef<PagerView>((_, ref) => {
   const dispatch = useIODispatch();
@@ -89,22 +90,25 @@ export const PagerViewContainer = React.forwardRef<PagerView>((_, ref) => {
   }, [dispatchReloadAllMessagesIfNeeded, store]);
 
   return (
-    <PagerView
-      initialPage={initialPageIndex}
-      onPageSelected={onPagerViewPageSelected}
-      ref={ref}
-      style={IOStyles.flex}
-    >
-      <MessageList
-        category={"INBOX"}
-        key={`message_list_inbox`}
-        ref={inboxFlatListRef}
-      />
-      <MessageList
-        category={"ARCHIVE"}
-        key={`message_list_category`}
-        ref={archiveFlatListRef}
-      />
-    </PagerView>
+    <>
+      <PagerView
+        initialPage={initialPageIndex}
+        onPageSelected={onPagerViewPageSelected}
+        ref={ref}
+        style={IOStyles.flex}
+      >
+        <MessageList
+          category={"INBOX"}
+          key={`message_list_inbox`}
+          ref={inboxFlatListRef}
+        />
+        <MessageList
+          category={"ARCHIVE"}
+          key={`message_list_category`}
+          ref={archiveFlatListRef}
+        />
+      </PagerView>
+      <ArchiveRestoreBar />
+    </>
   );
 });

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

@@ -3,42 +3,35 @@ import { useIOToast } from "@pagopa/io-app-design-system";
 import { useIOSelector } from "../../../../store/hooks";
 import {
   archiveMessagesErrorReasonSelector,
-  inboxMessagesErrorReasonSelector,
-  latestMessageOperationToastTypeSelector,
-  latestMessageOperationTranslationKeySelector
+  inboxMessagesErrorReasonSelector
 } from "../../store/reducers/allPaginated";
 import I18n from "../../../../i18n";
+import {
+  processingResultReasonSelector,
+  processingResultTypeSelector
+} from "../../store/reducers/archiving";
 
 export const Toasts = () => {
   const toast = useIOToast();
 
   // Handling of archiving/unarchiving operations result
-  const latestMessageOperationToastType = useIOSelector(
-    latestMessageOperationToastTypeSelector
-  );
-  const latestMessageOperationTranslationKey = useIOSelector(
-    latestMessageOperationTranslationKeySelector
-  );
+  const processingResultType = useIOSelector(processingResultTypeSelector);
+  const processingResultReason = useIOSelector(processingResultReasonSelector);
   useEffect(() => {
-    if (
-      latestMessageOperationToastType &&
-      latestMessageOperationTranslationKey
-    ) {
-      const translationKey = I18n.t(latestMessageOperationTranslationKey);
-      switch (latestMessageOperationToastType) {
+    if (processingResultType && processingResultReason) {
+      switch (processingResultType) {
         case "error":
-          toast.error(translationKey);
+          toast.error(processingResultReason);
           break;
         case "success":
-          toast.success(translationKey);
+          toast.success(processingResultReason);
+          break;
+        case "warning":
+          toast.warning(processingResultReason);
           break;
       }
     }
-  }, [
-    latestMessageOperationToastType,
-    latestMessageOperationTranslationKey,
-    toast
-  ]);
+  }, [processingResultType, processingResultReason, toast]);
 
   // Handling of inbox messages errors. Be aware that any error
   // that happens when the list is empty is not displayed with