chore: add CTA for page (#112)

* chore: add CTA for page

* chore: update hyperlink style

src/App.jsx

@@ -9,6 +9,7 @@ import { LearningHeader as Header } from '@edx/frontend-component-header';
 import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
+import CTA from 'containers/CTA';
 import ListView from 'containers/ListView';
 
 import './App.scss';
@@ -22,6 +23,7 @@ export const App = ({ courseMetadata, isEnabled }) => (
         courseOrg={courseMetadata.org}
       />
       {!isEnabled && <DemoWarning />}
+      <CTA />
       <main>
         <ListView />
       </main>

src/App.test.jsx

@@ -23,6 +23,7 @@ jest.mock('@edx/frontend-component-header', () => ({
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
+jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 
 const logo = 'fakeLogo.png';

src/__snapshots__/App.test.jsx.snap

@@ -9,6 +9,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
       courseTitle="course-title"
     />
     <DemoWarning />
+    <CTA />
     <main>
       <ListView />
     </main>
@@ -27,6 +28,7 @@ exports[`App router component snapshot: enabled 1`] = `
       courseOrg="course-org"
       courseTitle="course-title"
     />
+    <CTA />
     <main>
       <ListView />
     </main>

src/containers/CTA/CTA.test.jsx

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

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CTA component snapshots 1`] = `
+<PageBanner>
+  <span>
+    <FormattedMessage
+      defaultMessage="Thanks for using the new ORA staff grading experience. We'd love to hear your feedback"
+      description="Thank user for using ora and ask for feed back"
+      id="ora-grading.CTA.feedbackMessage"
+    />
+     
+    <Hyperlink
+      destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
+      isInline={true}
+      showLaunchIcon={false}
+      target="_blank"
+      variant="muted"
+    >
+      <FormattedMessage
+        defaultMessage="here"
+        description="placeholder for the feedback anchor link"
+        id="ora-grading.CTA.linkMessage"
+      />
+    </Hyperlink>
+    .
+  </span>
+</PageBanner>
+`;

src/containers/CTA/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { PageBanner, Hyperlink } from '@edx/paragon';
+
+import messages from './messages';
+
+/**
+ * <CTA />
+ */
+export const CTA = () => (
+  <PageBanner>
+    <span>
+      <FormattedMessage {...messages.ctaFeedbackMessage} />&nbsp;
+      <Hyperlink
+        isInline
+        variant="muted"
+        destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        <FormattedMessage {...messages.ctaLinkMessage} />
+      </Hyperlink>
+      .
+    </span>
+  </PageBanner>
+);
+
+export default CTA;

src/containers/CTA/messages.js

@@ -0,0 +1,18 @@
+/* eslint-disable quotes */
+import { defineMessages } from '@edx/frontend-platform/i18n';
+import { StrictDict } from 'utils';
+
+const messages = defineMessages({
+  ctaFeedbackMessage: {
+    id: 'ora-grading.CTA.feedbackMessage',
+    defaultMessage: 'Thanks for using the new ORA staff grading experience. We\'d love to hear your feedback',
+    description: 'Thank user for using ora and ask for feed back',
+  },
+  ctaLinkMessage: {
+    id: 'ora-grading.CTA.linkMessage',
+    defaultMessage: 'here',
+    description: 'placeholder for the feedback anchor link',
+  },
+});
+
+export default StrictDict(messages);

src/setupTest.js

@@ -76,6 +76,7 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
   IconButton: 'IconButton',
   MultiSelectDropdownFilter: 'MultiSelectDropdownFilter',
   OverlayTrigger: 'OverlayTrigger',
+  PageBanner: 'PageBanner',
   Popover: {
     Content: 'Popover.Content',
   },