feat: design changes for subscriptions

src/index.jsx

@@ -17,7 +17,7 @@ import { messages as paragonMessages } from '@edx/paragon';
 import messages from './i18n';
 import configureStore from './store';
 import NotFoundPage from './components/NotFoundPage';
-import { ConnectedOrderHistoryPage } from './order-history';
+import { OrdersAndSubscriptionsPage } from './orders-and-subscriptions';
 
 import './index.scss';
 
@@ -27,7 +27,7 @@ subscribe(APP_READY, () => {
       <Header />
       <main>
         <Switch>
-          <Route path="/orders" component={ConnectedOrderHistoryPage} />
+          <Route path="/orders" component={OrdersAndSubscriptionsPage} />
           <Route path="/notfound" component={NotFoundPage} />
           <Route path="*" component={NotFoundPage} />
         </Switch>

src/index.scss

@@ -11,6 +11,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~@edx/frontend-component-footer/dist/footer";
 
 @import "./order-history/style";
+@import "./orders-and-subscriptions/style";
 
 .word-break-all {
   word-break: break-all !important;

src/order-history/OrderHistoryPage.jsx

@@ -182,33 +182,37 @@ class OrderHistoryPage extends React.Component {
     } = this.props;
     const loaded = !loading && !loadingError;
     const hasOrders = orders.length > 0;
+    const heading = this.props.intl.formatMessage(
+      messages['ecommerce.order.history.page.heading'],
+    );
 
     return (
-      <div className="page__order-history container-fluid py-5">
-        <h1>
-          {this.props.intl.formatMessage(messages['ecommerce.order.history.page.heading'])}
-        </h1>
-        {loadingError ? this.renderError() : null}
-        {loaded && hasOrders ? (
-          <>
-            <MediaQuery query="(max-width: 768px)">
-              {this.renderMobileOrdersTable()}
-            </MediaQuery>
-            <MediaQuery query="(min-width: 769px)">
-              {this.renderOrdersTable()}
-            </MediaQuery>
-            {this.renderPagination()}
-          </>
-        ) : null}
-        {loaded && !hasOrders ? this.renderEmptyMessage() : null}
-        {loading ? this.renderLoading() : null}
-      </div>
+      <section className="page__order-history">
+        {this.props.isB2CSubsEnabled ? <h2>{heading}</h2> : <h1>{heading}</h1>}
+        <div>
+          {loadingError ? this.renderError() : null}
+          {loaded && hasOrders ? (
+            <>
+              <MediaQuery query="(max-width: 768px)">
+                {this.renderMobileOrdersTable()}
+              </MediaQuery>
+              <MediaQuery query="(min-width: 769px)">
+                {this.renderOrdersTable()}
+              </MediaQuery>
+              {this.renderPagination()}
+            </>
+          ) : null}
+          {loaded && !hasOrders ? this.renderEmptyMessage() : null}
+          {loading ? this.renderLoading() : null}
+        </div>
+      </section>
     );
   }
 }
 
 OrderHistoryPage.propTypes = {
   intl: intlShape.isRequired,
+  isB2CSubsEnabled: PropTypes.bool.isRequired,
   orders: PropTypes.arrayOf(PropTypes.shape({
     datePlaced: PropTypes.string,
     total: PropTypes.string,

src/order-history/OrderHistoryPage.test.jsx

@@ -12,6 +12,7 @@ const storeMocks = {
   ordersLoaded: require('./__mocks__/ordersLoaded.mockStore'),
 };
 const requiredOrderHistoryPageProps = {
+  isB2CSubsEnabled: false,
   fetchOrders: () => {},
 };
 

src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap

@@ -1,96 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<OrderHistoryPage /> Renders correctly in various states renders orders table with pagination 1`] = `
-<div
-  className="page__order-history container-fluid py-5"
+<section
+  className="page__order-history"
 >
   <h1>
     Order History
   </h1>
-  <nav
-    aria-label="pagination navigation"
-    className="pagination-default"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      aria-relevant="text"
-      className="sr-only"
+  <div>
+    <nav
+      aria-label="pagination navigation"
+      className="pagination-default"
     >
-      Page 2, Current Page, of 10
-    </div>
-    <ul
-      className="pagination"
-    >
-      <li
-        className="page-item"
+      <div
+        aria-atomic={true}
+        aria-live="polite"
+        aria-relevant="text"
+        className="sr-only"
+      >
+        Page 2, Current Page, of 10
+      </div>
+      <ul
+        className="pagination"
       >
-        <button
-          aria-label="Previous, Page 1"
-          className="previous page-link btn btn-primary"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+        <li
+          className="page-item"
         >
-          <div>
-            <span
-              className="pgn__icon"
-            >
-              <svg
-                aria-hidden={true}
-                fill="none"
-                focusable={false}
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
+          <button
+            aria-label="Previous, Page 1"
+            className="previous page-link btn btn-primary"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <div>
+              <span
+                className="pgn__icon"
               >
-                <path
-                  d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            Previous
-          </div>
-        </button>
-      </li>
-      <li
-        className="page-item"
-      >
-        <button
-          aria-label="Next, Page 3"
-          className="next page-link btn btn-primary"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Previous
+            </div>
+          </button>
+        </li>
+        <li
+          className="page-item"
         >
-          <div>
-            Next
-            <span
-              className="pgn__icon"
-            >
-              <svg
-                aria-hidden={true}
-                fill="none"
-                focusable={false}
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
+          <button
+            aria-label="Next, Page 3"
+            className="next page-link btn btn-primary"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <div>
+              Next
+              <span
+                className="pgn__icon"
               >
-                <path
-                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </div>
-        </button>
-      </li>
-    </ul>
-  </nav>
-</div>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</section>
 `;

src/order-history/index.js

@@ -1,11 +1,7 @@
-import ConnectedOrderHistoryPage from './OrderHistoryPage';
+import OrderHistoryPage from './OrderHistoryPage';
 import reducer from './reducer';
 import saga from './saga';
 import { storeName } from './selectors';
 
-export {
-  ConnectedOrderHistoryPage,
-  reducer,
-  saga,
-  storeName,
-};
+export default OrderHistoryPage;
+export { reducer, saga, storeName };

src/orders-and-subscriptions/OrdersAndSubscriptionsPage.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import Subscriptions from '../subscriptions';
+import OrderHistory from '../order-history';
+
+const OrdersAndSubscriptionsPage = () => {
+  // TODO: get from waffle-flag
+  const isB2CSubsEnabled = true;
+
+  useEffect(() => {
+    if (isB2CSubsEnabled) {
+      document.title = 'Orders and Subscriptions | edX';
+    }
+  }, [isB2CSubsEnabled]);
+
+  if (!isB2CSubsEnabled) {
+    return (
+      <div className="page__orders-and-subscriptions container-fluid py-5">
+        <OrderHistory isB2CSubsEnabled={false} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="page__orders-and-subscriptions container-fluid py-4.5">
+      <div className="section">
+        <FormattedMessage
+          id="ecommerce.order.history.main.heading"
+          defaultMessage="My orders and subscriptions"
+          description="Heading for orders and subscriptions page."
+        >
+          {(text) => <h1 className="text-primary-700">{text}</h1>}
+        </FormattedMessage>
+        <FormattedMessage
+          id="ecommerce.order.history.main.subtitle"
+          defaultMessage="Manage your program subscriptions and view your order history."
+          description="Subtitle of Heading for orders and subscriptions page."
+        >
+          {(text) => <span className="text-dark-900">{text}</span>}
+        </FormattedMessage>
+      </div>
+      <Subscriptions />
+      <OrderHistory isB2CSubsEnabled />
+    </div>
+  );
+};
+
+export default OrdersAndSubscriptionsPage;

src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable global-require */
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import configureMockStore from 'redux-mock-store';
+
+import OrdersAndSubscriptionsPage from './OrdersAndSubscriptionsPage';
+
+const mockStore = configureMockStore();
+const storeMocks = {
+  ordersLoaded: require('../order-history/__mocks__/ordersLoaded.mockStore'),
+};
+
+describe('<OrdersAndSubscriptions />', () => {
+  describe('Renders correctly in various states', () => {
+    it('renders with orders and subscriptions', () => {
+      const tree = renderer
+        .create(
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.ordersLoaded)}>
+              <OrdersAndSubscriptionsPage />
+            </Provider>
+          </IntlProvider>,
+        )
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});