add toogle for email notifications in settings

src/app/features/settings/notifications/SystemNotification.tsx

@@ -1,11 +1,88 @@
-import React from 'react';
-import { Box, Text, Switch, Button, color } from 'folds';
+import React, { useCallback } from 'react';
+import { Box, Text, Switch, Button, color, Spinner } from 'folds';
+import { IPusherRequest } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
+import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+
+function EmailNotification() {
+  const mx = useMatrixClient();
+  const [result, refreshResult] = useEmailNotifications();
+
+  const [setState, setEnable] = useAsyncCallback(
+    useCallback(
+      async (email: string, enable: boolean) => {
+        if (enable) {
+          await mx.setPusher({
+            kind: 'email',
+            app_id: 'm.email',
+            pushkey: email,
+            app_display_name: 'Email Notifications',
+            device_display_name: email,
+            lang: 'en',
+            data: {
+              brand: 'Cinny',
+            },
+            append: true,
+          });
+          return;
+        }
+        await mx.setPusher({
+          pushkey: email,
+          app_id: 'm.email',
+          kind: null,
+        } as unknown as IPusherRequest);
+      },
+      [mx]
+    )
+  );
+
+  const handleChange = (value: boolean) => {
+    if (result && result.email) {
+      setEnable(result.email, value).then(() => {
+        refreshResult();
+      });
+    }
+  };
+
+  return (
+    <SettingTile
+      title="Email Notification"
+      description={
+        <>
+          {result && !result.email && (
+            <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+              Your account does not have any email attached.
+            </Text>
+          )}
+          {result && result.email && <>Send notification to your email. {`("${result.email}")`}</>}
+          {result === null && (
+            <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+              Unexpected Error!
+            </Text>
+          )}
+          {result === undefined && 'Send notification to your email.'}
+        </>
+      }
+      after={
+        <>
+          {setState.status !== AsyncStatus.Loading &&
+            typeof result === 'object' &&
+            result?.email && <Switch value={result.enabled} onChange={handleChange} />}
+          {(setState.status === AsyncStatus.Loading || result === undefined) && (
+            <Spinner variant="Secondary" />
+          )}
+        </>
+      }
+    />
+  );
+}
 
 export function SystemNotification() {
   const notifPermission = usePermissionState('notifications', getNotificationState());
@@ -68,6 +145,14 @@ export function SystemNotification() {
           after={<Switch value={isNotificationSounds} onChange={setIsNotificationSounds} />}
         />
       </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <EmailNotification />
+      </SequenceCard>
     </Box>
   );
 }