[PB-1972]: feat/mail actions

.husky/pre-commit

@@ -1,2 +1,3 @@
+npm run check:i18n
 npx lint-staged
 npm run test:related

package.json

@@ -18,8 +18,8 @@
     "test:related": "vitest run --changed HEAD --passWithNoTests",
     "prepare": "husky",
     "format": "prettier --write **/*.{js,jsx,tsx,ts}",
-    "check:i18n": "node scripts/check-i18n.cjs",
-    "preinstall": "node scripts/check-package-manager.js"
+    "preinstall": "node scripts/check-package-manager.js",
+    "check:i18n": "node scripts/check-i18n.cjs"
   },
   "dependencies": {
     "@internxt/css-config": "^1.1.0",
@@ -94,4 +94,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/errors/mail/index.ts

@@ -34,11 +34,22 @@ export class FetchMessageError extends Error {
 export class UpdateMailError extends Error {
   constructor(
     errorMsg?: string,
-    action?: 'markAsRead' | 'markAsFlagged' | 'markAsUnflagged',
+    action?: 'markAsRead' | 'markAsFlagged' | 'markAsUnflagged' | 'moveToFolder',
     public requestId?: string,
   ) {
     super(`Error while updating mail when ${action}: ` + errorMsg);
 
     Object.setPrototypeOf(this, UpdateMailError.prototype);
   }
 }
+
+export class DeleteEmailError extends Error {
+  constructor(
+    errorMsg?: string,
+    public requestId?: string,
+  ) {
+    super('Error while deleting email: ' + errorMsg);
+
+    Object.setPrototypeOf(this, DeleteEmailError.prototype);
+  }
+}

src/features/mail/MailView.tsx

@@ -3,7 +3,12 @@ import { useTranslationContext } from '@/i18n';
 import type { FolderType } from '@/types/mail';
 import PreviewMail from './components/mail-preview';
 import Settings from './components/settings';
-import { useGetMailMessageQuery, useMarkAsReadMutation } from '@/store/api/mail';
+import {
+  useDeleteMailsMutation,
+  useGetMailMessageQuery,
+  useMoveToFolderMutation,
+  useUpdateReadStatusMutation,
+} from '@/store/api/mail';
 import { ErrorService } from '@/services/error';
 import useListFolderPaginated from '@/hooks/mail/useListFolderPaginated';
 import { useUnreadByMailbox } from '@/hooks/mail/useUnreadByMailbox';
@@ -14,6 +19,8 @@ import { Tray } from '@internxt/ui';
 import { TrayEmptyState } from './components/tray/tray-empty-state';
 import { formatEmailsToList } from '@/utils/format-emails';
 import { useListActionContext } from '@/hooks/mail/useListActionContext';
+import { usePreviewMailActions } from '@/hooks/mail/usePreviewMailActions';
+import ActionsBar from './components/mail-preview/actions-bar';
 
 interface MailViewProps {
   folder: FolderType;
@@ -22,32 +29,47 @@ interface MailViewProps {
 const MailView = ({ folder }: MailViewProps) => {
   const { translate } = useTranslationContext();
   const [activeMailId, setActiveMailId] = useState<string | undefined>(undefined);
+  const [updateReadStatus] = useUpdateReadStatusMutation();
+  const [moveToFolder] = useMoveToFolderMutation();
+  const [deleteEmails] = useDeleteMailsMutation();
 
+  const { data: activeMailData } = useGetMailMessageQuery({ emailId: activeMailId! }, { skip: !activeMailId });
+  const activeMail = activeMailId ? activeMailData : undefined;
   const {
     isLoadingListFolder,
     listFolderEmails,
     hasMoreEmails,
-    onLoadMore,
     isUnreadFilter,
+    listEmailsCount,
+    onLoadMore,
     toggleUnreadFilter,
-    applyUnreadFilter,
   } = useListFolderPaginated(folder);
+
   const { selectedEmails, selectAll, selectNone, selectRead, selectUnread, toggleSelectAll } =
     useMailSelection(listFolderEmails);
-  const { listActionContext, bulkActionContext } = useListActionContext(folder, {
+  const { listActionContext, bulkActionContext } = useListActionContext(folder, selectedEmails, {
     selectAll,
     selectNone,
     selectRead,
     selectUnread,
-    applyUnreadFilter,
+    deleteEmails: (emailIds) => deleteEmails({ emailIds, sourceMailbox: folder }).unwrap(),
+  });
+  const previewActions = usePreviewMailActions({
+    activeMailId,
+    folder,
+    clearActiveMail: () => setActiveMailId(undefined),
+    updateReadStatus: async (args) => {
+      await updateReadStatus(args).unwrap();
+    },
+    moveToFolder: async (args) => {
+      await moveToFolder(args).unwrap();
+    },
+    deleteEmails: async (args) => {
+      await deleteEmails(args).unwrap();
+    },
   });
   const { unreadByMailbox } = useUnreadByMailbox();
 
-  const listEmailsCount = listFolderEmails?.length;
-
-  const { data: activeMail } = useGetMailMessageQuery({ emailId: activeMailId! }, { skip: !activeMailId });
-  const [markAsRead] = useMarkAsReadMutation();
-
   const folderName = translate(`mail.${folder}`);
 
   const from = activeMail?.from[0];
@@ -61,9 +83,10 @@ const MailView = ({ folder }: MailViewProps) => {
     if (isRead) return;
 
     try {
-      await markAsRead({
+      await updateReadStatus({
         emailId: id,
         mailbox: folder,
+        isRead: true,
       });
     } catch (error) {
       const err = ErrorService.instance.castError(error);
@@ -86,7 +109,7 @@ const MailView = ({ folder }: MailViewProps) => {
             selectedCount={selectedEmails.length}
             totalCount={listFolderEmails?.length ?? 0}
             onCheckboxClicked={toggleSelectAll}
-            onToggleUnreadFilter={folder !== 'sent' ? toggleUnreadFilter : undefined}
+            onToggleUnreadFilter={folder === 'sent' ? undefined : toggleUnreadFilter}
             onSearchEmailSelected={onSelectEmail}
           />
         </div>
@@ -105,7 +128,8 @@ const MailView = ({ folder }: MailViewProps) => {
       </div>
       {/* Mail Preview */}
       <div className="flex flex-col w-full">
-        <div className="flex w-full justify-end">
+        <div className="flex flex-row w-full pl-1 justify-between">
+          <ActionsBar isRead={activeMail?.isRead ?? false} optionsDisabled={!activeMailId} {...previewActions} />
           <Settings />
         </div>
 

src/features/mail/components/mail-preview/actions-bar/index.tsx

@@ -0,0 +1,118 @@
+import {
+  ArrowBendDoubleUpLeftIcon,
+  ArrowBendUpLeftIcon,
+  ArrowBendUpRightIcon,
+  EnvelopeOpenIcon,
+  TrashIcon,
+} from '@phosphor-icons/react';
+import MoveTo from '@/assets/icons/move-to.svg?react';
+import { Dropdown } from '@internxt/ui';
+import type { FolderType } from '@/types/mail';
+import { useActionsBar } from '../../../../../hooks/mail/useActionsBar';
+
+interface ActionsBarProps {
+  isRead: boolean;
+  optionsDisabled: boolean;
+  onMarkAsRead: () => void;
+  onMarkAsUnread: () => void;
+  onReply: () => void;
+  onReplyAll: () => void;
+  onForward: () => void;
+  onMove: (folder: FolderType) => Promise<null> | void;
+  onTrash: () => Promise<null> | void;
+}
+
+const Separator = () => <div className="h-5 w-px bg-gray-10" />;
+
+const ActionsBar = ({
+  isRead,
+  optionsDisabled,
+  onMarkAsRead,
+  onMarkAsUnread,
+  onTrash,
+  onMove,
+  onReply,
+  onReplyAll,
+  onForward,
+}: ActionsBarProps) => {
+  const { translate, moveToItems, toggleReadTitle, onToggleRead } = useActionsBar({
+    isRead,
+    optionsDisabled,
+    onMarkAsRead,
+    onMarkAsUnread,
+    onMove,
+    onTrash,
+  });
+
+  const iconButtonClass =
+    'flex items-center justify-center rounded-lg p-2 text-gray-60 transition-colors hover:bg-gray-5 hover:text-gray-80 disabled:pointer-events-none disabled:opacity-40';
+
+  return (
+    <div className="flex items-center z-30 gap-5 pl-4">
+      <button
+        disabled={optionsDisabled}
+        type="button"
+        title={toggleReadTitle}
+        className={iconButtonClass}
+        onClick={onToggleRead}
+      >
+        <EnvelopeOpenIcon size={24} />
+      </button>
+
+      <div className="flex flex-row gap-1 items-center">
+        <button
+          disabled={optionsDisabled}
+          type="button"
+          title={translate('actions.trashEmail')}
+          className={iconButtonClass}
+          onClick={onTrash}
+        >
+          <TrashIcon size={24} />
+        </button>
+        <Separator />
+        <Dropdown
+          classButton={`${iconButtonClass}${optionsDisabled ? ' pointer-events-none opacity-40' : ''}`}
+          dropdownActionsContext={moveToItems}
+          openDirection="left"
+          classMenuItems="max-w-[224px] w-screen"
+        >
+          <MoveTo />
+        </Dropdown>
+      </div>
+
+      <div className="flex flex-row items-center gap-1">
+        <button
+          disabled={optionsDisabled}
+          type="button"
+          title={translate('actions.reply')}
+          className={iconButtonClass}
+          onClick={onReply}
+        >
+          <ArrowBendUpLeftIcon size={24} />
+        </button>
+        <Separator />
+        <button
+          disabled={optionsDisabled}
+          type="button"
+          title={translate('actions.replyAll')}
+          className={iconButtonClass}
+          onClick={onReplyAll}
+        >
+          <ArrowBendDoubleUpLeftIcon size={24} />
+        </button>
+        <Separator />
+        <button
+          disabled={optionsDisabled}
+          type="button"
+          title={translate('actions.forward')}
+          className={iconButtonClass}
+          onClick={onForward}
+        >
+          <ArrowBendUpRightIcon size={24} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ActionsBar;

src/hooks/mail/useActionsBar.ts

@@ -0,0 +1,65 @@
+import { useTranslationContext } from '@/i18n';
+import { isCurrentPath } from '@/utils/current-path';
+import { useLocation } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
+import type { FolderType } from '@/types/mail';
+import { TrayIcon, WarningOctagonIcon, TrashIcon } from '@phosphor-icons/react';
+import type { MenuItemType } from '@internxt/ui';
+
+interface UseActionsBarParams {
+  isRead: boolean;
+  optionsDisabled: boolean;
+  onMarkAsRead: () => void;
+  onMarkAsUnread: () => void;
+  onMove: (folder: FolderType) => Promise<null> | void;
+  onTrash: () => Promise<null> | void;
+}
+
+export const useActionsBar = ({
+  isRead,
+  optionsDisabled,
+  onMarkAsRead,
+  onMarkAsUnread,
+  onMove,
+  onTrash,
+}: UseActionsBarParams) => {
+  const { translate } = useTranslationContext();
+  const { pathname } = useLocation();
+
+  const isActive = useCallback((path: string) => isCurrentPath(path, pathname), [pathname]);
+
+  const moveToItems: MenuItemType<unknown>[] = useMemo(
+    () => [
+      {
+        disabled: () => isActive('/inbox') || optionsDisabled,
+        name: translate('mail.inbox'),
+        icon: TrayIcon,
+        onClick: () => onMove('inbox'),
+      },
+      {
+        disabled: () => isActive('/spam') || optionsDisabled,
+        name: translate('mail.spam'),
+        icon: WarningOctagonIcon,
+        onClick: () => onMove('spam'),
+      },
+      {
+        disabled: () => isActive('/trash') || optionsDisabled,
+        name: translate('mail.trash'),
+        icon: TrashIcon,
+        onClick: () => onMove('trash'),
+      },
+    ],
+    [optionsDisabled, isActive, onMove, translate],
+  );
+
+  const toggleReadTitle = isRead ? translate('actions.markAsUnread') : translate('actions.markAsRead');
+  const onToggleRead = isRead ? onMarkAsUnread : onMarkAsRead;
+
+  return {
+    translate,
+    moveToItems,
+    toggleReadTitle,
+    onToggleRead,
+    onTrash,
+  };
+};