fix: Remove manage my subscriptions CTAs (#4)

REV-4003

src/index.jsx

@@ -9,7 +9,6 @@ import {
   APP_READY,
   initialize,
   subscribe,
-  getConfig,
   mergeConfig,
 } from '@edx/frontend-platform';
 
@@ -20,7 +19,6 @@ import messages from './i18n';
 import configureStore from './store';
 import { NotFoundPage } from './components';
 import { OrdersAndSubscriptionsPage } from './orders-and-subscriptions';
-import { ManageSubscriptionsPage } from './subscriptions';
 
 import './index.scss';
 
@@ -52,12 +50,6 @@ subscribe(APP_READY, () => {
       <Header />
       <main>
         <Routes>
-          {getConfig().ENABLE_B2C_SUBSCRIPTIONS?.toLowerCase() === 'true' ? (
-            <Route
-              path="/manage-subscriptions"
-              element={<ManageSubscriptionsPage />}
-            />
-          ) : null}
           <Route path="/orders" element={<OrdersAndSubscriptionsPage />} />
           <Route path="/notfound" element={<NotFoundPage />} />
           <Route path="*" element={<NotFoundPage />} />

src/orders-and-subscriptions/OrdersAndSubscriptionsPage.jsx

@@ -64,18 +64,11 @@ const OrdersAndSubscriptionsPage = () => {
         <BasicAlert isVisible={hasError} />
         <FormattedMessage
           id="ecommerce.order.history.main.heading"
-          defaultMessage="My orders and subscriptions"
+          defaultMessage="My order history"
           description="Heading for orders and subscriptions page."
         >
           {(text) => <h1 className="text-primary-700">{text}</h1>}
         </FormattedMessage>
-        <FormattedMessage
-          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."
-        >
-          {(text) => <span className="text-dark-900">{text}</span>}
-        </FormattedMessage>
       </div>
       <Subscriptions />
       <OrderHistory isB2CSubsEnabled />

src/orders-and-subscriptions/OrdersAndSubscriptionsPage.test.jsx

@@ -17,19 +17,13 @@ const {
 const testHeadings = (hasSections = true, hasSubscriptions = true) => {
   if (hasSections && hasSubscriptions) {
     // Assert the main heading is present
-    expect(getByText('My orders and subscriptions')).toBeInTheDocument();
-    expect(
-      getByText('Manage your program subscriptions and view your order history.'),
-    ).toBeInTheDocument();
+    expect(getByText('My order history')).toBeInTheDocument();
     // Assert Subscription and Order History sections are rendered
     expect(getByText('Subscriptions')).toBeInTheDocument();
     expect(getByText('Order History')).toBeInTheDocument();
   } else if (!hasSections && !hasSubscriptions) {
     // Assert only Order History section is rendered
-    expect(queryByText('My orders and subscriptions')).toBeNull();
-    expect(
-      queryByText('Manage your program subscriptions and view your order history.'),
-    ).toBeNull();
+    expect(queryByText('My order history')).toBeNull();
     expect(getByText('Order History')).toBeInTheDocument();
     expect(queryByText('Subscriptions')).toBeNull();
   }
@@ -38,10 +32,7 @@ const testHeadings = (hasSections = true, hasSubscriptions = true) => {
 const testHeadingsLoading = (hasSections = true, hasSubscriptions = true) => {
   if (!hasSections && !hasSubscriptions) {
     // Assert loading, nothing is rendered
-    expect(queryByText('My orders and subscriptions')).toBeNull();
-    expect(
-      queryByText('Manage your program subscriptions and view your order history.'),
-    ).toBeNull();
+    expect(queryByText('My order history')).toBeNull();
     expect(queryByText('Subscriptions')).toBeNull();
     expect(queryByText('Order History')).toBeNull();
   }
@@ -51,19 +42,13 @@ const testHeadingsError = (hasSections = true, hasSubscriptions = true) => {
   if (!hasSections && !hasSubscriptions) {
     // Error with no subscriptions
     // Assert only Order History sections is rendered
-    expect(queryByText('My orders and subscriptions')).toBeNull();
-    expect(
-      queryByText('Manage your program subscriptions and view your order history.'),
-    ).toBeNull();
+    expect(queryByText('My order history')).toBeNull();
     expect(queryByText('Subscriptions')).toBeNull();
     expect(getByText('Order History')).toBeInTheDocument();
   } else if (hasSections && hasSubscriptions) {
     // Error but has subscriptions
     // Assert the main heading is present
-    expect(getByText('My orders and subscriptions')).toBeInTheDocument();
-    expect(
-      getByText('Manage your program subscriptions and view your order history.'),
-    ).toBeInTheDocument();
+    expect(getByText('My order history')).toBeInTheDocument();
     // Assert Subscription and Order History sections are rendered
     expect(getByText('Subscriptions')).toBeInTheDocument();
     expect(getByText('Order History')).toBeInTheDocument();

src/store/__mocks__/mockEmptyStore.js

@@ -13,7 +13,6 @@ module.exports = {
     loading: false,
     loadingError: false,
     subscriptions: [],
-    stripeCustomerPortalURL: null,
     stripeError: false,
     stripeLoading: false,
     shouldShowSubscriptionsSection: true,

src/store/__mocks__/subscriptions.mockStore.js

@@ -4,7 +4,6 @@ module.exports = {
     loadingError: false,
     stripeLoading: false,
     stripeError: false,
-    stripeCustomerPortalURL: null,
     shouldShowSubscriptionsSection: true,
     subscriptions: [
       {

src/subscriptions/Subscriptions.jsx

@@ -1,16 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { StatefulButton } from '@edx/paragon';
-import { Launch, SpinnerSimple } from '@edx/paragon/icons';
 
 import { BasicAlert } from '../components';
 
 import SubscriptionCardsView from './SubscriptionCardsView';
 import SubscriptionUpsell from './SubscriptionUpsell';
 
-import { clearStripeError, fetchStripeCustomerPortalURL } from './actions';
+import { clearStripeError } from './actions';
 import { subscriptionsSelector } from './selectors';
 
 import messages from './Subscriptions.messages';
@@ -20,9 +17,7 @@ const Subscriptions = () => {
   const dispatch = useDispatch();
   const {
     subscriptions,
-    stripeCustomerPortalURL,
     stripeError,
-    stripeLoading,
   } = useSelector(subscriptionsSelector);
   const hasSubscriptions = subscriptions.length > 0;
   const activeCount = subscriptions.filter(
@@ -35,29 +30,10 @@ const Subscriptions = () => {
     2: 'ecommerce.order.history.subscriptions.subtitle.multiple',
   }[Math.min(activeCount, 2)];
 
-  const buttonLabel = formatMessage(
-    messages['ecommerce.order.history.subscriptions.manage.button'],
-  );
-
-  const handleManageSubscriptionsClick = () => {
-    sendTrackEvent('edx.bi.user.subscription.order-page.manage.clicked');
-    dispatch(fetchStripeCustomerPortalURL());
-  };
-
   const handeAlertClose = () => {
     dispatch(clearStripeError());
   };
 
-  useEffect(() => {
-    if (stripeCustomerPortalURL) {
-      window.open(stripeCustomerPortalURL, '_blank', 'noopener,noreferrer');
-    }
-  }, [stripeCustomerPortalURL]);
-
-  const renderSpinner = () => (
-    <div className="icon-spin">{SpinnerSimple()}</div>
-  );
-
   const renderEmpty = () => (
     <>
       <FormattedMessage
@@ -77,18 +53,8 @@ const Subscriptions = () => {
         <span className="text-dark-900" data-testid="subscription-subtitle">
           {formatMessage(messages[subtitle], {
             activeCount,
-            buttonLabel: <i>{buttonLabel}</i>,
           })}
         </span>
-        <StatefulButton
-          size="sm"
-          className="text-nowrap"
-          labels={{ default: buttonLabel }}
-          icons={{ default: undefined }}
-          iconAfter={stripeLoading ? renderSpinner : Launch}
-          state={stripeLoading ? 'pending' : 'default'}
-          onClick={handleManageSubscriptionsClick}
-        />
       </div>
       <SubscriptionCardsView subscriptions={subscriptions} />
       <BasicAlert isModal isVisible={stripeError} onClose={handeAlertClose} />

src/subscriptions/Subscriptions.messages.js

@@ -4,26 +4,21 @@ const messages = defineMessages({
   'ecommerce.order.history.subscriptions.subtitle.zero': {
     id: 'ecommerce.order.history.subscriptions.subtitle.zero',
     defaultMessage:
-      'You do not have an active subscription. To view your past receipts, click {buttonLabel}.',
+      'You do not have an active subscription. To view your past receipts, please contact support.',
     description: 'Subtitle for zero active subscriptions',
   },
   'ecommerce.order.history.subscriptions.subtitle.one': {
     id: 'ecommerce.order.history.subscriptions.subtitle.one',
     defaultMessage:
-      'You have {activeCount} active subscription. To view your receipts, change your payment method or cancel your subscription, click {buttonLabel}.',
+      'You have {activeCount} active subscription. To view your receipts, please contact support.',
     description: 'Subtitle for one active subscriptions ',
   },
   'ecommerce.order.history.subscriptions.subtitle.multiple': {
     id: 'ecommerce.order.history.subscriptions.subtitle.multiple',
     defaultMessage:
-      'You have {activeCount} active subscriptions. To view your receipts, change your payment method or cancel your subscription, click {buttonLabel}.',
+      'You have {activeCount} active subscriptions. To view your receipts, please contact support.',
     description: 'Subtitle for multiple subscriptions',
   },
-  'ecommerce.order.history.subscriptions.manage.button': {
-    id: 'ecommerce.order.history.subscriptions.manage.button',
-    defaultMessage: 'Manage my subscriptions',
-    description: 'Button text for managing subscriptions.',
-  },
 });
 
 export default messages;