fix: adding trial plan subscription card changes (#1716)

* fix: adding trial plan subscription card changes

* fix: nvm fix

Author: kiram15

.nvmrc

@@ -1 +1 @@
-24
+24.11.0

src/components/learner-credit-management/data/hooks/tests/useBnrSubsidyRequests.test.jsx

@@ -22,7 +22,7 @@ jest.mock('lodash-es', () => ({
 
 jest.mock('../../../../../data/services/EnterpriseAccessApiService', () => ({
   fetchBnrSubsidyRequests: jest.fn(),
-  fetchBnrSubsidyRequestsOverviw: jest.fn(),
+  fetchBnrSubsidyRequestsOverview: jest.fn(),
 }));
 
 jest.mock('../../utils', () => ({
@@ -125,7 +125,7 @@ describe('useBnrSubsidyRequests', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     EnterpriseAccessApiService.fetchBnrSubsidyRequests.mockResolvedValue(mockApiResponse);
-    EnterpriseAccessApiService.fetchBnrSubsidyRequestsOverviw.mockResolvedValue(mockOverviewResponse);
+    EnterpriseAccessApiService.fetchBnrSubsidyRequestsOverview.mockResolvedValue(mockOverviewResponse);
     camelCaseObject.mockImplementation((data) => data);
     debounce.mockImplementation((fn) => fn);
   });

src/components/learner-credit-management/data/hooks/useBnrSubsidyRequests.js

@@ -224,7 +224,7 @@ const useBnrSubsidyRequests = ({
         applyOverviewFiltersToOptions(filters, options);
       }
 
-      const response = await EnterpriseAccessApiService.fetchBnrSubsidyRequestsOverviw(
+      const response = await EnterpriseAccessApiService.fetchBnrSubsidyRequestsOverview(
         enterpriseId,
         subsidyAccessPolicyId,
         options,

src/components/subscriptions/MultipleSubscriptionPicker.jsx

@@ -1,42 +1,106 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
 import {
-  Row,
-  Col,
+  Col, Icon, Row, StatefulButton,
 } from '@openedx/paragon';
+import { Error, Launch, SpinnerSimple } from '@openedx/paragon/icons';
 
 import SubscriptionCard from './SubscriptionCard';
 import { DEFAULT_LEAD_TEXT } from './data/constants';
+import EnterpriseAccessApiService from '../../data/services/EnterpriseAccessApiService';
 
 const MultipleSubscriptionsPicker = ({
-  leadText, subscriptions, createActions,
-}) => (
-  <Row>
-    <Col xs="12">
-      <h2>Plans</h2>
-      <p>{leadText}</p>
-    </Col>
-    <Col lg="10">
-      {subscriptions.map(subscription => (
-        <SubscriptionCard
-          key={subscription.uuid}
-          subscription={subscription}
-          createActions={createActions}
-        />
-      ))}
-    </Col>
-  </Row>
-);
+  enterpriseUuid, leadText, subscriptions, createActions,
+}) => {
+  const intl = useIntl();
+  const [stripeSessionStatus, setStripeSessionStatus] = useState('default');
+  const hasSelfServiceSubs = subscriptions.some(sub => ['self-service-paid', 'self-service-trial'].includes(sub.planType));
+
+  const handleManageSubscriptionClick = async () => {
+    setStripeSessionStatus('pending');
+    try {
+      const response = await EnterpriseAccessApiService.fetchStripeBillingPortalSession(enterpriseUuid);
+      const results = camelCaseObject(response.data);
+      if (results.url) {
+        setStripeSessionStatus('default');
+        window.open(results.url, '_blank', 'noopener,noreferrer');
+      } else {
+        setStripeSessionStatus('error');
+      }
+    } catch (error) {
+      logError(error);
+      setStripeSessionStatus('error');
+    }
+  };
+
+  return (
+    <Row>
+      <Col lg="10">
+        <span className="d-flex justify-content-between">
+          <h2>Plans</h2>
+          {hasSelfServiceSubs && (
+          <StatefulButton
+            labels={{
+              default: intl.formatMessage({
+                id: 'subscriptions.manageSubscriptions.stripeLinkButton.default',
+                defaultMessage: 'Manage subscription',
+                description: 'Button text that link out to manage their subscriptions on the Stripe billing dashboard.',
+              }),
+              pending: intl.formatMessage({
+                id: 'subscriptions.manageSubscriptions.stripeLinkButton.loading',
+                defaultMessage: 'Creating Stripe session',
+                description: 'Button text while we are creating a new Stripe billing session',
+              }),
+              error: intl.formatMessage({
+                id: 'subscriptions.manageSubscriptions.stripeLinkButton.error',
+                defaultMessage: 'Try again',
+                description: 'Text for the button when creating a new Stripe session has failed',
+              }),
+            }}
+            icons={{
+              default: <Icon src={Launch} />,
+              pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+              error: <Icon src={Error} />,
+            }}
+            variant="outline-primary"
+            state={stripeSessionStatus}
+            onClick={handleManageSubscriptionClick}
+          />
+          )}
+        </span>
+        <p>{leadText}</p>
+      </Col>
+      <Col lg="10">
+        {subscriptions.map(subscription => (
+          <SubscriptionCard
+            key={subscription.uuid}
+            subscription={subscription}
+            createActions={createActions}
+          />
+        ))}
+      </Col>
+    </Row>
+  );
+};
+
+const mapStateToProps = state => ({
+  enterpriseUuid: state.portalConfiguration.enterpriseId,
+});
 
 MultipleSubscriptionsPicker.defaultProps = {
   leadText: DEFAULT_LEAD_TEXT,
   createActions: null,
 };
 
 MultipleSubscriptionsPicker.propTypes = {
+  enterpriseUuid: PropTypes.string.isRequired,
   leadText: PropTypes.string,
   subscriptions: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   createActions: PropTypes.func,
 };
 
-export default MultipleSubscriptionsPicker;
+export default connect(mapStateToProps)(MultipleSubscriptionsPicker);

src/components/subscriptions/MultipleSubscriptionsPage.jsx

@@ -27,7 +27,7 @@ const MultipleSubscriptionsPage = ({
   leadText,
   createActions,
 }) => {
-  const { loading, data } = useContext(SubscriptionContext);
+  const { data, loading } = useContext(SubscriptionContext);
   const subscriptions = data.results;
 
   if (loading) {

src/components/subscriptions/SubscriptionCard.jsx

@@ -1,31 +1,50 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import dayjs from 'dayjs';
 import { Link } from 'react-router-dom';
 import {
-  Card, Badge, Button, Stack, Row, Col,
+  Badge, Button, Card, Col, Hyperlink, Row, Stack,
 } from '@openedx/paragon';
+import { FormattedMessage, getLocale } from '@edx/frontend-platform/i18n';
 
 import classNames from 'classnames';
-import { getSubscriptionStatus } from './data/utils';
-import { ACTIVE, SCHEDULED, SUBSCRIPTION_STATUS_BADGE_MAP } from './data/constants';
+import {
+  ACTIVE, FREE_TRIAL_BADGE, TRIAL, SCHEDULED, SUBSCRIPTION_STATUS_BADGE_MAP, ENDED,
+} from './data/constants';
+import { useUpcomingInvoiceAmount } from './data/hooks';
+import { SubscriptionContext } from './SubscriptionData';
 import { ADMINISTER_SUBSCRIPTIONS_TARGETS } from '../ProductTours/AdminOnboardingTours/constants';
+import { makePlural } from '../../utils';
+import { getSubscriptionStatus, openStripeBillingPortal } from './data/utils';
 
 const SubscriptionCard = ({
+  enterpriseUuid,
   subscription,
   createActions,
 }) => {
   const {
-    title,
-    startDate,
     expirationDate,
     licenses = {},
+    planType,
+    startDate,
+    title,
+    uuid: subPlanUuid,
   } = subscription;
-
+  const { setErrors } = useContext(SubscriptionContext);
+  const { invoiceAmount, currency, loadingStripeSummary } = useUpcomingInvoiceAmount(
+    { subPlanUuid, planType, setErrors },
+  );
   const formattedStartDate = dayjs(startDate).format('MMMM D, YYYY');
   const formattedExpirationDate = dayjs(expirationDate).format('MMMM D, YYYY');
   const subscriptionStatus = getSubscriptionStatus(subscription);
 
+  let subscriptionUpcomingPrice;
+  if (!loadingStripeSummary) {
+    const locale = getLocale();
+    subscriptionUpcomingPrice = `${invoiceAmount.toLocaleString(locale, { style: 'currency', currency, maximumFractionDigits: 0 })} ${currency.toUpperCase()}`;
+  }
+
   const renderDaysUntilPlanStartText = (className) => {
     if (!(subscriptionStatus === SCHEDULED)) {
       return null;
@@ -39,8 +58,8 @@ const SubscriptionCard = ({
     return (
       <span className={classNames('d-block small', className)}>
         Plan begins in {
-          daysUntilPlanStart > 0 ? `${daysUntilPlanStart} day${daysUntilPlanStart > 1 ? 's' : ''}`
-            : `${hoursUntilPlanStart} hour${hoursUntilPlanStart > 1 ? 's' : ''}`
+          daysUntilPlanStart > 0 ? `${makePlural(daysUntilPlanStart, 'day')}`
+            : `${makePlural(hoursUntilPlanStart, 'hour')}`
         }
       </span>
     );
@@ -69,14 +88,41 @@ const SubscriptionCard = ({
   const renderCardHeader = () => {
     const subtitle = (
       <div className="d-flex flex-wrap align-items-center">
-        <Stack direction="horizontal" gap={3}>
-          <Badge variant={SUBSCRIPTION_STATUS_BADGE_MAP[subscriptionStatus].variant}>
-            {subscriptionStatus}
-          </Badge>
+        <Badge className="mr-2" variant={SUBSCRIPTION_STATUS_BADGE_MAP[subscriptionStatus].variant}>
+          {subscriptionStatus}
+        </Badge>
+        {planType === TRIAL && (
+          <>
+            <Badge className="mr-2" variant="info">
+              {FREE_TRIAL_BADGE}
+            </Badge>
+            {!(subscriptionStatus === ENDED) && (
+              <FormattedMessage
+                id="subscriptions.subscriptionCard.freeTrialDescription"
+                defaultMessage="Your 14-day free trial will conclude on {boldDate}. Your paid subscription will automatically start, and the {subscriptionUpcomingPrice} subscription fee will be charged to the card on file. {stripeLink}"
+                description="Message shown to warn customers with a free trial that they will be charged for the full subscription"
+                values={{
+                  boldDate: <span className="ml-1 font-weight-bold">{formattedExpirationDate}</span>,
+                  subscriptionUpcomingPrice: <span className="ml-1 font-weight-bold">{subscriptionUpcomingPrice}</span>,
+                  stripeLink: (
+                    <Hyperlink
+                      className="ml-2"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={() => (openStripeBillingPortal(enterpriseUuid))}
+                    >
+                      Manage subscription
+                    </Hyperlink>),
+                }}
+              />
+            )}
+          </>
+        )}
+        {planType !== TRIAL && (
           <span>
             {formattedStartDate} - {formattedExpirationDate}
           </span>
-        </Stack>
+        )}
       </div>
     );
 
@@ -89,7 +135,8 @@ const SubscriptionCard = ({
         subtitle={subtitle}
         actions={(
           <div>
-            {renderActions() || renderDaysUntilPlanStartText('mt-4')}
+            {renderActions()}
+            {renderDaysUntilPlanStartText('mt-4')}
           </div>
         )}
       />
@@ -135,24 +182,31 @@ const SubscriptionCard = ({
   );
 };
 
+const mapStateToProps = state => ({
+  enterpriseUuid: state.portalConfiguration.enterpriseId,
+});
+
 SubscriptionCard.defaultProps = {
   createActions: null,
 };
 
 SubscriptionCard.propTypes = {
+  enterpriseUuid: PropTypes.string.isRequired,
   subscription: PropTypes.shape({
-    startDate: PropTypes.string.isRequired,
     expirationDate: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
     licenses: PropTypes.shape({
       assigned: PropTypes.number.isRequired,
       activated: PropTypes.number.isRequired,
       allocated: PropTypes.number.isRequired,
       unassigned: PropTypes.number.isRequired,
       total: PropTypes.number.isRequired,
     }),
+    planType: PropTypes.string.isRequired,
+    startDate: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    uuid: PropTypes.string.isRequired,
   }).isRequired,
   createActions: PropTypes.func,
 };
 
-export default SubscriptionCard;
+export default connect(mapStateToProps)(SubscriptionCard);

src/components/subscriptions/data/constants.js

@@ -14,6 +14,7 @@ export const REVOKED = 'revoked';
 export const REVOCABLE_STATUSES = [ACTIVATED, ASSIGNED];
 export const ENROLLABLE_STATUSES = [ACTIVATED, ASSIGNED];
 
+export const STRIPE_EVENT_SUMMARY = 'Stripe Event Summary';
 export const SUBSCRIPTIONS = 'Subscriptions';
 export const SUBSCRIPTION_USERS = 'Subscription Users';
 export const SUBSCRIPTION_USERS_OVERVIEW = 'Subscription Users Overview';
@@ -48,13 +49,17 @@ export const USER_STATUS_BADGE_MAP = {
 export const ACTIVE = 'Active';
 export const ENDED = 'Ended';
 export const SCHEDULED = 'Scheduled';
+export const TRIAL = 'Trial';
 
 export const SUBSCRIPTION_STATUS_BADGE_MAP = {
   [ACTIVE]: { variant: 'primary' },
   [SCHEDULED]: { variant: 'secondary' },
   [ENDED]: { variant: 'light' },
+  [TRIAL]: { variant: 'info' },
 };
 
+export const FREE_TRIAL_BADGE = 'Free Trial';
+
 // Browse and request constants `BrowseAndRequestAlert`
 export const BROWSE_AND_REQUEST_ALERT_COOKIE_PREFIX = 'dismissed-browse-and-request-alert';