packages/components/containers/messages/MessagesSection.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Info from '@proton/components/components/link/Info';
   6 import useApi from '@proton/components/hooks/useApi';
   7 import useEventManager from '@proton/components/hooks/useEventManager';
   8 import useNotifications from '@proton/components/hooks/useNotifications';
   9 import { FeatureCode, useFeature } from '@proton/features';
  10 import { useLoading } from '@proton/hooks';
  11 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  12 import { updateSpamAction, updateStickyLabels, updateViewMode } from '@proton/shared/lib/api/mailSettings';
  13 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  14 import type { SPAM_ACTION } from '@proton/shared/lib/mail/mailSettings';
  15 import { DEFAULT_MAILSETTINGS, STICKY_LABELS, VIEW_MODE } from '@proton/shared/lib/mail/mailSettings';
  16 import { useFlag } from '@proton/unleash';
  17
  18 import SettingsLayout from '../account/SettingsLayout';
  19 import SettingsLayoutLeft from '../account/SettingsLayoutLeft';
  20 import SettingsLayoutRight from '../account/SettingsLayoutRight';
  21 import StickyLabelsToggle from '../layouts/StickyLabelsToggle';
  22 import ViewModeToggle from '../layouts/ViewModeToggle';
  23 import AlmostAllMailToggle from './AlmostAllMailToggle';
  24 import AutoDeleteSetting from './AutoDeleteSetting';
  25 import EmbeddedToggle from './EmbeddedToggle';
  26 import { PageSizeSelector } from './PageSizeSelector';
  27 import RequestLinkConfirmationToggle from './RequestLinkConfirmationToggle';
  28 import ShowMovedToggle from './ShowMovedToggle';
  29 import SpamActionSelect from './SpamActionSelect';
  30
  31 const MessagesSection = () => {
  32     const [
  33         {
  34             ViewMode,
  35             StickyLabels,
  36             HideEmbeddedImages,
  37             ConfirmLink,
  38             SpamAction,
  39             AutoDeleteSpamAndTrashDays,
  40             AlmostAllMail,
  41         } = DEFAULT_MAILSETTINGS,
  42     ] = useMailSettings();
  43     const [hideEmbeddedImages, setHideEmbeddedImages] = useState(HideEmbeddedImages);
  44     const { createNotification } = useNotifications();
  45
  46     const isAlmostAllMailEnabled = !!useFeature(FeatureCode.AlmostAllMail).feature?.Value;
  47     const isPageSizeSettingEnabled = useFlag('WebMailPageSizeSetting');
  48
  49     const { call } = useEventManager();
  50     const api = useApi();
  51
  52     const [loadingViewMode, withLoadingViewMode] = useLoading();
  53     const [loadingStickyLabels, withLoadingStickyLabels] = useLoading();
  54     const [loadingSpamAction, withLoadingSpamAction] = useLoading();
  55
  56     const handleChangeHideEmbedded = (newValue: number) => setHideEmbeddedImages(newValue);
  57
  58     const notifyPreferenceSaved = () => createNotification({ text: c('Success').t`Preference saved` });
  59
  60     const handleToggleStickyLabels = async (value: number) => {
  61         await api(updateStickyLabels(value));
  62         await call();
  63         notifyPreferenceSaved();
  64     };
  65
  66     const handleChangeViewMode = async (mode: VIEW_MODE) => {
  67         if (mode === VIEW_MODE.SINGLE) {
  68             await api(updateStickyLabels(STICKY_LABELS.DISABLED));
  69         }
  70         await api(updateViewMode(mode));
  71         await call();
  72         notifyPreferenceSaved();
  73     };
  74
  75     const handleChangeSpamAction = async (spamAction: SPAM_ACTION | null) => {
  76         await api(updateSpamAction(spamAction));
  77         await call();
  78         notifyPreferenceSaved();
  79     };
  80
  81     return (
  82         <>
  83             <SettingsLayout>
  84                 <SettingsLayoutLeft>
  85                     <label htmlFor="embeddedToggle" className="text-semibold">
  86                         <span className="mr-2">{c('Label').t`Auto show embedded images`}</span>
  87                         <Info
  88                             url={getKnowledgeBaseUrl('/images-by-default')}
  89                             title={c('Info')
  90                                 .t`When disabled, this prevents image files from loading on your device without your knowledge.`}
  91                         />
  92                     </label>
  93                 </SettingsLayoutLeft>
  94                 <SettingsLayoutRight isToggleContainer>
  95                     <EmbeddedToggle
  96                         id="embeddedToggle"
  97                         hideEmbeddedImages={hideEmbeddedImages}
  98                         onChange={handleChangeHideEmbedded}
  99                     />
 100                 </SettingsLayoutRight>
 101             </SettingsLayout>
 102             <SettingsLayout>
 103                 <SettingsLayoutLeft>
 104                     <label htmlFor="showMovedToggle" className="text-semibold">
 105                         <span className="mr-2">{c('Label').t`Keep messages in Sent/Drafts`}</span>
 106                         <Info
 107                             title={c('Tooltip')
 108                                 .t`Messages in the Sent or Drafts folder will continue to appear in that folder, even if you move them to another folder.`}
 109                         />
 110                     </label>
 111                 </SettingsLayoutLeft>
 112                 <SettingsLayoutRight isToggleContainer>
 113                     <ShowMovedToggle id="showMovedToggle" />
 114                 </SettingsLayoutRight>
 115             </SettingsLayout>
 116             <SettingsLayout>
 117                 {isAlmostAllMailEnabled && (
 118                     <>
 119                         <SettingsLayoutLeft>
 120                             <label htmlFor="almostAllMail" className="text-semibold">
 121                                 <span className="mr-2">{c('Label').t`Exclude Spam/Trash from All mail`}</span>
 122                                 <Info title={c('Info').t`Not yet available in our Android mobile app.`} />
 123                             </label>
 124                         </SettingsLayoutLeft>
 125                         <SettingsLayoutRight isToggleContainer>
 126                             <AlmostAllMailToggle id="almostAllMail" showAlmostAllMail={AlmostAllMail} />
 127                         </SettingsLayoutRight>
 128                     </>
 129                 )}
 130             </SettingsLayout>
 131             <SettingsLayout>
 132                 <SettingsLayoutLeft>
 133                     <label htmlFor="requestLinkConfirmationToggle" className="text-semibold">
 134                         <span className="mr-2">{c('Label').t`Confirm link URLs`}</span>
 135                         <Info
 136                             title={c('Tooltip')
 137                                 .t`When you click on a link, this anti-phishing feature will ask you to confirm the URL of the web page.`}
 138                         />
 139                     </label>
 140                 </SettingsLayoutLeft>
 141                 <SettingsLayoutRight isToggleContainer>
 142                     <RequestLinkConfirmationToggle confirmLink={ConfirmLink} id="requestLinkConfirmationToggle" />
 143                 </SettingsLayoutRight>
 144             </SettingsLayout>
 145
 146             <SettingsLayout>
 147                 <SettingsLayoutLeft>
 148                     <label htmlFor="viewMode" className="text-semibold">
 149                         <span className="mr-2">{c('Label').t`Conversation grouping`}</span>
 150                         <Info
 151                             title={c('Tooltip')
 152                                 .t`Group emails in the same conversation together in your Inbox or display them separately.`}
 153                         />
 154                     </label>
 155                 </SettingsLayoutLeft>
 156
 157                 <SettingsLayoutRight isToggleContainer>
 158                     <ViewModeToggle
 159                         id="viewMode"
 160                         viewMode={ViewMode}
 161                         loading={loadingViewMode}
 162                         onToggle={(value) => withLoadingViewMode(handleChangeViewMode(value))}
 163                         data-testid="appearance:conversation-group-toggle"
 164                     />
 165                 </SettingsLayoutRight>
 166             </SettingsLayout>
 167
 168             <AutoDeleteSetting settingValue={AutoDeleteSpamAndTrashDays} onSaved={notifyPreferenceSaved} />
 169
 170             <SettingsLayout>
 171                 <SettingsLayoutLeft>
 172                     <label htmlFor="stickyLabelsToggle" className="text-semibold">
 173                         <span className="mr-2">{c('Label').t`Sticky labels`}</span>
 174                         <Info
 175                             title={c('Tooltip')
 176                                 .t`When you add a label to a message in a conversation, it will automatically be applied to all future messages you send or receive in that conversation.`}
 177                         />
 178                     </label>
 179                 </SettingsLayoutLeft>
 180                 <SettingsLayoutRight isToggleContainer>
 181                     <StickyLabelsToggle
 182                         id="stickyLabelsToggle"
 183                         stickyLabels={StickyLabels}
 184                         loading={loadingStickyLabels}
 185                         onToggle={(value) => withLoadingStickyLabels(handleToggleStickyLabels(value))}
 186                         data-testid="appearance:sticky-labels-toggle"
 187                         disabled={ViewMode !== VIEW_MODE.GROUP}
 188                     />
 189                 </SettingsLayoutRight>
 190             </SettingsLayout>
 191
 192             <SettingsLayout>
 193                 <SettingsLayoutLeft>
 194                     <label htmlFor="spamActionLabelSelect" className="text-semibold">
 195                         <span className="mr-2">{c('Label').t`Auto-unsubscribe`}</span>
 196                         <Info
 197                             title={c('Tooltip')
 198                                 .t`When you move an email to spam, you’ll automatically be unsubscribed from the sender’s mailing lists.`}
 199                         />
 200                     </label>
 201                 </SettingsLayoutLeft>
 202                 <SettingsLayoutRight>
 203                     <SpamActionSelect
 204                         id="spamActionLabelSelect"
 205                         value={SpamAction}
 206                         onChange={(value) => withLoadingSpamAction(handleChangeSpamAction(value))}
 207                         loading={loadingSpamAction}
 208                     />
 209                 </SettingsLayoutRight>
 210             </SettingsLayout>
 211
 212             {isPageSizeSettingEnabled && (
 213                 <SettingsLayout>
 214                     <SettingsLayoutLeft>
 215                         <label htmlFor="pageSizeSelector" className="text-semibold" id="label-pageSizeSelector">
 216                             <span className="mr-2">
 217                                 {ViewMode === VIEW_MODE.GROUP
 218                                     ? c('Label').t`Conversations per page`
 219                                     : c('Label').t`Messages per page`}
 220                             </span>
 221                         </label>
 222                     </SettingsLayoutLeft>
 223                     <SettingsLayoutRight>
 224                         <PageSizeSelector id="pageSizeSelector" />
 225                     </SettingsLayoutRight>
 226                 </SettingsLayout>
 227             )}
 228         </>
 229     );
 230 };
 231
 232 export default MessagesSection;