add notifications preference block to the profile page

SaladTechnologies · Jan 16, 2024 · b2f57db · b2f57db
1 parent e004a69
commit b2f57db
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 40 deletions.
diff --git a/packages/web-app/src/components/Dropdown.tsx b/packages/web-app/src/components/Dropdown.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
-import { Component } from 'react'
+import classNames from 'classnames'
+import type { FC } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import type { OptionsOrGroups } from 'react-select'
@@ -8,53 +8,80 @@ import type { SaladTheme } from '../SaladTheme'
 
 const styles = (theme: SaladTheme) => ({
   container: {
+    color: theme.lightGreen,
+  },
+  dark: {
     fontFamily: theme.fontGroteskBook19,
     fontSize: 12,
-    color: theme.lightGreen,
+  },
+  light: {
+    fontFamily: theme.fontMallory,
+    fontSize: 16,
   },
 })
 
 interface Props extends WithStyles<typeof styles> {
+  type?: 'dark' | 'light'
   options?: OptionsOrGroups<any, any>
   onChange?: (value?: any) => void
 }
 
-const customStyles = {
-  singleValue: (provided: any, state: any) => {
-    const opacity = state.isDisabled ? 0.5 : 1
-    const transition = 'opacity 300ms'
-    const color = '#DBF1C1'
+const darkColorsTheme = {
+  neutral0: '#0A2133',
+  primary25: '#1F4F22',
+  primary: '#DBF1C1',
+  primary50: '#B2D530',
+  neutral20: '#DBF1C1',
+}
 
-    return { ...provided, opacity, transition, color }
-  },
+const lightColorsTheme = {
+  primary: 'transparent',
+  neutral20: '#0A2133',
+  primary25: '#DBF1C1',
+  primary50: '#B2D530',
 }
 
-class _Dropdown extends Component<Props> {
-  public override render(): ReactNode {
-    const { options, onChange, classes } = this.props
-
-    return (
-      <Select
-        className={classes.container}
-        options={options}
-        onChange={onChange}
-        defaultValue={options && options[0]}
-        styles={customStyles}
-        theme={(selectTheme) => ({
-          // TODO: Get the theme data using react-jss
-          ...selectTheme,
-          borderRadius: 0,
-          colors: {
-            ...selectTheme.colors,
-            neutral0: '#0A2133',
-            primary25: '#1F4F22',
-            primary: '#DBF1C1',
-            neutral20: '#DBF1C1',
-          },
-        })}
-      />
-    )
+const _Dropdown: FC<Props> = ({ classes, type = 'dark', options, onChange }) => {
+  const customStyles = {
+    option: (styles: any, { isSelected }: any) => {
+      return type === 'dark'
+        ? styles
+        : {
+            ...styles,
+            color: isSelected ? '#53A626' : '#0A2133',
+            cursor: 'pointer',
+          }
+    },
+    singleValue: (provided: any, state: any) => {
+      const opacity = state.isDisabled ? 0.5 : 1
+      const transition = 'opacity 300ms'
+      const colorValue = type === 'dark' ? '#DBF1C1' : '#0A2133'
+
+      return { ...provided, opacity, transition, color: colorValue }
+    },
   }
+
+  return (
+    <Select
+      className={classNames(classes.container, {
+        [classes.dark]: type === 'dark',
+        [classes.light]: type === 'light',
+      })}
+      options={options}
+      onChange={onChange}
+      defaultValue={options && options[0]}
+      styles={customStyles}
+      theme={(selectTheme) => ({
+        // TODO: Get the theme data using react-jss
+        ...selectTheme,
+        borderRadius: 0,
+        colors: {
+          ...selectTheme.colors,
+          ...(type === 'dark' ? darkColorsTheme : lightColorsTheme),
+        },
+      })}
+    />
+  )
 }
 
 export const Dropdown = withStyles(styles)(_Dropdown)
diff --git a/packages/web-app/src/modules/account-views/account-views/components/Account.tsx b/packages/web-app/src/modules/account-views/account-views/components/Account.tsx
@@ -7,12 +7,14 @@ import withStyles from 'react-jss'
 import type { SaladTheme } from '../../../../SaladTheme'
 import { DefaultTheme } from '../../../../SaladTheme'
 import { Head } from '../../../../components'
+import { Dropdown } from '../../../../components/Dropdown'
 import { config } from '../../../../config'
 import { withLogin } from '../../../auth-views'
 import type { Avatar, Profile } from '../../../profile/models'
 import { AccountTermsAndConditionsUpdate } from './AccountTermsAndConditionsUpdate'
 import { GoogleSignInForm } from './GoogleSignInForm'
 import { PayPalLoginButton } from './PayPalLoginButton'
+import { accountNotificationPreferenceDropdownOptions } from './assets/constants'
 
 const styles = (theme: SaladTheme) => ({
   container: {
@@ -35,7 +37,7 @@ const styles = (theme: SaladTheme) => ({
   avatarContainer: {
     paddingTop: 66,
   },
-  accountConnectionsContainer: {
+  accountSection: {
     paddingTop: 56,
   },
   connectAccountDescription: {
@@ -62,14 +64,26 @@ const styles = (theme: SaladTheme) => ({
     paddingTop: 5,
     wordWrap: 'break-word',
   },
-  minecraftConnectText: {
+  textContainer: {
     maxWidth: 400,
     paddingTop: 20,
   },
   connectAccountError: {
     paddingTop: 10,
     color: '#811417',
   },
+  notificationPreferences: {
+    display: 'flex',
+    gap: '56px',
+    flexWrap: 'wrap',
+  },
+  notificationPreference: {
+    width: 'calc(50% - 56px)',
+    paddingTop: 56,
+  },
+  notificationPrefenceLabel: {
+    marginBottom: 3,
+  },
 })
 
 interface Props extends WithStyles<typeof styles> {
@@ -142,7 +156,6 @@ const _Account: FC<Props> = ({
   onToggleAcceptTermsAndConditions,
 }) => {
   const [payPalLoadRetries, setPayPalLoadRetries] = useState(0)
-
   // Hide google SSO until salad google account devops setup
   const hideGoogleSSO = !config.isTestEnvironment
 
@@ -217,7 +230,7 @@ const _Account: FC<Props> = ({
               />
             </div>
           )}
-          <div className={classes.accountConnectionsContainer}>
+          <div className={classes.accountSection}>
             <Text variant="baseXL">Account Connections</Text>
             <div className={classes.accountConnectionItem}>
               <div className={classes.subheadingContainer}>
@@ -303,14 +316,59 @@ const _Account: FC<Props> = ({
                   defaultValue={profile?.extensions?.minecraftUsername}
                 />
               </div>
-              <div className={classes.minecraftConnectText}>
+              <div className={classes.textContainer}>
                 <Text variant="baseS">
                   Connect Salad to your Minecraft account. A Minecraft username is required to redeem many Minecraft
                   rewards.
                 </Text>
               </div>
             </div>
           </div>
+          <div className={classes.accountSection}>
+            <Text variant="baseXL">Notification Preferences</Text>
+            <div className={classes.notificationPreferences}>
+              <div className={classes.notificationPreference}>
+                <div className={classes.fieldContainer}>
+                  <div className={classes.notificationPrefenceLabel}>
+                    <Text variant="baseS">Account Activity Notifications</Text>
+                  </div>
+                  <Dropdown type="light" options={accountNotificationPreferenceDropdownOptions} />
+                </div>
+                <div className={classes.textContainer}>
+                  <Text variant="baseS">
+                    Notifications related to your usage and progress within Salad. e.g.: Achievements, Progress towards
+                    your Target Reward, etc.
+                  </Text>
+                </div>
+              </div>
+              <div className={classes.notificationPreference}>
+                <div className={classes.fieldContainer}>
+                  <div className={classes.notificationPrefenceLabel}>
+                    <Text variant="baseS">Promo Notifications Enabled</Text>
+                  </div>
+                  <Dropdown type="light" options={accountNotificationPreferenceDropdownOptions} />
+                </div>
+                <div className={classes.textContainer}>
+                  <Text variant="baseS">
+                    Notifications related to store sales, new rewards and other Salad partnerships.
+                  </Text>
+                </div>
+              </div>
+              <div className={classes.notificationPreference}>
+                <div className={classes.fieldContainer}>
+                  <div className={classes.notificationPrefenceLabel}>
+                    <Text variant="baseS">Community Notifications Enabled</Text>
+                  </div>
+                  <Dropdown type="light" options={accountNotificationPreferenceDropdownOptions} />
+                </div>
+                <div className={classes.textContainer}>
+                  <Text variant="baseS">
+                    Notifications related to community events, user survey opportunities, etc.
+                  </Text>
+                </div>
+              </div>
+            </div>
+          </div>
         </Layout>
       </Scrollbars>
     </div>

diff --git a/packages/web-app/src/modules/account-views/account-views/components/assets/constants.tsx b/packages/web-app/src/modules/account-views/account-views/components/assets/constants.tsx
@@ -0,0 +1,10 @@
+export const accountNotificationPreferenceDropdownOptions = [
+  {
+    label: 'Enabled',
+    value: true,
+  },
+  {
+    label: 'Disabled',
+    value: false,
+  },
+]