richie 2.34.1.dev5__py2.py3-none-any.whl → 2.34.1.dev9__py2.py3-none-any.whl

frontend/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -30,6 +30,8 @@ import { computeStates } from 'utils/CourseRuns';
 import { IntlHelper } from 'utils/IntlHelper';
 import { render } from 'utils/test/render';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { SyllabusCourseRunCompacted } from './components/SyllabusCourseRunCompacted';
+import { SyllabusCourseRun } from './components/SyllabusCourseRun';
 
 jest.mock('utils/context', () => {
   const mock = mockRichieContextFactory().one();
@@ -127,7 +129,6 @@ describe('<SyllabusCourseRunsList/>', () => {
     const languagesContainer = languagesNode.nextSibling! as HTMLElement;
     getByText(languagesContainer, IntlHelper.getLocalizedLanguages(courseRun.languages, intl));
 
-    expect(languagesContainer.nextSibling).toBeNull();
     getByRole(runContainer, 'link', {
       name: StringHelper.capitalizeFirst(courseRun.state.call_to_action)!,
     });
@@ -568,7 +569,7 @@ describe('<SyllabusCourseRunsList/>', () => {
 
     const portalContainer = getPortalContainer();
 
-    // Expect that "is-hidden" class is set only to course runs in (MAX_ARCHIVED_COURSE_RUNS)nth-plus position.
+    // Expect that 'is-hidden' class is set only to course runs in (MAX_ARCHIVED_COURSE_RUNS)nth-plus position.
     expect(portalContainer.querySelectorAll('li').length).toBe(MAX_ARCHIVED_COURSE_RUNS * 2);
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
@@ -585,7 +586,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     // click on view more.
     await act(async () => user.click(button));
 
-    // expect that "is-hidden" are removed.
+    // expect that 'is-hidden' are removed.
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
       expect(listElement.classList).not.toContain('is-hidden');
@@ -615,7 +616,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     const portalContainer = getPortalContainer();
     expect(screen.queryByRole('button', { name: 'View more' })).not.toBeInTheDocument();
 
-    // expect that "is-hidden" is not set.
+    // expect that 'is-hidden' is not set.
     expect(portalContainer.querySelectorAll('li').length).toBe(MAX_ARCHIVED_COURSE_RUNS - 1);
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
@@ -1009,7 +1010,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     const listElements = screen.getAllByRole('listitem');
     expect(listElements.length).toBe(4);
 
-    // Assert there is only one link, one label "Enrolled" and one request to retrieve enrollment.
+    // Assert there is only one link, one label 'Enrolled' and one request to retrieve enrollment.
     expect(await screen.findAllByText('Enrolled')).toHaveLength(1);
 
     const links = screen.getAllByRole('link');
@@ -1024,4 +1025,448 @@ describe('<SyllabusCourseRunsList/>', () => {
       `https://demo.endpoint/api/enrollment/v1/enrollment/${user.username},${onGoingCourseRun.resource_link}`,
     );
   });
+
+  it('renders price information as paid and paid on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as subscription on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Subscription',
+      certificate_offer: 'Subscription',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Subscribe to access the course content.<br>€49.99</dd>');
+    expect(content).toContain(
+      '<dd>The certification process is offered through subscription.<br>€59.99</dd>',
+    );
+  });
+
+  it('renders price information as Partially free on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Partially free',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as paid and free on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      certificate_offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render course price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid.');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('does not render certificate price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render prices but only offers on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br></dd>');
+    expect(content).toContain('<dd>The certification process is free.<br></dd>');
+  });
+
+  it('renders prices as zero on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render invalid offers on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'invalid',
+      certificate_offer: 'invalid',
+      price_currency: 'EUR',
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is');
+    expect(content).not.toContain('The certification process is');
+    expect(content).not.toContain('<br>€59.99');
+  });
+
+  it('renders price information as paid and paid on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as subscription on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Subscription',
+      certificate_offer: 'Subscription',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Subscribe to access the course content.<br>€49.99</dd>');
+    expect(content).toContain(
+      '<dd>The certification process is offered through subscription.<br>€59.99</dd>',
+    );
+  });
+
+  it('renders price information as Partially free on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Partially free',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as paid and free on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      certificate_offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render course price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      price: 59.99,
+      price_currency: 'EUR',
+      certificate_offer: 'paid',
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid.');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('does not render certificate price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render prices but only offers on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br></dd>');
+    expect(content).toContain('<dd>The certification process is free.<br></dd>');
+  });
+
+  it('renders prices as zero on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render invalid offers on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'invalid',
+      certificate_offer: 'invalid',
+      price_currency: 'EUR',
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is');
+    expect(content).not.toContain('The certification process is');
+    expect(content).not.toContain('<br>€59.99');
+  });
 });

frontend/package.json

@@ -47,29 +47,29 @@
     "@faker-js/faker": "9.5.0",
     "@formatjs/cli": "6.6.1",
     "@formatjs/intl-relativetimeformat": "11.4.10",
-    "@hookform/resolvers": "4.1.0",
+    "@hookform/resolvers": "4.1.2",
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "3.0.0",
     "@openfun/cunningham-tokens": "2.2.0",
-    "@sentry/browser": "9.1.0",
-    "@sentry/types": "9.1.0",
-    "@storybook/addon-actions": "8.5.6",
-    "@storybook/addon-essentials": "8.5.6",
-    "@storybook/addon-interactions": "8.5.6",
-    "@storybook/addon-links": "8.5.6",
-    "@storybook/react": "8.5.6",
-    "@storybook/react-webpack5": "8.5.6",
-    "@storybook/test": "8.5.6",
-    "@tanstack/query-core": "5.66.3",
-    "@tanstack/query-sync-storage-persister": "5.66.3",
-    "@tanstack/react-query": "5.66.3",
-    "@tanstack/react-query-devtools": "5.66.3",
-    "@tanstack/react-query-persist-client": "5.66.3",
+    "@sentry/browser": "9.2.0",
+    "@sentry/types": "9.2.0",
+    "@storybook/addon-actions": "8.6.0",
+    "@storybook/addon-essentials": "8.6.0",
+    "@storybook/addon-interactions": "8.6.0",
+    "@storybook/addon-links": "8.6.0",
+    "@storybook/react": "8.6.0",
+    "@storybook/react-webpack5": "8.6.0",
+    "@storybook/test": "8.6.0",
+    "@tanstack/query-core": "5.66.4",
+    "@tanstack/query-sync-storage-persister": "5.66.4",
+    "@tanstack/react-query": "5.66.9",
+    "@tanstack/react-query-devtools": "5.66.9",
+    "@tanstack/react-query-persist-client": "5.66.9",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/fetch-mock": "7.3.8",
+    "@types/fetch-mock": "9.2.2",
     "@types/iframe-resizer": "4.0.0",
     "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
@@ -80,8 +80,8 @@
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "19.0.4",
     "@types/react-modal": "3.16.3",
-    "@typescript-eslint/eslint-plugin": "8.24.0",
-    "@typescript-eslint/parser": "8.24.0",
+    "@typescript-eslint/eslint-plugin": "8.25.0",
+    "@typescript-eslint/parser": "8.25.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
@@ -106,7 +106,7 @@
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.1",
-    "i18n-iso-countries": "7.13.0",
+    "i18n-iso-countries": "7.14.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
@@ -114,10 +114,10 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.7.0",
+    "msw": "2.7.3",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.9",
-    "prettier": "3.5.1",
+    "prettier": "3.5.2",
     "query-string": "9.1.1",
     "react": "19.0.0",
     "react-autosuggest": "10.1.0",
@@ -125,13 +125,13 @@
     "react-hook-form": "7.54.2",
     "react-intl": "7.1.6",
     "react-modal": "3.16.3",
-    "react-router": "7.1.5",
-    "sass": "1.85.0",
+    "react-router": "7.2.0",
+    "sass": "1.85.1",
     "source-map-loader": "5.0.0",
-    "storybook": "8.5.6",
+    "storybook": "8.6.0",
     "tsconfig-paths-webpack-plugin": "4.2.0",
     "typescript": "5.7.3",
-    "uuid": "11.0.5",
+    "uuid": "11.1.0",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",
     "whatwg-fetch": "3.6.20",
@@ -154,7 +154,7 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.5.6",
+    "@storybook/addon-mdx-gfm": "8.6.0",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5"
   }
 }