richie-education 3.3.2-dev6 → 3.4.1-dev13

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

@@ -14,7 +14,12 @@ const messages = defineMessages({
   seats: {
     id: 'batchOrder.seats',
     description: 'Text displayed for seats value in batch order',
-    defaultMessage: 'Seats',
+    defaultMessage: '{nb_seats} seats',
+  },
+  seatsCount: {
+    id: 'batchOrder.seatsCount',
+    description: 'Text displayed for seats count in batch order (owned / total)',
+    defaultMessage: '{seats_owned}/{nb_seats} seats',
   },
   [BatchOrderState.DRAFT]: {
     id: 'batchOrder.status.draft',
@@ -136,8 +141,16 @@ export const DashboardItemBatchOrder = ({
               {batchOrder.nb_seats && (
                 <div className="dashboard-item__block__information">
                   <Icon name={IconTypeEnum.GROUPS} size="small" />
-                  <span>{batchOrder.nb_seats}</span>
-                  <span>{intl.formatMessage(messages.seats)}</span>
+                  <span>
+                    {batchOrder.seats_owned
+                      ? intl.formatMessage(messages.seatsCount, {
+                          seats_owned: batchOrder.seats_owned,
+                          nb_seats: batchOrder.nb_seats,
+                        })
+                      : intl.formatMessage(messages.seats, {
+                          nb_seats: batchOrder.nb_seats,
+                        })}
+                  </span>
                 </div>
               )}
               {batchOrder.payment_method && (

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/OrderPaymentDetailsModal/_styles.scss

@@ -1,7 +1,7 @@
 .order-payment-details {
   &__title {
-    font-weight: var(--c--theme--font--weights--bold);
-    font-size: var(--c--theme--font--sizes--l);
+    font-weight: var(--c--globals--font--weights--bold);
+    font-size: var(--c--globals--font--sizes--md);
     text-align: left;
   }
 }

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/_styles.scss

@@ -162,12 +162,16 @@
       padding: 0.5rem 1rem;
       font-size: 0.8rem;
       display: flex;
-      gap: 1rem;
-      align-items: center;
+      flex-direction: column;
+      gap: 0.5rem;
     }
   }
 }
 
+.dashboard-item__action-button {
+  align-self: flex-end;
+}
+
 .dashboard-item__course-enrolling {
   &__infos {
     align-items: center;

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/hooks/useRouteInfo/index.spec.tsx

@@ -33,7 +33,7 @@ describe('useRouteInfo', () => {
     });
 
     await waitFor(() =>
-      expect(result!.current).toEqual({
+      expect(result!.current).toMatchObject({
         id: '0',
         pathname: '/posts',
         params: {},
@@ -46,7 +46,7 @@ describe('useRouteInfo', () => {
     rerender();
 
     await waitFor(() =>
-      expect(result.current).toEqual({
+      expect(result.current).toMatchObject({
         id: '0-0',
         pathname: '/posts/a-first-post',
         params: { postId: 'a-first-post' },

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/Dashboard/utils/teacherDashboardPaths.tsx

@@ -82,7 +82,7 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.organization.course.product.learnerList.label',
     description: "Label to display the organization product's learner list view.",
-    defaultMessage: 'Learners',
+    defaultMessage: 'Buyers',
   },
   [TeacherDashboardPaths.COURSE]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.label',
@@ -102,7 +102,7 @@ export const TEACHER_DASHBOARD_ROUTE_LABELS = defineMessages<TeacherDashboardPat
   [TeacherDashboardPaths.COURSE_PRODUCT_LEARNER_LIST]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.learnerList.label',
     description: "Label to display the product's learner list view.",
-    defaultMessage: 'Learners',
+    defaultMessage: 'Buyers',
   },
   [TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS]: {
     id: 'components.TeacherDashboard.TeacherDashboardRoutes.course.product.contracts.label',

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/Slider/index.tsx

@@ -101,18 +101,19 @@ const Slider = ({ slides, title }: SliderProps) => {
   return (
     <div
       className="slider"
-      ref={emblaRef}
       aria-roledescription="carousel"
       aria-label={title}
       role="button"
       tabIndex={0}
       onKeyDown={handleKeyDown}
     >
-      <Slideshow
-        slides={slides}
-        onNextSlide={() => emblaApi?.scrollNext()}
-        onPreviousSlide={() => emblaApi?.scrollPrev()}
-      />
+      <div ref={emblaRef}>
+        <Slideshow
+          slides={slides}
+          onNextSlide={() => emblaApi?.scrollNext()}
+          onPreviousSlide={() => emblaApi?.scrollPrev()}
+        />
+      </div>
       <SlidePanel
         slides={slides}
         activeSlideIndex={activeSlideIndex}

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 '.';