richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/index.tsx

@@ -9,21 +9,19 @@ import { Spinner } from 'components/Spinner';
 import ErrorBoundary from 'utils/errors/ErrorBoundary';
 import context from 'utils/context';
 
-const CourseProductItem = lazy(() => import('widgets/CourseProductItem'));
+const Dashboard = lazy(() => import('widgets/Dashboard'));
 const LanguageSelector = lazy(() => import('widgets/LanguageSelector'));
 const LtiConsumer = lazy(() => import('widgets/LtiConsumer'));
 const RootSearchSuggestField = lazy(() => import('widgets/RootSearchSuggestField'));
 const Search = lazy(() => import('widgets/Search'));
 const SearchSuggestField = lazy(() => import('widgets/SearchSuggestField'));
-const UserLogin = lazy(() => import('widgets/UserLogin'));
-const Dashboard = lazy(() => import('widgets/Dashboard'));
 const SyllabusCourseRunsList = lazy(() => import('widgets/SyllabusCourseRunsList'));
+const UserLogin = lazy(() => import('widgets/UserLogin'));
 
 // List the top-level components that can be directly called from the Django templates in an interface
 // for type-safety when we call them. This will let us use the props for any top-level component in a
 // way TypeScript understand and accepts
 interface ComponentLibrary {
-  CourseProductItem: typeof CourseProductItem;
   Dashboard: typeof Dashboard;
   LanguageSelector: typeof LanguageSelector;
   LtiConsumer: typeof LtiConsumer;
@@ -35,15 +33,14 @@ interface ComponentLibrary {
 }
 // Actually create the component map that we'll use below to access our component classes
 const componentLibrary: ComponentLibrary = {
-  CourseProductItem,
   Dashboard,
   LanguageSelector,
   LtiConsumer,
   RootSearchSuggestField,
   Search,
   SearchSuggestField,
-  UserLogin,
   SyllabusCourseRunsList,
+  UserLogin,
 };
 // Type guard: ensures a given string (candidate) is indeed a proper key of the componentLibrary with a corresponding
 // component. This is a runtime check but it allows TS to check the component prop types at compile time

package/mocks/browser.ts

@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw';
+import { setupWorker } from 'msw/browser';
 
 import { handlers } from './handlers';
 

package/mocks/handlers/contracts.ts

@@ -0,0 +1,16 @@
+import { http, HttpResponse } from 'msw';
+import { getAPIEndpoint } from 'api/joanie';
+import { Contract, PaginatedResponse } from 'types/Joanie';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { PER_PAGE } from 'settings';
+
+export default [
+  http.get(`${getAPIEndpoint()}/contracts/`, () => {
+    return HttpResponse.json<PaginatedResponse<Contract>>({
+      count: 250,
+      results: ContractFactory().many(PER_PAGE.teacherContractList),
+      next: null,
+      previous: null,
+    });
+  }),
+];

package/mocks/handlers.ts

@@ -1 +1,3 @@
-export const handlers = [];
+import contractHandlers from './handlers/contracts';
+
+export const handlers = [...contractHandlers];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.24.0",
+  "version": "2.25.0-b2.dev101",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,111 +38,115 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.22.9",
+    "@babel/core": "7.23.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.22.5",
-    "@babel/preset-env": "7.22.9",
-    "@babel/preset-react": "7.22.5",
-    "@babel/preset-typescript": "7.22.5",
-    "@faker-js/faker": "8.0.2",
-    "@formatjs/cli": "6.1.3",
-    "@formatjs/intl-relativetimeformat": "11.2.4",
-    "@hookform/resolvers": "3.1.1",
-    "@openfun/cunningham-react": "0.10.0",
-    "@openfun/cunningham-tokens": "0.7.0",
-    "@sentry/browser": "7.60.0",
-    "@sentry/types": "7.60.0",
-    "@storybook/addon-actions": "7.1.0",
-    "@storybook/addon-essentials": "7.1.0",
-    "@storybook/addon-interactions": "7.1.0",
-    "@storybook/addon-links": "7.1.0",
-    "@storybook/react": "7.1.0",
-    "@storybook/react-webpack5": "7.1.0",
-    "@storybook/testing-library": "0.2.0",
-    "@tanstack/query-core": "4.32.0",
-    "@tanstack/query-sync-storage-persister": "4.32.0",
-    "@tanstack/react-query": "4.32.0",
-    "@tanstack/react-query-persist-client": "4.32.0",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/fetch-mock": "7.3.5",
-    "@types/iframe-resizer": "3.5.9",
-    "@types/jest": "29.5.3",
-    "@types/js-cookie": "3.0.3",
-    "@types/lodash-es": "4.17.8",
-    "@types/node-fetch": "2.6.4",
+    "@babel/plugin-transform-modules-commonjs": "7.23.3",
+    "@babel/preset-env": "7.23.9",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
+    "@faker-js/faker": "8.4.1",
+    "@formatjs/cli": "6.2.7",
+    "@formatjs/intl-relativetimeformat": "11.2.12",
+    "@hookform/resolvers": "3.3.4",
+    "@openfun/cunningham-react": "2.4.0",
+    "@openfun/cunningham-tokens": "2.1.0",
+    "@sentry/browser": "7.101.1",
+    "@sentry/types": "7.101.1",
+    "@storybook/addon-actions": "7.6.16",
+    "@storybook/addon-essentials": "7.6.16",
+    "@storybook/addon-interactions": "7.6.16",
+    "@storybook/addon-links": "7.6.16",
+    "@storybook/react": "7.6.16",
+    "@storybook/react-webpack5": "7.6.16",
+    "@storybook/testing-library": "0.2.2",
+    "@tanstack/query-core": "5.21.7",
+    "@tanstack/query-sync-storage-persister": "5.21.7",
+    "@tanstack/react-query": "5.21.7",
+    "@tanstack/react-query-persist-client": "5.21.7",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/fetch-mock": "7.3.8",
+    "@types/iframe-resizer": "3.5.13",
+    "@types/jest": "29.5.12",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash-es": "4.17.12",
+    "@types/node-fetch": "2.6.11",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.2.15",
-    "@types/react-autosuggest": "10.1.6",
-    "@types/react-dom": "18.2.7",
-    "@types/react-modal": "3.16.0",
-    "@types/uuid": "9.0.2",
-    "@typescript-eslint/eslint-plugin": "6.1.0",
-    "@typescript-eslint/parser": "6.1.0",
-    "babel-jest": "29.6.1",
+    "@types/react": "18.2.56",
+    "@types/react-autosuggest": "10.1.11",
+    "@types/react-dom": "18.2.19",
+    "@types/react-modal": "3.16.3",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "7.0.1",
+    "@typescript-eslint/parser": "7.0.1",
+    "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.31.1",
-    "downshift": "8.0.0",
-    "eslint": "8.45.0",
+    "core-js": "3.36.0",
+    "downshift": "8.3.1",
+    "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-import-resolver-webpack": "0.13.2",
-    "eslint-plugin-compat": "4.1.4",
-    "eslint-plugin-formatjs": "4.10.3",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-react": "7.33.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-webpack": "0.13.8",
+    "eslint-plugin-compat": "4.2.0",
+    "eslint-plugin-formatjs": "4.12.2",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-storybook": "0.8.0",
     "fetch-mock": "9.11.0",
     "file-loader": "6.2.0",
-    "glob": "10.3.3",
-    "i18n-iso-countries": "7.6.0",
-    "iframe-resizer": "4.3.6",
+    "glob": "10.3.10",
+    "i18n-iso-countries": "7.10.0",
+    "iframe-resizer": "4.3.9",
     "intl-pluralrules": "2.0.1",
-    "jest": "29.6.1",
-    "jest-environment-jsdom": "29.6.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "1.2.3",
+    "msw": "2.2.1",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.0.1",
-    "prettier": "3.0.0",
-    "query-string": "8.1.0",
+    "nodemon": "3.0.3",
+    "prettier": "3.2.5",
+    "query-string": "8.2.0",
     "react": "18.2.0",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.45.2",
-    "react-intl": "6.4.4",
+    "react-hook-form": "7.50.1",
+    "react-intl": "6.6.2",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.14.2",
-    "sass": "1.64.1",
-    "source-map-loader": "4.0.1",
-    "storybook": "7.1.0",
+    "react-router-dom": "6.22.1",
+    "sass": "1.71.0",
+    "source-map-loader": "5.0.0",
+    "storybook": "7.6.16",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "<5",
-    "uuid": "9.0.0",
-    "webpack": "5.88.2",
+    "typescript": "5.3.3",
+    "uuid": "9.0.1",
+    "webpack": "5.90.2",
     "webpack-cli": "5.1.4",
-    "whatwg-fetch": "3.6.17",
+    "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
     "yargs": "17.7.2",
-    "yup": "1.2.0"
+    "yup": "1.3.3"
   },
   "resolutions": {
-    "@types/react": "18.2.15",
-    "@types/react-dom": "18.2.7"
+    "@testing-library/dom": "9.3.4",
+    "@types/react": "18.2.56",
+    "@types/react-dom": "18.2.19"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"
+  },
+  "volta": {
+    "node": "20.11.0"
   }
 }

package/scss/_main.scss

@@ -44,3 +44,5 @@
 @import './trumps/cms';
 // IE11 patchs
 @import './trumps/ie11-fixes';
+// Bootstrap patchs
+@import './trumps/bootstrap';

package/scss/colors/_palette.scss

@@ -4,5 +4,5 @@
 
 // Named colors
 // ---------
-@warn "[DEPRECATION] - $palette will be removed on the next major release. Use map-get($theme, 'colors') instead.";
-$palette: map-get($theme, 'colors') !default;
+@warn "[DEPRECATION] - $palette will be removed on the next major release. Use $palette: map-get(map-get(map-get($themes, 'default'), 'theme'), 'colors') instead.";
+$palette: map-get(map-get(map-get($themes, 'default'), 'theme'), 'colors') !default;

package/scss/colors/_theme.scss

@@ -247,9 +247,6 @@ $r-theme: (
     text-hover-color: r-color('grey59'),
     base-border: r-color('azure2'),
   ),
-  dashboard-course-list: (
-    title-color: r-color('indianred3'),
-  ),
   dashboard-credit-cards: (
     empty-color: r-color(slate-grey),
   ),
@@ -277,7 +274,7 @@ $r-theme: (
     sub-title-color: r-color('slate-grey'),
     active-color: r-color('indianred3'),
     base-border: r-color('light-grey'),
-    menu-link-left-padding: 25px,
+    menu-link-inline-padding: 16px,
   ),
   dashboard-list: (
     background-color-loading: r-color('smoke'),
@@ -322,7 +319,7 @@ $r-theme: (
     hover-title-color: r-color('firebrick6'),
   ),
   dashboard-sidebar-organization-link-title: (
-    base-color: r-color('firebrick6'),
+    base-color: r-color('battleship-grey'),
   ),
   pagination: (
     item-color: r-color('slate-grey'),
@@ -456,14 +453,6 @@ $r-theme: (
     title-color: r-color('charcoal'),
     base-color: r-color('purplish-grey'),
   ),
-  sale-tunnel: (
-    primary-button-scheme: $firebrick6-scheme,
-    primary-button-is-outlined: false,
-    secondary-button-scheme: $purplish-grey-scheme,
-    secondary-button-is-outlined: true,
-    tertiary-button-scheme: $smoke-scheme,
-    tertiary-button-is-outlined: false,
-  ),
   search-results: (
     overlay: r-color('black'),
     color: r-color('light-grey'),
@@ -486,9 +475,6 @@ $r-theme: (
     base-background: r-color('white'),
     base-border: r-color('slate-grey'),
     base-color: r-color('slate-grey'),
-    close-background: transparent,
-    close-border: null,
-    close-color: r-color('slate-grey'),
     overlay-background: rgba(r-color('black'), 0.75),
   ),
   search-filters-group-modal: (
@@ -567,6 +553,10 @@ $r-theme: (
     background-color: r-color('white'),
     overlay-background-color: r-color('smoke'),
   ),
+  contract-frame: (
+    content-color: r-color(purplish-grey),
+    title-color: r-color('charcoal'),
+  ),
 ) !default;
 
 // On a Richie child project you can easily change a specific value using:

package/scss/components/_content.scss

@@ -40,5 +40,5 @@ body {
   // Enforce this block to take at least full body height
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
 }

package/scss/components/_index.scss

@@ -1,41 +1,51 @@
 @import '../../js/components/AddressesManagement/styles';
+@import '../../js/components/ContractFrame/styles';
 @import '../../js/components/TeacherDashboardCourseList/styles';
 @import '../../js/components/Modal/styles';
+@import '../../js/components/PaymentButton/styles';
+@import '../../js/components/PurchaseButton/styles';
+@import '../../js/components/SaleTunnel/styles';
+@import '../../js/components/SaleTunnel/components/RegisteredCreditCard/styles';
+@import '../../js/components/SaleTunnel/components/SaleTunnelStepPayment/styles';
+@import '../../js/components/SaleTunnel/components/SaleTunnelStepResume/styles';
+@import '../../js/components/SaleTunnel/components/SaleTunnelStepValidation/styles';
+@import '../../js/components/SaleTunnel/components/StepBreadcrumb/styles';
+@import '../../js/components/SuccessIcon/styles';
 @import '../../js/components/RegisteredAddress/styles';
 @import '../../js/components/SearchInput/styles';
 @import '../../js/components/Spinner/styles';
 @import '../../js/pages/DashboardAddressesManagement/styles';
 @import '../../js/pages/DashboardCertificates/styles';
 @import '../../js/pages/DashboardCourses/styles';
+@import '../../js/pages/DashboardContracts/_styles';
 @import '../../js/pages/DashboardCreditCardsManagement/styles';
+@import '../../js/pages/DashboardOrderLayout/styles';
 @import '../../js/pages/DashboardPreferences/styles';
-@import '../../js/pages/TeacherCourseDashboardLoader/CourseRunList/styles';
-@import '../../js/pages/TeacherTrainingDashboard/styles.scss';
-@import '../../js/widgets/CourseProductItem/components/CourseProductCertificateItem/styles';
-@import '../../js/widgets/CourseProductItem/components/CourseProductCourseRuns/styles';
-@import '../../js/widgets/CourseProductItem/components/PaymentButton/styles';
-@import '../../js/widgets/CourseProductItem/components/RegisteredCreditCard/styles';
-@import '../../js/widgets/CourseProductItem/components/SaleTunnel/styles';
-@import '../../js/widgets/CourseProductItem/components/SaleTunnelStepPayment/styles';
-@import '../../js/widgets/CourseProductItem/components/SaleTunnelStepResume/styles';
-@import '../../js/widgets/CourseProductItem/components/SaleTunnelStepValidation/styles';
-@import '../../js/widgets/CourseProductItem/components/StepBreadcrumb/styles';
-@import '../../js/widgets/CourseProductItem/styles';
+@import '../../js/pages/TeacherDashboardContractsLayout/styles';
+@import '../../js/pages/TeacherDashboardCourseLoader/CourseRunList/styles';
+@import '../../js/pages/TeacherDashboardTraining/styles.scss';
 @import '../../js/widgets/Dashboard/styles';
 @import '../../js/widgets/Dashboard/components/DashboardAvatar/styles';
 @import '../../js/widgets/Dashboard/components/DashboardBox/styles';
 @import '../../js/widgets/Dashboard/components/DashboardCard/styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/Certificate/styles';
+@import '../../js/widgets/Dashboard/components/DashboardItem/Order/styles';
+@import '../../js/widgets/Dashboard/components/DashboardItem/Contract/_styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/styles';
 @import '../../js/widgets/Dashboard/components/DashboardLayout/styles';
+@import '../../js/widgets/Dashboard/components/DashboardListAvatar/styles';
+@import '../../js/widgets/Dashboard/components/DashboardOrderLoader/styles';
 @import '../../js/widgets/Dashboard/components/DashboardBreadcrumbs/styles';
 @import '../../js/widgets/Dashboard/components/DashboardSidebar/styles';
-@import '../../js/widgets/Dashboard/components/TeacherCourseDashboardSidebar/styles';
-@import '../../js/widgets/Dashboard/components/TeacherProfileDashboardSidebar/components/OrganizationLinks/styles';
+@import '../../js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/styles';
+@import '../../js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks/styles';
 @import '../../js/widgets/LtiConsumer/styles';
 @import '../../js/widgets/Search/components/SearchFilterGroup/styles';
 @import '../../js/widgets/Search/components/SearchFilterGroupModal/styles';
 @import '../../js/widgets/Search/components/SearchFiltersPane/styles';
+@import '../../js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCertificateItem/styles';
+@import '../../js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/styles';
+@import '../../js/widgets/SyllabusCourseRunsList/components/CourseProductItem/styles';
 @import '../../js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/CourseRunUnenrollmentButton/styles';
 @import '../../js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/styles';
 @import '../../js/widgets/SyllabusCourseRunsList/components/CourseWishButton/styles';

package/scss/generic/_type.scss

@@ -8,7 +8,7 @@ $r-fonts: () !default;
 }
 
 // Build text color helpers
-@each $name, $value in map-get($theme, 'colors') {
+@each $name, $value in map-get(map-get(map-get($themes, 'default'), 'theme'), 'colors') {
   @if type-of($value) == 'map' {
     @each $sub-name, $sub-value in $value {
       .text-#{($name + '-' + $sub-name)} {

package/scss/objects/_characteristics.scss

@@ -5,22 +5,22 @@
 // Simple inline with optional color scheme features
 .characteristics {
   @include feature-list($margin: 0.5rem 0 0.5rem 0);
-
   color: inherit;
 
-  &__row {
-    text-align: center;
-  }
-
   &__item {
-    @include feature-item($parent_selector: '.characteristics');
+    @include feature-item($parent_selector: '.characteristics', $valign: flex-start, $expand: true);
     color: inherit;
+    margin-bottom: 0.5rem;
+
+    &--full-width {
+      width: 100%;
+    }
   }
 
   &__term {
     align-items: center;
     color: inherit;
-    padding-top: 0.2125rem; // Fine tune vertical alignment with icons
+    margin-top: rem-calc(-2px); // Fine tune vertical alignment with icons
   }
 
   // When using through a color scheme, item adopt button behaviors
@@ -44,11 +44,4 @@
       @include r-button-colors(r-theme-val(characteristics, tertiary-item), $apply-border: true);
     }
   }
-
-  &__enrollment-count {
-    @include make-container();
-    padding-left: 0;
-    padding-right: 0;
-    font-size: 1rem;
-  }
 }

package/scss/objects/_course_glimpses.scss

@@ -28,14 +28,7 @@ $r-course-glimpse-gutter: 0.8rem !default;
 
   &__count {
     margin-right: $r-course-glimpse-gutter;
-    padding: 0;
-    flex-basis: 100%; // Should not wrap with actual course glimpses
-    color: r-theme-val(course-glimpse-list, count-color);
-    text-align: right;
-
     @include media-breakpoint-up(lg) {
-      padding: 0;
-
       &:first-child {
         margin-top: -1rem; // Cancel out top padding
       }
@@ -75,6 +68,9 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   @include media-breakpoint-up(lg) {
     @include sv-flex(1, 0, calc(25% - #{$r-course-glimpse-gutter * 2}));
   }
+  @include media-breakpoint-down(lg) {
+    max-width: 100%;
+  }
 
   // We want to trigger the card shadow on hovering links inside the card,
   // but not when hovering non-interactive text.

package/scss/objects/_dashboard.scss

@@ -52,4 +52,32 @@
   &__text_icon_left {
     margin-left: rem-calc(8px);
   }
+
+  &__page__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+
+    &-row {
+      display: flex;
+      gap: 1rem;
+
+      &--start {
+        justify-content: flex-start;
+      }
+      &--center {
+        justify-content: center;
+      }
+      &--end {
+        justify-content: flex-end;
+      }
+      &--space-between {
+        justify-content: space-between;
+      }
+      &--space-around {
+        justify-content: space-around;
+      }
+    }
+  }
 }