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

Author: NawfalAhmed

.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,7 @@ import {
   APP_READY,
   initialize,
   subscribe,
+  mergeConfig,
 } from '@edx/frontend-platform';
 
 import Header from '@edx/frontend-component-header';
@@ -21,7 +22,26 @@ import { OrdersAndSubscriptionsPage } from './orders-and-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 />
@@ -39,7 +59,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

@@ -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);
@@ -203,7 +198,9 @@ class OrderHistoryPage extends React.Component {
             </>
           ) : null}
           {loaded && !hasOrders ? this.renderEmptyMessage() : null}
-          {loading ? this.renderLoading() : null}
+          {loading && !this.props.isB2CSubsEnabled
+            ? this.renderLoading()
+            : null}
         </div>
       </section>
     );

src/order-history/OrderHistoryPage.jsx

@@ -8,9 +8,8 @@ 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: () => {},
@@ -30,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>

src/order-history/OrderHistoryPage.test.jsx

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