Revert "feat: implented notification preference UI for cadence (#1013)…

…" (#1029)

This reverts commit a266e3d.

src/hooks.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import {
   IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS,
@@ -67,8 +66,3 @@ export function useFeedbackWrapper() {
     }
   }, []);
 }
-
-export function useIsOnMobile() {
-  const windowSize = useWindowSize();
-  return windowSize.width <= breakpoints.small.minWidth;
-}

src/index.scss

@@ -84,39 +84,11 @@ $fa-font-path: "~font-awesome/fonts";
     color: #707070;
   }
 
-  .preference-app {
-    font-size: 18px;
-    font-weight: 700;
-  }
-
-  .column-padding{
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-
   .notification-course-title {
     line-height: 28px;
     font-weight: 700;
     font-size: 18px;
   }
-
-  .font-size-14{
-    font-size: 14px !important;
-  }
-
-  .cadence-button {
-    width: 134px;
-    height: 36px;
-    font-weight: 500;
-  }
-
-  .line-height-36{
-    line-height: 36px;
-  }
-
-  .h-4\.5 {
-    height: 36px;
-  }
 }
 
 .usabilla_live_button_container {
@@ -130,15 +102,3 @@ $fa-font-path: "~font-awesome/fonts";
     transform: rotate(270deg) !important;
   }
 }
-
-@media screen and (max-width: 425px) {
-   .column-padding{
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-
-  .margin-bottom-32{
-    margin-bottom: 32px !important;
-  }
-}
-

src/notification-preferences/NotificationPreferenceApp.jsx

@@ -1,49 +1,65 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible } from '@openedx/paragon';
+import { Collapsible, NavItem } from '@openedx/paragon';
 import classNames from 'classnames';
 import messages from './messages';
 import ToggleSwitch from './ToggleSwitch';
 import {
   selectPreferenceAppToggleValue,
+  selectNonEditablePreferences,
+  selectPreferencesOfApp,
   selectSelectedCourseId,
   selectUpdatePreferencesStatus,
 } from './data/selectors';
-import NotificationPreferenceColumn from './NotificationPreferenceColumn';
-import { updateAppPreferenceToggle } from './data/thunks';
+import NotificationPreferenceRow from './NotificationPreferenceRow';
+import { updateAppPreferenceToggle, updateChannelPreferenceToggle } from './data/thunks';
 import { LOADING_STATUS } from '../constants';
-import { NOTIFICATION_CHANNELS } from './data/constants';
-import NotificationTypes from './NotificationTypes';
-import { useIsOnMobile } from '../hooks';
+import NOTIFICATION_CHANNELS from './data/constants';
 
 const NotificationPreferenceApp = ({ appId }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const courseId = useSelector(selectSelectedCourseId());
+  const appPreferences = useSelector(selectPreferencesOfApp(appId));
   const appToggle = useSelector(selectPreferenceAppToggleValue(appId));
   const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
-  const mobileView = useIsOnMobile();
+  const nonEditable = useSelector(selectNonEditablePreferences(appId));
+
+  const onChannelToggle = useCallback((event) => {
+    const { id: notificationChannel } = event.target;
+    const isPreferenceNonEditable = (preference) => nonEditable?.[preference.id]?.includes(notificationChannel);
+
+    const hasActivePreferences = appPreferences.some(
+      (preference) => preference[notificationChannel] && !isPreferenceNonEditable(preference),
+    );
+
+    dispatch(updateChannelPreferenceToggle(courseId, appId, notificationChannel, !hasActivePreferences));
+  }, [appId, appPreferences, courseId, dispatch, nonEditable]);
+
+  const preferences = useMemo(() => (
+    appPreferences.map(preference => (
+      <NotificationPreferenceRow
+        key={preference.id}
+        appId={appId}
+        preferenceName={preference.id}
+      />
+    ))), [appId, appPreferences]);
 
   const onChangeAppSettings = useCallback((event) => {
     dispatch(updateAppPreferenceToggle(courseId, appId, event.target.checked));
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appId]);
-
   if (!courseId) {
     return null;
   }
 
   return (
-    <Collapsible.Advanced
-      open={appToggle}
-      data-testid={`${appId}-app`}
-      className={classNames({ 'mb-5': !mobileView && appToggle })}
-    >
+    <Collapsible.Advanced open={appToggle} data-testid={`${appId}-app`} className="mb-5">
       <Collapsible.Trigger>
         <div className="d-flex align-items-center">
-          <span className="mr-auto preference-app">
+          <span className="mr-auto">
             {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
           </span>
           <span className="d-flex" id={`${appId}-app-toggle`}>
@@ -55,20 +71,33 @@ const NotificationPreferenceApp = ({ appId }) => {
             />
           </span>
         </div>
-        {!mobileView && <hr className="border-light-400 my-4" />}
+        <hr className="border-light-400 my-3" />
       </Collapsible.Trigger>
       <Collapsible.Body>
-        <div className="d-flex flex-row justify-content-between">
-          <NotificationTypes appId={appId} />
-          {!mobileView && (
-          <div className="d-flex">
-            {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
-              <NotificationPreferenceColumn key={channel} appId={appId} channel={channel} />
+        <div className="d-flex flex-row header-label">
+          <span className="col-8 px-0">{intl.formatMessage(messages.typeLabel)}</span>
+          <span className="d-flex col-4 px-0">
+            {NOTIFICATION_CHANNELS.map((channel) => (
+              <NavItem
+                id={channel}
+                key={channel}
+                className={classNames(
+                  'd-flex',
+                  { 'ml-auto': channel === 'web' },
+                  { 'mx-auto': channel === 'email' },
+                  { 'ml-auto mr-0': channel === 'push' },
+                )}
+                role="button"
+                onClick={onChannelToggle}
+              >
+                {intl.formatMessage(messages.notificationChannel, { text: channel })}
+              </NavItem>
             ))}
-          </div>
-          )}
+          </span>
+        </div>
+        <div className="my-3">
+          { preferences }
         </div>
-        {mobileView && <hr className="border-light-400 my-4.5" />}
       </Collapsible.Body>
     </Collapsible.Advanced>
   );