richie-education 3.4.1-dev14 → 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/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/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-dev14",
+  "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);
 }