feat: add bottom widget container

.env

@@ -36,3 +36,4 @@ ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
+MERCHANDISE_2U_LOB_EXP_ID=''

.env.development

@@ -43,3 +43,4 @@ ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
+MERCHANDISE_2U_LOB_EXP_ID=''

src/App.jsx

@@ -28,6 +28,7 @@ import track from 'tracking';
 import fakeData from 'data/services/lms/fakeData/courses';
 
 import messages from './messages';
+import getOptimizely from './optimizely';
 
 import './App.scss';
 
@@ -78,6 +79,7 @@ export const App = () => {
     <Router>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
+        <script {...getOptimizely()} />
       </Helmet>
       <div>
         <LearnerDashboardHeader />

src/containers/Dashboard/DashboardLayout.jsx

@@ -16,7 +16,7 @@ export const columnConfig = {
   },
 };
 
-export const DashboardLayout = ({ children, sidebar }) => {
+export const DashboardLayout = ({ bottomWidgetContainer, children, sidebar }) => {
   const isCollapsed = hooks.useIsDashboardCollapsed();
 
   return (
@@ -30,10 +30,16 @@ export const DashboardLayout = ({ children, sidebar }) => {
           {sidebar}
         </Col>
       </Row>
+      <Row>
+        <Col className="my-5.5">
+          {bottomWidgetContainer}
+        </Col>
+      </Row>
     </Container>
   );
 };
 DashboardLayout.propTypes = {
+  bottomWidgetContainer: PropTypes.node.isRequired,
   children: PropTypes.node.isRequired,
   sidebar: PropTypes.node.isRequired,
 };

src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap

@@ -41,6 +41,11 @@ exports[`DashboardLayout collapsed snapshot 1`] = `
       test-sidebar-content
     </Col>
   </Row>
+  <Row>
+    <Col
+      className="my-5.5"
+    />
+  </Row>
 </Container>
 `;
 
@@ -90,5 +95,10 @@ exports[`DashboardLayout not collapsed snapshot 1`] = `
       test-sidebar-content
     </Col>
   </Row>
+  <Row>
+    <Col
+      className="my-5.5"
+    />
+  </Row>
 </Container>
 `;

src/containers/Dashboard/__snapshots__/index.test.jsx.snap

@@ -15,6 +15,7 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
     id="dashboard-content"
   >
     <DashboardLayout
+      bottomWidgetContainer={<BottomWidgetContainer />}
       sidebar={<LoadedWidgetSidebar />}
     >
       <CourseList />
@@ -56,6 +57,7 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
     id="dashboard-content"
   >
     <DashboardLayout
+      bottomWidgetContainer={<BottomWidgetContainer />}
       sidebar={<NoCoursesWidgetSidebar />}
     >
       <CourseList />

src/containers/Dashboard/index.jsx

@@ -6,6 +6,7 @@ import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CourseList from 'containers/CourseList';
 
+import BottomWidgetContainer from 'containers/WidgetContainers/BottomWidgetContainer';
 import LoadedSidebar from 'containers/WidgetContainers/LoadedSidebar';
 import NoCoursesSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
 
@@ -34,7 +35,10 @@ export const Dashboard = () => {
         {initIsPending
           ? (<LoadingView />)
           : (
-            <DashboardLayout sidebar={hasCourses ? <LoadedSidebar /> : <NoCoursesSidebar />}>
+            <DashboardLayout
+              sidebar={hasCourses ? <LoadedSidebar /> : <NoCoursesSidebar />}
+              bottomWidgetContainer={<BottomWidgetContainer />}
+            >
               <CourseList />
             </DashboardLayout>
           )}

src/containers/Dashboard/index.test.jsx

@@ -6,6 +6,7 @@ import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CourseList from 'containers/CourseList';
 
+import BottomWidgetContainer from 'containers/WidgetContainers/BottomWidgetContainer';
 import LoadedWidgetSidebar from 'containers/WidgetContainers/LoadedSidebar';
 import NoCoursesWidgetSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
 
@@ -121,7 +122,12 @@ describe('Dashboard', () => {
           showSelectSessionModal: true,
         },
         content: ['LoadedView', (
-          <DashboardLayout sidebar={<LoadedWidgetSidebar />}><CourseList /></DashboardLayout>
+          <DashboardLayout
+            sidebar={<LoadedWidgetSidebar />}
+            bottomWidgetContainer={<BottomWidgetContainer />}
+          >
+            <CourseList />
+          </DashboardLayout>
         )],
         showEnterpriseModal: false,
         showSelectSessionModal: true,
@@ -137,7 +143,12 @@ describe('Dashboard', () => {
           showSelectSessionModal: false,
         },
         content: ['Dashboard layout with no courses sidebar and content', (
-          <DashboardLayout sidebar={<NoCoursesWidgetSidebar />}><CourseList /></DashboardLayout>
+          <DashboardLayout
+            sidebar={<NoCoursesWidgetSidebar />}
+            bottomWidgetContainer={<BottomWidgetContainer />}
+          >
+            <CourseList />
+          </DashboardLayout>
         )],
         showEnterpriseModal: true,
         showSelectSessionModal: false,

src/containers/WidgetContainers/BottomWidgetContainer/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomWidgetContainer snapshots default 1`] = `<StaticCallouts />`;

src/containers/WidgetContainers/BottomWidgetContainer/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import TwoUWidget from 'widgets/TwoUWidget';
+
+export const BottomWidgetContainer = () => (
+  <TwoUWidget />
+);
+
+export default BottomWidgetContainer;

src/containers/WidgetContainers/BottomWidgetContainer/index.test.jsx

@@ -0,0 +1,12 @@
+import { shallow } from 'enzyme';
+
+import BottomWidgetContainer from '.';
+
+describe('BottomWidgetContainer', () => {
+  describe('snapshots', () => {
+    test('default', () => {
+      const wrapper = shallow(<BottomWidgetContainer />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/data/services/segment/utils.js

@@ -9,8 +9,11 @@ export const createEventTracker = (name, options = {}) => () => sendTrackEvent(
   { ...options, app_name: appName },
 );
 
-export const createLinkTracker = (tracker, href) => (e) => {
+export const createLinkTracker = (tracker, href, openInNewTab = false) => (e) => {
   e.preventDefault();
   tracker();
+  if (openInNewTab) {
+    return setTimeout(() => { global.open(href, '_blank'); }, LINK_TIMEOUT);
+  }
   return setTimeout(() => { global.location.href = href; }, LINK_TIMEOUT);
 };

src/optimizely.js

@@ -0,0 +1,12 @@
+const getOptimizely = () => {
+  const prodSrc = `${process.env.MARKETING_SITE_BASE_URL}/optimizelyjs/${process.env.OPTIMIZELY_PROJECT_ID}.js`;
+  const devSrc = `https://cdn.optimizely.com/js/${process.env.OPTIMIZELY_PROJECT_ID}.js`;
+  const src = process.env.NODE_ENV === 'development' ? devSrc : prodSrc;
+
+  return {
+    src,
+    async: true,
+  };
+};
+
+export default getOptimizely;

src/widgets/TwoUWidget/LoadedView.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Badge, Hyperlink, Icon } from '@edx/paragon';
+import { ArrowForward } from '@edx/paragon/icons';
+
+import { useIsMediumScreen } from './hooks';
+import { getMerchandisingItems, countryCodeUS } from './constants';
+import messages from './messages';
+import track from './track';
+
+export const LoadedView = ({ countryCode, show2ULobs }) => {
+  const { formatMessage } = useIntl();
+  const merchandisingItems = getMerchandisingItems(countryCode);
+  const isMediumScreen = useIsMediumScreen();
+  const markup = { markup: children => <span className="d-inline-flex mb-0 text-brand-500">{children}</span> };
+
+  const onClickHandler = (program, href) => {
+    track.twoUWidgetCardClicked(program, href);
+  };
+
+  const items = merchandisingItems.map(item => (
+    <Hyperlink
+      destination={item.itemURL}
+      key={item.key}
+      onClick={() => onClickHandler(item.key, item.itemURL)}
+      target="_blank"
+      showLaunchIcon={false}
+      className={classNames('static-callouts-item', {
+        'static-callouts-item-md': isMediumScreen && countryCode === countryCodeUS,
+      })}
+    >
+      <Badge variant="warning" className="item-badge mb-2">{formatMessage(messages.badgeTitle)}</Badge>
+      <h3>
+        {formatMessage(item.title)}
+      </h3>
+      <div className="card-description">
+        {formatMessage(item.description)}
+        <Icon className="d-inline-block align-middle mx-1" src={ArrowForward} />
+      </div>
+    </Hyperlink>
+  ));
+
+  return (
+    show2ULobs && (
+      <div className="callouts-container">
+        <div>
+          <h2>
+            {formatMessage(messages.heading, markup)}
+          </h2>
+          <p className="mb-0 text-gray-700">
+            {formatMessage(messages.subheading)}
+          </p>
+        </div>
+        <div className={classNames('static-callouts-container', {
+          'static-callouts-container-md': isMediumScreen && countryCode === countryCodeUS,
+        })}
+        >
+          {items}
+        </div>
+      </div>
+    )
+  );
+};
+
+LoadedView.propTypes = {
+  countryCode: PropTypes.string.isRequired,
+  show2ULobs: PropTypes.bool.isRequired,
+};
+
+export default LoadedView;

src/widgets/TwoUWidget/LoadedView.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoadedView from './LoadedView';
+
+jest.mock('./hooks', () => ({
+  useIsMediumScreen: jest.fn(() => false),
+  useOptimizelyExperiment: jest.fn(),
+  useTwoUWidgetData: jest.fn(),
+}));
+
+describe('LoadedView tests', () => {
+  it('Do not display static LOB cards if the experiment is not active', () => {
+    const wrapper = shallow(<LoadedView countryCode="PK" show2ULobs={false} />);
+    expect(wrapper.isEmptyRender()).toBe(true);
+  });
+  it('Display 4 static LOB cards for US users', () => {
+    const wrapper = shallow(<LoadedView countryCode="US" show2ULobs />);
+    expect(wrapper.find('div.static-callouts-container').children()).toHaveLength(4);
+  });
+  it('Display 3 static LOB cards for non-US users', () => {
+    const wrapper = shallow(<LoadedView countryCode="PK" show2ULobs />);
+    expect(wrapper.find('div.static-callouts-container').children()).toHaveLength(3);
+  });
+});

src/widgets/TwoUWidget/LoadingView.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Skeleton } from '@edx/paragon';
+
+export const LoadingView = () => (
+  <div className="loading-callouts-container">
+    <h2 className="skeleton-title-width"><Skeleton /></h2>
+    <p><Skeleton /></p>
+  </div>
+);
+
+export default LoadingView;

src/widgets/TwoUWidget/LoadingView.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import LoadingView from './LoadingView';
+
+describe('TwoUWidget LoadingView', () => {
+  test('snapshot', () => {
+    expect(shallow(<LoadingView />)).toMatchSnapshot();
+  });
+});

src/widgets/TwoUWidget/__snapshots__/LoadingView.test.jsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TwoUWidget LoadingView snapshot 1`] = `
+<div
+  className="loading-callouts-container"
+>
+  <h2
+    className="skeleton-title-width"
+  >
+    <Component />
+  </h2>
+  <p>
+    <Component />
+  </p>
+</div>
+`;

src/widgets/TwoUWidget/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TwoUWidget tests TwoUWidget snapshot 1`] = `""`;

src/widgets/TwoUWidget/api.js

@@ -0,0 +1,10 @@
+import { get, stringifyUrl } from 'data/services/lms/utils';
+import urls from 'data/services/lms/urls';
+
+export const fetchUrl = `${urls.api}/learner_home/twou_widget_context/`;
+
+const fetchTwoUWidgetContext = () => get(stringifyUrl(fetchUrl));
+
+export default {
+  fetchTwoUWidgetContext,
+};

src/widgets/TwoUWidget/api.test.js

@@ -0,0 +1,17 @@
+import { get, stringifyUrl } from 'data/services/lms/utils';
+import api, { fetchUrl } from './api';
+
+jest.mock('data/services/lms/utils', () => ({
+  stringifyUrl: (...args) => ({ stringifyUrl: args }),
+  get: (...args) => ({ get: args }),
+}));
+
+describe('twoUWidgetContext api', () => {
+  describe('fetchTwoUWidgetContext', () => {
+    it('call gets the country code of the user', () => {
+      expect(api.fetchTwoUWidgetContext()).toEqual(
+        get(stringifyUrl(fetchUrl)),
+      );
+    });
+  });
+});