From 39fca9652376e65e7bc4719e4be14a0dc79e35a9 Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Fri, 10 May 2024 17:05:11 +0500
Subject: [PATCH] refactor: updated logic to handle show email channel env
 variable

---
 src/index.scss                                | 17 +-------
 .../NotificationPreferenceColumn.jsx          | 39 +++++++++----------
 .../data/constants.js                         | 11 ++++--
 3 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index dca39f7..5137f7f 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -109,21 +109,8 @@ $fa-font-path: "~font-awesome/fonts";
     font-weight: 500;
   }
 
-  button[name="email_cadence"] {
-    width: 134px;
-  }
-
-  .cadence-button:hover,
-  button[name="email_cadence"]:focus {
-    color: #FFFFFF !important;
-  }
-
-  button[name="email_cadence"]:hover {
-    background: #00262B !important
-  }
-
-  button[disabled]:hover {
-  color: black !important;
+  .channel-column:last-child {
+    border-right: 0px !important;
   }
 
   .line-height-36 {
diff --git a/src/notification-preferences/NotificationPreferenceColumn.jsx b/src/notification-preferences/NotificationPreferenceColumn.jsx
index 276af81..d7eef09 100644
--- a/src/notification-preferences/NotificationPreferenceColumn.jsx
+++ b/src/notification-preferences/NotificationPreferenceColumn.jsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { NavItem } from '@openedx/paragon';
-import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
@@ -26,7 +25,6 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
   const nonEditable = useSelector(selectNonEditablePreferences(appId));
   const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
   const mobileView = useIsOnMobile();
-  const showEmailChannel = getConfig().SHOW_EMAIL_CHANNEL;
 
   const onChannelToggle = useCallback((event) => {
     const { id: notificationChannel } = event.target;
@@ -84,25 +82,24 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
     </div>
   );
 
-  return ((showEmailChannel === 'true' || channel === 'web') && (
-  <div className={classNames('d-flex flex-column', { 'border-right': channel !== 'email' && showEmailChannel === 'true' })}>
-    <NavItem
-      id={channel}
-      key={channel}
-      role="button"
-      onClick={onChannelToggle}
-      className={classNames('mb-3 header-label column-padding', {
-        'pr-0': channel === 'email',
-        'pl-0': channel === 'web' && mobileView,
-      })}
-    >
-      {intl.formatMessage(messages.notificationChannel, { text: channel })}
-    </NavItem>
-    {appPreference
-      ? renderPreference(appPreference)
-      : appPreferences.map((preference) => (renderPreference(preference)))}
-  </div>
-  )
+  return (
+    <div className={classNames('d-flex flex-column border-right channel-column')}>
+      <NavItem
+        id={channel}
+        key={channel}
+        role="button"
+        onClick={onChannelToggle}
+        className={classNames('mb-3 header-label column-padding', {
+          'pr-0': channel === 'email',
+          'pl-0': channel === 'web' && mobileView,
+        })}
+      >
+        {intl.formatMessage(messages.notificationChannel, { text: channel })}
+      </NavItem>
+      {appPreference
+        ? renderPreference(appPreference)
+        : appPreferences.map((preference) => (renderPreference(preference)))}
+    </div>
   );
 };
 
diff --git a/src/notification-preferences/data/constants.js b/src/notification-preferences/data/constants.js
index f7d8461..c0eafb8 100644
--- a/src/notification-preferences/data/constants.js
+++ b/src/notification-preferences/data/constants.js
@@ -1,7 +1,10 @@
-export const NOTIFICATION_CHANNELS = {
-  WEB: 'web',
-  EMAIL: 'email',
-};
+import { getConfig } from '@edx/frontend-platform';
+
+const showEmailChannel = getConfig().SHOW_EMAIL_CHANNEL === 'true' || false;
+
+export const NOTIFICATION_CHANNELS = showEmailChannel
+  ? { WEB: 'web', EMAIL: 'email' }
+  : { WEB: 'web' };
 
 export const EMAIL_CADENCE = {
   DAILY: 'Daily',