feat: add manage subscriptions url

Author: NawfalAhmed

src/index.jsx

@@ -9,6 +9,7 @@ import {
   APP_READY,
   initialize,
   subscribe,
+  getConfig,
   mergeConfig,
 } from '@edx/frontend-platform';
 
@@ -19,6 +20,7 @@ import messages from './i18n';
 import configureStore from './store';
 import NotFoundPage from './components/NotFoundPage';
 import { OrdersAndSubscriptionsPage } from './orders-and-subscriptions';
+import { ManageSubscriptionsPage } from './subscriptions';
 
 import './index.scss';
 
@@ -39,6 +41,12 @@ subscribe(APP_READY, () => {
       <Header />
       <main>
         <Switch>
+          {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} />

src/subscriptions/ManageSubscriptionsPage.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import NotFoundPage from '../components/NotFoundPage';
+import { PageLoading } from '../common';
+import { fetchStripeCustomerPortalURL } from './actions';
+import { subscriptionsSelector } from './selectors';
+
+const ManageSubscriptionsPage = () => {
+  const dispatch = useDispatch();
+  const { stripeCustomerPortalURL, stripeError, stripeLoading } = useSelector(
+    subscriptionsSelector,
+  );
+
+  useEffect(() => {
+    dispatch(fetchStripeCustomerPortalURL());
+  }, []);
+
+  useEffect(() => {
+    if (stripeCustomerPortalURL) {
+      window.location.href = stripeCustomerPortalURL;
+    }
+  }, [stripeCustomerPortalURL]);
+
+  return stripeError ? <NotFoundPage /> : <PageLoading />;
+};
+
+export default ManageSubscriptionsPage;

src/subscriptions/index.js

@@ -1,4 +1,5 @@
 import Subscriptions from './Subscriptions';
+import ManageSubscriptionsPage from './ManageSubscriptionsPage';
 import { fetchSubscriptions } from './actions';
 import reducer from './reducer';
 import saga from './saga';
@@ -10,4 +11,5 @@ export {
   reducer,
   saga,
   storeName,
+  ManageSubscriptionsPage,
 };