richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/Badge/index.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { PropsWithChildren } from 'react/ts5.0';
+
+type BadgeProps = PropsWithChildren<{
+  color?: 'primary' | 'secondary' | 'tertiary';
+}>;
+const Badge = ({ children, color }: BadgeProps) => (
+  <div
+    data-testid="badge"
+    className={classNames('category-badge', {
+      [`category-badge--${color}`]: Boolean(color),
+    })}
+  >
+    <span className="category-badge__title">{children}</span>
+  </div>
+);
+
+export default Badge;

package/js/components/Banner/index.tsx

@@ -1,3 +1,4 @@
+import { uniqueId } from 'lodash-es';
 import { useMemo } from 'react';
 
 export enum BannerType {
@@ -13,6 +14,10 @@ interface BannerProps {
   rounded?: boolean;
 }
 
+export const getBannerTestId = (message: string, type: BannerType) => {
+  return `banner-${type}-${uniqueId(message)}`;
+};
+
 const Banner = ({ message, rounded, type = BannerType.INFO }: BannerProps) => {
   const className = useMemo(
     (): string => ['banner', `banner--${type}`, ...(rounded ? ['banner--rounded'] : [])].join(' '),
@@ -20,7 +25,7 @@ const Banner = ({ message, rounded, type = BannerType.INFO }: BannerProps) => {
   );
 
   return (
-    <div className={className}>
+    <div className={className} data-testid={getBannerTestId(message, type)}>
       <p className="banner__message">{message}</p>
     </div>
   );

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -0,0 +1,332 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PropsWithChildren } from 'react';
+import { act } from 'react-dom/test-utils';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { Deferred } from 'utils/test/deferred';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpError } from 'utils/errors/HttpError';
+import { CONTRACT_SETTINGS } from 'settings';
+import AbstractContractFrame from './AbstractContractFrame';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('settings', () => ({
+  ...jest.requireActual('settings'),
+  CONTRACT_SETTINGS: {
+    ...jest.requireActual('settings').CONTRACT_SETTINGS,
+    pollInterval: 10,
+    dummySignatureSignTimeout: 10,
+  },
+}));
+
+describe('<AbstractContractFrame />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <JoanieSessionProvider>{children}</JoanieSessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // SessionProvider api calls
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should render an ContractFrame and close it', async () => {
+    const mockOnClose = jest.fn();
+    const mockGetInvitationLink = jest.fn(
+      async () => 'https://dummysignaturebackend.fr/contract/1/sign',
+    );
+    const mockCheckSignature = jest.fn(async () => ({ isSigned: true }));
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen={true}
+            onDone={jest.fn()}
+            onClose={mockOnClose}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).toHaveBeenCalledTimes(1);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Close dialog' }));
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('should not render the modal when `isOpen` is false', async () => {
+    const mockGetInvitationLink = jest.fn(
+      async () => 'https://dummysignaturebackend.fr/contract/1/sign',
+    );
+    const mockCheckSignature = jest.fn(async () => ({ isSigned: true }));
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen={false}
+            onDone={jest.fn()}
+            onClose={jest.fn()}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).not.toHaveBeenCalled();
+    expect(screen.queryByTestId('dashboard-contract-frame')).not.toBeInTheDocument();
+  });
+
+  it('should render the modal and allow user to complete signature process', async () => {
+    const user = userEvent.setup();
+    const mockGetInvitationLink = jest.fn(
+      async () => 'https://dummysignaturebackend.fr/contract/1/sign',
+    );
+    const checkSignatureDeferred = new Deferred<{ isSigned: boolean }>();
+    const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
+    const mockOnDone = jest.fn();
+    const mockOnClose = jest.fn();
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen
+            onDone={mockOnDone}
+            onClose={mockOnClose}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).toHaveBeenCalledTimes(1);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    // Dummy signature interface should have been rendered
+    let button = screen.getByRole('button', { name: 'Sign' });
+    await user.click(button);
+
+    // The dummy interface should be loading
+    screen.getByRole('heading', { name: 'Signing the contract ...' });
+
+    // Then the signature check polling should be started
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    checkSignatureDeferred.resolve({ isSigned: true });
+    await waitFor(() => {
+      expect(mockCheckSignature).toHaveBeenCalledTimes(1);
+    });
+
+    // As the first call confirm the document has been signed,
+    // the ContractFrame should go to the finish step and the onDone callback should
+    // have been called
+    expect(mockOnDone).toHaveBeenCalledTimes(1);
+    await screen.findByRole('heading', { name: 'Congratulations!' });
+    button = screen.getByRole('button', { name: 'Next' });
+    await user.click(button);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('retrieves invitation link but fails during signature checking', async () => {
+    const user = userEvent.setup();
+    const mockGetInvitationLink = jest.fn(
+      async () => 'https://dummysignaturebackend.fr/contract/1/sign',
+    );
+    const checkSignatureDeferred = new Deferred<{ isSigned: boolean }>();
+    const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
+    const mockOnDone = jest.fn();
+    const mockOnClose = jest.fn();
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen={true}
+            onDone={mockOnDone}
+            onClose={mockOnClose}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).toHaveBeenCalledTimes(1);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    // Dummy signature interface should have been rendered
+    let button = screen.getByRole('button', { name: 'Sign' });
+    await user.click(button);
+
+    // The dummy interface should be loading
+    screen.getByRole('heading', { name: 'Signing the contract ...' });
+
+    // Then the signature check polling should be started
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    checkSignatureDeferred.reject(new HttpError(500, 'Interval server error'));
+    await waitFor(() => {
+      expect(mockCheckSignature).toHaveBeenCalledTimes(1);
+    });
+
+    // As the first call confirm the document has been signed,
+    // the ContractFrame should go to the finish step and the onDone callback should
+    // have been called
+    await expectBannerError('An error happened while verifying signature. Please come back later.');
+    expect(mockOnDone).not.toHaveBeenCalled();
+    button = screen.getByRole('button', { name: 'Close dialog' });
+    await user.click(button);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('retrieves invitation link but exceeds polling max attemps', async () => {
+    const user = userEvent.setup();
+    const mockGetInvitationLink = jest.fn(
+      async () => 'https://dummysignaturebackend.fr/contract/1/sign',
+    );
+    const checkSignatureDeferred = new Deferred<{ isSigned: boolean }>();
+    const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
+    const mockOnDone = jest.fn();
+    const mockOnClose = jest.fn();
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen={true}
+            onDone={mockOnDone}
+            onClose={mockOnClose}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).toHaveBeenCalledTimes(1);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    // Dummy signature interface should have been rendered
+    let button = screen.getByRole('button', { name: 'Sign' });
+    await user.click(button);
+
+    // The dummy interface should be loading
+    screen.getByRole('heading', { name: 'Signing the contract ...' });
+
+    // Then the signature check polling should be started
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
+    });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    checkSignatureDeferred.resolve({ isSigned: false });
+    await waitFor(() => {
+      expect(mockCheckSignature).toHaveBeenCalledTimes(CONTRACT_SETTINGS.pollLimit);
+    });
+
+    // As the first call confirm the document has been signed,
+    // the ContractFrame should go to the finish step and the onDone callback should
+    // have been called
+    await expectBannerError(
+      'The signature is taking more time than expected ... please come back later.',
+    );
+    expect(mockOnDone).not.toHaveBeenCalled();
+    button = screen.getByRole('button', { name: 'Close dialog' });
+    await user.click(button);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('fails to retrieve invitation link', async () => {
+    const user = userEvent.setup();
+    const mockGetInvitationLink = jest.fn(async () => {
+      throw new HttpError(404, 'Not found');
+    });
+    const checkSignatureDeferred = new Deferred<{ isSigned: boolean }>();
+    const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
+    const mockOnDone = jest.fn();
+    const mockOnClose = jest.fn();
+
+    await act(async () => {
+      render(
+        <Wrapper>
+          <AbstractContractFrame
+            getInvitationLink={mockGetInvitationLink}
+            checkSignature={mockCheckSignature}
+            isOpen={true}
+            onDone={mockOnDone}
+            onClose={mockOnClose}
+          />
+        </Wrapper>,
+      );
+    });
+
+    expect(mockGetInvitationLink).toHaveBeenCalledTimes(1);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    await expectBannerError(
+      'An error happened while initializing the signature process. Please retry later.',
+    );
+
+    // Dummy signature interface should have been rendered
+    const button = screen.getByRole('button', { name: 'Close dialog' });
+    await user.click(button);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+});

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -0,0 +1,289 @@
+import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { Button, Loader } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Modal } from 'components/Modal';
+import { Maybe } from 'types/utils';
+import { CONTRACT_SETTINGS } from 'settings';
+import Banner, { BannerType } from 'components/Banner';
+import { SuccessIcon } from 'components/SuccessIcon';
+
+/*
+  /!\ This component should not be used directly, only its implementations should be.
+  Take a look at:
+    - ./OrganizationContractFrame.tsx
+    - ./LearnerContractFrame.tsx
+*/
+
+const LazySignatureDummy = lazy(
+  () => import('widgets/Dashboard/components/Signature/SignatureDummy'),
+);
+const LazySignatureLexPersona = lazy(
+  () => import('widgets/Dashboard/components/Signature/SignatureLexPersona'),
+);
+
+export const messages = defineMessages({
+  errorSubmitForSignature: {
+    defaultMessage:
+      'An error happened while initializing the signature process. Please retry later.',
+    description: 'Message displayed inside the contract signin modal while an error occurred.',
+    id: 'components.DashboardItem.Order.ContractFrame.errorSubmitForSignature',
+  },
+  errorMaxPolling: {
+    defaultMessage: 'The signature is taking more time than expected ... please come back later.',
+    description:
+      'Message displayed inside the contract signin modal if the order polling has reached its maximum attempts.',
+    id: 'components.DashboardItem.Order.ContractFrame.errorMaxPolling',
+  },
+  errorPolling: {
+    defaultMessage: 'An error happened while verifying signature. Please come back later.',
+    description:
+      'Message displayed inside the contract signin modal if the order polling failed a request.',
+    id: 'components.DashboardItem.Order.ContractFrame.errorPolling',
+  },
+  loadingContract: {
+    defaultMessage: 'Loading your contract ...',
+    description: 'Message displayed inside the contract signin modal when loading the contract.',
+    id: 'components.DashboardItem.Order.ContractFrame.loadingContract',
+  },
+  polling: {
+    defaultMessage: 'Verifying signature ...',
+    description: 'Message displayed inside the contract signin modal when polling the order.',
+    id: 'components.DashboardItem.Order.ContractFrame.polling',
+  },
+  pollingDescription: {
+    defaultMessage:
+      'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+    description: 'Message displayed inside the contract signin modal when polling the order.',
+    id: 'components.DashboardItem.Order.ContractFrame.pollingDescription',
+  },
+  finishedCaption: {
+    defaultMessage: 'Congratulations!',
+    description: 'Title displayed inside the contract signin modal when the contract is signed.',
+    id: 'components.DashboardItem.Order.ContractFrame.finishedCaption',
+  },
+  finishedDescription: {
+    defaultMessage:
+      'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
+    description: 'Message displayed inside the contract signin modal when the contract is signed.',
+    id: 'components.DashboardItem.Order.ContractFrame.finishedDescription',
+  },
+  finishedButton: {
+    defaultMessage: 'Next',
+    description: 'Button displayed inside the contract signin modal when the contract is signed.',
+    id: 'components.DashboardItem.Order.ContractFrame.finishedButton',
+  },
+});
+
+const DUMMY_REGEX = /https:\/\/dummysignaturebackend.fr/;
+
+enum SignatureType {
+  LEX = 'lex',
+  DUMMY = 'dummy',
+}
+
+enum ContractSteps {
+  LOADING_CONTRACT,
+  SIGNING,
+  POLLING,
+  FINISHED,
+  ERROR,
+  NONE,
+}
+
+export interface AbstractProps {
+  isOpen: boolean;
+  onDone?: () => void;
+  onClose?: () => void;
+}
+
+export interface Props extends AbstractProps {
+  getInvitationLink: () => Promise<string>;
+  checkSignature: () => Promise<{ isSigned: boolean }>;
+}
+
+type FrameContentProps = Omit<Props, 'isOpen'>;
+
+export interface SignatureProps {
+  onDone: () => void;
+  onError: (error: string) => void;
+  invitationLink: string;
+}
+
+const AbstractContractFrame = ({ isOpen, ...props }: Props) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      shouldCloseOnOverlayClick={false}
+      shouldCloseOnEsc={false}
+      onRequestClose={props.onClose}
+    >
+      <ContractFrameContent {...props} />
+    </Modal>
+  );
+};
+
+const ContractFrameContent = ({
+  getInvitationLink,
+  checkSignature,
+  onClose,
+  onDone,
+}: FrameContentProps) => {
+  const intl = useIntl();
+  const [step, setStep] = useState(ContractSteps.LOADING_CONTRACT);
+  const [signatureType, setSignatureType] = useState<SignatureType>();
+  const [invitationLink, setInvitationLink] = useState<Maybe<string>>();
+  const [error, setError] = useState<Maybe<string>>();
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const setErrored = (e: string) => {
+    setStep(ContractSteps.ERROR);
+    setError(e);
+  };
+
+  const onSigned = () => {
+    startStepPoll();
+  };
+
+  const onSignatureError = (e: string) => {
+    setErrored(e);
+  };
+
+  /*
+    1. Start the signature process.
+       Retrieve the signature link then go to the signature step.
+  */
+  const start = async () => {
+    try {
+      const link = await getInvitationLink();
+      startStepSign(link);
+    } catch (e) {
+      setErrored(intl.formatMessage(messages.errorSubmitForSignature));
+    }
+  };
+
+  /*
+    2. Instantiate the right signature interface according to the invitation link.
+       Then go to signing step.
+  */
+  const startStepSign = async (signatureLink: string) => {
+    setInvitationLink(signatureLink);
+    if (signatureLink.match(DUMMY_REGEX)) {
+      // Nothing to do, in dummy mode submitting for signature automatically signs the contract.
+      setSignatureType(SignatureType.DUMMY);
+    } else {
+      // Open iframe then wait for it to close.
+      setSignatureType(SignatureType.LEX);
+    }
+    setStep(ContractSteps.SIGNING);
+  };
+
+  /*
+    3. Once the signature is done, start the polling step.
+       Poll the backend until it has been notified by signature provided.
+       Then, when it's done, finish the signature process.
+  */
+  const startStepPoll = async () => {
+    setStep(ContractSteps.POLLING);
+    let round = 0;
+
+    const poll = async () => {
+      if (round >= CONTRACT_SETTINGS.pollLimit) {
+        timeoutRef.current = undefined;
+        setErrored(intl.formatMessage(messages.errorMaxPolling));
+      } else {
+        try {
+          const { isSigned } = await checkSignature();
+          if (isSigned) {
+            timeoutRef.current = undefined;
+            finish();
+          } else {
+            round++;
+            timeoutRef.current = setTimeout(poll, CONTRACT_SETTINGS.pollInterval);
+          }
+        } catch (e) {
+          setErrored(intl.formatMessage(messages.errorPolling));
+        }
+      }
+    };
+
+    poll();
+  };
+
+  /*
+    4. Finish the signature process.
+       And exec the onDone callback if there is.
+  */
+  const finish = () => {
+    setStep(ContractSteps.FINISHED);
+    onDone?.();
+  };
+
+  const renderLoadingContract = () => {
+    return (
+      <div className="ContractFrame__loading-container">
+        <h3 className="ContractFrame__caption">
+          <FormattedMessage {...messages.loadingContract} />
+        </h3>
+        <Loader />
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    start();
+  }, []);
+
+  return (
+    <div className="ContractFrame__modal-body" data-testid="dashboard-contract-frame">
+      {error && <Banner message={error} type={BannerType.ERROR} />}
+      {step === ContractSteps.LOADING_CONTRACT && renderLoadingContract()}
+      {step === ContractSteps.SIGNING && (
+        <Suspense fallback={renderLoadingContract()}>
+          {signatureType === SignatureType.DUMMY && (
+            <LazySignatureDummy
+              onDone={onSigned}
+              onError={onSignatureError}
+              invitationLink={invitationLink!}
+            />
+          )}
+          {signatureType === SignatureType.LEX && (
+            <LazySignatureLexPersona
+              onDone={onSigned}
+              onError={onSignatureError}
+              invitationLink={invitationLink!}
+            />
+          )}
+        </Suspense>
+      )}
+      {step === ContractSteps.POLLING && (
+        <div className="ContractFrame__loading-container">
+          <div>
+            <h3 className="ContractFrame__caption">
+              <FormattedMessage {...messages.polling} />
+            </h3>
+            <p className="ContractFrame__content">
+              <FormattedMessage {...messages.pollingDescription} />
+            </p>
+          </div>
+          <Loader />
+        </div>
+      )}
+      {step === ContractSteps.FINISHED && (
+        <div className="ContractFrame__finished">
+          <SuccessIcon />
+          <h3 className="ContractFrame__caption">
+            <FormattedMessage {...messages.finishedCaption} />
+          </h3>
+          <p className="ContractFrame__content">
+            <FormattedMessage {...messages.finishedDescription} />
+          </p>
+          <Button onClick={onClose}>
+            <FormattedMessage {...messages.finishedButton} />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AbstractContractFrame;