feat: implemented notification preference UI for cadence (#1033)

* feat: implented notification preference UI for cadence * refactor: refactored code * refactor: refactored code * refactor: clean code after adding email cadence * refactor: refactored and restructured notificationPreferences page * refactor: refactored and implemented mobile view * fix: fixed disabled for email cadence * refactor: resolved spaces and changed font size class * refactor: resolved conflicts --------- Co-authored-by: Awais Ansari <[email protected]>
openedx · May 7, 2024 · e314de2 · e314de2
1 parent fc329fe
commit e314de2
Show file tree

Hide file tree

Showing 12 changed files with 361 additions and 156 deletions.
diff --git a/src/hooks.js b/src/hooks.js
@@ -1,6 +1,7 @@
 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,
@@ -66,3 +67,8 @@ export function useFeedbackWrapper() {
  }
  }, []);
 }
+
+export function useIsOnMobile() {
+ const windowSize = useWindowSize();
+ return windowSize.width <= breakpoints.small.minWidth;
+}
diff --git a/src/index.scss b/src/index.scss
@@ -58,6 +58,10 @@ $fa-font-path: "~font-awesome/fonts";
  padding-left: 0.625rem;
 }
 
+.margin-left-2 {
+ margin-left: 2px !important;
+}
+
 .notification-sub-heading {
  font-size: 14px;
  line-height: 28px;
@@ -84,11 +88,38 @@ $fa-font-path: "~font-awesome/fonts";
  color: #707070;
  }
 
+ .preference-app {
+ font-size: 18px;
+ }
+
+ .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 {
@@ -102,3 +133,15 @@ $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;
+ }
+}
+
diff --git a/src/notification-preferences/EmailCadences.jsx b/src/notification-preferences/EmailCadences.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+ Dropdown, ModalPopup, Button, useToggle,
+} from '@openedx/paragon';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import messages from './messages';
+import { EMAIL_CADENCE } from './data/constants';
+
+const EmailCadences = ({
+ email, onToggle, emailCadence, notificationType,
+}) => {
+ const intl = useIntl();
+ const [isOpen, open, close] = useToggle(false);
+ const [target, setTarget] = useState(null);
+
+ return (
+ <>
+ <Button
+ ref={setTarget}
+ variant="outline-primary"
+ onClick={open}
+ disabled={!email}
+ size="sm"
+ iconAfter={isOpen ? ExpandLess : ExpandMore}
+ className="border-light-300 text-primary-500 justify-content-between ml-3.5 cadence-button"
+ >
+ {intl.formatMessage(messages.emailCadence, { text: emailCadence })}
+ </Button>
+ <ModalPopup
+ onClose={close}
+ positionRef={target}
+ isOpen={isOpen}
+ >
+ <div
+ className="bg-white shadow d-flex flex-column margin-left-2"
+ data-testid="email-cadence-dropdown"
+ >
+ {Object.values(EMAIL_CADENCE).map((cadence) => (
+ <Dropdown.Item
+ key={cadence}
+ name="email_cadence"
+ className="d-flex justify-content-start py-1.5"
+ as={Button}
+ variant="primary"
+ size="inline"
+ autoFocus={cadence === emailCadence}
+ onClick={(event) => {
+ onToggle(event, notificationType);
+ close();
+ }}
+ >
+ {intl.formatMessage(messages.emailCadence, { text: cadence })}
+ </Dropdown.Item>
+ ))}
+ </div>
+ </ModalPopup>
+ </>
+ );
+};
+
+EmailCadences.propTypes = {
+ email: PropTypes.bool.isRequired,
+ onToggle: PropTypes.func.isRequired,
+ emailCadence: PropTypes.oneOf(Object.values(EMAIL_CADENCE)).isRequired,
+ notificationType: PropTypes.string.isRequired,
+};
+
+export default React.memo(EmailCadences);
diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -1,65 +1,49 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible, NavItem } from '@openedx/paragon';
+import { Collapsible } 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 NotificationPreferenceRow from './NotificationPreferenceRow';
-import { updateAppPreferenceToggle, updateChannelPreferenceToggle } from './data/thunks';
+import NotificationPreferenceColumn from './NotificationPreferenceColumn';
+import { updateAppPreferenceToggle } from './data/thunks';
 import { LOADING_STATUS } from '../constants';
-import NOTIFICATION_CHANNELS from './data/constants';
+import { NOTIFICATION_CHANNELS } from './data/constants';
+import NotificationTypes from './NotificationTypes';
+import { useIsOnMobile } from '../hooks';
 
 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 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 mobileView = useIsOnMobile();
 
  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="mb-5">
+ <Collapsible.Advanced
+ open={appToggle}
+ data-testid={`${appId}-app`}
+ className={classNames({ 'mb-5': !mobileView && appToggle })}
+ >
  <Collapsible.Trigger>
  <div className="d-flex align-items-center">
- <span className="mr-auto">
+ <span className="mr-auto preference-app font-weight-bold">
  {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
  </span>
  <span className="d-flex" id={`${appId}-app-toggle`}>
@@ -71,33 +55,20 @@ const NotificationPreferenceApp = ({ appId }) => {
  />
  </span>
  </div>
- <hr className="border-light-400 my-3" />
+ {!mobileView && <hr className="border-light-400 my-4" />}
  </Collapsible.Trigger>
  <Collapsible.Body>
- <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 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} />
  ))}
- </span>
- </div>
- <div className="my-3">
- { preferences }
+ </div>
+ )}
  </div>
+ {mobileView && <hr className="border-light-400 my-4.5" />}
  </Collapsible.Body>
  </Collapsible.Advanced>
  );