feat: add subscriptions section to orders page (#289)

* feat: design changes for subscriptions (#276)

* feat: api integration for subscription related changes (#282)

* feat: add manage subscriptions url and update subscription upsell (#288)

* test: add more tests for subscriptions

---------

Co-authored-by: Nawfal Ahmed <111358247+NawfalAhmed@users.noreply.github.com>
Co-authored-by: Nawfal Ahmed <nawfal.ahmed@arbisoft.com>

Author: shafqatfarhan

.env

@@ -4,6 +4,7 @@ LMS_BASE_URL=''
 CREDENTIALS_BASE_URL=''
 COMMERCE_COORDINATOR_BASE_URL=''
 ECOMMERCE_BASE_URL=''
+SUBSCRIPTIONS_BASE_URL=''
 LOGIN_URL=''
 LOGOUT_URL=''
 CSRF_TOKEN_API_PATH=''
@@ -20,3 +21,4 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
+ENABLE_B2C_SUBSCRIPTIONS=false

.env.development

@@ -5,6 +5,7 @@ LMS_BASE_URL=http://localhost:18000
 CREDENTIALS_BASE_URL=http://localhost:18150
 COMMERCE_COORDINATOR_BASE_URL=http://localhost:8140
 ECOMMERCE_BASE_URL=http://localhost:18130
+SUBSCRIPTIONS_BASE_URL=http://localhost:18750
 LOGIN_URL=http://localhost:18000/login
 LOGOUT_URL=http://localhost:18000/login
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token
@@ -21,3 +22,4 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ENABLE_B2C_SUBSCRIPTIONS=true

.env.test

@@ -5,6 +5,7 @@ LMS_BASE_URL=http://localhost:18000
 CREDENTIALS_BASE_URL=http://localhost:18150
 COMMERCE_COORDINATOR_BASE_URL=http://localhost:8140
 ECOMMERCE_BASE_URL=http://localhost:18130
+SUBSCRIPTIONS_BASE_URL=http://localhost:18750
 LOGIN_URL=http://localhost:18000/login
 LOGOUT_URL=http://localhost:18000/login
 CSRF_TOKEN_API_PATH=/csrf/api/v1/token
@@ -21,3 +22,4 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+ENABLE_B2C_SUBSCRIPTIONS=true

package-lock.json

@@ -69,6 +69,7 @@
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
+    "redux-saga-routines": "^3.2.3",
     "redux-thunk": "2.4.1",
     "reselect": "4.1.6",
     "universal-cookie": "4.0.4",

package.json

@@ -1,3 +1,4 @@
+import { call, put } from 'redux-saga/effects';
 import camelCase from 'lodash.camelcase';
 import snakeCase from 'lodash.snakecase';
 
@@ -79,3 +80,23 @@ export class AsyncActionType {
     return `${this.topic}__${this.name}__RESET`;
   }
 }
+
+/**
+ * A higher order helper function to create a redux-saga generator function
+ *
+ * it handles the boilerplate of making a call to an API
+ * and dispatching the appropriate actions.
+ */
+export function createFetchHandler(routine, apiCall) {
+  return function* handleFetch() {
+    try {
+      yield put(routine.request());
+      const result = yield call(apiCall);
+      yield put(routine.success(result));
+    } catch (error) {
+      yield put(routine.failure(error));
+    } finally {
+      yield put(routine.fulfill());
+    }
+  };
+}

src/common/utils.js

@@ -9,6 +9,8 @@ import {
   APP_READY,
   initialize,
   subscribe,
+  getConfig,
+  mergeConfig,
 } from '@edx/frontend-platform';
 
 import Header from '@edx/frontend-component-header';
@@ -17,17 +19,43 @@ import Footer from '@edx/frontend-component-footer';
 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 { ManageSubscriptionsPage } from './subscriptions';
 
 import './index.scss';
 
+/**
+ * TEMPORARY
+ *
+ * Until we add the following keys in frontend-platform,
+ * use mergeConfig to join it with the rest of the config items
+ * (so we don't need to get it separately from process.env).
+ * After we add the keys to frontend-platform, this mergeConfig can go away
+ */
+mergeConfig({
+  COMMERCE_COORDINATOR_BASE_URL: process.env.COMMERCE_COORDINATOR_BASE_URL,
+  ENABLE_B2C_SUBSCRIPTIONS: process.env.ENABLE_B2C_SUBSCRIPTIONS,
+  SUBSCRIPTIONS_BASE_URL: process.env.SUBSCRIPTIONS_BASE_URL,
+  SUPPORT_URL: process.env.SUPPORT_URL,
+});
+
 subscribe(APP_READY, () => {
+  if (process.env.NODE_ENV === 'development') {
+    global.analytics?.debug();
+  }
+
   ReactDOM.render(
     <AppProvider store={configureStore()}>
       <Header />
       <main>
         <Switch>
-          <Route path="/orders" component={ConnectedOrderHistoryPage} />
+          {getConfig().ENABLE_B2C_SUBSCRIPTIONS === 'true' ? (
+            <Route
+              path="/manage-subscriptions"
+              component={ManageSubscriptionsPage}
+            />
+          ) : null}
+          <Route path="/orders" component={OrdersAndSubscriptionsPage} />
           <Route path="/notfound" component={NotFoundPage} />
           <Route path="*" component={NotFoundPage} />
         </Switch>
@@ -39,7 +67,12 @@ subscribe(APP_READY, () => {
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<IntlProvider locale="en"><ErrorPage message={error.message} /></IntlProvider>, document.getElementById('root'));
+  ReactDOM.render(
+    <IntlProvider locale="en">
+      <ErrorPage message={error.message} />
+    </IntlProvider>,
+    document.getElementById('root'),
+  );
 });
 
 initialize({

src/index.jsx

@@ -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/index.scss

@@ -27,11 +27,6 @@ class OrderHistoryPage extends React.Component {
     this.handlePageSelect = this.handlePageSelect.bind(this);
   }
 
-  componentDidMount() {
-    // TODO: We should fetch based on the route (ex: /orders/list/page/1)
-    this.props.fetchOrders(1);
-  }
-
   handlePageSelect(page) {
     // TODO: We should update the url and trigger this fetching based on the route
     this.props.fetchOrders(page);
@@ -182,33 +177,39 @@ 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.props.isB2CSubsEnabled
+            ? 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.jsx

@@ -8,10 +8,10 @@ import configureMockStore from 'redux-mock-store';
 import ConnectedOrderHistoryPage from './OrderHistoryPage';
 
 const mockStore = configureMockStore();
-const storeMocks = {
-  ordersLoaded: require('./__mocks__/ordersLoaded.mockStore'),
-};
+const storeMocks = require('../store/__mocks__/mockStore');
+
 const requiredOrderHistoryPageProps = {
+  isB2CSubsEnabled: false,
   fetchOrders: () => {},
 };
 
@@ -29,7 +29,7 @@ describe('<OrderHistoryPage />', () => {
       const tree = renderer
         .create((
           <IntlProvider locale="en">
-            <Provider store={mockStore(storeMocks.ordersLoaded)}>
+            <Provider store={mockStore(storeMocks)}>
               <ConnectedOrderHistoryPage {...requiredOrderHistoryPageProps} />
             </Provider>
           </IntlProvider>