Add preferences tab to user settings, add subscribe to own cards option

client/src/components/UserSettingsModal/PreferencesPane.jsx

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Radio, Tab } from 'semantic-ui-react';
+
+import styles from './PreferencesPane.module.css';
+
+const PreferencesPane = React.memo(({ subscribeToOwnCards, onUpdate }) => {
+  const [t] = useTranslation();
+
+  const handleSubscribeToOwnCardsChange = useCallback(() => {
+    onUpdate({
+      subscribeToOwnCards: !subscribeToOwnCards,
+    });
+  }, [subscribeToOwnCards, onUpdate]);
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <Radio
+        toggle
+        checked={subscribeToOwnCards}
+        label={t('common.subscribeToMyOwnCardsByDefault')}
+        onChange={handleSubscribeToOwnCardsChange}
+      />
+    </Tab.Pane>
+  );
+});
+
+PreferencesPane.propTypes = {
+  subscribeToOwnCards: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+};
+
+export default PreferencesPane;

client/src/components/UserSettingsModal/PreferencesPane.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  border: none !important;
+  box-shadow: none !important;
+}

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Modal, Tab } from 'semantic-ui-react';
 
 import AccountPane from './AccountPane';
+import PreferencesPane from './PreferencesPane';
 
 const UserSettingsModal = React.memo(
   ({
@@ -13,6 +14,7 @@ const UserSettingsModal = React.memo(
     avatar,
     phone,
     organization,
+    subscribeToOwnCards,
     isAvatarUploading,
     usernameUpdateForm,
     emailUpdateForm,
@@ -57,12 +59,26 @@ const UserSettingsModal = React.memo(
           />
         ),
       },
+      {
+        menuItem: t('common.preferences', {
+          context: 'title',
+        }),
+        render: () => (
+          <PreferencesPane subscribeToOwnCards={subscribeToOwnCards} onUpdate={onUpdate} />
+        ),
+      },
     ];
 
     return (
       <Modal open closeIcon size="small" centered={false} onClose={onClose}>
         <Modal.Content>
-          <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+          <Tab
+            menu={{
+              secondary: true,
+              pointing: true,
+            }}
+            panes={panes}
+          />
         </Modal.Content>
       </Modal>
     );
@@ -76,6 +92,7 @@ UserSettingsModal.propTypes = {
   avatar: PropTypes.string,
   phone: PropTypes.string,
   organization: PropTypes.string,
+  subscribeToOwnCards: PropTypes.bool.isRequired,
   isAvatarUploading: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,