richie-education 3.4.1-dev13 → 3.4.1-dev17

package/js/api/joanie.ts

@@ -16,6 +16,7 @@ import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
 import { Maybe, Nullable } from 'types/utils';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import { checkStatus, getFileFromResponse } from './utils';
 
 /*
@@ -366,10 +367,15 @@ const API = (): Joanie.API => {
             );
           },
         },
-        seats_export: async (id: string): Promise<File> =>
-          fetchWithJWT(ROUTES.user.batchOrders.seats_export.replace(':id', id))
-            .then(checkStatus)
-            .then(getFileFromResponse),
+        seats_export: async (id: string): Promise<File> => {
+          const response = await fetchWithJWT(
+            ROUTES.user.batchOrders.seats_export.replace(':id', id),
+          );
+          if (response.status === HttpStatusCode.UNPROCESSABLE_ENTITY) {
+            throw new HttpError(response.status, response.statusText);
+          }
+          return checkStatus(response).then(getFileFromResponse);
+        },
       },
       enrollments: {
         create: async (payload) =>

package/js/api/lms/index.spec.ts

@@ -1,7 +1,14 @@
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
+import { location } from 'utils/indirection/window';
 import LMSHandler from '.';
 
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    pathname: '/courses/a-test-course/',
+    assign: jest.fn(),
+  },
+}));
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
@@ -16,6 +23,12 @@ jest.mock('utils/context', () => ({
         endpoint: 'https://edx.endpoint/api',
         course_regexp: '.*edx.org/.*',
       },
+      {
+        backend: 'openedx-hawthorn',
+        endpoint: 'https://nau.endpoint/api',
+        course_regexp: '.*nau.org/.*',
+        next_url: 'richie-nau',
+      },
     ],
   }).one(),
 }));
@@ -24,6 +37,10 @@ const mockHandle: jest.Mock<typeof handle> = handle as any;
 jest.mock('utils/errors/handle');
 
 describe('API LMS', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('returns OpenEdX API if url that match edx selector is provided', () => {
     const api = LMSHandler('https://edx.org/courses/a-test-course');
     expect(api).toBeDefined();
@@ -42,4 +59,20 @@ describe('API LMS', () => {
       new Error('No LMS Backend found for https://unknown.org/course/a-test-course.'),
     );
   });
+
+  it('uses default "richie" next prefix for openedx-hawthorn without next_url configured', () => {
+    const api = LMSHandler('https://edx.org/courses/a-test-course');
+    api.user.login();
+    expect(location.assign).toHaveBeenCalledWith(
+      `https://edx.endpoint/api/login?next=richie${location.pathname}`,
+    );
+  });
+
+  it('uses configured next_url prefix for openedx-hawthorn with next_url set', () => {
+    const api = LMSHandler('https://nau.org/courses/a-test-course');
+    api.user.login();
+    expect(location.assign).toHaveBeenCalledWith(
+      `https://nau.endpoint/api/login?next=richie-nau${location.pathname}`,
+    );
+  });
 });

package/js/api/lms/index.ts

@@ -15,7 +15,7 @@ const LmsAPIHandler = (url: string): APILms => {
     case APIBackend.OPENEDX_DOGWOOD:
       return OpenEdxDogwoodApiInterface(api);
     case APIBackend.OPENEDX_HAWTHORN:
-      return OpenEdxHawthornApiInterface(api);
+      return OpenEdxHawthornApiInterface(api, { routes: {}, nextURL: api.next_url });
   }
 
   const error = new Error(`No LMS Backend found for ${url}.`);

package/js/api/lms/openedx-hawthorn.spec.ts

@@ -3,10 +3,17 @@ import { faker } from '@faker-js/faker';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
+import { location } from 'utils/indirection/window';
 import context from 'utils/context';
 import API from './openedx-hawthorn';
 
 jest.mock('utils/errors/handle');
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    pathname: '/courses/a-test-course/',
+    assign: jest.fn(),
+  },
+}));
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
@@ -45,6 +52,48 @@ describe('OpenEdX Hawthorn API', () => {
     });
   });
 
+  describe('user', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    describe('login', () => {
+      it('redirects to login with default "richie" next prefix when nextURL is not set', () => {
+        const api = API(LMSConf);
+        api.user.login();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/login?next=richie${location.pathname}`,
+        );
+      });
+
+      it('redirects to login with custom next prefix when nextURL option is provided', () => {
+        const api = API(LMSConf, { routes: {}, nextURL: 'richie-nau' });
+        api.user.login();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/login?next=richie-nau${location.pathname}`,
+        );
+      });
+    });
+
+    describe('register', () => {
+      it('redirects to register with default "richie" next prefix when nextURL is not set', () => {
+        const api = API(LMSConf);
+        api.user.register();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/register?next=richie${location.pathname}`,
+        );
+      });
+
+      it('redirects to register with custom next prefix when nextURL option is provided', () => {
+        const api = API(LMSConf, { routes: {}, nextURL: 'richie-ap' });
+        api.user.register();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/register?next=richie-ap${location.pathname}`,
+        );
+      });
+    });
+  });
+
   describe('enrollment', () => {
     beforeEach(() => {
       courseId = faker.string.uuid();

package/js/api/lms/openedx-hawthorn.ts

@@ -20,6 +20,8 @@ import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
  */
 
 const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions): APILms => {
+  const nextURL = options?.nextURL ?? 'richie';
+
   const extractCourseIdFromUrl = (url: string): Maybe<Nullable<string>> => {
     const matches = url.match((APIConf as LMSBackend).course_regexp);
     return matches && matches[1] ? matches[1] : null;
@@ -61,8 +63,9 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
         / ! \ Prefix next param with richie.
         In this way, OpenEdX Nginx conf knows that we want to go back to richie app after login/redirect
       */
-      login: () => location.assign(`${ROUTES.user.login}?next=richie${location.pathname}`),
-      register: () => location.assign(`${ROUTES.user.register}?next=richie${location.pathname}`),
+      login: () => location.assign(`${ROUTES.user.login}?next=${nextURL}${location.pathname}`),
+      register: () =>
+        location.assign(`${ROUTES.user.register}?next=${nextURL}${location.pathname}`),
       logout: async () => {
         await fetch(ROUTES.user.logout, {
           mode: 'no-cors',

package/js/components/DownloadBatchOrderSeatsButton/index.tsx

@@ -1,7 +1,9 @@
 import { useId } from 'react';
-import { Button } from '@openfun/cunningham-react';
+import { Alert, Button, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Spinner } from 'components/Spinner';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { useDownloadBatchOrderSeats } from 'hooks/useDownloadBatchOrderSeats';
 
 const messages = defineMessages({
@@ -20,6 +22,12 @@ const messages = defineMessages({
     description: 'Text displayed for seats value in batch order',
     id: 'batchOrder.seats',
   },
+  noSeatsOwned: {
+    defaultMessage:
+      'No participants have claimed their seat yet. The export will be available once at least one participant has enrolled.',
+    description: 'Error message displayed when trying to export seats but no seats are owned yet.',
+    id: 'components.DownloadBatchOrderSeatsButton.noSeatsOwned',
+  },
 });
 
 export const sanitizeForFilename = (str: string) =>
@@ -46,7 +54,7 @@ const DownloadBatchOrderSeatsButton = ({
   batchOrderId,
   productTitle,
 }: DownloadBatchOrderSeatsButtonProps) => {
-  const { download, loading } = useDownloadBatchOrderSeats();
+  const { download, loading, error } = useDownloadBatchOrderSeats();
   const labelId = useId();
   const intl = useIntl();
 
@@ -56,24 +64,33 @@ const DownloadBatchOrderSeatsButton = ({
   };
 
   return (
-    <Button
-      size="small"
-      color="brand"
-      variant="primary"
-      className="dashboard-item__action-button"
-      disabled={loading}
-      onClick={handleClick}
-    >
-      {loading ? (
-        <Spinner theme="primary" aria-labelledby={labelId}>
-          <span id={labelId}>
-            <FormattedMessage {...messages.generating} />
-          </span>
-        </Spinner>
-      ) : (
-        <FormattedMessage {...messages.download} />
+    <>
+      <Button
+        size="small"
+        color="brand"
+        variant="primary"
+        className="dashboard-item__action-button"
+        icon={<Icon name={IconTypeEnum.DOWNLOAD} size="small" />}
+        iconPosition="left"
+        disabled={loading}
+        onClick={handleClick}
+      >
+        {loading ? (
+          <Spinner theme="primary" aria-labelledby={labelId}>
+            <span id={labelId}>
+              <FormattedMessage {...messages.generating} />
+            </span>
+          </Spinner>
+        ) : (
+          <FormattedMessage {...messages.download} />
+        )}
+      </Button>
+      {error?.code === HttpStatusCode.UNPROCESSABLE_ENTITY && (
+        <Alert type={VariantType.ERROR} className="mt-s">
+          <FormattedMessage {...messages.noSeatsOwned} />
+        </Alert>
       )}
-    </Button>
+    </>
   );
 };
 

package/js/components/Icon/index.tsx

@@ -38,6 +38,7 @@ export enum IconTypeEnum {
   COURSES = 'icon-courses',
   CREDIT_CARD = 'icon-creditCard',
   CROSS = 'icon-cross',
+  DOWNLOAD = 'icon-download',
   DURATION = 'icon-duration',
   ENVELOPE = 'icon-envelope',
   FACEBOOK = 'icon-facebook',

package/js/components/SaleTunnel/_styles.scss

@@ -31,10 +31,13 @@
     &__left,
     &__right {
       flex: 1;
-      overflow: hidden;
       position: relative;
     }
 
+    &__left {
+      overflow: hidden;
+    }
+
     &__column {
       display: flex;
       flex-direction: column;

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

@@ -129,4 +129,32 @@ describe('useDownloadBatchOrderSeats', () => {
       expect(result.current.loading).toBe(false);
     });
   });
+
+  it('exposes a 422 HttpError when seats export fails because no seats are owned', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/batch-orders/${batchOrder.id}/seats-export/`;
+    fetchMock.get(DOWNLOAD_URL, {
+      status: HttpStatusCode.UNPROCESSABLE_ENTITY,
+      body: { detail: 'Batch order has no seats owned, cannot export seats.' },
+    });
+
+    const { result } = renderHook(() => useDownloadBatchOrderSeats(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(result.current.error).toBeUndefined();
+
+    act(() => {
+      result.current.download(batchOrder.id);
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      expect(result.current.error?.code).toBe(HttpStatusCode.UNPROCESSABLE_ENTITY);
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+      expect(result.current.loading).toBe(false);
+    });
+  });
 });

package/js/hooks/useDownloadBatchOrderSeats/index.tsx

@@ -1,24 +1,34 @@
 import { useState } from 'react';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { browserDownloadFromBlob } from 'utils/download';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
 export const useDownloadBatchOrderSeats = () => {
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<HttpError | undefined>();
   const API = useJoanieApi();
 
   return {
     download: async (batchOrderId: string, filename?: string) => {
       setLoading(true);
+      setError(undefined);
       try {
-        await browserDownloadFromBlob(
-          () => API.user.batchOrders.seats_export(batchOrderId),
-          false,
-          filename,
-        );
+        const downloadFn = async () => {
+          try {
+            return await API.user.batchOrders.seats_export(batchOrderId);
+          } catch (err) {
+            if (err instanceof HttpError && err.code === HttpStatusCode.UNPROCESSABLE_ENTITY) {
+              setError(err);
+            }
+            throw err;
+          }
+        };
+        await browserDownloadFromBlob(downloadFn, false, filename);
       } finally {
         setLoading(false);
       }
     },
     loading,
+    error,
   };
 };

package/js/types/api.ts

@@ -63,6 +63,7 @@ export interface APIRoute {
 
 export interface APIOptions {
   routes: APIRoute;
+  nextURL?: string;
 }
 
 export enum APIBackend {

package/js/types/commonDataProps.ts

@@ -9,6 +9,7 @@ export interface LMSBackend {
   backend: string;
   course_regexp: RegExp | string;
   endpoint: string;
+  next_url?: string;
 }
 
 export interface AuthenticationBackend {
@@ -26,6 +27,7 @@ export interface AuthenticationBackend {
     username: string;
     email: string;
   };
+  next_url?: string;
 }
 
 enum FEATURES {

package/js/utils/errors/HttpError.ts

@@ -31,6 +31,7 @@ export enum HttpStatusCode {
   FORBIDDEN = 403,
   NOT_FOUND = 404,
   CONFLICT = 409,
+  UNPROCESSABLE_ENTITY = 422,
   TOO_MANY_REQUESTS = 429,
   INTERNAL_SERVER_ERROR = 500,
 }

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderSeatInfo.tsx

@@ -105,27 +105,31 @@ export const BatchOrderSeatInfo = ({ batchOrder }: BatchOrderSeatInfoProps) => {
                     <li key={seat.id}>{seat.owner_name ?? seat.voucher}</li>
                   ))}
                 </ul>
-                {remainingCount > 0 && (
-                  <Button
-                    className="enrollment-load-more"
-                    color="brand"
-                    variant="secondary"
-                    size="small"
-                    onClick={() => setPage((p) => p + 1)}
-                    disabled={states.fetching}
-                  >
-                    {intl.formatMessage(batchOrderSeatInfoMessages.loadMore, {
-                      count: remainingCount,
-                    })}
-                  </Button>
-                )}
+                <div className="enrollment-actions">
+                  {remainingCount > 0 && (
+                    <Button
+                      className="enrollment-load-more"
+                      color="brand"
+                      variant="secondary"
+                      size="small"
+                      onClick={() => setPage((p) => p + 1)}
+                      disabled={states.fetching}
+                    >
+                      {intl.formatMessage(batchOrderSeatInfoMessages.loadMore, {
+                        count: remainingCount,
+                      })}
+                    </Button>
+                  )}
+                  <div>
+                    <DownloadBatchOrderSeatsButton
+                      batchOrderId={batchOrder.id}
+                      productTitle={batchOrder.offering?.product.title ?? ''}
+                    />
+                  </div>
+                </div>
               </>
             )}
           </div>
-          <DownloadBatchOrderSeatsButton
-            batchOrderId={batchOrder.id}
-            productTitle={batchOrder.offering?.product.title ?? ''}
-          />
         </div>
       }
     />

package/js/widgets/Slider/components/SlidePanel.tsx

@@ -53,7 +53,19 @@ const SlidePanel = ({
         })}
       >
         <strong className="slide__title">
-          <span>{slides[activeSlideIndex].title}</span>
+          <span>
+            {slides[activeSlideIndex].link_url ? (
+              <a
+                href={slides[activeSlideIndex].link_url}
+                target={slides[activeSlideIndex].link_open_blank ? '_blank' : '_self'}
+                rel="noopener noreferrer"
+              >
+                {slides[activeSlideIndex].title}
+              </a>
+            ) : (
+              slides[activeSlideIndex].title
+            )}
+          </span>
         </strong>
         {hasSlideContent && (
           <div

package/js/widgets/Slider/index.spec.tsx

@@ -71,13 +71,11 @@ describe('<Slider />', () => {
     // Check if all slides are rendered
     mockSlides.forEach((slide) => {
       expect(screen.getByRole('img', { name: slide.title })).toBeInTheDocument();
-      // Check if the link is rendered
-      const link = screen.queryByRole('link', { name: slide.title });
       if (slide.link_url) {
-        expect(link).toHaveAttribute('href', slide.link_url);
-        expect(link).toBeInTheDocument();
+        const links = screen.getAllByRole('link', { name: slide.title });
+        links.forEach((link) => expect(link).toHaveAttribute('href', slide.link_url));
       } else {
-        expect(link).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: slide.title })).not.toBeInTheDocument();
       }
     });
 

package/package.json

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

package/scss/components/templates/richie/slider/_slider.scss

@@ -201,6 +201,16 @@ $r-slider-content-line-clamp: 4 !default;
   font-weight: $r-slider-title-fontweight;
   font-family: $r-slider-title-fontfamily;
 
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      opacity: 0.8;
+    }
+  }
+
   & > span {
     display: inline-block;
     transform: translateY(0%);

package/scss/objects/_dashboard.scss

@@ -152,9 +152,16 @@
   }
 }
 
+.enrollment-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: rem-calc(8px);
+  margin-top: rem-calc(8px);
+}
+
 .enrollment-load-more {
   width: fit-content;
-  margin-top: rem-calc(8px);
   padding: rem-calc(4px) rem-calc(12px);
 }