feat: example of upgrade notification messages using plugin

plugins/FBEExperimentPlugin/index.jsx

@@ -0,0 +1,7 @@
+const FBEExperimentPlugin = () => (
+  <div>
+    This is the new upgrade message
+  </div>
+);
+
+export default FBEExperimentPlugin;

plugins/UpgradeNotificationExperimentPlugin/index.jsx

@@ -0,0 +1,7 @@
+const UpgradeNotificationExperimentPlugin = () => (
+  <div>
+    This is the new upgrade notification
+  </div>
+);
+
+export default UpgradeNotificationExperimentPlugin;

src/courseware/course/sequence/Unit/UnitSuspense.jsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import { useModel } from '@src/generic/model-store';
 import PageLoading from '@src/generic/PageLoading';
@@ -33,7 +34,13 @@ const UnitSuspense = ({
   return (
     <>
       {shouldDisplayContentGating && (
-        suspenseComponent(messages.loadingLockedContent, LockPaywall)
+        <Suspense fallback={<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />}>
+          <PluginSlot
+            id="fbe_message_plugin"
+          >
+            <LockPaywall courseId={courseId} />
+          </PluginSlot>
+        </Suspense>
       )}
       {shouldDisplayHonorCode && (
         suspenseComponent(messages.loadingHonorCode, HonorCode)

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx

@@ -1,4 +1,5 @@
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import classNames from 'classnames';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -75,21 +76,25 @@ 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="upgrade_notification_plugin"
+          >
+            <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>
         ) : (
           <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>
         )}