diff --git a/src/Notifications/NotificationEmptySection.jsx b/src/Notifications/NotificationEmptySection.jsx index 9f418745..0dac3f68 100644 --- a/src/Notifications/NotificationEmptySection.jsx +++ b/src/Notifications/NotificationEmptySection.jsx @@ -23,7 +23,6 @@ const EmptyNotifications = () => { src={NotificationsNone} iconAs={Icon} variant="light" - id="bell-icon" iconClassNames="text-primary-500" className="ml-4 mr-1 notification-button notification-lg-bell-icon pl-2" data-testid="notification-bell-icon" diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx index f8babd2f..24913a96 100644 --- a/src/Notifications/index.jsx +++ b/src/Notifications/index.jsx @@ -143,7 +143,6 @@ const Notifications = () => { src={NotificationsNone} iconAs={Icon} variant="light" - id="bell-icon" iconClassNames="text-primary-500" className="ml-4 mr-1 notification-button" data-testid="notification-bell-icon" diff --git a/src/Notifications/tours/constants.js b/src/Notifications/tours/constants.js index 40811a2b..8d7949dd 100644 --- a/src/Notifications/tours/constants.js +++ b/src/Notifications/tours/constants.js @@ -1,48 +1,18 @@ -/* eslint-disable react/jsx-filename-extension */ -import React from 'react'; -import { Icon, Hyperlink } from '@edx/paragon'; -import { Settings } from '@edx/paragon/icons'; -import { getConfig } from '@edx/frontend-platform'; import messages from './messages'; +/** + * + * @param {Object} intl + * @returns {Object} tour checkpoints + */ export default function tourCheckpoints(intl) { return { - NOTIFICATION_TOUR: [ + EXAMPLE_TOUR: [ { - body: ( - <> -

- {intl.formatMessage(messages.notificationTourPreferenceBody)} - - - -

-

- {intl.formatMessage(messages.notificationTourGuideBody)} - - {intl.formatMessage(messages.notificationTourGuideLink)} - -

- - ), - placement: 'left', - target: '#bell-icon', - title: intl.formatMessage(messages.notificationTourTitle), + title: intl.formatMessage(messages.exampleTourTitle), + body: intl.formatMessage(messages.exampleTourBody), + target: '#example-tour-target', + placement: 'bottom', }, ], }; diff --git a/src/Notifications/tours/data/hooks.js b/src/Notifications/tours/data/hooks.js index f1a9b392..21c25029 100644 --- a/src/Notifications/tours/data/hooks.js +++ b/src/Notifications/tours/data/hooks.js @@ -20,7 +20,7 @@ export const useTourConfiguration = () => { }, [dispatch]); const toursConfig = useMemo(() => ( - tours?.map((tour) => tour.tourName === intl.formatMessage(messages.notificationTourId) && ( + tours?.map((tour) => Object.keys(tourCheckpoints(intl)).includes(tour.tourName) && ( { tourId: tour.tourName, dismissButtonText: intl.formatMessage(messages.dismissButtonText), diff --git a/src/Notifications/tours/messages.js b/src/Notifications/tours/messages.js index b6670ced..84a98352 100644 --- a/src/Notifications/tours/messages.js +++ b/src/Notifications/tours/messages.js @@ -1,11 +1,6 @@ import { defineMessages } from '@edx/frontend-platform/i18n'; const messages = defineMessages({ - notificationTourId: { - id: 'notification.tour.id', - defaultMessage: 'notification_tour', - description: 'Notification Tour Id', - }, dismissButtonText: { id: 'tour.action.dismiss', defaultMessage: 'Dismiss', @@ -16,25 +11,15 @@ const messages = defineMessages({ defaultMessage: 'Okay', description: 'Action to end current tour', }, - notificationTourPreferenceBody: { - id: 'notification.tour.preference.body', - defaultMessage: 'Click the bell icon to see Discussion notifications and customize your preferences by clicking on the gear icon.', - description: 'Body of the tour for the notification preferences', - }, - notificationTourGuideBody: { - id: 'notification.tour.guide.body', - defaultMessage: 'Certain notifications are enabled by default, as further detailed in the ', - description: 'Body of the tour for the notification for the guide', - }, - notificationTourGuideLink: { - id: 'notification.tour.guide.link', - defaultMessage: "edX Learner's Guide.", - description: 'Link of the tour for the notification for the guide', + exampleTourTitle: { + id: 'tour.example.title', + defaultMessage: 'Example Tour', + description: 'Title for example tour', }, - notificationTourTitle: { - id: 'notification.tour.title', - defaultMessage: 'Stay informed!', - description: 'Title of the notification tour', + exampleTourBody: { + id: 'tour.example.body', + defaultMessage: 'This is an example tour', + description: 'Body for example tour', }, });