richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Search/components/SearchFilterGroupModal/index.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
+import { Button } from '@openfun/cunningham-react';
 import { Modal } from 'components/Modal';
 import { Spinner } from 'components/Spinner';
 import { CourseSearchParamsAction, useCourseSearchParams } from 'hooks/useCourseSearchParams';
@@ -90,7 +91,8 @@ const ModalContent = ({ filter, modalIsOpen, setModalIsOpen }: ModalContentProps
     const { pageParam, queryKey } = args;
     const [filterName, fetchCourseSearchParams, fetchQuery] = queryKey;
     const searchResponse = await fetchList(filterName, {
-      ...(pageParam || API_LIST_DEFAULT_PARAMS),
+      offset: String(pageParam.offset),
+      ...pageParam,
       ...(fetchQuery ? { query: fetchQuery } : {}),
     });
 
@@ -115,23 +117,26 @@ const ModalContent = ({ filter, modalIsOpen, setModalIsOpen }: ModalContentProps
     };
   };
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useInfiniteQuery(
-    [filter.name, courseSearchParams, query.length > 2 ? query : ''],
-    fetchResults,
-    {
-      enabled: modalIsOpen,
-      getNextPageParam: (lastPage) => {
-        if (!lastPage) {
-          return undefined;
-        }
-        const newOffset = lastPage.meta.offset + lastPage.meta.count;
-        if (newOffset >= lastPage.meta.total_count) {
-          return undefined;
-        }
-        return { limit: API_LIST_DEFAULT_PARAMS.limit, offset: newOffset };
-      },
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useInfiniteQuery({
+    enabled: modalIsOpen,
+    initialPageParam: {
+      ...API_LIST_DEFAULT_PARAMS,
+      offset: Number(API_LIST_DEFAULT_PARAMS.offset),
     },
-  );
+    queryFn: fetchResults,
+    queryKey: [filter.name, courseSearchParams, query.length > 2 ? query : ''],
+    getNextPageParam: (lastPage) => {
+      if (!lastPage) {
+        return undefined;
+      }
+
+      const newOffset = lastPage.meta.offset + lastPage.meta.count;
+      if (newOffset >= lastPage.meta.total_count) {
+        return undefined;
+      }
+      return { limit: API_LIST_DEFAULT_PARAMS.limit, offset: newOffset };
+    },
+  });
 
   const searchInputRef = useRef<Nullable<HTMLInputElement>>(null);
   useEffect(() => {
@@ -148,6 +153,62 @@ const ModalContent = ({ filter, modalIsOpen, setModalIsOpen }: ModalContentProps
     enabled: !!hasNextPage,
   });
 
+  const getSearchResultsList = () => {
+    if (error) {
+      return (
+        <div className="search-filter-group-modal__form__error">
+          <FormattedMessage {...messages.error} values={{ filterName: filter.human_name }} />
+        </div>
+      );
+    }
+    if (query.length > 0 && query.length < 3) {
+      return (
+        <div className="search-filter-group-modal__form__error">
+          <FormattedMessage {...messages.queryTooShort} />
+        </div>
+      );
+    }
+    if (status === 'error') {
+      return (
+        <div>
+          <FormattedMessage {...messages.error} values={{ filterName: filter.human_name }} />
+        </div>
+      );
+    }
+    if (['idle', 'pending'].includes(status)) {
+      return (
+        <Spinner>
+          <FormattedMessage {...messages.loadingResults} />
+        </Spinner>
+      );
+    }
+    return (
+      <ul className="search-filter-group-modal__form__values">
+        {data!.pages.map((page, pageIndex) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Fragment key={`search_results_${pageIndex}`}>
+            {page!.objects.map((value) => (
+              <li className="search-filter-group-modal__form__values__item" key={value.key}>
+                <button
+                  onClick={() => {
+                    dispatchCourseSearchParamsUpdate({
+                      filter,
+                      payload: value.key,
+                      type: CourseSearchParamsAction.filterAdd,
+                    });
+                    setModalIsOpen(false);
+                  }}
+                >
+                  {value.human_name}&nbsp;{`(${value.count})`}
+                </button>
+              </li>
+            ))}
+          </Fragment>
+        ))}
+      </ul>
+    );
+  };
+
   return (
     <Fragment>
       <fieldset className="search-filter-group-modal__form">
@@ -162,46 +223,7 @@ const ModalContent = ({ filter, modalIsOpen, setModalIsOpen }: ModalContentProps
           })}
           ref={searchInputRef}
         />
-        {error ? (
-          <div className="search-filter-group-modal__form__error">
-            <FormattedMessage {...messages.error} values={{ filterName: filter.human_name }} />
-          </div>
-        ) : query.length > 0 && query.length < 3 ? (
-          <div className="search-filter-group-modal__form__error">
-            <FormattedMessage {...messages.queryTooShort} />
-          </div>
-        ) : status === 'error' ? (
-          <div>
-            <FormattedMessage {...messages.error} values={{ filterName: filter.human_name }} />
-          </div>
-        ) : ['idle', 'loading'].includes(status) ? (
-          <Spinner>
-            <FormattedMessage {...messages.loadingResults} />
-          </Spinner>
-        ) : (
-          <ul className="search-filter-group-modal__form__values">
-            {data!.pages.map((page, pageIndex) => (
-              <Fragment key={pageIndex}>
-                {page!.objects.map((value) => (
-                  <li className="search-filter-group-modal__form__values__item" key={value.key}>
-                    <button
-                      onClick={() => {
-                        dispatchCourseSearchParamsUpdate({
-                          filter,
-                          payload: value.key,
-                          type: CourseSearchParamsAction.filterAdd,
-                        });
-                        setModalIsOpen(false);
-                      }}
-                    >
-                      {value.human_name}&nbsp;{`(${value.count})`}
-                    </button>
-                  </li>
-                ))}
-              </Fragment>
-            ))}
-          </ul>
-        )}
+        {getSearchResultsList()}
       </fieldset>
       {hasNextPage ? (
         <button
@@ -224,7 +246,6 @@ interface SearchFilterGroupModalProps {
 export const SearchFilterGroupModal = ({ filter }: SearchFilterGroupModalProps) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const intl = useIntl();
-
   const modalExclude = useMemo(() => {
     const exclude = document.getElementById('modal-exclude');
     if (exclude) {
@@ -235,10 +256,15 @@ export const SearchFilterGroupModal = ({ filter }: SearchFilterGroupModalProps)
 
   return (
     <Fragment>
-      <button className="search-filter-group-modal-button" onClick={() => setModalIsOpen(true)}>
+      <Button
+        className="search-filter-group-modal-button"
+        fullWidth
+        size="small"
+        onClick={() => setModalIsOpen(true)}
+      >
         <FormattedMessage {...messages.moreOptionsButton} />
         <span className="offscreen">({filter.human_name})</span>
-      </button>
+      </Button>
       <Modal
         appElement={modalExclude}
         bodyOpenClassName="has-search-filter-group-modal"

package/js/widgets/Search/components/SearchFilterValueParent/index.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { HistoryProvider } from 'hooks/useHistory';
+import { SearchFilterValueParent } from '.';
+
+export default {
+  component: SearchFilterValueParent,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  args: {
+    filter: {
+      base_path: null,
+      human_name: 'Awesome filter',
+      is_autocompletable: false,
+      is_searchable: false,
+      name: 'Awesome filter',
+      position: 1,
+      has_more_values: true,
+      values: [
+        {
+          count: 10,
+          human_name: 'First value',
+          key: 'P-0000',
+        },
+        { count: 20, human_name: 'Second value', key: 'P-0001' },
+      ],
+    },
+
+    value: {
+      count: 10,
+      human_name: 'First value',
+      key: 'P-0000',
+    },
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(
+      <HistoryProvider>
+        <SearchFilterValueParent {...args} />
+      </HistoryProvider>,
+    );
+  },
+} as Meta<typeof SearchFilterValueParent>;
+
+type Story = StoryObj<typeof SearchFilterValueParent>;
+
+export const Default: Story = {};

package/js/widgets/Search/components/SearchFilterValueParent/index.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-
 import { useCourseSearchParams } from 'hooks/useCourseSearchParams';
 import { FacetedFilterDefinition, FilterValue } from 'types/filters';
 import { getMPTTChildrenPathMatcher } from 'utils/mptt';
@@ -61,11 +60,6 @@ export const SearchFilterValueParent = ({ filter, value }: SearchFilterValuePare
     },
     {
       enabled: showChildren,
-      onSettled: (data) => {
-        if (data?.status === RequestStatus.FAILURE) {
-          handle(new Error(`Failed to get children filters for ${filter.name}/${value.key}`));
-        }
-      },
     },
   );
 
@@ -74,6 +68,12 @@ export const SearchFilterValueParent = ({ filter, value }: SearchFilterValuePare
       ? childrenResponse.content.filters[filter.name].values
       : [];
 
+  useEffect(() => {
+    if (childrenResponse?.status === RequestStatus.FAILURE) {
+      handle(new Error(`Failed to get children filters for ${filter.name}/${value.key}`));
+    }
+  }, [childrenResponse]);
+
   // We also need to know if the current filter is active itself and let the user toggle it directly
   const [isActive, toggle] = useFilterValue(filter, value);
   return (

package/js/widgets/Search/components/SearchFiltersPane/_styles.scss

@@ -9,21 +9,7 @@
     color: r-theme-val(search-filters-pane, title-color);
   }
 
-  &__clear {
-    @include button-reset-style();
-    display: block;
-    cursor: pointer;
-    margin: 0.2rem $r-search-filters-gutter;
-    padding: 0rem 0.5rem 0;
-
-    &,
-    &:hover,
-    &:active {
-      color: r-theme-val(search-filters-pane, clearer-hover-color);
-    }
-
-    &--hidden {
-      visibility: hidden;
-    }
+  &__clear--hidden {
+    visibility: hidden;
   }
 }

package/js/widgets/Search/components/SearchFiltersPane/index.tsx

@@ -1,6 +1,8 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import c from 'classnames';
 
+import { Button } from '@openfun/cunningham-react';
 import { CourseSearchParamsAction, useCourseSearchParams } from 'hooks/useCourseSearchParams';
 import { API_LIST_DEFAULT_PARAMS } from 'settings';
 import { Nullable } from 'types/utils';
@@ -31,7 +33,6 @@ export const SearchFiltersPane = ({
   ...passThroughProps
 }: SearchFiltersPaneProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
   const filterList = filters && Object.values(filters).sort((f1, f2) => f1.position - f2.position);
-
   const { courseSearchParams, dispatchCourseSearchParamsUpdate } = useCourseSearchParams();
 
   const relevantFilters = Object.entries(courseSearchParams)
@@ -74,10 +75,12 @@ export const SearchFiltersPane = ({
       >
         <FormattedMessage {...messages.filter} />
       </h2>
-      <button
-        className={`search-filters-pane__clear ${
-          !activeFilterCount ? 'search-filters-pane__clear--hidden' : ''
-        }`}
+      <Button
+        color="secondary"
+        size="small"
+        className={c({
+          'search-filters-pane__clear--hidden': !activeFilterCount,
+        })}
         tabIndex={0}
         onClick={() =>
           dispatchCourseSearchParamsUpdate({
@@ -87,7 +90,7 @@ export const SearchFiltersPane = ({
       >
         <FormattedMessage {...messages.clearFilters} values={{ activeFilterCount }} />
         <span className="offscreen">&nbsp;({activeFilterNames})</span>
-      </button>
+      </Button>
       {filterList &&
         filterList.map((filter) => <SearchFilterGroup filter={filter} key={filter.name} />)}
     </div>

package/js/widgets/Search/hooks/useCourseSearch/index.ts

@@ -1,17 +1,21 @@
 import queryString from 'query-string';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
+import { keepPreviousData } from '@tanstack/query-core';
 import { APIListRequestParams } from 'types/api';
 import useLocalizedQueryKey from 'utils/react-query/useLocalizedQueryKey';
 import { fetchList, FetchListResponse } from '../../utils/getResourceList';
 
 export const useCourseSearch = (
   searchParams: APIListRequestParams,
-  queryOptions: UseQueryOptions<
-    FetchListResponse,
-    unknown,
-    FetchListResponse,
-    readonly (string | APIListRequestParams)[]
+  queryOptions: Omit<
+    UseQueryOptions<
+      FetchListResponse,
+      unknown,
+      FetchListResponse,
+      readonly (string | APIListRequestParams)[]
+    >,
+    'queryKey' | 'queryFn'
   > = {},
 ) => {
   const queryKey = useLocalizedQueryKey([
@@ -23,8 +27,10 @@ export const useCourseSearch = (
     unknown,
     FetchListResponse,
     readonly (string | APIListRequestParams)[]
-  >(queryKey, async () => fetchList('courses', searchParams), {
-    keepPreviousData: true,
+  >({
+    queryKey,
+    queryFn: async () => fetchList('courses', searchParams),
+    placeholderData: keepPreviousData,
     ...queryOptions,
   });
 };

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

@@ -9,6 +9,7 @@ import * as mockWindow from 'utils/indirection/window';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import context from 'utils/context';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import Search from '.';
 
 let mockMatches = false;
@@ -49,7 +50,7 @@ describe('<Search />', () => {
   it('shows a spinner while the results are loading', async () => {
     fetchMock.get('/api/v1.0/courses/?limit=20&offset=0', {
       meta: {
-        total_count: 200,
+        total_count: HttpStatusCode.OK,
       },
       objects: [],
     });
@@ -131,7 +132,7 @@ describe('<Search />', () => {
   });
 
   it('shows an error message when it fails to get the results', async () => {
-    fetchMock.get('/api/v1.0/courses/?limit=20&offset=0', 500);
+    fetchMock.get('/api/v1.0/courses/?limit=20&offset=0', HttpStatusCode.INTERNAL_SERVER_ERROR);
 
     render(
       <QueryClientProvider client={createTestQueryClient()}>

package/js/widgets/Search/utils/getResourceList/index.spec.ts

@@ -1,8 +1,14 @@
 import fetchMock from 'fetch-mock';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
+import { handle as mockHandle } from 'utils/errors/handle';
 import { RequestStatus } from '../../types/api';
 import { fetchList } from '.';
 
+jest.mock('utils/errors/handle', () => ({
+  handle: jest.fn(),
+}));
+
 describe('widgets/Search/utils/getResourceList', () => {
   const course43 = {
     categories: [45],
@@ -53,10 +59,7 @@ describe('widgets/Search/utils/getResourceList', () => {
     });
 
     it('rejects with a FetchListResponse containing an error when it fails to make the request', async () => {
-      fetchMock.mock(
-        '/api/v1.0/courses/?limit=2&offset=43',
-        Promise.reject(new Error('Failed to perform the request')),
-      );
+      fetchMock.mock('/api/v1.0/courses/?limit=2&offset=43', 500);
 
       const response = (await fetchList('courses', {
         limit: '2',
@@ -65,10 +68,14 @@ describe('widgets/Search/utils/getResourceList', () => {
 
       expect(response.status).toEqual(RequestStatus.FAILURE);
       expect(response.error).toBeInstanceOf(Error);
+      expect(mockHandle).toHaveBeenNthCalledWith(
+        1,
+        new HttpError(500, 'Failed to get list from courses search.'),
+      );
     });
 
     it('rejects with a FetchListResponse containing an error when the API returns an error code', async () => {
-      fetchMock.mock('/api/v1.0/courses/?limit=2&offset=43', 404);
+      fetchMock.mock('/api/v1.0/courses/?limit=2&offset=43', HttpStatusCode.NOT_FOUND);
 
       const response = (await fetchList('courses', {
         limit: '2',

package/js/widgets/Search/utils/getResourceList/index.ts

@@ -2,6 +2,8 @@ import queryString from 'query-string';
 
 import { API_LIST_DEFAULT_PARAMS } from 'settings';
 import { APIListRequestParams } from 'types/api';
+import { HttpError } from 'utils/errors/HttpError';
+import { handle } from 'utils/errors/handle';
 import { APICourseSearchResponse, RequestStatus } from '../../types/api';
 
 export interface GetListSagaSpecifics {
@@ -23,16 +25,18 @@ export async function fetchList(
         'Content-Type': 'application/json',
       },
     });
-
     if (!response.ok) {
       // Push remote errors to the error channel for consistency
-      throw new Error(`Failed to get list from ${kind} search : ${response.status}.`);
+      throw new HttpError(response.status, `Failed to get list from ${kind} search.`);
     }
 
     const content = await response.json();
 
     return { status: RequestStatus.SUCCESS, content };
   } catch (error) {
+    if (error instanceof HttpError && error.code >= 500) {
+      handle(error);
+    }
     return { status: RequestStatus.FAILURE, error };
   }
 }

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/CourseProductItemFooter/index.tsx

@@ -0,0 +1,74 @@
+import { FormattedMessage, defineMessages } from 'react-intl';
+import PurchaseButton from 'components/PurchaseButton';
+import { CourseLight, CredentialProduct, OrderGroup } from 'types/Joanie';
+
+const messages = defineMessages({
+  noSeatsAvailable: {
+    defaultMessage: 'Sorry, no seats available for now',
+    description: 'Message displayed when no seats are available for the product',
+    id: 'components.CourseProductItem.noSeatsAvailable',
+  },
+  nbSeatsAvailable: {
+    defaultMessage: `{
+nb,
+plural,
+=0 {No remaining seat}
+one {Last remaining seat!}
+other {# remaining seats}
+}`,
+    description: 'Message displayed when seats are available for the product',
+    id: 'components.CourseProductItem.nbSeatsAvailable',
+  },
+});
+
+interface CourseProductItemFooterProps {
+  course: CourseLight;
+  product: CredentialProduct;
+  canPurchase: boolean;
+  orderGroups: OrderGroup[];
+  orderGroupsAvailable: OrderGroup[];
+}
+
+const CourseProductItemFooter = ({
+  course,
+  product,
+  orderGroups,
+  orderGroupsAvailable,
+  canPurchase,
+}: CourseProductItemFooterProps) => {
+  if (orderGroups.length === 0) {
+    return (
+      <PurchaseButton
+        course={course}
+        product={product}
+        disabled={!canPurchase}
+        buttonProps={{ fullWidth: true }}
+      />
+    );
+  }
+  if (orderGroupsAvailable.length === 0) {
+    return (
+      <p className="product-widget__footer__message">
+        <FormattedMessage {...messages.noSeatsAvailable} />
+      </p>
+    );
+  }
+  return orderGroupsAvailable.map((orderGroup) => (
+    <div className="product-widget__footer__order-group" key={orderGroup.id}>
+      <PurchaseButton
+        course={course}
+        product={product}
+        disabled={!canPurchase}
+        orderGroup={orderGroup}
+        buttonProps={{ fullWidth: true }}
+      />
+      <p>
+        <FormattedMessage
+          {...messages.nbSeatsAvailable}
+          values={{ nb: orderGroup.nb_available_seats }}
+        />
+      </p>
+    </div>
+  ));
+};
+export default CourseProductItemFooter;

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/_styles.scss

@@ -138,23 +138,20 @@
 
   &__footer {
     padding: 0 0.875rem 1rem 0.875rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 
-    .product-item__no-course-run {
-      color: r-theme-val(product-item, feedback-color);
-      font-size: 0.8125rem;
-      line-height: 1.2em;
-      padding: 0.5rem 0.5rem 0 0.5rem;
+    &__message {
       text-align: center;
     }
-    .product-item__cta {
-      @include button-base(
-        $font-color: r-theme-val(product-item, button-color),
-        $font-family: $r-font-family-montserrat,
-        $font-size: 1rem,
-        $font-weight: $font-weight-bold
-      );
-      background-color: r-theme-val(product-item, button-background);
-      width: 100%;
+
+    &__order-group {
+      text-align: center;
+
+      p {
+        margin-top: 0.25rem;
+      }
     }
   }
 

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCertificateItem/_styles.scss

@@ -21,7 +21,7 @@
     margin-bottom: 0;
   }
 
-  .product-widget__item-description > .button {
+  .product-widget__item-description > button {
     display: block;
     margin: 1rem auto 0 auto;
     max-width: 12rem;

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCertificateItem/index.spec.tsx

@@ -7,6 +7,7 @@ import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/fac
 import { CertificationDefinitionFactory, OrderLiteFactory } from 'utils/test/factories/joanie';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { CertificateDefinition, OrderLite } from 'types/Joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import CertificateItem from '.';
 
 jest.mock('utils/errors/handle');
@@ -72,7 +73,7 @@ describe('CourseProductCertificateItem', () => {
 
   it('displays a download button when order contains a certificate', async () => {
     const certificateDefinition: CertificateDefinition = CertificationDefinitionFactory().one();
-    const order: OrderLite = OrderLiteFactory({ certificate: faker.string.uuid() }).one();
+    const order: OrderLite = OrderLiteFactory({ certificate_id: faker.string.uuid() }).one();
 
     render(
       <Wrapper>
@@ -88,7 +89,17 @@ describe('CourseProductCertificateItem', () => {
     expect($button.disabled).toBe(false);
 
     // When user clicks on "Download" button, the certificate should be downloaded
-    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${order.certificate}/download/`, 200);
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/certificates/${order.certificate_id}/download/`,
+      () => ({
+        status: HttpStatusCode.OK,
+        body: new Blob(['test']),
+        headers: {
+          'Content-Disposition': 'attachment; filename="test.pdf";',
+          'Content-Type': 'application/pdf',
+        },
+      }),
+    );
 
     fireEvent.click($button);
 

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCertificateItem/index.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CertificationDefinitionFactory, OrderLiteFactory } from 'utils/test/factories/joanie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import CertificateItem from '.';
+
+export default {
+  component: CertificateItem,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  args: {
+    certificateDefinition: CertificationDefinitionFactory().one(),
+    order: OrderLiteFactory({
+      certificate_id: "Demo User's certificate for cours Demo Course",
+    }).one(),
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(
+      <JoanieApiProvider>
+        <CertificateItem {...args} />
+      </JoanieApiProvider>,
+    );
+  },
+} as Meta<typeof CertificateItem>;
+
+type Story = StoryObj<typeof CertificateItem>;
+
+export const Default: Story = {};