Merge pull request #329 from openedx/aansari/INF-1375

feat: added info banner for ORA notifications

Author: awais-ansari

.env

@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=''

.env.development

@@ -38,3 +38,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=http://localhost:1997

.env.test

@@ -36,3 +36,4 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+ACCOUNT_SETTINGS_URL=http://localhost:1997

src/App.jsx

@@ -10,6 +10,7 @@ import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
 import CTA from 'containers/CTA';
+import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
 
 import './App.scss';
@@ -27,6 +28,7 @@ export const App = ({ courseMetadata, isEnabled }) => (
       />
       {!isEnabled && <DemoWarning />}
       <CTA />
+      <NotificationsBanner />
       <main data-testid="main">
         <ListView />
       </main>

src/__snapshots__/App.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
     />
     <DemoWarning />
     <CTA />
+    <NotificationsBanner />
     <main
       data-testid="main"
     >
@@ -36,6 +37,7 @@ exports[`App router component snapshot: enabled 1`] = `
       data-testid="header"
     />
     <CTA />
+    <NotificationsBanner />
     <main
       data-testid="main"
     >

src/containers/NotificationsBanner/NotificationsBanner.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { NotificationsBanner } from '.';
+
+describe('NotificationsBanner component', () => {
+  test('snapshots', () => {
+    const el = shallow(<NotificationsBanner hide />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+});

src/containers/NotificationsBanner/__snapshots__/NotificationsBanner.test.jsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationsBanner component snapshots 1`] = `
+<PageBanner
+  variant="accentB"
+>
+  <span>
+    <FormattedMessage
+      defaultMessage="You can now enable notifications for ORA assignments that require staff grading, from the "
+      description="user info message that user can enable notifications for ORA assignments"
+      id="ora-grading.NotificationsBanner.Message"
+    />
+    <Hyperlink
+      destination="http://localhost:1997/notifications"
+      isInline={true}
+      rel="noopener noreferrer"
+      showLaunchIcon={false}
+      target="_blank"
+      variant="muted"
+    >
+      <FormattedMessage
+        defaultMessage="preferences center."
+        description="placeholder for the preferences center link"
+        id="ora-grading.NotificationsBanner.linkMessage"
+      />
+    </Hyperlink>
+  </span>
+</PageBanner>
+`;

src/containers/NotificationsBanner/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { PageBanner, Hyperlink } from '@openedx/paragon';
+
+import messages from './messages';
+
+export const NotificationsBanner = () => (
+  <PageBanner variant="accentB">
+    <span>
+      <FormattedMessage {...messages.infoMessage} />
+      <Hyperlink
+        isInline
+        variant="muted"
+        destination={`${getConfig().ACCOUNT_SETTINGS_URL}/notifications`}
+        target="_blank"
+        rel="noopener noreferrer"
+        showLaunchIcon={false}
+      >
+        <FormattedMessage {...messages.notificationsBannerLinkMessage} />
+      </Hyperlink>
+    </span>
+  </PageBanner>
+);
+
+export default NotificationsBanner;

src/containers/NotificationsBanner/messages.js

@@ -0,0 +1,18 @@
+/* eslint-disable quotes */
+import { defineMessages } from '@edx/frontend-platform/i18n';
+import { StrictDict } from 'utils';
+
+const messages = defineMessages({
+  infoMessage: {
+    id: 'ora-grading.NotificationsBanner.Message',
+    defaultMessage: 'You can now enable notifications for ORA assignments that require staff grading, from the ',
+    description: 'user info message that user can enable notifications for ORA assignments',
+  },
+  notificationsBannerLinkMessage: {
+    id: 'ora-grading.NotificationsBanner.linkMessage',
+    defaultMessage: 'preferences center.',
+    description: 'placeholder for the preferences center link',
+  },
+});
+
+export default StrictDict(messages);