richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -1,34 +1,20 @@
-import c from 'classnames';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
-import { ChangeEvent, PropsWithChildren, ReactNode, useMemo, useRef } from 'react';
+import { Fragment, PropsWithChildren, ReactNode } from 'react';
 import { useSession } from 'contexts/SessionContext';
 import { DashboardAvatar } from 'widgets/Dashboard/components/DashboardAvatar';
+import NavigationSelect from './components/NavigationSelect';
+import MenuNavLink from './components/MenuNavLink';
 
-const messages = defineMessages({
-  settingsLinkLabel: {
-    id: 'components.DashboardSidebar.settingsLinkLabel',
-    description: 'label of the settings link',
-    defaultMessage: 'Settings',
-  },
-  responsiveNavLabel: {
-    id: 'components.DashboardSidebar.responsiveNavLabel',
-    description: 'a11y related label for select input used to navigate on responsive',
-    defaultMessage: 'Navigate to',
-  },
-});
-
-export enum DashboardAvatarPositionEnum {
-  CENTER = 'center',
-  THREE_QUARTER = 'three_quarter',
+export interface MenuLink {
+  to: string;
+  label: string;
+  component?: ReactNode;
 }
 
 export interface DashboardSidebarProps extends PropsWithChildren {
-  menuLinks: Record<string, string>[];
+  menuLinks: MenuLink[];
   header: string;
   subHeader: string;
   title?: string;
-  avatarPosition?: DashboardAvatarPositionEnum;
   avatar?: ReactNode;
 }
 
@@ -39,34 +25,15 @@ export const DashboardSidebar = ({
   subHeader,
   title,
   avatar,
-  avatarPosition = DashboardAvatarPositionEnum.CENTER,
 }: DashboardSidebarProps) => {
   const { user } = useSession();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const selectNav = useRef<HTMLSelectElement>(null);
   const classes = ['dashboard-sidebar'];
 
-  const selectedLink = useMemo(
-    () => menuLinks.find((link) => matchPath({ path: link.to, end: true }, location.pathname))?.to,
-    [location, menuLinks],
-  );
-
-  const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    navigate(event.target.value);
-    selectNav.current?.blur();
-  };
-
   return (
     <aside className={classes.join(' ')} data-testid="dashboard__sidebar">
       <div className="dashboard-sidebar__container">
         <header className="dashboard-sidebar__container__header">
-          <div
-            className={c('dashboard-sidebar__container__header__avatar', {
-              'dashboard-sidebar__container__header__avatar--three_quarter':
-                avatarPosition === DashboardAvatarPositionEnum.THREE_QUARTER,
-            })}
-          >
+          <div className="dashboard-sidebar__container__header__avatar">
             {avatar || <DashboardAvatar title={user!.username} />}
           </div>
           <h3>{header}</h3>
@@ -74,35 +41,17 @@ export const DashboardSidebar = ({
         </header>
         {title && <h4 className="dashboard-sidebar__container__title">{title}</h4>}
         <div className="dashboard-sidebar__container__responsive-nav">
-          <label htmlFor="dashboard-responsive-nav" className="offscreen">
-            <FormattedMessage {...messages.responsiveNavLabel} />
-          </label>
-          <select
-            ref={selectNav}
-            id="dashboard-responsive-nav"
-            value={selectedLink}
-            onChange={onSelectChange}
-            className="form-field__select-input"
-          >
-            {menuLinks.map((link) => (
-              <option key={link.to} value={link.to}>
-                {link.label}
-              </option>
-            ))}
-          </select>
+          <NavigationSelect menuLinks={menuLinks} />
         </div>
 
-        <ul>
-          {menuLinks.map((link) => (
-            <li
-              key={link.to}
-              className={selectedLink && selectedLink === link.to ? 'active' : undefined}
-            >
-              <NavLink to={link.to} end>
-                {link.label}
-              </NavLink>
-            </li>
-          ))}
+        <ul className="dashboard-sidebar__container__nav">
+          {menuLinks.map((link) =>
+            link.component ? (
+              <Fragment key={link.to}>{link.component}</Fragment>
+            ) : (
+              <MenuNavLink link={link} key={link.to} />
+            ),
+          )}
         </ul>
       </div>
       {children}

package/js/widgets/Dashboard/components/DashboardSidebar/utils.ts

@@ -0,0 +1,6 @@
+import { Location, matchPath, resolvePath } from 'react-router-dom';
+
+export const isMenuLinkActive = (to: string, location: Location) => {
+  const path = resolvePath(to).pathname;
+  return !!matchPath({ path, end: true }, location.pathname);
+};

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

@@ -0,0 +1,58 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Select, SelectProps } from '@openfun/cunningham-react';
+import { useEffect } from 'react';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { Spinner } from 'components/Spinner';
+
+export const messages = defineMessages({
+  organizationFilterLabel: {
+    defaultMessage: 'Organization',
+    description: 'Use as organization filter label',
+    id: 'components.ListFilterOrganization.organizationFilterLabel',
+  },
+});
+
+interface FilterOrganizationProps {
+  defaultValue?: string;
+  onChange: ({ organization_id }: { organization_id?: string }) => void;
+}
+
+const FilterOrganization = ({ defaultValue, onChange }: FilterOrganizationProps) => {
+  const intl = useIntl();
+  const {
+    items: organizations,
+    states: { isFetched },
+  } = useOrganizations();
+
+  const organizationOptions = organizations.map((organization) => ({
+    label: organization.title,
+    value: organization.id,
+  }));
+
+  const handleChange: SelectProps['onChange'] = (e) => {
+    const value = e.target.value as string;
+    onChange({ organization_id: value });
+  };
+
+  useEffect(() => {
+    if (isFetched && defaultValue === undefined) {
+      onChange({ organization_id: organizationOptions[0]?.value });
+    }
+  }, [defaultValue, isFetched]);
+
+  if (!isFetched) return <Spinner />;
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.organizationFilterLabel)}
+      options={organizationOptions}
+      defaultValue={defaultValue || organizationOptions[0].value}
+      onChange={handleChange}
+      disabled={!isFetched}
+      clearable={false}
+      searchable={true}
+    />
+  );
+};
+
+export default FilterOrganization;

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+const FiltersBar = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="dashboard__page__actions-row dashboard__page__actions-row--end">{children}</div>
+  );
+};
+
+export default FiltersBar;

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

@@ -10,6 +10,7 @@ import {
   DashboardSidebarProps,
 } from 'widgets/Dashboard/components/DashboardSidebar';
 import { useSession } from 'contexts/SessionContext';
+import { UserHelper } from 'utils/UserHelper';
 
 const messages = defineMessages({
   header: {
@@ -35,8 +36,9 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
     () =>
       [
         LearnerDashboardPaths.COURSES,
-        LearnerDashboardPaths.PREFERENCES,
         LearnerDashboardPaths.CERTIFICATES,
+        LearnerDashboardPaths.CONTRACTS,
+        LearnerDashboardPaths.PREFERENCES,
       ].map((path) => ({
         to: getRoutePath(path),
         label: getRouteLabel(path),
@@ -46,7 +48,7 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
   return (
     <DashboardSidebar
       menuLinks={links}
-      header={intl.formatMessage(messages.header, { name: user?.username })}
+      header={intl.formatMessage(messages.header, { name: user ? UserHelper.getName(user) : '' })}
       subHeader={intl.formatMessage(messages.subHeader)}
       {...props}
     />

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

@@ -1,7 +1,9 @@
-import { render, screen } from '@testing-library/react';
-import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import { Outlet } from 'react-router-dom';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import LocationDisplay from 'utils/test/LocationDisplay';
+import { render } from 'utils/test/render';
+import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import NavigateWithParams from '.';
 
 jest.mock('utils/context', () => ({
@@ -15,46 +17,35 @@ jest.mock('utils/indirection/window', () => ({
   },
 }));
 
-interface RenderTestRouterProps {
-  url?: string;
-}
-
-const renderTestRouter = ({ url = '/myTestId' }: RenderTestRouterProps = {}) => {
-  const routes = [
-    {
-      path: '/:testId',
-      element: (
-        <div>
-          <h1>NavigateWithParams test</h1>
-          <Outlet />
-        </div>
-      ),
-      children: [
-        {
-          index: true,
-          element: <NavigateWithParams to="/:testId/childRoute" replace />,
-        },
-        {
-          path: '/:testId/childRoute',
-          element: (
-            <div>
-              <h2>NavigateWithParams child route</h2>
-              <LocationDisplay />
-            </div>
-          ),
-        },
-      ],
-    },
-  ];
-
-  const router = createMemoryRouter(routes, { initialEntries: [url] });
-
-  return render(<RouterProvider router={router} />);
-};
-
 describe('<NavigateWithParams />', () => {
   it('should navigate with parent route params', async () => {
-    renderTestRouter();
+    const routes = [
+      {
+        path: '/:testId',
+        element: (
+          <div>
+            <h1>NavigateWithParams test</h1>
+            <Outlet />
+          </div>
+        ),
+        children: [
+          {
+            index: true,
+            element: <NavigateWithParams to="/:testId/childRoute" replace />,
+          },
+          {
+            path: '/:testId/childRoute',
+            element: (
+              <div>
+                <h2>NavigateWithParams child route</h2>
+                <LocationDisplay />
+              </div>
+            ),
+          },
+        ],
+      },
+    ];
+    render(<RouterWrapper routes={routes} initialEntries={['/myTestId']} />, { wrapper: null });
     expect(await screen.findByRole('heading', { name: /NavigateWithParams test/ }));
     expect(screen.getByRole('heading', { name: /NavigateWithParams child route/ }));
     expect(screen.getByTestId('test-location-display')).toHaveTextContent('/myTestId/childRoute');

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

@@ -1,6 +1,6 @@
 import { MouseEvent, useRef } from 'react';
 import { useHref, useNavigate } from 'react-router-dom';
-import { Button, ButtonProps } from 'components/Button';
+import { Button, ButtonProps } from '@openfun/cunningham-react';
 import { location } from 'utils/indirection/window';
 import isTestEnv from 'utils/test/isTestEnv';
 
@@ -13,6 +13,7 @@ export const RouterButton = (props: ButtonProps) => {
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   return (
     <Button
+      className={props.className}
       ref={ref}
       href={hrefBase + props.href}
       onClick={(event: MouseEvent) => {

package/js/widgets/Dashboard/components/Signature/DummyContractPlaceholder.tsx

@@ -0,0 +1,25 @@
+export const DummyContractPlaceholder = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="575"
+      height="611"
+      fill="none"
+      data-testid="dummy-contract-placeholder"
+    >
+      <path
+        fill="#838383"
+        d="M146.241 55V36.1h3.618l8.046 13.338h-1.917l7.911-13.338h3.591l.054 18.9h-4.104l-.027-12.609h.756l-6.318 10.611h-1.971l-6.453-10.611h.918V55h-4.104Zm27.326 5.454a7.374 7.374 0 0 1-2.241-.351c-.738-.234-1.341-.558-1.809-.972l1.539-2.997c.324.288.693.513 1.107.675a3.6 3.6 0 0 0 1.269.243c.594 0 1.062-.144 1.404-.432.36-.27.684-.729.972-1.377l.756-1.782.324-.459 5.211-12.528h4.05l-6.561 15.417c-.468 1.17-1.008 2.088-1.62 2.754-.594.666-1.26 1.134-1.998 1.404-.72.27-1.521.405-2.403.405Zm2.484-4.887-6.48-15.093h4.347l5.022 12.15-2.889 2.943Zm25.7-.351c-1.368 0-2.601-.306-3.699-.918a7.033 7.033 0 0 1-2.619-2.619c-.63-1.116-.945-2.43-.945-3.942 0-1.53.315-2.853.945-3.969a6.833 6.833 0 0 1 2.619-2.592c1.098-.612 2.331-.918 3.699-.918 1.224 0 2.295.27 3.213.81.918.54 1.629 1.359 2.133 2.457.504 1.098.756 2.502.756 4.212 0 1.692-.243 3.096-.729 4.212-.486 1.098-1.188 1.917-2.106 2.457-.9.54-1.989.81-3.267.81Zm.729-3.456c.684 0 1.305-.162 1.863-.486a3.482 3.482 0 0 0 1.323-1.377c.342-.612.513-1.332.513-2.16 0-.846-.171-1.566-.513-2.16a3.482 3.482 0 0 0-1.323-1.377 3.642 3.642 0 0 0-1.863-.486c-.702 0-1.332.162-1.89.486a3.675 3.675 0 0 0-1.35 1.377c-.324.594-.486 1.314-.486 2.16 0 .828.162 1.548.486 2.16a3.675 3.675 0 0 0 1.35 1.377c.558.324 1.188.486 1.89.486Zm3.807 3.24v-2.97l.081-4.32-.27-4.293v-8.451h4.212V55h-4.023Zm14.051.216c-1.206 0-2.286-.234-3.24-.702-.936-.468-1.665-1.179-2.187-2.133-.522-.972-.783-2.205-.783-3.699v-8.208h4.212v7.587c0 1.206.252 2.097.756 2.673.522.558 1.251.837 2.187.837.648 0 1.224-.135 1.728-.405.504-.288.9-.72 1.188-1.296.288-.594.432-1.332.432-2.214v-7.182h4.212V55h-3.996v-3.996l.729 1.161c-.486 1.008-1.206 1.773-2.16 2.295a6.388 6.388 0 0 1-3.078.756Zm31.01-14.958c1.152 0 2.169.234 3.051.702.9.45 1.602 1.152 2.106 2.106.522.936.783 2.142.783 3.618V55h-4.212v-7.668c0-1.17-.243-2.034-.729-2.592-.486-.558-1.17-.837-2.052-.837-.612 0-1.161.144-1.647.432-.486.27-.864.684-1.134 1.242-.27.558-.405 1.269-.405 2.133V55h-4.212v-7.668c0-1.17-.243-2.034-.729-2.592-.468-.558-1.143-.837-2.025-.837-.612 0-1.161.144-1.647.432-.486.27-.864.684-1.134 1.242-.27.558-.405 1.269-.405 2.133V55h-4.212V40.474h4.023v3.969l-.756-1.161c.504-.99 1.215-1.737 2.133-2.241.936-.522 1.998-.783 3.186-.783 1.332 0 2.493.342 3.483 1.026 1.008.666 1.674 1.692 1.998 3.078l-1.485-.405a5.837 5.837 0 0 1 2.322-2.7c1.08-.666 2.313-.999 3.699-.999Zm28.318 0c1.152 0 2.169.234 3.051.702.9.45 1.602 1.152 2.106 2.106.522.936.783 2.142.783 3.618V55h-4.212v-7.668c0-1.17-.243-2.034-.729-2.592-.486-.558-1.17-.837-2.052-.837-.612 0-1.161.144-1.647.432-.486.27-.864.684-1.134 1.242-.27.558-.405 1.269-.405 2.133V55h-4.212v-7.668c0-1.17-.243-2.034-.729-2.592-.468-.558-1.143-.837-2.025-.837-.612 0-1.161.144-1.647.432-.486.27-.864.684-1.134 1.242-.27.558-.405 1.269-.405 2.133V55h-4.212V40.474h4.023v3.969l-.756-1.161c.504-.99 1.215-1.737 2.133-2.241.936-.522 1.998-.783 3.186-.783 1.332 0 2.493.342 3.483 1.026 1.008.666 1.674 1.692 1.998 3.078l-1.485-.405a5.837 5.837 0 0 1 2.322-2.7c1.08-.666 2.313-.999 3.699-.999Zm11.288 20.196a7.374 7.374 0 0 1-2.241-.351c-.738-.234-1.341-.558-1.809-.972l1.539-2.997c.324.288.693.513 1.107.675a3.6 3.6 0 0 0 1.269.243c.594 0 1.062-.144 1.404-.432.36-.27.684-.729.972-1.377l.756-1.782.324-.459 5.211-12.528h4.05l-6.561 15.417c-.468 1.17-1.008 2.088-1.62 2.754-.594.666-1.26 1.134-1.998 1.404-.72.27-1.521.405-2.403.405Zm2.484-4.887-6.48-15.093h4.347l5.022 12.15-2.889 2.943Zm26.483-.351c-1.566 0-2.961-.315-4.185-.945-1.224-.648-2.187-1.539-2.889-2.673-.684-1.134-1.026-2.421-1.026-3.861 0-1.458.342-2.745 1.026-3.861.702-1.134 1.665-2.016 2.889-2.646 1.224-.648 2.619-.972 4.185-.972 1.53 0 2.862.324 3.996.972a5.773 5.773 0 0 1 2.511 2.727l-3.267 1.755c-.378-.684-.855-1.188-1.431-1.512a3.591 3.591 0 0 0-1.836-.486c-.72 0-1.368.162-1.944.486a3.613 3.613 0 0 0-1.377 1.377c-.324.594-.486 1.314-.486 2.16 0 .846.162 1.566.486 2.16a3.613 3.613 0 0 0 1.377 1.377c.576.324 1.224.486 1.944.486.666 0 1.278-.153 1.836-.459.576-.324 1.053-.837 1.431-1.539l3.267 1.782a5.942 5.942 0 0 1-2.511 2.727c-1.134.63-2.466.945-3.996.945Zm15.66 0c-1.548 0-2.925-.324-4.131-.972a7.566 7.566 0 0 1-2.835-2.646c-.684-1.134-1.026-2.421-1.026-3.861 0-1.458.342-2.745 1.026-3.861a7.292 7.292 0 0 1 2.835-2.646c1.206-.648 2.583-.972 4.131-.972 1.53 0 2.898.324 4.104.972 1.206.63 2.151 1.503 2.835 2.619.684 1.116 1.026 2.412 1.026 3.888 0 1.44-.342 2.727-1.026 3.861-.684 1.116-1.629 1.998-2.835 2.646-1.206.648-2.574.972-4.104.972Zm0-3.456c.702 0 1.332-.162 1.89-.486a3.482 3.482 0 0 0 1.323-1.377c.324-.612.486-1.332.486-2.16 0-.846-.162-1.566-.486-2.16a3.482 3.482 0 0 0-1.323-1.377c-.558-.324-1.188-.486-1.89-.486s-1.332.162-1.89.486a3.675 3.675 0 0 0-1.35 1.377c-.324.594-.486 1.314-.486 2.16 0 .828.162 1.548.486 2.16a3.675 3.675 0 0 0 1.35 1.377c.558.324 1.188.486 1.89.486Zm19.609-11.502c1.152 0 2.178.234 3.078.702.918.45 1.638 1.152 2.16 2.106.522.936.783 2.142.783 3.618V55h-4.212v-7.668c0-1.17-.261-2.034-.783-2.592-.504-.558-1.224-.837-2.16-.837-.666 0-1.269.144-1.809.432-.522.27-.936.693-1.242 1.269-.288.576-.432 1.314-.432 2.214V55h-4.212V40.474h4.023v4.023l-.756-1.215a5.38 5.38 0 0 1 2.241-2.241c.972-.522 2.079-.783 3.321-.783Zm15.779 14.958c-1.71 0-3.042-.432-3.996-1.296-.954-.882-1.431-2.187-1.431-3.915V37.261h4.212v12.69c0 .612.162 1.089.486 1.431.324.324.765.486 1.323.486.666 0 1.233-.18 1.701-.54l1.134 2.97c-.432.306-.954.54-1.566.702a7.881 7.881 0 0 1-1.863.216Zm-7.668-11.178v-3.24h10.071v3.24h-10.071ZM376.762 55V40.474h4.023v4.104l-.567-1.188c.432-1.026 1.125-1.8 2.079-2.322.954-.54 2.115-.81 3.483-.81v3.888a4.93 4.93 0 0 0-.486-.027 3.705 3.705 0 0 0-.459-.027c-1.152 0-2.088.333-2.808.999-.702.648-1.053 1.665-1.053 3.051V55h-4.212Zm19.484 0v-2.835l-.27-.621v-5.076c0-.9-.279-1.602-.837-2.106-.54-.504-1.377-.756-2.511-.756-.774 0-1.539.126-2.295.378-.738.234-1.368.558-1.89.972l-1.512-2.943c.792-.558 1.746-.99 2.862-1.296a12.809 12.809 0 0 1 3.402-.459c2.214 0 3.933.522 5.157 1.566 1.224 1.044 1.836 2.673 1.836 4.887V55h-3.942Zm-4.428.216c-1.134 0-2.106-.189-2.916-.567-.81-.396-1.431-.927-1.863-1.593a4.03 4.03 0 0 1-.648-2.241c0-.864.207-1.62.621-2.268.432-.648 1.107-1.152 2.025-1.512.918-.378 2.115-.567 3.591-.567h3.861v2.457h-3.402c-.99 0-1.674.162-2.052.486-.36.324-.54.729-.54 1.215 0 .54.207.972.621 1.296.432.306 1.017.459 1.755.459.702 0 1.332-.162 1.89-.486.558-.342.963-.837 1.215-1.485l.648 1.944c-.306.936-.864 1.647-1.674 2.133-.81.486-1.854.729-3.132.729Zm19.307 0c-1.566 0-2.961-.315-4.185-.945-1.224-.648-2.187-1.539-2.889-2.673-.684-1.134-1.026-2.421-1.026-3.861 0-1.458.342-2.745 1.026-3.861.702-1.134 1.665-2.016 2.889-2.646 1.224-.648 2.619-.972 4.185-.972 1.53 0 2.862.324 3.996.972a5.773 5.773 0 0 1 2.511 2.727l-3.267 1.755c-.378-.684-.855-1.188-1.431-1.512a3.591 3.591 0 0 0-1.836-.486c-.72 0-1.368.162-1.944.486a3.613 3.613 0 0 0-1.377 1.377c-.324.594-.486 1.314-.486 2.16 0 .846.162 1.566.486 2.16a3.613 3.613 0 0 0 1.377 1.377c.576.324 1.224.486 1.944.486.666 0 1.278-.153 1.836-.459.576-.324 1.053-.837 1.431-1.539l3.267 1.782a5.942 5.942 0 0 1-2.511 2.727c-1.134.63-2.466.945-3.996.945Zm15.083 0c-1.71 0-3.042-.432-3.996-1.296-.954-.882-1.431-2.187-1.431-3.915V37.261h4.212v12.69c0 .612.162 1.089.486 1.431.324.324.765.486 1.323.486.666 0 1.233-.18 1.701-.54l1.134 2.97c-.432.306-.954.54-1.566.702a7.881 7.881 0 0 1-1.863.216Zm-7.668-11.178v-3.24h10.071v3.24H418.54Z"
+      />
+      <path
+        fill="#D9D9D9"
+        d="M31 96h514v15H31zM31 119h500v15H31zM31 142h510v15H31zM31 165h382v15H31zM31 316h514v15H31zM31 339h500v15H31zM31 362h510v15H31zM31 385h382v15H31zM31 206h514v15H31zM31 229h471v15H31zM31 252h493v15H31zM31 275h471v15H31zM31 434h300v15H31zM31 455h136v15H31z"
+      />
+      <path
+        fill="#B8B8B8"
+        d="M515 563h-60v-10.908h60V563Zm-26.82-51.294 11.25 10.226-27.18 24.706H461v-10.226l27.18-24.706Zm14.46 7.308-11.25-10.226 5.49-4.99c1.17-1.064 3.06-1.064 4.23 0l7.02 6.381c1.17 1.063 1.17 2.781 0 3.845l-5.49 4.99Z"
+      />
+      <rect width="574" height="610" x=".5" y=".5" stroke="#D9D9D9" rx="1.5" />
+    </svg>
+  );
+};

package/js/widgets/Dashboard/components/Signature/SignatureDummy.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Button, Loader } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { SignatureProps } from 'components/ContractFrame';
+import { DummyContractPlaceholder } from 'widgets/Dashboard/components/Signature/DummyContractPlaceholder';
+import { CONTRACT_SETTINGS } from 'settings';
+
+const messages = defineMessages({
+  button: {
+    defaultMessage: 'Sign',
+    description: 'Button displayed below the dummy contract.',
+    id: 'components.Dashboard.Signature.SignatureDummy.button',
+  },
+  signing: {
+    defaultMessage: 'Signing the contract ...',
+    description: 'Message displayed after signing the dummy contract.',
+    id: 'components.Dashboard.Signature.SignatureDummy.signing',
+  },
+});
+
+enum SignatureDummySteps {
+  SIGNING,
+  SIGNING_LOADING,
+}
+
+export const SignatureDummy = ({ onDone }: SignatureProps) => {
+  const [step, setStep] = useState(SignatureDummySteps.SIGNING);
+
+  const sign = () => {
+    setStep(SignatureDummySteps.SIGNING_LOADING);
+    setTimeout(() => {
+      onDone();
+    }, CONTRACT_SETTINGS.dummySignatureSignTimeout);
+  };
+
+  return (
+    <>
+      {step === SignatureDummySteps.SIGNING && (
+        <div className="ContractFrame__dummy">
+          <DummyContractPlaceholder />
+          <Button onClick={sign}>
+            <FormattedMessage {...messages.button} />
+          </Button>
+        </div>
+      )}
+      {step === SignatureDummySteps.SIGNING_LOADING && (
+        <div className="ContractFrame__loading-container">
+          <h3 className="ContractFrame__caption">
+            <FormattedMessage {...messages.signing} />
+          </h3>
+          <Loader />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SignatureDummy;

package/js/widgets/Dashboard/components/Signature/SignatureLexPersona.tsx

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { SignatureProps } from 'components/ContractFrame';
+import 'components/ContractFrame/iframe-manager.js';
+import { handle } from 'utils/errors/handle';
+
+declare let iframeManager: any;
+
+enum LexPersonaStatus {
+  canceled = 'canceled',
+  expired = 'expired',
+  request = 'request',
+}
+
+const messages = defineMessages({
+  errorStatus: {
+    defaultMessage:
+      'An error happened while signing the contract with the following status: {status}. Please refresh to try again.',
+    description:
+      'Message displayed inside the contract signin modal when Lex Persona iframe returned a non null status.',
+    id: 'components.Dashboard.Signature.SignatureLexPersona.errorStatus',
+  },
+  error: {
+    defaultMessage: 'An error happened while signing the contract. Please try again later.',
+    description:
+      'Message displayed inside the contract signin modal when Lex Persona iframe returned an error.',
+    id: 'components.Dashboard.Signature.SignatureLexPersona.error',
+  },
+});
+
+export const SignatureLexPersona = ({ onDone, onError, invitationLink }: SignatureProps) => {
+  const intl = useIntl();
+  useEffect(() => {
+    iframeManager.open(invitationLink).then(
+      (status: LexPersonaStatus) => {
+        if (status) {
+          onError(intl.formatMessage(messages.errorStatus, { status }));
+        } else {
+          onDone();
+        }
+      },
+      (error: any) => {
+        handle(error);
+        onError(intl.formatMessage(messages.error));
+      },
+    );
+
+    // This is used to set an id to the frame in order to style it.
+    // The library does not offer any way to do it natively.
+    setTimeout(() => {
+      // eslint-disable-next-line compat/compat
+      const invitationUrl = new URL(invitationLink);
+
+      const iframes = document.querySelectorAll('iframe');
+      const iframe = Array.from(iframes).find((element) => {
+        // eslint-disable-next-line compat/compat
+        const iframeUrl = new URL(element.src);
+        return iframeUrl.origin === invitationUrl.origin;
+      });
+
+      if (!iframe) {
+        handle(new Error('Cannot find iframe'));
+        return;
+      }
+      iframe.setAttribute('id', 'lex-persona');
+    });
+  }, []);
+
+  return null;
+};
+
+export default SignatureLexPersona;