From 47b1d7bb733b9e74ba3b0ed95f0cd7d0edf4d830 Mon Sep 17 00:00:00 2001
From: Brian Fleming <brianfleming@users.noreply.github.com>
Date: Fri, 13 Sep 2024 13:57:40 -0400
Subject: [PATCH] Style Tipline settings area menu to better match the Check UI
 (#2105)

* begin to style tipline settings area menu to better match the Check UI

* add unrelated missing form layout class

* sort prop types to be a good citizen

* [smoke tests] Run all smoke tests for this branch

* [smoke tests] Run all smoke tests for this branch
---
 .../ButtonMain.module.css                     |   2 +-
 .../team/Newsletter/NewsletterHeader.js       |  14 +-
 .../team/SmoochBot/SmoochBot.module.css       |  29 +++
 .../team/SmoochBot/SmoochBotConfig.js         | 172 ++++++++----------
 .../SmoochBot/SmoochBotIntegrationButton.js   |  23 ++-
 .../team/SmoochBot/SmoochBotIntegrations.js   |  31 +---
 .../team/SmoochBot/SmoochBotSettings.js       |  11 +-
 .../team/SmoochBot/SmoochBotSidebar.js        |  43 +++--
 .../components/team/SmoochBot/localizables.js |   5 +-
 9 files changed, 162 insertions(+), 168 deletions(-)
 create mode 100644 src/app/components/team/SmoochBot/SmoochBot.module.css

diff --git a/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css b/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css
index 03370742a6..97d237b031 100644
--- a/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css
+++ b/src/app/components/cds/buttons-checkboxes-chips/ButtonMain.module.css
@@ -307,7 +307,7 @@
 
   &.theme-black:not([type='button']:disabled):not([type='submit']:disabled) {
     &.contained {
-      @mixin main-button-contained-theme var(--color-gray-15), var(--color-gray-59), var(--color-white-100), var(--color-white-100);
+      @mixin main-button-contained-theme var(--color-gray-15), var(--color-gray-37), var(--color-white-100), var(--color-white-100);
     }
 
     &.outlined {
diff --git a/src/app/components/team/Newsletter/NewsletterHeader.js b/src/app/components/team/Newsletter/NewsletterHeader.js
index a1517cb6fb..b8af19737d 100644
--- a/src/app/components/team/Newsletter/NewsletterHeader.js
+++ b/src/app/components/team/Newsletter/NewsletterHeader.js
@@ -1,10 +1,10 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
 import Select from '../../cds/inputs/Select';
 import LimitedTextField from '../../layout/inputs/LimitedTextField';
 import Upload from '../../cds/inputs/Upload';
+import inputStyles from '../../../styles/css/inputs.module.css';
 import styles from './NewsletterComponent.module.css';
 
 const messages = defineMessages({
@@ -58,7 +58,7 @@ const NewsletterHeader = ({
   setFile,
   setFileName,
 }) => (
-  <div>
+  <div className={inputStyles['form-fieldset-field']}>
     <Select
       className={styles.select}
       disabled={disabled}
@@ -134,16 +134,16 @@ NewsletterHeader.defaultProps = {
 };
 
 NewsletterHeader.propTypes = {
-  disabled: PropTypes.bool,
   availableHeaderTypes: PropTypes.arrayOf(PropTypes.string),
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  fileName: PropTypes.string,
   headerType: PropTypes.oneOf(['', 'none', 'link_preview', 'image', 'video', 'audio']),
+  intl: intlShape.isRequired,
+  overlayText: PropTypes.string,
   setFile: PropTypes.func.isRequired,
   setFileName: PropTypes.func.isRequired,
-  fileName: PropTypes.string,
-  overlayText: PropTypes.string,
   onUpdateField: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
-  error: PropTypes.bool,
 };
 
 export default injectIntl(NewsletterHeader);
diff --git a/src/app/components/team/SmoochBot/SmoochBot.module.css b/src/app/components/team/SmoochBot/SmoochBot.module.css
new file mode 100644
index 0000000000..f39066496f
--- /dev/null
+++ b/src/app/components/team/SmoochBot/SmoochBot.module.css
@@ -0,0 +1,29 @@
+.smoochBotMenu {
+  margin: 0 0 32px;
+
+  li {
+    margin: 0 0 8px;
+
+    .smoochBotMenuButton {
+      border-radius: var(--border-radius-max);
+      justify-content: start;
+      width: 100%;
+    }
+  }
+
+  > .smoochBotMenuResource {
+    border-top: 1px solid var(--color-gray-88);
+    margin: 16px 0 8px;
+    padding: 16px 0 0;
+  }
+
+  .smoochBotMenuResource ~ .smoochBotMenuResource {
+    border: 0;
+    margin: 0 0 8px;
+    padding: 0;
+  }
+}
+
+.smoochbot-component-input {
+  min-width: 500px;
+}
diff --git a/src/app/components/team/SmoochBot/SmoochBotConfig.js b/src/app/components/team/SmoochBot/SmoochBotConfig.js
index d1dab14a65..12612453a1 100644
--- a/src/app/components/team/SmoochBot/SmoochBotConfig.js
+++ b/src/app/components/team/SmoochBot/SmoochBotConfig.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -7,7 +6,6 @@ import SmoochBotResourceEditor from './SmoochBotResourceEditor';
 import SmoochBotSettings from './SmoochBotSettings';
 import SmoochBotContentAndTranslation from './SmoochBotContentAndTranslation';
 import SmoochBotMainMenu from './SmoochBotMainMenu';
-import { ToggleButton, ToggleButtonGroup } from '../../cds/inputs/ToggleButtonGroup';
 import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain';
 import AddIcon from '../../../icons/add.svg';
 import createEnvironment from '../../../relay/EnvironmentModern';
@@ -23,7 +21,6 @@ const SmoochBotConfig = (props) => {
     userRole,
     value,
   } = props;
-  const [currentTab, setCurrentTab] = React.useState('bot');
   const defaultOption = 'smooch_content';
   const [currentOption, setCurrentOption] = React.useState(defaultOption);
   const team = props?.currentUser?.current_team;
@@ -76,13 +73,6 @@ const SmoochBotConfig = (props) => {
     props.onChange(newValue);
   };
 
-  const handleChangeTab = (event, newTab) => {
-    if (currentResource && newTab === 'settings') {
-      onEditingResource(false);
-    }
-    setCurrentTab(newTab);
-  };
-
   const handleChangeImage = (file) => {
     const updatedValue = Object.assign({}, value);
     if (file) {
@@ -130,92 +120,74 @@ const SmoochBotConfig = (props) => {
 
   return (
     <React.Fragment>
-      { userRole === 'admin' ?
-        <div className={styles['tipline-settings-toggle']}>
-          <ToggleButtonGroup
-            exclusive
-            value={currentTab}
-            variant="contained"
-            onChange={handleChangeTab}
-          >
-            <ToggleButton key="1" value="bot">
-              <FormattedMessage defaultMessage="Design your bot" description="Title of tipline settings page" id="smoochBot.designYourBot" />
-            </ToggleButton>
-            <ToggleButton key="2" value="settings">
-              <FormattedMessage defaultMessage="Settings" description="Tab label to click to see the settings area" id="smoochBot.settings" />
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </div>
-        : null
-      }
-      { currentTab === 'bot' ?
-        <React.Fragment>
-          <div className={styles['bot-designer']}>
-            <div className={styles['bot-designer-menu']}>
-              <SmoochBotSidebar
-                currentOption={currentOption}
+      <React.Fragment>
+        <div className={styles['bot-designer']}>
+          <div className={styles['bot-designer-menu']}>
+            <SmoochBotSidebar
+              currentOption={currentOption}
+              resources={resources}
+              userRole={userRole}
+              onClick={handleSelectOption}
+            />
+            <ButtonMain
+              iconLeft={<AddIcon />}
+              label={
+                <FormattedMessage
+                  defaultMessage="New Tipline Resource"
+                  description="Button label to add a resource to this bot"
+                  id="smoochBot.addResource"
+                />
+              }
+              size="default"
+              theme="text"
+              variant="contained"
+              onClick={() => {
+                handleSelectOption('resource_new');
+              }}
+            />
+          </div>
+          <div className={styles['bot-designer-content']}>
+            { currentResource ?
+              <SmoochBotResourceEditor
+                environment={environment}
+                key={currentResource.id}
+                language={currentLanguage}
+                resource={currentResource}
+                onCreate={(newResource) => { handleSelectOption(`resource_${newResource.dbid}`); }}
+                onDelete={() => { handleSelectOption(defaultOption); }}
+              /> : null }
+            { currentOption === 'smooch_content' ?
+              <SmoochBotContentAndTranslation
+                key={currentLanguage}
+                value={value.smooch_workflows[currentWorkflowIndex]}
+                onChangeImage={handleChangeImage}
+                onChangeMessage={handleChangeMessage}
+                onChangeStateMessage={handleChangeStateMessage}
+              /> : null }
+            { currentOption === 'smooch_main_menu' ?
+              <SmoochBotMainMenu
+                currentLanguage={currentLanguage}
+                currentUser={props.currentUser}
+                enabledIntegrations={props.enabledIntegrations}
+                hasUnsavedChanges={hasUnsavedChanges}
+                key={currentLanguage}
+                languages={languages.filter(f => f !== currentLanguage)}
                 resources={resources}
-                onClick={handleSelectOption}
-              />
-              <ButtonMain
-                iconLeft={<AddIcon />}
-                label={
-                  <FormattedMessage
-                    defaultMessage="Resource"
-                    description="Button label to add a resource to this bot"
-                    id="smoochBot.addResource"
-                  />
-                }
-                size="default"
-                theme="text"
-                variant="contained"
-                onClick={() => {
-                  handleSelectOption('resource_new');
-                }}
-              />
-            </div>
-            <div className={styles['bot-designer-content']}>
-              { currentResource ?
-                <SmoochBotResourceEditor
-                  environment={environment}
-                  key={currentResource.id}
-                  language={currentLanguage}
-                  resource={currentResource}
-                  onCreate={(newResource) => { handleSelectOption(`resource_${newResource.dbid}`); }}
-                  onDelete={() => { handleSelectOption(defaultOption); }}
-                /> : null }
-              { currentOption === 'smooch_content' ?
-                <SmoochBotContentAndTranslation
-                  key={currentLanguage}
-                  value={value.smooch_workflows[currentWorkflowIndex]}
-                  onChangeImage={handleChangeImage}
-                  onChangeMessage={handleChangeMessage}
-                  onChangeStateMessage={handleChangeStateMessage}
-                /> : null }
-              { currentOption === 'smooch_main_menu' ?
-                <SmoochBotMainMenu
-                  currentLanguage={currentLanguage}
-                  currentUser={props.currentUser}
-                  enabledIntegrations={props.enabledIntegrations}
-                  hasUnsavedChanges={hasUnsavedChanges}
-                  key={currentLanguage}
-                  languages={languages.filter(f => f !== currentLanguage)}
-                  resources={resources}
-                  value={value.smooch_workflows[currentWorkflowIndex]}
-                  onChange={handleChangeMenu}
-                /> : null }
-            </div>
+                value={value.smooch_workflows[currentWorkflowIndex]}
+                onChange={handleChangeMenu}
+              /> : null }
+            { currentOption === 'smooch_settings' ?
+              <SmoochBotSettings
+                currentUser={props.currentUser}
+                enabledIntegrations={props.enabledIntegrations}
+                installationId={props.installationId}
+                schema={settingsSchema}
+                settings={settings}
+                onChange={handleUpdateSetting}
+              /> : null }
           </div>
-        </React.Fragment> : null }
-      { currentTab === 'settings' ?
-        <SmoochBotSettings
-          currentUser={props.currentUser}
-          enabledIntegrations={props.enabledIntegrations}
-          installationId={props.installationId}
-          schema={settingsSchema}
-          settings={settings}
-          onChange={handleUpdateSetting}
-        /> : null }
+        </div>
+      </React.Fragment>
     </React.Fragment>
   );
 };
@@ -225,16 +197,16 @@ SmoochBotConfig.defaultProps = {
 };
 
 SmoochBotConfig.propTypes = {
-  installationId: PropTypes.string.isRequired,
-  value: PropTypes.object.isRequired, // saved settings for the Smooch Bot
-  onChange: PropTypes.func.isRequired, // called after "save" is clicked
-  schema: PropTypes.object.isRequired,
   currentUser: PropTypes.object.isRequired,
-  userRole: PropTypes.string.isRequired,
   enabledIntegrations: PropTypes.object.isRequired,
+  hasUnsavedChanges: PropTypes.bool.isRequired,
+  installationId: PropTypes.string.isRequired,
   resources: PropTypes.arrayOf(PropTypes.object),
+  schema: PropTypes.object.isRequired,
+  userRole: PropTypes.string.isRequired,
+  value: PropTypes.object.isRequired, // saved settings for the Smooch Bot
+  onChange: PropTypes.func.isRequired, // called after "save" is clicked
   onEditingResource: PropTypes.func.isRequired,
-  hasUnsavedChanges: PropTypes.bool.isRequired,
 };
 
 export default SmoochBotConfig;
diff --git a/src/app/components/team/SmoochBot/SmoochBotIntegrationButton.js b/src/app/components/team/SmoochBot/SmoochBotIntegrationButton.js
index 43d28dbc1f..20f5b63465 100644
--- a/src/app/components/team/SmoochBot/SmoochBotIntegrationButton.js
+++ b/src/app/components/team/SmoochBot/SmoochBotIntegrationButton.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { commitMutation, graphql } from 'react-relay/compat';
@@ -18,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   smoochBotIntegrationButton: {
     margin: theme.spacing(1),
     background: 'var(--color-gray-88)',
-    minWidth: 262,
+    minWidth: 255,
     justifyContent: 'space-between',
     '&:hover': {
       background: 'var(--color-gray-88)',
@@ -424,24 +423,24 @@ SmoochBotIntegrationButton.defaultProps = {
 };
 
 SmoochBotIntegrationButton.propTypes = {
+  deprecationNotice: PropTypes.node, // or null
+  disabled: PropTypes.bool.isRequired,
+  helpUrl: PropTypes.string.isRequired,
+  icon: PropTypes.node.isRequired,
+  info: PropTypes.node, // or null
   installationId: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
   label: PropTypes.string.isRequired,
-  url: PropTypes.string, // if null, "params" must be provided
-  skipUrlConfirmation: PropTypes.bool,
+  online: PropTypes.bool.isRequired,
   params: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.object, // <FormattedMessage />
     key: PropTypes.string,
   })), // if null, "url" must be provided
-  online: PropTypes.bool.isRequired,
-  info: PropTypes.node, // or null
-  deprecationNotice: PropTypes.node, // or null
-  disabled: PropTypes.bool.isRequired,
-  icon: PropTypes.node.isRequired,
   permanentDisconnection: PropTypes.bool,
-  helpUrl: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
   readOnly: PropTypes.bool,
+  skipUrlConfirmation: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+  url: PropTypes.string, // if null, "params" must be provided
 };
 
 export default withSetFlashMessage(injectIntl(SmoochBotIntegrationButton));
diff --git a/src/app/components/team/SmoochBot/SmoochBotIntegrations.js b/src/app/components/team/SmoochBot/SmoochBotIntegrations.js
index fa7775ec2c..ee49b7cdec 100644
--- a/src/app/components/team/SmoochBot/SmoochBotIntegrations.js
+++ b/src/app/components/team/SmoochBot/SmoochBotIntegrations.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -9,18 +8,16 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { QRCodeCanvas } from 'qrcode.react';
 import SmoochBotIntegrationButton from './SmoochBotIntegrationButton';
 import TextField from '../../cds/inputs/TextField';
-import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain';
 import GetAppIcon from '../../../icons/file_download.svg';
 import FileCopyOutlinedIcon from '../../../icons/content_copy.svg';
 import FacebookIcon from '../../../icons/facebook.svg';
 import LineIcon from '../../../icons/line.svg';
-import HelpIcon from '../../../icons/help.svg';
 import TelegramIcon from '../../../icons/telegram.svg';
 import TwitterIcon from '../../../icons/twitter.svg';
 import ViberIcon from '../../../icons/viber.svg';
 import WhatsAppIcon from '../../../icons/whatsapp.svg';
 import InstagramIcon from '../../../icons/instagram.svg';
-import styles from '../Settings.module.css';
+import smoochBotStyles from './SmoochBot.module.css';
 
 const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings }) => {
   const [copied, setCopied] = React.useState(null);
@@ -41,24 +38,8 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings }
     link.click();
   };
 
-  const handleHelp = () => {
-    window.open('https://help.checkmedia.org/en/articles/8772777-setup-your-tipline-bot', '_blank');
-  };
-
   return (
     <React.Fragment>
-      <div className={styles['setting-content-container-title']}>
-        <FormattedMessage defaultMessage="Messaging services" description="Title of Settings tab in the tipline settings page" id="smoochBotIntegrations.title" />
-        <div className={styles['setting-content-container-actions']}>
-          <ButtonMain
-            iconCenter={<HelpIcon />}
-            size="small"
-            theme="text"
-            variant="text"
-            onClick={handleHelp}
-          />
-        </div>
-      </div>
       <Box display="flex" flexWrap="wrap" justifyContent="space-between">
         <SmoochBotIntegrationButton
           disabled={!isEnabled}
@@ -96,11 +77,11 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings }
                   </Box>
                   <Box alignItems="center" display="flex">
                     <TextField
-                      InputProps={{
+                      className={smoochBotStyles['smoochbot-component-input']}
+                      defaultValue={`https://wa.me/${enabledIntegrations.whatsapp.phoneNumber.replace(/[^0-9]/g, '')}`}
+                      inputProps={{
                         readOnly: true,
                       }}
-                      className={styles['smoochbot-component-input']}
-                      defaultValue={`https://wa.me/${enabledIntegrations.whatsapp.phoneNumber.replace(/[^0-9]/g, '')}`}
                       variant="outlined"
                     />
                     <Tooltip
@@ -151,7 +132,7 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings }
                   <Box>
                     <Box alignItems="flex-start" display="flex">
                       <TextField
-                        className={styles['smoochbot-component-input']}
+                        className={smoochBotStyles['smoochbot-component-input']}
                         defaultValue={`<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=https://wa.me/${enabledIntegrations.whatsapp.phoneNumber.replace(/[^0-9]/g, '')}" />`}
                         disabled
                         variant="outlined"
@@ -376,9 +357,9 @@ const SmoochBotIntegrations = ({ enabledIntegrations, installationId, settings }
 };
 
 SmoochBotIntegrations.propTypes = {
-  settings: PropTypes.object.isRequired,
   enabledIntegrations: PropTypes.object.isRequired,
   installationId: PropTypes.string.isRequired,
+  settings: PropTypes.object.isRequired,
 };
 
 export default SmoochBotIntegrations;
diff --git a/src/app/components/team/SmoochBot/SmoochBotSettings.js b/src/app/components/team/SmoochBot/SmoochBotSettings.js
index b412676bef..57963e6d57 100644
--- a/src/app/components/team/SmoochBot/SmoochBotSettings.js
+++ b/src/app/components/team/SmoochBot/SmoochBotSettings.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
@@ -11,6 +10,10 @@ const SmoochBotSettings = (props) => {
 
   return (
     <React.Fragment>
+      <div className={styles['setting-content-container-title']}>
+        <FormattedMessage defaultMessage="Messaging Platforms" description="Title of available messaging platforms that can be connected in the tipline settings page" id="smoochBotSettings.messagingPlatform" />
+      </div>
+
       <SmoochBotIntegrations
         enabledIntegrations={props.enabledIntegrations}
         installationId={props.installationId}
@@ -127,12 +130,12 @@ const SmoochBotSettings = (props) => {
 };
 
 SmoochBotSettings.propTypes = {
-  settings: PropTypes.object.isRequired,
-  schema: PropTypes.object.isRequired,
   currentUser: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
   enabledIntegrations: PropTypes.object.isRequired,
   installationId: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 export default SmoochBotSettings;
diff --git a/src/app/components/team/SmoochBot/SmoochBotSidebar.js b/src/app/components/team/SmoochBot/SmoochBotSidebar.js
index 463b04892a..55e312e2eb 100644
--- a/src/app/components/team/SmoochBot/SmoochBotSidebar.js
+++ b/src/app/components/team/SmoochBot/SmoochBotSidebar.js
@@ -1,46 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames/bind';
 import { labels } from './localizables';
 import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain';
-import styles from '../Settings.module.css';
+import smoochBotStyles from './SmoochBot.module.css';
 
 const SmoochBotSidebar = ({
   currentOption,
   onClick,
   resources,
+  userRole,
 }) => {
   const handleClick = (option) => {
     onClick(option);
   };
 
-  const Option = ({ id, label }) => (
-    <li>
-      <ButtonMain
-        key={id}
-        label={label}
-        size="default"
-        theme={currentOption === id ? 'lightInfo' : 'lightText'}
-        variant={currentOption === id ? 'contained' : 'text'}
-        onClick={() => { handleClick(id); }}
-      />
-    </li>
-  );
+  const Option = ({ className, id, label }) => {
+    if (id === 'smooch_settings' && userRole !== 'admin') {
+      return null;
+    }
+
+    return (
+      <li
+        className={className}
+      >
+        <ButtonMain
+          className={smoochBotStyles.smoochBotMenuButton}
+          key={id}
+          label={label}
+          size="default"
+          theme="black"
+          variant={currentOption === id ? 'contained' : 'text'}
+          onClick={() => { handleClick(id); }}
+        />
+      </li>
+    );
+  };
 
   return (
-    <ul className={styles.smoochBotMenu}>
-      <li className={cx('typography-overline', styles.smoochBotMenuSection)}>Menu Options</li>
+    <ul className={smoochBotStyles.smoochBotMenu}>
       {/* Menu options */}
       { Object.keys(labels).map((key) => {
         const label = labels[key];
         return <Option id={key} key={key} label={label} />;
       })}
-      <li className={cx('typography-overline', styles.smoochBotMenuSection)}>Resources</li>
       {/* Resources */}
       { resources.sort((a, b) => a.title.localeCompare(b.title)).map((resource) => {
         const label = resource.title;
         return (
           <Option
+            className={smoochBotStyles.smoochBotMenuResource}
             id={`resource_${resource.dbid}`}
             key={resource.uuid}
             label={label}
@@ -58,6 +66,7 @@ SmoochBotSidebar.defaultProps = {
 SmoochBotSidebar.propTypes = {
   currentOption: PropTypes.string.isRequired,
   resources: PropTypes.arrayOf(PropTypes.object),
+  userRole: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
diff --git a/src/app/components/team/SmoochBot/localizables.js b/src/app/components/team/SmoochBot/localizables.js
index 6d9ee6d9f2..c20e3bbabf 100644
--- a/src/app/components/team/SmoochBot/localizables.js
+++ b/src/app/components/team/SmoochBot/localizables.js
@@ -2,8 +2,9 @@ import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 const labels = {
-  smooch_content: <FormattedMessage defaultMessage="Content & translation" description="Button label in tipline settings page" id="smoochBot.labelContent" />,
-  smooch_main_menu: <FormattedMessage defaultMessage="Main menu" description="Label for the bot Main menu content area" id="smoochBot.labelMainMenu" />,
+  smooch_settings: <FormattedMessage defaultMessage="Platforms" description="Label for the bot platform settings area" id="smoochBot.labelSettings" />,
+  smooch_main_menu: <FormattedMessage defaultMessage="Main Menu" description="Label for the bot Main menu content area" id="smoochBot.labelMainMenu" />,
+  smooch_content: <FormattedMessage defaultMessage="Content & Translation" description="Button label in tipline settings page" id="smoochBot.labelContent" />,
 };
 
 const placeholders = defineMessages({