richie-education 3.3.2-dev16 → 3.3.2-dev25

package/js/utils/errors/handle.spec.ts

@@ -19,12 +19,12 @@ jest.mock('@sentry/browser', () => ({
 
 describe('handle', () => {
   it('should initialize sentry', () => {
-    expect(Sentry.init).toBeCalledTimes(1);
-    expect(Sentry.setTag).toBeCalledTimes(1);
+    expect(Sentry.init).toHaveBeenCalledTimes(1);
+    expect(Sentry.setTag).toHaveBeenCalledTimes(1);
   });
 
   it('should report error to sentry', () => {
     handle(new Error('An error for test'));
-    expect(Sentry.captureException).toBeCalledTimes(1);
+    expect(Sentry.captureException).toHaveBeenCalledTimes(1);
   });
 });

package/js/utils/react-query/useSessionMutation/index.ts

@@ -1,4 +1,8 @@
-import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import type {
+  MutationFunctionContext,
+  UseMutationOptions,
+  UseMutationResult,
+} from '@tanstack/react-query';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
@@ -18,13 +22,14 @@ export function useSessionMutation<TData = unknown, TVariables = void, TContext
     error: HttpError,
     variables: TVariables,
     context: TContext | undefined,
+    mutationContext: MutationFunctionContext,
   ) => {
-    if (error.code === HttpStatusCode.UNAUTHORIZED) {
+    if (error && error.code === HttpStatusCode.UNAUTHORIZED) {
       await queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
     }
 
     if (options?.onError) {
-      return options.onError(error, variables, context);
+      return options.onError(error, variables, context, mutationContext);
     }
   };
 

package/js/widgets/Dashboard/components/DashboardAvatar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { UserFactory } from 'utils/test/factories/richie';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '.';

package/js/widgets/Dashboard/components/DashboardBox/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from './index';
 
@@ -25,8 +25,12 @@ export const Default: Story = {
     ),
     footer: (
       <>
-        <Button color="primary">Delete</Button>
-        <Button color="primary">Update</Button>
+        <Button color="brand" variant="primary">
+          Delete
+        </Button>
+        <Button color="brand" variant="primary">
+          Update
+        </Button>
       </>
     ),
   },
@@ -43,8 +47,12 @@ export const NoHeader: Story = {
     ),
     footer: (
       <>
-        <Button color="primary">Delete</Button>
-        <Button color="primary">Update</Button>
+        <Button color="brand" variant="primary">
+          Delete
+        </Button>
+        <Button color="brand" variant="primary">
+          Update
+        </Button>
       </>
     ),
   },

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, Outlet, RouteObject, RouterProvider } from 'react-router';
 import { defineMessages } from 'react-intl';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.tsx

@@ -60,7 +60,8 @@ export const DashboardBreadcrumbs = () => {
         <RouterButton
           href={backPath}
           size="nano"
-          color="tertiary-text"
+          color="brand"
+          variant="tertiary"
           icon={<span className="material-icons">chevron_left</span>}
         >
           <FormattedMessage {...messages.back} />
@@ -69,7 +70,7 @@ export const DashboardBreadcrumbs = () => {
 
       {breadcrumbs.map((breadcrumb) => (
         <li key={breadcrumb.pathname}>
-          <RouterButton href={breadcrumb.pathname} size="nano" color="tertiary-text">
+          <RouterButton href={breadcrumb.pathname} size="nano" color="brand" variant="tertiary">
             {breadcrumb.name}
           </RouterButton>
         </li>

package/js/widgets/Dashboard/components/DashboardCard/index.spec.tsx

@@ -5,7 +5,14 @@ import { DashboardCard } from '.';
 describe('<DashboardCard/>', () => {
   it('opens and closes', async () => {
     render(
-      <DashboardCard header="My header" footer={<Button color="primary">Update</Button>}>
+      <DashboardCard
+        header="My header"
+        footer={
+          <Button color="brand" variant="primary">
+            Update
+          </Button>
+        }
+      >
         Content here
       </DashboardCard>,
     );
@@ -23,7 +30,11 @@ describe('<DashboardCard/>', () => {
       <DashboardCard
         defaultExpanded={false}
         header="My header"
-        footer={<Button color="primary">Update</Button>}
+        footer={
+          <Button color="brand" variant="primary">
+            Update
+          </Button>
+        }
       >
         Content here
       </DashboardCard>,

package/js/widgets/Dashboard/components/DashboardCard/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from '../DashboardBox';
 import { DashboardCard } from './index';
@@ -26,7 +26,11 @@ export const Default: Story = {
         </div>
       </div>
     ),
-    footer: <Button color="primary">Update</Button>,
+    footer: (
+      <Button color="brand" variant="primary">
+        Update
+      </Button>
+    ),
   },
 };
 
@@ -39,8 +43,12 @@ export const WithBoxes: Story = {
           header={<>Address used by default</>}
           footer={
             <>
-              <Button color="primary">Remove</Button>
-              <Button color="primary">Edit</Button>
+              <Button color="brand" variant="primary">
+                Remove
+              </Button>
+              <Button color="brand" variant="primary">
+                Edit
+              </Button>
             </>
           }
         >

package/js/widgets/Dashboard/components/DashboardCard/index.tsx

@@ -64,7 +64,7 @@ export const DashboardCard = ({
       <header className="dashboard-card__header">
         <div>{header}</div>
         {expandable && (
-          <Button onClick={toggle} color="tertiary" size="small">
+          <Button onClick={toggle} color="brand" variant="tertiary" size="small">
             <Icon
               name={IconTypeEnum.CHEVRON_DOWN_OUTLINE}
               data-testid="dashboard-card__header__toggle"

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/BatchOrderPaymentManager.tsx

@@ -48,7 +48,7 @@ export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProp
           footer={
             <div className="content">
               <FormattedMessage {...messages.batchOrderPayment} />
-              <Button size="small" color="primary" onClick={retryModal.open}>
+              <Button size="small" color="brand" variant="primary" onClick={retryModal.open}>
                 <FormattedMessage
                   {...messages.paymentNeededButton}
                   values={{

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/index.tsx

@@ -172,7 +172,8 @@ export const BatchOrderPaymentModal = ({ batchOrder, ...props }: Props) => {
         hideCloseButton={state === ComponentStates.LOADING}
         actions={
           <Button
-            color="primary"
+            color="brand"
+            variant="primary"
             size="small"
             fullWidth={true}
             onClick={pay}

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate/index';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { Certificate } from 'types/Joanie';

package/js/widgets/Dashboard/components/DashboardItem/Contract/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract/index';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { Contract, NestedCredentialOrder } from 'types/Joanie';

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { faker } from '@faker-js/faker';
 import { TargetCourseFactory } from 'utils/test/factories/joanie';

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.tsx

@@ -243,7 +243,8 @@ export const DashboardItemCourseEnrollingRun = ({
         SHOW_ACCESS_COURSE_PRIORITIES.includes(courseRun.state.priority) && (
           <div>
             <Button
-              color="secondary"
+              color="brand"
+              variant="secondary"
               size="small"
               href={courseRun.resource_link}
               data-testid="dashboard-item-enrollment__button"
@@ -257,7 +258,8 @@ export const DashboardItemCourseEnrollingRun = ({
         <div>
           <Button
             disabled={!isOpenedForEnrollment || !canEnroll}
-            color="tertiary"
+            color="brand"
+            variant="tertiary"
             size="small"
             onClick={enroll}
             title={!canEnroll ? intl.formatMessage(messages.cannotEnroll) : ''}
@@ -287,7 +289,8 @@ const NotEnrolled = ({
       </div>
       {!hideEnrollButtons && (
         <RouterButton
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           href={notEnrolledUrl}
           data-testid="dashboard-item-enrollment__button"
@@ -327,7 +330,8 @@ export const Enrolled = ({
       </div>
       {SHOW_ACCESS_COURSE_PRIORITIES.includes(enrollment.course_run.state.priority) && (
         <Button
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           href={enrollment.course_run.resource_link}
           data-testid="dashboard-item-enrollment__button"

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { enrollment } from '../stories.mock';
 import { DashboardItemEnrollment } from './DashboardItemEnrollment';
 

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -210,7 +210,7 @@ const FailedInstallmentManager = ({ order, updateOrder }: FailedInstallmentManag
   return (
     <>
       <div className="dashboard-splitted-card__item__actions">
-        <Button size="small" color="primary" onClick={installmentRetryModal.open}>
+        <Button size="small" color="brand" variant="primary" onClick={installmentRetryModal.open}>
           <FormattedMessage
             {...messages.paymentNeededButton}
             values={{

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderReadonly.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import {

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderWritable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import {

package/js/widgets/Dashboard/components/DashboardItem/Order/Installment/index.tsx

@@ -162,7 +162,7 @@ const InstallmentManager = ({ order }: Props) => {
         <FormattedMessage {...messages.paymentLabel} />
       </div>
       <div className="dashboard-splitted-card__item__actions">
-        <Button size="small" color="secondary" onClick={modal.open}>
+        <Button size="small" color="brand" variant="secondary" onClick={modal.open}>
           <FormattedMessage {...messages.paymentButton} />
         </Button>
       </div>

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal/index.tsx

@@ -166,7 +166,8 @@ export const OrderPaymentRetryModal = ({ installment, order, ...props }: Props)
         hideCloseButton={state === ComponentStates.LOADING}
         actions={
           <Button
-            color="primary"
+            color="brand"
+            variant="primary"
             size="small"
             fullWidth={true}
             onClick={pay}

package/js/widgets/Dashboard/components/DashboardItem/Order/OrganizationBlock/index.tsx

@@ -100,7 +100,8 @@ const OrganizationBlock = ({ order, product }: Props) => {
                   <FormattedMessage {...messages.organizationMailContactLabel} />
                   <Button
                     size="small"
-                    color="tertiary"
+                    color="brand"
+                    variant="tertiary"
                     href={'mailto:' + (organization.contact_email ?? '')}
                   >
                     {organization.contact_email}
@@ -112,7 +113,8 @@ const OrganizationBlock = ({ order, product }: Props) => {
                   <FormattedMessage {...messages.organizationPhoneContactLabel} />
                   <Button
                     size="small"
-                    color="tertiary"
+                    color="brand"
+                    variant="tertiary"
                     href={'tel:' + (organization.contact_phone ?? '')}
                   >
                     {organization.contact_phone}
@@ -124,7 +126,8 @@ const OrganizationBlock = ({ order, product }: Props) => {
                   <FormattedMessage {...messages.organizationDpoContactLabel} />
                   <Button
                     size="small"
-                    color="tertiary"
+                    color="brand"
+                    variant="tertiary"
                     href={'mailto:' + (organization.dpo_email ?? '')}
                   >
                     {organization.dpo_email}

package/js/widgets/Dashboard/components/DashboardItem/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DashboardItem, DEMO_IMAGE_URL } from './index';
 
 export default {

package/js/widgets/Dashboard/components/DashboardItem/index.tsx

@@ -92,7 +92,8 @@ const DashboardItemMore = ({ more }: { more: ReactNode }) => {
     <div className="selector dashboard-item__block__head__more">
       <Button
         icon={<Icon name={IconTypeEnum.MORE} />}
-        color="tertiary"
+        color="brand"
+        variant="tertiary"
         size="small"
         aria-label={intl.formatMessage(messages.moreLabel)}
         {...getToggleButtonProps()}

package/js/widgets/Dashboard/components/DashboardListAvatar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 import { tokens } from 'utils/cunningham-tokens';
 import DashboardListAvatar from '.';

package/js/widgets/Dashboard/components/DashboardSidebar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';

package/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';

package/js/widgets/Dashboard/components/ProtectedOutlet/AuthenticatedOutlet.spec.tsx

@@ -47,7 +47,7 @@ describe('<AuthenticatedOutlet />', () => {
     await screen.findByTestId('route-restricted');
 
     // location.replace should not have been called
-    expect(location.replace).not.toBeCalled();
+    expect(location.replace).not.toHaveBeenCalled();
   });
 
   it('should redirect to provided path if user is anonymous', () => {

package/js/widgets/Dashboard/components/ProtectedOutlet/ProtectedOutlet.spec.tsx

@@ -39,7 +39,7 @@ describe('<ProtectedOutlet />', () => {
     screen.getByTestId('route-restricted');
 
     // location.replace should not have been called
-    expect(location.replace).not.toBeCalled();
+    expect(location.replace).not.toHaveBeenCalled();
   });
 
   it('should redirect to provided path if isAllowed is false', () => {

package/js/widgets/Dashboard/components/SearchBar/index.tsx

@@ -59,7 +59,8 @@ const SearchBar = ({ onSubmit }: SearchBarProps) => {
               className="dashboard-search-bar__input"
               type="button"
               size="small"
-              color="tertiary"
+              color="brand"
+              variant="tertiary"
               icon={<span className="material-icons">close</span>}
               onClick={clear}
               aria-label={intl.formatMessage(messages.clearSearchButtonLabel)}

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import fetchMock from 'fetch-mock';
 import { UserFactory } from 'utils/test/factories/richie';

package/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { TeacherDashboardProfileSidebar } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar';

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

@@ -82,7 +82,7 @@ describe('<Dashboard />', () => {
 
     await expectNoSpinner('Loading orders and enrollments...');
 
-    expect(location.replace).not.toBeCalled();
+    expect(location.replace).not.toHaveBeenCalled();
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.COURSES);
   });
 

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { HistoryProvider } from 'hooks/useHistory';
 import { SearchFilterValueParent } from '.';

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

@@ -76,7 +76,8 @@ export const SearchFiltersPane = ({
         <FormattedMessage {...messages.filter} />
       </h2>
       <Button
-        color="secondary"
+        color="brand"
+        variant="secondary"
         size="small"
         className={c({
           'search-filters-pane__clear--hidden': !activeFilterCount,

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { IntlProvider } from 'react-intl';
 import { Slide } from './types';
 import Slider from '.';

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CertificationDefinitionFactory, OrderLiteFactory } from 'utils/test/factories/joanie';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { CredentialOrderFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -69,7 +69,8 @@ const CourseWishButton = ({ course }: Props) => {
   return user ? (
     <>
       <Button
-        color="primary"
+        color="brand"
+        variant="primary"
         onClick={isWished ? removeFromWishlist : addToWishlist}
         fullWidth
         disabled={componentState === ComponentStates.LOADING}
@@ -87,7 +88,8 @@ const CourseWishButton = ({ course }: Props) => {
     </>
   ) : (
     <Button
-      color="primary"
+      color="brand"
+      variant="primary"
       onClick={login}
       fullWidth
       disabled={componentState === ComponentStates.LOADING}

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CourseRunFactory, PacedCourseFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { CourseCertificateOffer, CourseOffer } from '../../../../types/Course';

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { CourseRunFactory } from 'utils/test/factories/richie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
+import { SyllabusCourseRunCompacted } from '.';
+
+export default {
+  component: SyllabusCourseRunCompacted,
+  render: (args) => StorybookHelper.wrapInApp(<SyllabusCourseRunCompacted {...args} />),
+} as Meta<typeof SyllabusCourseRunCompacted>;
+
+type Story = StoryObj<typeof SyllabusCourseRunCompacted>;
+
+const courseRun = CourseRunFactory().one();
+
+const singleDateCourseRun = {
+  ...courseRun,
+  start: null,
+  enrollment_start: null,
+  title: 'Certificate Product',
+  price_currency: 'EUR',
+  offer: CourseOffer.FREE,
+  certificate_offer: CourseCertificateOffer.PAID,
+  certificate_price: 100,
+  discounted_price: null,
+  discount: null,
+} as any;
+
+const course = {
+  id: '038c4f92-542a-4652-8537-322a75297b75',
+  code: 'IYfwh',
+  is_self_paced: true,
+};
+
+export const CertificateSyllabusSingleDate: Story = {
+  args: {
+    courseRun: singleDateCourseRun,
+    course,
+    showLanguages: true,
+  },
+};

package/js/widgets/UserLogin/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import UserLogin from '.';