fix: use coupon details from overview instead of fetching coupons

Author: long74100

src/components/subsidy-request-modals/ApproveCouponCodeRequestModal.jsx

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { Info } from '@edx/paragon/icons';
 import { logError } from '@edx/frontend-platform/logging';
 import Skeleton from 'react-loading-skeleton';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { useApplicableCoupons } from './data/hooks';
 import EnterpriseAccessApiService from '../../data/services/EnterpriseAccessApiService';
 import { formatTimestamp } from '../../utils';
@@ -202,7 +203,7 @@ ApproveCouponCodeRequestModal.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  coupons: state.coupons.data,
+  coupons: state.coupons.data ? camelCaseObject(state.coupons.data) : { results: [] },
 });
 
 export default connect(mapStateToProps)(ApproveCouponCodeRequestModal);

src/components/subsidy-request-modals/data/hooks.js

@@ -3,7 +3,6 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { logError } from '@edx/frontend-platform/logging';
 import moment from 'moment';
 import EnterpriseCatalogApiService from '../../../data/services/EnterpriseCatalogApiService';
-import EcommerceApiService from '../../../data/services/EcommerceApiService';
 
 /**
  * This hook returns the enterprise's catalogs that contain the given course runs.
@@ -85,59 +84,28 @@ export const useApplicableCoupons = ({
 }) => {
   const {
     applicableCatalogs,
-    isLoading: isLoadingApplicableCatalogs,
-    error: fetchApplicableCatalogsError,
+    isLoading,
+    error,
   } = useApplicableCatalogs({ enterpriseId, courseRunIds });
-  const [isLoading, setIsLoading] = useState(false);
   const [applicableCoupons, setApplicableCoupons] = useState([]);
-  const [couponDetails, setCouponDetails] = useState([]);
-  const [fetchCouponsError, setFetchCouponsError] = useState();
-
-  useEffect(() => {
-    const fetchCouponDetails = async () => {
-      setIsLoading(true);
-      try {
-        // We need to fetch individual coupons to get the associated enterprise catalog
-        const details = (await Promise.all(
-          coupons.results.map(coupon => EcommerceApiService.fetchCoupon(coupon.id)),
-        )).map(
-          (resp, index) => camelCaseObject({
-            ...resp.data,
-            ...coupons.results[index],
-          }),
-        );
-
-        setCouponDetails(details);
-      } catch (err) {
-        logError(err);
-        setFetchCouponsError(err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    if (coupons?.results?.length > 0) {
-      fetchCouponDetails();
-    }
-  }, [coupons?.results?.length]);
 
   useEffect(() => {
-    if (couponDetails) {
+    if (applicableCatalogs.length > 0 && coupons.results.length > 0) {
       const now = moment();
-      const applicableCoups = couponDetails.filter(
+      const applicableCoups = coupons.results.filter(
         coupon => applicableCatalogs.includes(
-          coupon.enterpriseCustomerCatalog,
+          coupon.enterpriseCatalogUuid,
         ) && moment(coupon.endDate) > now && coupon.numUnassigned > 0,
       );
 
       setApplicableCoupons(applicableCoups);
     }
-  }, [applicableCatalogs, couponDetails]);
+  }, [applicableCatalogs, coupons.results]);
 
   return {
     applicableCatalogs,
     applicableCoupons,
-    isLoading: isLoadingApplicableCatalogs || isLoading,
-    error: fetchApplicableCatalogsError || fetchCouponsError,
+    isLoading,
+    error,
   };
 };

src/components/subsidy-request-modals/tests/hooks.test.jsx

@@ -2,7 +2,6 @@ import { renderHook } from '@testing-library/react-hooks/dom';
 import moment from 'moment';
 import { useApplicableCatalogs, useApplicableSubscriptions, useApplicableCoupons } from '../data/hooks';
 import EnterpriseCatalogApiService from '../../../data/services/EnterpriseCatalogApiService';
-import EcommerceApiService from '../../../data/services/EcommerceApiService';
 
 const TEST_ENTERPRISE_UUID = 'test-enterprise-uuid';
 const TEST_COURSE_RUN_IDS = ['edx+101'];
@@ -16,15 +15,6 @@ jest.mock('../../../data/services/EnterpriseCatalogApiService', () => ({
   })),
 }));
 
-jest.mock('../../../data/services/EcommerceApiService', () => ({
-  fetchCoupon: jest.fn((couponId) => ({
-    data: {
-      id: couponId,
-      max_uses: 3,
-    },
-  })),
-}));
-
 describe('useApplicableCatalogs', () => {
   afterEach(() => jest.clearAllMocks());
 
@@ -125,20 +115,23 @@ describe('useApplicableCoupons', () => {
     results: [{
       id: 1,
       numUnassigned: 1,
-      enterpriseCustomerCatalog: TEST_CATALOG_UUID,
+      enterpriseCatalogUuid: TEST_CATALOG_UUID,
       endDate: moment().add(1, 'days').toISOString(),
+      maxUses: 3,
     },
     {
       id: 2,
       numUnassigned: 1,
-      enterpriseCustomerCatalog: 'abc',
+      enterpriseCatalogUuid: 'abc',
       endDate: moment().add(1, 'days').toISOString(),
+      maxUses: 3,
     },
     {
       id: 3,
       numUnassigned: 3,
-      enterpriseCustomerCatalog: TEST_CATALOG_UUID,
+      enterpriseCatalogUuid: TEST_CATALOG_UUID,
       endDate: moment().subtract(1, 'days').toISOString(),
+      maxUses: 3,
     }],
   };
 
@@ -159,14 +152,9 @@ describe('useApplicableCoupons', () => {
       },
     );
 
-    expect(EcommerceApiService.fetchCoupon).toHaveBeenCalledTimes(3);
-
     const { applicableCoupons } = result.current;
     expect(applicableCoupons.length).toEqual(1);
-    expect(applicableCoupons[0]).toEqual({
-      ...couponOrders.results[0],
-      maxUses: 3,
-    });
+    expect(applicableCoupons[0].id).toEqual(couponOrders.results[0].id);
   });
 
   it('should handle errors fetching applicable catalogs', async () => {
@@ -182,18 +170,4 @@ describe('useApplicableCoupons', () => {
     await waitForNextUpdate();
     expect(result.current.error).toEqual(error);
   });
-
-  it('should handle errors fetching coupons', async () => {
-    const error = new Error('something went wrong fetching coupons');
-    EcommerceApiService.fetchCoupon.mockRejectedValueOnce(error);
-
-    const { result, waitForNextUpdate } = renderHook(() => useApplicableCoupons({
-      enterpriseId: TEST_ENTERPRISE_UUID,
-      courseRunIds: TEST_COURSE_RUN_IDS,
-      coupons: couponOrders,
-    }));
-
-    await waitForNextUpdate();
-    expect(result.current.error).toEqual(error);
-  });
 });