diff --git a/src/notification-preferences/EmailCadences.jsx b/src/notification-preferences/EmailCadences.jsx index 4cc8186..a3e45eb 100644 --- a/src/notification-preferences/EmailCadences.jsx +++ b/src/notification-preferences/EmailCadences.jsx @@ -10,7 +10,7 @@ import { } from '@openedx/paragon'; import messages from './messages'; -import EMAIL_CADENCE from './data/constants'; +import { EMAIL_CADENCE_PREFERENCES, EMAIL_CADENCE } from './data/constants'; import { selectUpdatePreferencesStatus } from './data/selectors'; import { LOADING_STATUS } from '../constants'; @@ -44,12 +44,12 @@ const EmailCadences = ({ className="bg-white shadow d-flex flex-column margin-left-2" data-testid="email-cadence-dropdown" > - {Object.values(EMAIL_CADENCE).map((cadence) => ( + {Object.values(EMAIL_CADENCE_PREFERENCES).map((cadence) => ( { const dispatch = useDispatch(); @@ -26,22 +29,54 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => { const NOTIFICATION_CHANNELS = Object.values(notificationChannels()); const hideAppPreferences = shouldHideAppPreferences(appPreferences, appId) || false; - const onToggle = useCallback((event, notificationType) => { - const { name: notificationChannel } = event.target; - const appNotificationPreference = appPreferences.find(preference => preference.id === notificationType); - const value = notificationChannel === 'email_cadence' && courseId ? event.target.innerText : event.target.checked; - const emailCadence = notificationChannel === 'email_cadence' ? event.target.innerText : appNotificationPreference.emailCadence; + const getValue = useCallback((notificationChannel, innerText, checked) => { + if (notificationChannel === EMAIL_CADENCE && courseId) { + return innerText; + } + return checked; + }, [courseId]); - dispatch(updatePreferenceToggle( - courseId, - appId, - notificationType, + const getEmailCadence = useCallback((notificationChannel, checked, innerText, emailCadence) => { + if (notificationChannel === EMAIL_CADENCE) { + return innerText; + } + if (notificationChannel === EMAIL && checked) { + return EMAIL_CADENCE_PREFERENCES.DAILY; + } + return emailCadence; + }, []); + + const onToggle = useCallback(async (event, notificationType) => { + const { name: notificationChannel, checked, innerText } = event.target; + const appNotificationPreference = appPreferences.find(preference => preference.id === notificationType); + + const value = getValue(notificationChannel, innerText, checked); + const emailCadence = getEmailCadence( notificationChannel, - value, - emailCadence !== 'Mixed' ? emailCadence : undefined, - )); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [appId, appPreferences]); + checked, + innerText, + appNotificationPreference.emailCadence, + ); + + const updatePreference = async (appChannel, appValue, cadence) => { + await dispatch(updatePreferenceToggle( + courseId, + appId, + notificationType, + appChannel, + appValue, + cadence !== MIXED ? cadence : undefined, + )); + }; + + // Update the main preference + await updatePreference(notificationChannel, value, emailCadence); + + // Handle the special case for EMAIL and checked + if (notificationChannel === EMAIL && checked) { + await updatePreference(EMAIL_CADENCE, undefined, emailCadence); + } + }, [appPreferences, getValue, getEmailCadence, dispatch, courseId, appId]); const renderPreference = (preference) => ( (preference?.coreNotificationTypes?.length > 0 || preference.id !== 'core') && ( @@ -63,7 +98,7 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => { id={`${preference.id}-${channel}`} className="my-1" /> - {channel === 'email' && ( + {channel === EMAIL && ( { push: preferences[appId].notificationTypes[preferenceId].push, email: preferences[appId].notificationTypes[preferenceId].email, info: preferences[appId].notificationTypes[preferenceId].info || '', - emailCadence: preferences[appId].notificationTypes[preferenceId].emailCadence || EMAIL_CADENCE.DAILY, + emailCadence: preferences[appId].notificationTypes[preferenceId].emailCadence + || EMAIL_CADENCE_PREFERENCES.DAILY, coreNotificationTypes: preferences[appId].coreNotificationTypes || [], } ));