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;