packages/components/containers/mail/MailViewLayoutModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   5 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   6 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   7 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
   8 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
   9 import { useLoading } from '@proton/hooks';
  10 import { updateViewLayout } from '@proton/shared/lib/api/mailSettings';
  11 import type { VIEW_LAYOUT } from '@proton/shared/lib/mail/mailSettings';
  12 import { DEFAULT_MAILSETTINGS } from '@proton/shared/lib/mail/mailSettings';
  13
  14 import { useApi, useEventManager, useMailSettings, useNotifications } from '../../hooks';
  15 import ViewLayoutCards from '../layouts/ViewLayoutCards';
  16
  17 import './ModalSettingsLayoutCards.scss';
  18
  19 const MailViewLayoutModal = (props: ModalProps) => {
  20     const api = useApi();
  21     const { call } = useEventManager();
  22     const [{ ViewLayout } = DEFAULT_MAILSETTINGS] = useMailSettings();
  23     const [loading, withLoading] = useLoading();
  24     const { createNotification } = useNotifications();
  25     const title = c('Title').t`Mailbox layout`;
  26
  27     const { onClose } = props;
  28
  29     const handleChangeViewLayout = async (layout: VIEW_LAYOUT) => {
  30         await api(updateViewLayout(layout));
  31         await call();
  32         createNotification({ text: c('Success').t`Preference saved` });
  33     };
  34
  35     const handleSubmit = () => onClose?.();
  36
  37     return (
  38         <ModalTwo {...props}>
  39             <ModalTwoHeader title={title} />
  40             <ModalTwoContent>
  41                 <div className="flex flex-column flex-nowrap mb-4">
  42                     <span className="mb-4" id="layoutMode_desc">
  43                         {c('Label').t`Select what your mailbox looks like by default.`}
  44                     </span>
  45                     <ViewLayoutCards
  46                         describedByID="layoutMode_desc"
  47                         viewLayout={ViewLayout}
  48                         onChange={(value) => withLoading(handleChangeViewLayout(value))}
  49                         loading={loading}
  50                         liClassName="w-full"
  51                         className="layoutCards-two-per-row"
  52                     />
  53                 </div>
  54             </ModalTwoContent>
  55             <ModalTwoFooter>
  56                 <Button className="ml-auto" color="norm" onClick={handleSubmit}>{c('Action').t`OK`}</Button>
  57             </ModalTwoFooter>
  58         </ModalTwo>
  59     );
  60 };
  61
  62 export default MailViewLayoutModal;