richie-education 2.29.3-dev50 → 2.29.3-dev52

package/js/hooks/useCourseRunOrder/index.tsx

@@ -21,7 +21,7 @@ const useCourseRunOrder = (courseRun: CourseRun) => {
     product_id: resourceLinkResources?.product,
   });
 
-  return { item: orders.length > 0 ? orders[0] : undefined, states: { fetching, isFetched } };
+  return { item: orders?.[0], states: { fetching, isFetched } };
 };
 
 export default useCourseRunOrder;

package/js/hooks/useCreditCards/index.spec.tsx

@@ -145,7 +145,9 @@ describe('useCreditCards', () => {
       responseDeferred.resolve({});
     });
 
-    expect(result.current.states.tokenizing).toBe(false);
+    await waitFor(() => {
+      expect(result.current.states.tokenizing).toBe(false);
+    });
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -995,10 +995,7 @@ describe('<DashboardItemOrder/>', () => {
     order.payment_schedule![1].state = PaymentScheduleState.REFUSED;
 
     const formatPrice = (price: number, currency: string) =>
-      new Intl.NumberFormat('en', {
-        currency,
-        style: 'currency',
-      }).format(price);
+      new Intl.NumberFormat('en', { currency, style: 'currency' }).format(price);
 
     const { product } = mockCourseProductWithOrder(order);
     fetchMock.get(
@@ -1038,12 +1035,10 @@ describe('<DashboardItemOrder/>', () => {
 
     // Click on pay button.
     const payButton = screen.getByTestId('order-payment-retry-modal-submit-button');
-    expect(payButton.innerHTML.replace('&nbsp;', ' ')).toEqual(
+    expect(payButton).toHaveTextContent(
       'Pay ' +
-        formatPrice(failedInstallment.amount, failedInstallment.currency).replace(
-          /(\u202F|\u00a0)/g,
-          ' ',
-        ),
+        formatPrice(failedInstallment.amount, failedInstallment.currency).replaceAll(/\s/g, ' '),
+      { normalizeWhitespace: true },
     );
     await user.click(payButton);
     // Pay via mocked payment interface
@@ -1054,7 +1049,7 @@ describe('<DashboardItemOrder/>', () => {
     expect(screen.queryByText('Retry payment')).not.toBeInTheDocument();
 
     // Success modal is shown, close it.
-    screen.getByText('Payment successful');
+    await screen.findByText('Payment successful');
     screen.getByText('The payment was successful');
     const okButton = screen.getByRole('button', { name: 'Ok' });
     await user.click(okButton);

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.product.spec.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -11,12 +12,12 @@ import { render } from 'utils/test/render';
 import {
   CourseLightFactory,
   CredentialOrderFactory,
-  EnrollmentFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { ACTIVE_ORDER_STATES, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
 import CourseRunItemWithEnrollment from '.';
 
 jest.mock('utils/context', () => ({
@@ -61,10 +62,9 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 
-  it('should not render enrollment information when user is not enrolled to the course run', async () => {
+  it('should not render enrollment information when user has no order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
-    const order = CredentialOrderFactory().one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
       title: 'run',
@@ -73,6 +73,39 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
     }).one();
 
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
+      mockPaginatedResponse([], 0, false),
+    );
+
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
+    });
+    await expectNoSpinner();
+
+    // Only dates should be displayed.
+    screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
+    expect(fetchMock.called()).toBe(true);
+    const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
+    expect(link).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
+  });
+
+  it('should not render enrollment information when user has no active order for the product', async () => {
+    const course = CourseLightFactory().one();
+    const product = ProductFactory().one();
+    const user = UserFactory().one();
+    const order = CredentialOrderFactory({
+      state: faker.helpers.arrayElement(PURCHASABLE_ORDER_STATES),
+    }).one();
+    const courseRun = CourseRunFactory({
+      title: 'run',
+      start: new Date('2023-01-01').toISOString(),
+      end: new Date('2023-12-31').toISOString(),
+      resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
+    }).one();
+
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
       mockPaginatedResponse([order], 1, false),
@@ -84,20 +117,19 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     });
     await expectNoSpinner();
 
-    // Only dates should have been displayed.
+    // Only dates should be displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
     const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
-    expect(link).toBeInTheDocument();
-    expect(link.href).toBe(`https://localhost/en/dashboard/courses/orders/${order.id}`);
+    expect(link).not.toBeInTheDocument();
     expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
   });
 
-  it('should render enrollment information when user is enrolled to the course run', async () => {
+  it('should render enrollment information when user has an active order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
     const order = CredentialOrderFactory({
-      target_enrollments: EnrollmentFactory({ is_active: true }).many(1),
+      state: faker.helpers.arrayElement(ACTIVE_ORDER_STATES),
     }).one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
@@ -121,7 +153,6 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       expect(screen.queryByText('loading...')).not.toBeInTheDocument();
     });
 
-    // Only dates should have been displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
 

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.tsx

@@ -8,6 +8,8 @@ import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 import useCourseRunOrder from 'hooks/useCourseRunOrder';
 import { Spinner } from 'components/Spinner';
+import { OrderHelper } from 'utils/OrderHelper';
+import { extractResourceMetadata } from 'api/lms/joanie';
 
 const messages = defineMessages({
   goToCourse: {
@@ -33,6 +35,8 @@ type Props = {
 
 const CourseRunItemWithEnrollment = ({ item }: Props) => {
   const intl = useIntl();
+  const resourceLinkResources = extractResourceMetadata(item.resource_link);
+  const isProduct = !!(resourceLinkResources?.course && resourceLinkResources?.product);
   const {
     item: order,
     states: { isFetched },
@@ -43,14 +47,12 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   const { enrollmentIsActive: courseRunEnrollmentIsActive } = useCourseEnrollment(
     item.resource_link,
-    isFetched && !order,
+    !isProduct,
   );
 
-  // user is enroll to a product if any of the product's target course have a active enrollment
-  const productEnrollmentIsActive = order?.target_enrollments.some((enrollment) => {
-    return enrollment.is_active;
-  });
-  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || productEnrollmentIsActive);
+  // user is enrolled to a product if there is an active order for the product
+  const orderIsActive = OrderHelper.isActive(order);
+  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || orderIsActive);
 
   if (!isFetched) {
     return <Spinner />;
@@ -58,7 +60,7 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   return (
     <>
-      {enrollmentIsActive || !!order ? (
+      {enrollmentIsActive ? (
         // eslint-disable-next-line jsx-a11y/control-has-associated-label
         <a href={courseUrl} title={intl.formatMessage(messages.goToCourse)}>
           <CourseRunItem item={item} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.29.3-dev50",
+  "version": "2.29.3-dev52",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {