TEMP

AKASHAorg · Nov 21, 2024 · 5180763 · 5180763
1 parent c384d2b
commit 5180763
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/extensions/apps/settings/src/components/pages/notifications-preferences-option.tsx b/extensions/apps/settings/src/components/pages/notifications-preferences-option.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { tw } from '@twind/core';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import {
   useAkashaStore,
@@ -17,6 +18,7 @@ import {
   LockDark,
 } from '@akashaorg/design-system-core/lib/components/Icon/akasha-icons';
 import { NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
+import Checkbox from '@akashaorg/design-system-core/lib/components/Checkbox';
 
 const NotificationsPreferencesOption: React.FC = () => {
   const { theme } = useTheme();
@@ -102,11 +104,48 @@ const NotificationsPreferencesOption: React.FC = () => {
 
   return (
     <Stack spacing="gap-y-4" customStyle="mb-2">
-      <Text variant="h5">{t('Preferences')}</Text>
+      <Text variant="h5">{t('Notification Preferences')}</Text>
       {!notificationsEnabled && unlockCard}
-      <Text variant="body2" color={{ dark: 'white', light: 'black' }}>
-        {t('Rest of settings ...')}
-      </Text>
+
+      <Card
+        padding="px-3 pb-3"
+        customStyle={tw(`${!notificationsEnabled && 'opacity-50 pointer-events-none'}`)}
+      >
+        {/* Enable all */}
+        <Stack customStyle="border(b-1 solid grey8 dark:grey5) mb-4">
+          <Stack direction="row" justify="between" align="center" customStyle="my-4">
+            <Text variant="body1">{t('Enable all')}</Text>
+            <Checkbox
+              id="enable-all-notifications-checkbox"
+              value="Enable all"
+              name="enable-all"
+              isSelected={true}
+              handleChange={() => {}}
+              size="large"
+              customStyle="w-6 h-6"
+            />
+          </Stack>
+        </Stack>
+
+        <Text variant="h6">{t('Default Extensions')}</Text>
+
+        {/* Profile */}
+        <Stack customStyle="border(b-1 solid grey8 dark:grey5) mb-4">
+          <Stack direction="row" justify="between" align="center" customStyle="my-4">
+            <Text variant="body1">{t('Profile')}</Text>
+            <Checkbox
+              id="profile-checkbox"
+              value="Profile"
+              name="profile"
+              isSelected={true}
+              handleChange={() => {}}
+              size="large"
+              customStyle="w-6 h-6"
+            />
+          </Stack>
+          Get notifications about new followers
+        </Stack>
+      </Card>
     </Stack>
   );
 };

diff --git a/libs/hooks/src/use-notifications.ts b/libs/hooks/src/use-notifications.ts
@@ -12,9 +12,9 @@ import getSDK from '@akashaorg/core-sdk';
 export function useNotifications() {
   const sdk = getSDK();
 
-  const [previouslyEnabled, setPreviouslyEnabled] = useState(() => {
-    sdk.services.common.notification.getNotificationsEnabledStatus();
-  });
+  const [previouslyEnabled, setPreviouslyEnabled] = useState(() =>
+    sdk.services.common.notification.getNotificationsEnabledStatus(),
+  );
   const [notificationsEnabled, setNotificationsEnabled] = useState(() =>
     sdk.services.common.notification.checkIfNotificationsEnabled(),
   );

diff --git a/libs/sdk/src/common/notification/notification.ts b/libs/sdk/src/common/notification/notification.ts
@@ -445,7 +445,7 @@ class NotificationService {
     return localStorage.set(this.localStorageKeyOfLatestSeenNotification, val);
   }
 
-  getNotificationsEnabledStatus() {
+  getNotificationsEnabledStatus(): boolean {
     const status = localStorage.getItem(this.localStorageKeyOfNotificationsEnabledStatus);
     return status ? JSON.parse(status) : false;
   }