PON-219: Manage Subscriptions Url

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';
 
@@ -47,6 +49,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,29 @@
+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 } = useSelector(
+ subscriptionsSelector,
+ );
+
+ useEffect(() => {
+ dispatch(fetchStripeCustomerPortalURL());
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ if (stripeCustomerPortalURL) {
+ window.location.href = stripeCustomerPortalURL;
+ }
+ }, [stripeCustomerPortalURL]);
+
+ return stripeError ? <NotFoundPage /> : <PageLoading />;
+};
+
+export default ManageSubscriptionsPage;

src/subscriptions/ManageSubscriptionsPage.test.jsx

@@ -0,0 +1,28 @@
+/* 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 ManageSubscriptionsPage from './ManageSubscriptionsPage';
+
+const mockStore = configureMockStore();
+const storeMocks = require('../store/__mocks__/mockStore');
+
+describe('<ManageSubscriptions />', () => {
+ describe('Renders correctly in various states', () => {
+ it('renders when url is fetched correctly', () => {
+ const tree = renderer
+ .create(
+ <IntlProvider locale="en">
+ <Provider store={mockStore(storeMocks)}>
+ <ManageSubscriptionsPage />
+ </Provider>
+ </IntlProvider>,
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+ });
+});

src/subscriptions/SubscriptionUpsell.jsx

@@ -3,13 +3,12 @@ import { useMediaQuery } from 'react-responsive';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Alert, Badge, Button } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
 
 const SubscriptionUpsell = () => (
  <Alert
  className="bg-light-200"
  actions={[
- <Button className="text-nowrap" iconBefore={Search}>
+ <Button className="text-nowrap">
  <FormattedMessage
  id="ecommerce.order.history.subscription.upsell.button"
  defaultMessage="Explore subscription options"
@@ -32,14 +31,17 @@ const SubscriptionUpsell = () => (
  </Badge>
  <FormattedMessage
  id="ecommerce.order.history.subscription.upsell.heading"
- defaultMessage="Monthly program subscriptions now available"
+ defaultMessage="Monthly program subscriptions {emDash} more flexible, more affordable"
  description="Heading for subscription upsell"
+ values={{
+ emDash: <>&mdash;</>,
+ }}
  />
  </Alert.Heading>
  <FormattedMessage
  tagName="p"
  id="ecommerce.order.history.subscription.upsell.message"
- defaultMessage="An easier way to access popular programs with more control over how much you spend. Starting at {minSubscriptionPrice} per month after a {trialLength}-day free trial. Cancel anytime."
+ defaultMessage="Now available for many popular programs, affordable monthly subscription pricing can help you manage your budget more effectively. Subscriptions start at {minSubscriptionPrice}/month USD per program, after a {trialLength}-day full access free trial. Cancel at any time."
  description="Message body for subscription upsell"
  values={{
  minSubscriptionPrice: '$39',

src/subscriptions/__snapshots__/ManageSubscriptionsPage.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ManageSubscriptions /> Renders correctly in various states renders when url is fetched correctly 1`] = `
+<div>
+ <div
+ className="d-flex justify-content-center align-items-center flex-column"
+ style={
+ Object {
+ "height": "50vh",
+ }
+ }
+ >
+ <div
+ className="spinner-border text-primary"
+ role="status"
+ />
+ </div>
+</div>
+`;

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