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