Display digest settings

plugins/talk-plugin-notifications/client/components/Settings.css

@@ -30,3 +30,16 @@
 .disabled {
   color: #e5e5e5;
 }
+
+.digest {
+  display: flex;
+  align-items: center;
+}
+
+.titleDigest {
+  width: 100%;
+}
+
+.digestDropDown {
+  flex-shrink: 0;
+}

plugins/talk-plugin-notifications/client/components/Settings.js

@@ -4,7 +4,11 @@ import { IfSlotIsNotEmpty } from 'plugin-api/beta/client/components';
 import { Slot } from 'plugin-api/beta/client/components';
 import { t } from 'plugin-api/beta/client/services';
 import styles from './Settings.css';
-import { BareButton } from 'plugin-api/beta/client/components/ui';
+import {
+  BareButton,
+  Dropdown,
+  Option,
+} from 'plugin-api/beta/client/components/ui';
 import EmailVerificationBanner from '../containers/EmailVerificationBanner';
 import cn from 'classnames';
 
@@ -24,9 +28,13 @@ class Settings extends React.Component {
       setTurnOffInputFragment,
       updateNotificationSettings,
       turnOffAll,
-      turnOffButtonDisabled,
       needEmailVerification,
       email,
+      digestFrequencyValues,
+      digestFrequency,
+      disableDigest,
+      disableTurnoffButton,
+      onChangeDigestFrequency,
     } = this.props;
 
     return (
@@ -51,14 +59,37 @@ class Settings extends React.Component {
               updateNotificationSettings={updateNotificationSettings}
               disabled={needEmailVerification}
             />
-            <BareButton
-              className={styles.turnOffButton}
-              onClick={turnOffAll}
-              disabled={turnOffButtonDisabled}
-            >
-              {t('talk-plugin-notifications.turn_off_all')}
-            </BareButton>
           </div>
+          <div className={styles.digest}>
+            <h4
+              className={cn(styles.titleDigest, {
+                [styles.disabled]: disableDigest,
+              })}
+            >
+              {t('talk-plugin-notifications.digest_option')}
+            </h4>
+            <Dropdown
+              className={styles.digestDropDown}
+              value={digestFrequency}
+              onChange={onChangeDigestFrequency}
+              disabled={disableDigest}
+            >
+              {digestFrequencyValues.map(v => (
+                <Option
+                  value={v}
+                  key={v}
+                  label={t(`talk-plugin-notifications.digest_enum.${v}`)}
+                />
+              ))}
+            </Dropdown>
+          </div>
+          <BareButton
+            className={styles.turnOffButton}
+            onClick={turnOffAll}
+            disabled={disableTurnoffButton}
+          >
+            {t('talk-plugin-notifications.turn_off_all')}
+          </BareButton>
         </div>
       </IfSlotIsNotEmpty>
     );
@@ -72,9 +103,13 @@ Settings.propTypes = {
   setTurnOffInputFragment: PropTypes.func.isRequired,
   updateNotificationSettings: PropTypes.func.isRequired,
   turnOffAll: PropTypes.func.isRequired,
-  turnOffButtonDisabled: PropTypes.bool.isRequired,
+  disableTurnoffButton: PropTypes.bool.isRequired,
+  disableDigest: PropTypes.bool.isRequired,
   needEmailVerification: PropTypes.bool.isRequired,
   email: PropTypes.string,
+  digestFrequencyValues: PropTypes.array.isRequired,
+  digestFrequency: PropTypes.string.isRequired,
+  onChangeDigestFrequency: PropTypes.func.isRequired,
 };
 
 export default Settings;

plugins/talk-plugin-notifications/client/containers/Settings.js

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose, gql } from 'react-apollo';
 import Settings from '../components/Settings';
-import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import {
+  withFragments,
+  excludeIf,
+  withEnumValues,
+} from 'plugin-api/beta/client/hocs';
 import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 import { withUpdateNotificationSettings } from '../mutations';
 
@@ -39,6 +43,11 @@ class SettingsContainer extends React.Component {
     );
   }
 
+  setDigestFrequency(val) {
+    // TODO: implement mutation.
+    console.log(val);
+  }
+
   render() {
     return (
       <Settings
@@ -49,9 +58,15 @@ class SettingsContainer extends React.Component {
         setTurnOffInputFragment={this.setTurnOffInputFragment}
         updateNotificationSettings={this.props.updateNotificationSettings}
         turnOffAll={this.turnOffAll}
-        turnOffButtonDisabled={this.state.hasNotifications.length === 0}
         needEmailVerification={this.getNeedEmailVerification()}
         email={this.props.root.me.email}
+        digestFrequencyValues={this.props.digestFrequencyValues}
+        digestFrequency={
+          this.props.root.me.notificationSettings.digestFrequency
+        }
+        disableDigest={this.state.hasNotifications.length === 0}
+        disableTurnoffButton={this.state.hasNotifications.length === 0}
+        onChangeDigestFrequency={this.setDigestFrequency}
       />
     );
   }
@@ -61,6 +76,7 @@ SettingsContainer.propTypes = {
   data: PropTypes.object,
   root: PropTypes.object,
   updateNotificationSettings: PropTypes.func.isRequired,
+  digestFrequencyValues: PropTypes.array.isRequired,
 };
 
 const enhance = compose(
@@ -70,6 +86,9 @@ const enhance = compose(
         __typename
         ${getSlotFragmentSpreads(slots, 'root')}
         me {
+          notificationSettings {
+            digestFrequency
+          }
           email
           profiles {
             provider
@@ -85,7 +104,8 @@ const enhance = compose(
     props =>
       !props.root.me.profiles.some(profile => profile.provider === 'local')
   ),
-  withUpdateNotificationSettings
+  withUpdateNotificationSettings,
+  withEnumValues('DIGEST_FREQUENCY', 'digestFrequencyValues')
 );
 
 export default enhance(SettingsContainer);

plugins/talk-plugin-notifications/client/translations.yml

@@ -13,3 +13,6 @@ en:
     banner_error:
       title: Error
       text: There has been an error sending your verification email. Please try again later.
+    digest_option: I want to receive notifications
+    digest_enum:
+      NONE: Immediately