packages/components/containers/account/EditEmailSubscription.tsx

   1 import { useState } from 'react';
   2
   3 import { userSettingsActions } from '@proton/account';
   4 import { useUser } from '@proton/account/user/hooks';
   5 import { useUserSettings } from '@proton/account/userSettings/hooks';
   6 import {
   7     type EmailSubscription,
   8     filterNews,
   9     getEmailSubscriptions,
  10     getUpdateNotification,
  11 } from '@proton/components/containers/account/constants/email-subscriptions';
  12 import useApi from '@proton/components/hooks/useApi';
  13 import useNotifications from '@proton/components/hooks/useNotifications';
  14 import { useDispatch } from '@proton/redux-shared-store';
  15 import { patchNews } from '@proton/shared/lib/api/settings';
  16 import { type NewsletterSubscriptionUpdateData, getUpdatedNewsBitmap } from '@proton/shared/lib/helpers/newsletter';
  17 import type { UserSettings } from '@proton/shared/lib/interfaces';
  18
  19 import { EmailSubscriptionToggleWithHeader } from './EmailSubscriptionToggles';
  20
  21 const EditEmailSubscription = () => {
  22     const [user] = useUser();
  23     const [userSettings] = useUserSettings();
  24     const { createNotification } = useNotifications();
  25     const dispatch = useDispatch();
  26     const api = useApi();
  27     const [loadingMap, setLoadingMap] = useState<{ [key: string]: boolean }>({});
  28
  29     const run = async (data: NewsletterSubscriptionUpdateData) => {
  30         dispatch(userSettingsActions.update({ UserSettings: { News: getUpdatedNewsBitmap(userSettings.News, data) } }));
  31         await api<{ UserSettings: UserSettings }>(patchNews(data));
  32         createNotification({ text: getUpdateNotification(data) });
  33     };
  34
  35     const setLoadingMapDiff = (data: NewsletterSubscriptionUpdateData, value: boolean) => {
  36         setLoadingMap((oldValue) => ({
  37             ...oldValue,
  38             ...Object.fromEntries(Object.entries(data).map(([key]) => [key, value])),
  39         }));
  40     };
  41
  42     const handleChange = async (data: NewsletterSubscriptionUpdateData) => {
  43         setLoadingMapDiff(data, true);
  44         run(data).finally(() => {
  45             setLoadingMapDiff(data, false);
  46         });
  47     };
  48
  49     const filter = (emailSubscription: EmailSubscription) =>
  50         filterNews({
  51             emailSubscription,
  52             user,
  53             userSettings,
  54         });
  55
  56     const { general, product, notifications } = getEmailSubscriptions(filter);
  57
  58     const sharedProps = {
  59         onChange: handleChange,
  60         loadingMap,
  61         News: userSettings.News,
  62     };
  63
  64     return (
  65         <div className="flex flex-column gap-4">
  66             <EmailSubscriptionToggleWithHeader title={general.title} subscriptions={general.toggles} {...sharedProps} />
  67             <EmailSubscriptionToggleWithHeader title={product.title} subscriptions={product.toggles} {...sharedProps} />
  68             <EmailSubscriptionToggleWithHeader
  69                 title={notifications.title}
  70                 subscriptions={notifications.toggles}
  71                 {...sharedProps}
  72             />
  73         </div>
  74     );
  75 };
  76
  77 export default EditEmailSubscription;