feat: Added Plugin Slot wrapping UpgradeNotification in NotificationT…

…ray (#1367)
openedx · Apr 22, 2024 · 1b5337a · 1b5337a
1 parent d3ef306
commit 1b5337a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx
@@ -2,6 +2,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useModel } from '../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../generic/upgrade-notification/UpgradeNotification';
 
@@ -65,6 +66,22 @@ const NotificationTray = ({ intl }) => {
     sendTrackEvent('edx.ui.course.upgrade.old_sidebar.notifications', notificationTrayEventProperties);
   }, []);
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'in_course',
+    userTimezone,
+    shouldDisplayBorder: false,
+    timeOffsetMillis,
+    courseId,
+    org,
+    upgradeNotificationCurrentState,
+    setupgradeNotificationCurrentState: setUpgradeNotificationCurrentState, // TODO: Check typo in component?
+  };
+
   return (
     <SidebarBase
       title={intl.formatMessage(messages.notificationTitle)}
@@ -75,21 +92,13 @@ const NotificationTray = ({ intl }) => {
     >
       <div>{verifiedMode
         ? (
-          <UpgradeNotification
-            offer={offer}
-            verifiedMode={verifiedMode}
-            accessExpiration={accessExpiration}
-            contentTypeGatingEnabled={contentTypeGatingEnabled}
-            marketingUrl={marketingUrl}
-            upsellPageName="in_course"
-            userTimezone={userTimezone}
-            shouldDisplayBorder={false}
-            timeOffsetMillis={timeOffsetMillis}
-            courseId={courseId}
-            org={org}
-            upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-            setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-          />
+          <PluginSlot
+            id="notification_tray"
+            pluginProps={{ upgradeNotificationProps }}
+            testId="notification-tray-slot"
+          >
+            <UpgradeNotification {...upgradeNotificationProps} />
+          </PluginSlot>
         ) : (
           <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>
         )}

diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.test.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationTray.test.jsx
@@ -91,10 +91,14 @@ describe('NotificationTray', () => {
         <NotificationTray />
       </SidebarContext.Provider>,
     );
-    const UpgradeNotification = document.querySelector('.upgrade-notification');
 
-    expect(UpgradeNotification)
-      .toBeInTheDocument();
+    const pluginSlot = screen.getByTestId('notification-tray-slot');
+    expect(pluginSlot).toBeInTheDocument();
+
+    // The Upgrade Notification should be inside the PluginSlot.
+    const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
+    expect(UpgradeNotification).toBeInTheDocument();
+
     expect(screen.getByRole('link', { name: 'Upgrade for $149' }))
       .toBeInTheDocument();
     expect(screen.queryByText('You have no new notifications at this time.'))