feat(settings): add email frequency setting

functions/src/emulator/seed/content-generate.ts

@@ -63,7 +63,7 @@ async function setMockNotifications(user: IMockAuthUser) {
       },
     ],
     notification_settings: {
-      emailFrequency: 'weekly',
+      emailFrequency: 'weekly' as any, // should set from Enum but want to avoid import
       enabled: {
         new_comment: true,
         howto_useful: true,

src/models/user.models.tsx

@@ -101,11 +101,18 @@ export const NotificationTypes = [
 
 export type NotificationType = typeof NotificationTypes[number]
 
+export enum EmailNotificationFrequency {
+  NEVER = '',
+  DAILY = 'daily',
+  WEEKLY = 'weekly',
+  MONTHLY = 'monthly',
+}
+
 export type INotificationSettings = {
   enabled: {
     [T in NotificationType]: boolean
   }
-  emailFrequency: 'daily' | 'weekly'
+  emailFrequency: EmailNotificationFrequency
 }
 
 export interface IEmailNotificationsQueueItem {

src/pages/Settings/SettingsPage.tsx

@@ -10,6 +10,7 @@ import { ExpertiseSection } from './content/formSections/Expertise.section'
 import { WorkspaceSection } from './content/formSections/Workspace.section'
 import { CollectionSection } from './content/formSections/Collection.section'
 import { AccountSettingsSection } from './content/formSections/AccountSettings.section'
+import { EmailNotificationsSection } from './content/formSections/EmailNotifications.section'
 import { Button, TextNotification } from 'oa-components'
 import { ProfileGuidelines } from './content/PostingGuidelines'
 import { Form } from 'react-final-form'
@@ -24,6 +25,7 @@ import { toJS } from 'mobx'
 import { isModuleSupported, MODULE } from 'src/modules'
 import { logger } from 'src/logger'
 import { ProfileType } from 'src/modules/profile/types'
+import { AuthWrapper } from 'src/common/AuthWrapper'
 
 interface IProps {
   /** user ID for lookup when editing another user as admin */
@@ -258,6 +260,11 @@ export class UserSettings extends React.Component<IProps, IState> {
                         showLocationDropdown={this.state.showLocationDropdown}
                       />
                     </Flex>
+                    <AuthWrapper roleRequired="beta-tester">
+                      <EmailNotificationsSection
+                        notificationSettings={values.notification_settings}
+                      />
+                    </AuthWrapper>
                   </form>
                   <AccountSettingsSection />
                 </Box>

src/pages/Settings/content/formSections/EmailNotifications.section.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Heading, Box, Text } from 'theme-ui'
+import { FlexSectionContainer } from './elements'
+import { observer, inject } from 'mobx-react'
+import { Select } from 'oa-components'
+import type { INotificationSettings } from 'src/models/user.models'
+import { EmailNotificationFrequency } from 'src/models/user.models'
+import { Field } from 'react-final-form'
+
+interface IProps {
+  notificationSettings?: INotificationSettings
+}
+
+const emailFrequencyOptions: {
+  value: EmailNotificationFrequency
+  label: string
+}[] = [
+  { value: EmailNotificationFrequency.NEVER, label: 'Never' },
+  { value: EmailNotificationFrequency.DAILY, label: 'Daily' },
+  { value: EmailNotificationFrequency.WEEKLY, label: 'Weekly' },
+  { value: EmailNotificationFrequency.MONTHLY, label: 'Monthly' },
+]
+
+@inject('userStore')
+@observer
+export class EmailNotificationsSection extends React.Component<any> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <FlexSectionContainer>
+        <Heading variant="small">Email notifications</Heading>
+        <Text mt={4} mb={4} sx={{ display: 'block' }}>
+          We send an email with all the notifications you've missed. Select how
+          often you want to receive this:
+        </Text>
+        <Box mt={2} sx={{ width: '40%' }}>
+          <Field name="notification_settings.emailFrequency">
+            {({ input }) => {
+              return (
+                <Select
+                  options={emailFrequencyOptions}
+                  defaultValue={emailFrequencyOptions.find(
+                    ({ value }) =>
+                      value ===
+                        this.props.notificationSettings?.emailFrequency ??
+                      EmailNotificationFrequency.NEVER,
+                  )}
+                  onChange={({ value }) => input.onChange(value)}
+                />
+              )
+            }}
+          </Field>
+        </Box>
+      </FlexSectionContainer>
+    )
+  }
+}