diff --git a/public/index.html b/public/index.html index 4b27b1f..9847191 100755 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,148 @@ - + - Account | <%= process.env.SITE_NAME %> - - - - <% if (process.env.OPTIMIZELY_PROJECT_ID) { %> - - <% } %> + Account | <%= process.env.SITE_NAME %> + + + + <% if (process.env.OPTIMIZELY_PROJECT_ID) { %> + + <% } %> + + +
diff --git a/src/hooks.js b/src/hooks.js index 69dd638..5731997 100644 --- a/src/hooks.js +++ b/src/hooks.js @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react'; +import { logError } from '@edx/frontend-platform/logging'; import { IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS, @@ -53,3 +54,14 @@ export function useRedirect() { return redirect; } + +export function useFeedbackWrapper() { + useEffect(() => { + try { + // eslint-disable-next-line no-undef + window.usabilla_live = lightningjs?.require('usabilla_live', '//w.usabilla.com/2655de034958.js'); + } catch (error) { + logError('Error loading usabilla_live', error); + } + }, []); +} diff --git a/src/index.scss b/src/index.scss index 9e590df..b8b07d1 100755 --- a/src/index.scss +++ b/src/index.scss @@ -69,20 +69,26 @@ $fa-font-path: "~font-awesome/fonts"; font-size: 32px; } -.notification-course-title { - line-height: 28px; - font-weight: 700; - font-size: 18px; -} - .px-2\.25 { padding-left: 0.625rem; } -.notification-help-text { - font-size: 14px; - font-weight: 400; - line-height: 28px; - height: 28px; - color: #707070; +.notification-preferences { + input[type="checkbox"] { + margin-right: 0; + } + + .header-label { + font-size: 14px; + font-weight: 400; + line-height: 28px; + height: 28px; + color: #707070; + } + + .notification-course-title { + line-height: 28px; + font-weight: 700; + font-size: 18px; + } } diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx index bd106c6..389ccf2 100644 --- a/src/notification-preferences/NotificationPreferenceApp.jsx +++ b/src/notification-preferences/NotificationPreferenceApp.jsx @@ -40,11 +40,11 @@ const NotificationPreferenceApp = ({ appId }) => { return ( -
- +
+ {intl.formatMessage(messages.notificationAppTitle, { key: appId })} - + { />
-
+
-
- {intl.formatMessage(messages.notificationHelpType)} +
+ {intl.formatMessage(messages.typeLabel)} - {intl.formatMessage(messages.notificationHelpWeb)} - {intl.formatMessage(messages.notificationHelpEmail)} - {intl.formatMessage(messages.notificationHelpPush)} + {intl.formatMessage(messages.webLabel)}
-
+
{ preferences }
diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx index 4276623..e5f9055 100644 --- a/src/notification-preferences/NotificationPreferenceRow.jsx +++ b/src/notification-preferences/NotificationPreferenceRow.jsx @@ -38,49 +38,46 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => { const tooltipId = `${preferenceName}-tooltip`; return ( -
- +
+
{intl.formatMessage(messages.notificationTitle, { text: preferenceName })} - { - preference.info !== '' && ( - - {preference.info} - - )} - > - - - - - ) - } - - - { - ['web', 'email', 'push'].map((channel) => ( - - + {preference.info !== '' && ( + + {preference.info} + + )} + > + + - )) - } - + + )} +
+
+ {['web'].map((channel) => ( +
+ +
+ ))} +
); }; diff --git a/src/notification-preferences/NotificationPreferences.jsx b/src/notification-preferences/NotificationPreferences.jsx index b388de8..51b003d 100644 --- a/src/notification-preferences/NotificationPreferences.jsx +++ b/src/notification-preferences/NotificationPreferences.jsx @@ -22,8 +22,10 @@ import { SUCCESS_STATUS, } from '../constants'; import { NotFoundPage } from '../account-settings'; +import { useFeedbackWrapper } from '../hooks'; const NotificationPreferences = () => { + useFeedbackWrapper(); const { courseId } = useParams(); const dispatch = useDispatch(); const intl = useIntl(); @@ -56,16 +58,16 @@ const NotificationPreferences = () => { } return ( - +

{intl.formatMessage(messages.notificationHeading)}

-
+
- + - + {course?.name}
diff --git a/src/notification-preferences/NotificationPreferences.test.jsx b/src/notification-preferences/NotificationPreferences.test.jsx index e709c06..c358b66 100644 --- a/src/notification-preferences/NotificationPreferences.test.jsx +++ b/src/notification-preferences/NotificationPreferences.test.jsx @@ -109,6 +109,7 @@ describe('Notification Preferences', () => { }), })); auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 })); + window.lightningjs = null; }); afterEach(() => jest.clearAllMocks()); diff --git a/src/notification-preferences/messages.js b/src/notification-preferences/messages.js index e12ac5a..963a056 100644 --- a/src/notification-preferences/messages.js +++ b/src/notification-preferences/messages.js @@ -33,13 +33,13 @@ export const messages = defineMessages({ }`, description: 'Display text for Notification Types', }, - notificationHelpType: { - id: 'notification.preference.help.type', + typeLabel: { + id: 'notification.preference.type.label', defaultMessage: 'Type', description: 'Display text for type', }, - notificationHelpWeb: { - id: 'notification.preference.help.web', + webLabel: { + id: 'notification.preference.web,label', defaultMessage: 'Web', description: 'Display text for web', },