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 { OrderAndSubscriptionsPage } from './order-and-subscriptions';
 
 import './index.scss';
 
@@ -27,7 +27,7 @@ subscribe(APP_READY, () => {
  <Header />
  <main>
  <Switch>
- <Route path="/orders" component={ConnectedOrderHistoryPage} />
+ <Route path="/orders" component={OrderAndSubscriptionsPage} />
  <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 "./order-and-subscriptions/style";
 
 .word-break-all {
  word-break: break-all !important;

src/order-and-subscriptions/OrderAndSubscriptionsPage.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import Subscriptions from '../subscriptions';
+import Payments from '../order-history';
+
+import messages from './OrderAndSubscriptionsPage.messages';
+
+const OrderAndSubscriptionsPage = ({ intl }) => {
+ const isB2CSubsEnabled = true;
+
+ const message = (id) => intl.formatMessage(messages[id]);
+
+ useEffect(() => {
+ if (isB2CSubsEnabled) {
+ document.title = 'Orders and Subscriptions | edX';
+ }
+ }, [isB2CSubsEnabled]);
+
+ if (!isB2CSubsEnabled) {
+ return (
+ <div className="page__order-and-subscriptions container-fluid py-5">
+ <Payments isB2CSubsEnabled={false} />
+ </div>
+ );
+ }
+
+ return (
+ <div className="page__order-and-subscriptions container-fluid py-4.5">
+ <div className="section">
+ <h1 className="text-primary-700">
+ {message('ecommerce.order.history.main.heading')}
+ </h1>
+ <span className="text-dark-900">
+ {message('ecommerce.order.history.main.subtitle')}
+ </span>
+ </div>
+ <Subscriptions />
+ <Payments isB2CSubsEnabled />
+ </div>
+ );
+};
+
+OrderAndSubscriptionsPage.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(OrderAndSubscriptionsPage);

src/order-and-subscriptions/OrderAndSubscriptionsPage.messages.jsx

@@ -0,0 +1,17 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ 'ecommerce.order.history.main.heading': {
+ id: 'ecommerce.order.history.main.heading',
+ defaultMessage: 'My orders and subscriptions',
+ description: 'Heading for orders and subscriptions page.',
+ },
+ 'ecommerce.order.history.main.subtitle': {
+ 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.',
+ },
+});
+
+export default messages;

src/order-and-subscriptions/_style.scss

@@ -0,0 +1,23 @@
+.page__order-and-subscriptions {
+ display: flex;
+ flex-direction: column;
+ gap: 2.5rem;
+
+ section, .section {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .section-gap-sm {
+ gap: 0.75rem;
+ }
+
+ h1, h2 {
+ margin-bottom: 0;
+ }
+ }
+
+ .subscription-scrollable {
+ max-height: 295px;
+ }
+}

src/order-and-subscriptions/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as OrderAndSubscriptionsPage } from './OrderAndSubscriptionsPage';

src/order-history/OrderHistoryPage.jsx

@@ -184,31 +184,44 @@ class OrderHistoryPage extends React.Component {
  const hasOrders = orders.length > 0;
 
  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>
+ {this.props.intl.formatMessage(
+ messages['ecommerce.order.history.payments.heading'],
+ )}
+ </h2>
+ ) : (
+ <h1>
+ {this.props.intl.formatMessage(
+ messages['ecommerce.order.history.page.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.messages.jsx

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+ 'ecommerce.order.history.payments.heading': {
+ id: 'ecommerce.order.history.payments.heading',
+ defaultMessage: 'Payments',
+ description: 'Heading for payments section.',
+ },
  'ecommerce.order.history.page.heading': {
  id: 'ecommerce.order.history.page.heading',
  defaultMessage: 'Order History',

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 };