packages/components/containers/labels/FoldersSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button, Scroll } from '@proton/atoms';
   4 import Info from '@proton/components/components/link/Info';
   5 import Loader from '@proton/components/components/loader/Loader';
   6 import useModalState from '@proton/components/components/modalTwo/useModalState';
   7 import MailUpsellButton from '@proton/components/components/upsell/MailUpsellButton';
   8 import LabelsUpsellModal from '@proton/components/components/upsell/modal/types/LabelsUpsellModal';
   9 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
  10 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
  11 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
  12 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  13 import { useLoading } from '@proton/hooks';
  14 import { orderAllFolders } from '@proton/shared/lib/api/labels';
  15 import { MAIL_UPSELL_PATHS } from '@proton/shared/lib/constants';
  16 import { hasReachedFolderLimit } from '@proton/shared/lib/helpers/folder';
  17
  18 import { useApi, useEventManager, useFolders, useMailSettings, useNotifications, useUser } from '../../hooks';
  19 import FolderTreeViewList from './FolderTreeViewList';
  20 import ToggleEnableFolderColor from './ToggleEnableFolderColor';
  21 import ToggleInheritParentFolderColor from './ToggleInheritParentFolderColor';
  22 import EditLabelModal from './modals/EditLabelModal';
  23
  24 function ScrollWrapper({ children, scroll }: { children: JSX.Element; scroll?: boolean }) {
  25     return scroll ? (
  26         <Scroll className="overflow-hidden pb-2 h-custom" style={{ '--h-custom': '50rem' }}>
  27             {children}
  28         </Scroll>
  29     ) : (
  30         children
  31     );
  32 }
  33
  34 export default function FoldersSection() {
  35     const [user] = useUser();
  36     const [folders = [], loadingFolders] = useFolders();
  37     const [mailSettings] = useMailSettings();
  38     const [loading, withLoading] = useLoading();
  39     const { call } = useEventManager();
  40     const api = useApi();
  41     const { createNotification } = useNotifications();
  42
  43     const canCreateFolder = !hasReachedFolderLimit(user, folders);
  44
  45     const [editLabelProps, setEditLabelModalOpen] = useModalState();
  46     const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
  47
  48     const handleSortAllFolders = async () => {
  49         await api(orderAllFolders());
  50         await call();
  51         createNotification({ text: c('Success message after sorting folders').t`Folders sorted` });
  52     };
  53
  54     return (
  55         <SettingsSection>
  56             {loadingFolders ? (
  57                 <Loader />
  58             ) : (
  59                 <>
  60                     <SettingsLayout>
  61                         <SettingsLayoutLeft>
  62                             <label htmlFor="folder-colors" className="text-semibold">
  63                                 {c('Label').t`Use folder colors`}
  64                             </label>
  65                         </SettingsLayoutLeft>
  66                         <SettingsLayoutRight isToggleContainer>
  67                             <ToggleEnableFolderColor id="folder-colors" />
  68                         </SettingsLayoutRight>
  69                     </SettingsLayout>
  70
  71                     {mailSettings?.EnableFolderColor ? (
  72                         <SettingsLayout>
  73                             <SettingsLayoutLeft>
  74                                 <label htmlFor="parent-folder-color" className="text-semibold">
  75                                     <span className="mr-1">{c('Label').t`Inherit color from parent folder`}</span>
  76                                     <Info
  77                                         title={c('Info - folder colouring feature')
  78                                             .t`When enabled, sub-folders inherit the color of the parent folder.`}
  79                                     />
  80                                 </label>
  81                             </SettingsLayoutLeft>
  82                             <SettingsLayoutRight isToggleContainer>
  83                                 <ToggleInheritParentFolderColor id="parent-folder-color" />
  84                             </SettingsLayoutRight>
  85                         </SettingsLayout>
  86                     ) : null}
  87
  88                     <div className="flex gap-4 my-7 folders-action">
  89                         {canCreateFolder ? (
  90                             <Button color="norm" onClick={() => setEditLabelModalOpen(true)}>
  91                                 {c('Action').t`Add folder`}
  92                             </Button>
  93                         ) : (
  94                             <MailUpsellButton
  95                                 onClick={() => handleUpsellModalDisplay(true)}
  96                                 text={c('Action').t`Get more folders`}
  97                             />
  98                         )}
  99                         {folders.length ? (
 100                             <Button
 101                                 shape="outline"
 102                                 title={c('Title').t`Sort folders alphabetically`}
 103                                 loading={loading}
 104                                 onClick={() => withLoading(handleSortAllFolders())}
 105                             >
 106                                 {c('Action').t`Sort`}
 107                             </Button>
 108                         ) : null}
 109                     </div>
 110
 111                     {folders.length ? (
 112                         // 17 is the number of elements before we have more than 50rem, will be replaced soon by a fix in scroll component
 113                         <ScrollWrapper scroll={folders.length > 17}>
 114                             <FolderTreeViewList items={folders} />
 115                         </ScrollWrapper>
 116                     ) : null}
 117
 118                     <EditLabelModal {...editLabelProps} type="folder" />
 119
 120                     {renderUpsellModal && (
 121                         <LabelsUpsellModal
 122                             modalProps={upsellModalProps}
 123                             feature={MAIL_UPSELL_PATHS.UNLIMITED_FOLDERS}
 124                             isSettings
 125                         />
 126                     )}
 127                 </>
 128             )}
 129         </SettingsSection>
 130     );
 131 }