fix: adding trial plan subscription card changes

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/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,30 +1,44 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import { Link } from 'react-router-dom';
 import {
   Card, Badge, Button, Stack, Row, Col,
 } from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import classNames from 'classnames';
+import {
+  ACTIVE, FREE_TRIAL_BADGE, TRIAL, SCHEDULED, SUBSCRIPTION_STATUS_BADGE_MAP,
+} from './data/constants';
+import { useUpcomingInvoiceAmount } from './data/hooks';
 import { getSubscriptionStatus } from './data/utils';
-import { ACTIVE, SCHEDULED, SUBSCRIPTION_STATUS_BADGE_MAP } from './data/constants';
+import { SubscriptionContext } from './SubscriptionData';
 import { ADMINISTER_SUBSCRIPTIONS_TARGETS } from '../ProductTours/AdminOnboardingTours/constants';
+import { makePlural } from '../../utils';
 
 const SubscriptionCard = ({
   subscription,
   createActions,
 }) => {
+  console.log('sub ', subscription);
   const {
-    title,
-    startDate,
     expirationDate,
     licenses = {},
+    planType,
+    startDate,
+    title,
+    uuid,
   } = subscription;
+  const { setErrors } = useContext(SubscriptionContext);
+  console.log('kira info in subCard ', { uuid, planType });
+  const { invoiceAmount } = useUpcomingInvoiceAmount({ uuid, planType, setErrors });
+  console.log('kira loading? ', invoiceAmount);
 
   const formattedStartDate = dayjs(startDate).format('MMMM D, YYYY');
   const formattedExpirationDate = dayjs(expirationDate).format('MMMM D, YYYY');
   const subscriptionStatus = getSubscriptionStatus(subscription);
+  const subCost = '$2,000 USD';
 
   const renderDaysUntilPlanStartText = (className) => {
     if (!(subscriptionStatus === SCHEDULED)) {
@@ -39,8 +53,8 @@
     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 +83,32 @@
   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 className="mr-2" variant={SUBSCRIPTION_STATUS_BADGE_MAP[subscriptionStatus].variant}>
+          {subscriptionStatus}
+        </Badge>
+        {planType === TRIAL && (
+        <>
+          <Badge className="mr-2" variant="info">
+            {FREE_TRIAL_BADGE}
           </Badge>
-          <span>
-            {formattedStartDate} - {formattedExpirationDate}
-          </span>
-        </Stack>
+          {true && (
+          <FormattedMessage
+            id="subscriptions.subscriptionCard.freeTrialDescription"
+            defaultMessage="Your 14 day free trial will expire on {boldDate} and the card on file will be charged {subCost}."
+            description="Description text explaining the subscription details"
+            values={{
+              boldDate: <span className="mx-1 font-weight-bold">{formattedExpirationDate} </span>,
+              subCost: <span className="ml-1">{ subCost }</span>,
+            }}
+          />
+          )}
+        </>
+        )}
+        {planType !== TRIAL && (
+        <span>
+          {formattedStartDate} - {formattedExpirationDate}
+        </span>
+        )}
       </div>
     );
 
@@ -90,6 +122,7 @@
         actions={(
           <div>
             {renderActions() || renderDaysUntilPlanStartText('mt-4')}
+            {renderDaysUntilPlanStartText('mt-4')}
           </div>
         )}
       />
@@ -141,16 +174,18 @@
 
 SubscriptionCard.propTypes = {
   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,
 };

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';
 

src/components/subscriptions/data/hooks.js

@@ -5,10 +5,13 @@
 import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
 import {
   NETWORK_ERROR_MESSAGE,
+  STRIPE_EVENT_SUMMARY,
   SUBSCRIPTION_USERS,
   SUBSCRIPTION_USERS_OVERVIEW,
   SUBSCRIPTIONS,
+  TRIAL,
 } from './constants';
+import EnterpriseAccessApiService from '../../../data/services/EnterpriseAccessApiService';
 
 const subscriptionInitState = {
   results: [],
@@ -41,7 +44,7 @@
             .forEach(customerAgreement => {
               // Push information about whether a particular subscription
               // should have expiration notices displayed for it down into
-              // that subcription.
+              // that subscription.
               const flattenedSubscriptionResults = customerAgreement.subscriptions.map(subscription => ({
                 ...subscription,
                 showExpirationNotifications: !(customerAgreement.disableExpirationNotifications || false),
@@ -233,3 +236,46 @@
     loading,
   };
 };
+
+/**
+ * This hook fetches a StripeEventSummary for pricing information about a trial SubscriptionPlan
+ * @param {string} uuid - The UUID of the SubscriptionPlan.
+*/
+export const useUpcomingInvoiceAmount = ({ uuid, planType, setErrors }) => {
+  const [loadingStripeSummary, setLoadingStripeSummary] = useState(true);
+  const [invoiceAmount, setInvoiceAmount] = useState(null);
+  useEffect(() => {
+    const fetchStripeEvent = async () => {
+      try {
+        const response = await EnterpriseAccessApiService.fetchStripeEvent(uuid);
+        const { results } = camelCaseObject(response.data);
+        for (const index in results) {
+          const summary = results[index];
+          if (summary.eventType === 'customer.subscription.created') {
+            setInvoiceAmount(summary.upcomingInvoiceAmountDue);
+          }
+        }
+      } catch (error) {
+        logError(error);
+        setErrors(s => ({
+          ...s,
+          [STRIPE_EVENT_SUMMARY]: NETWORK_ERROR_MESSAGE,
+        }));
+      } finally {
+        setLoadingStripeSummary(false);
+      }
+    };
+    // only trial plans will have associated StripeEventSummaries
+    if (planType === TRIAL) {
+      fetchStripeEvent();
+    } else {
+      // return early prevent unnecessary calls to enterprise-access for non-trial plans
+
+    }
+  }, [setErrors, planType, uuid]);
+
+  return {
+    invoiceAmount,
+    loadingStripeSummary,
+  };
+};

src/components/subscriptions/tests/SubscriptionCard.test.jsx

@@ -9,6 +9,8 @@
 } from '@openedx/paragon';
 import { renderWithRouter } from '../../test/testUtils';
 import SubscriptionCard from '../SubscriptionCard';
+import { FREE_TRIAL_BADGE, TRIAL } from '../data/constants';
+import { useUpcomingInvoiceAmount } from '../data/hooks';
 
 const defaultSubscription = {
   uuid: 'ided',
@@ -26,6 +28,24 @@
     total: 20,
   },
 };
+
+const trialSubscription = {
+  uuid: 'trial-uuid',
+  title: 'Trial Plan',
+  startDate: '2021-04-13',
+  expirationDate: '2024-04-13',
+  planType: TRIAL,
+};
+const trialProps = {
+  subscription: defaultSubscription,
+  licenses: {
+    assigned: 5,
+    unassigned: 2,
+    activated: 3,
+    allocated: 10,
+    total: 20,
+  },
+};
 const responsiveContextValue = { width: breakpoints.extraSmall.maxWidth };
 
 jest.mock('dayjs', () => (date) => {
@@ -35,6 +55,24 @@
   return jest.requireActual('dayjs')('2020-01-01T00:00:00.000Z');
 });
 
+jest.mock('../data/hooks', () => ({
+  ...jest.requireActual('../data/hooks'),
+  useUpcomingInvoiceAmount: jest.fn().mockReturnValue({
+    stripeEventSummary: [
+      {
+        id: 1,
+        event_type: 'customer.subscription.created',
+        upcoming_invoice_amount_due: '150000',
+      }, {
+        id: 2,
+        event_type: 'invoice.paid',
+        upcoming_invoice_amount_due: null,
+      },
+    ],
+    loadingStripeEvent: false,
+  }),
+}));
+
 describe('SubscriptionCard', () => {
   it('displays subscription information', () => {
     renderWithRouter(<SubscriptionCard {...defaultProps} />);
@@ -78,4 +116,10 @@
     expect(mockCreateActions).toHaveBeenCalledWith(defaultSubscription);
     expect(screen.getByText('action 1'));
   });
+
+  it('displays trial subscription with additional subtitle', () => {
+    renderWithRouter(<SubscriptionCard {...trialProps} />);
+    expect(screen.getByText(FREE_TRIAL_BADGE));
+    expect(screen.getByText('Your 14 day free trial will expire on April 13th and the card on file will be charged {subCost}.'));
+  });
 });

src/data/services/EnterpriseAccessApiService.ts

@@ -426,7 +426,7 @@ class EnterpriseAccessApiService {
    * @param {string} enterpriseUUID - The UUID of the enterprise customer.
    * @returns {Promise<AxiosResponse>} - A promise that resolves to the API response.
    */
-  static fetchBnrSubsidyRequestsOverviw(enterpriseId, policyId, options = {}) {
+  static fetchBnrSubsidyRequestsOverview(enterpriseId, policyId, options = {}) {
     const params = new URLSearchParams({
       enterprise_customer_uuid: enterpriseId,
       policy_uuid: policyId,
@@ -435,6 +435,20 @@ class EnterpriseAccessApiService {
     const url = `${EnterpriseAccessApiService.baseUrl}/learner-credit-requests/overview/?${params.toString()}`;
     return EnterpriseAccessApiService.apiClient().get(url);
   }
+
+  /**
+   * Fetches StripeEventSummary for trial SubscriptionPlan
+   * @param {string} uuid - The UUID of the enterprise customer.
+   *
+   * @returns A promise that resolves to an AxiosResponse containing the stripe event information
+   */
+  static fetchStripeEvent(uuid: string) {
+    const params = new URLSearchParams({
+      subscription_plan_uuid: uuid,
+    });
+    const url = `${EnterpriseAccessApiService.baseUrl}/stripe-event-summary/?${params.toString()}`;
+    return EnterpriseAccessApiService.apiClient().get(url);
+  }
 }
 
 export default EnterpriseAccessApiService;