richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/{widgets/CourseProductItem → components/SaleTunnel}/components/SaleTunnelStepValidation/index.tsx

@@ -1,6 +1,8 @@
 import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
-import type * as Joanie from 'types/Joanie';
+import { Button } from '@openfun/cunningham-react';
+import { useSaleTunnelContext } from 'components/SaleTunnel/context';
 import TargetCourseDetail from './TargetCourseDetail';
+import CourseRunsList from './CourseRunsList';
 
 const messages = defineMessages({
   includingVAT: {
@@ -17,10 +19,11 @@ const messages = defineMessages({
 
 interface SaleTunnelStepValidationProps {
   next: () => void;
-  product: Joanie.Product;
 }
 
-export const SaleTunnelStepValidation = ({ product, next }: SaleTunnelStepValidationProps) => {
+export const SaleTunnelStepValidation = ({ next }: SaleTunnelStepValidationProps) => {
+  const { product, enrollment } = useSaleTunnelContext();
+
   return (
     <section className="SaleTunnelStepValidation">
       <header className="SaleTunnelStepValidation__header">
@@ -36,21 +39,42 @@ export const SaleTunnelStepValidation = ({ product, next }: SaleTunnelStepValida
         </strong>
       </header>
       <ol className="SaleTunnelStepValidation__product-detail-list">
-        {product.target_courses.map((course) => (
+        {enrollment?.course_run ? (
           <li
-            key={`SaleTunnelStepValidation__product-detail-row--${course.code}`}
+            key={`SaleTunnelStepValidation__product-detail-row--${enrollment.course_run.course.code}`}
             className="SaleTunnelStepValidation__product-detail-row product-detail-row product-detail-row--course"
+            data-testid="product-course"
           >
             <span className="product-detail-row__icon">
               <svg aria-hidden="true">
                 <use href="#icon-check" />
               </svg>
             </span>
-            <TargetCourseDetail course={course} />
+            <h3 className="product-detail-row__summary h4">{enrollment.course_run.course.title}</h3>
+            <CourseRunsList courseRuns={[enrollment.course_run]} />
           </li>
-        ))}
+        ) : (
+          product.target_courses.map((targetCourse) => (
+            <li
+              key={`SaleTunnelStepValidation__product-detail-row--${targetCourse.code}`}
+              className="SaleTunnelStepValidation__product-detail-row product-detail-row"
+              data-testid="product-target-course"
+            >
+              <div />
+              <span className="product-detail-row__icon">
+                <svg aria-hidden="true">
+                  <use href="#icon-check" />
+                </svg>
+              </span>
+              <TargetCourseDetail course={targetCourse} />
+            </li>
+          ))
+        )}
         {product.certificate_definition ? (
-          <li className="SaleTunnelStepValidation__product-detail-row product-detail-row product-detail-row--certificate">
+          <li
+            className="SaleTunnelStepValidation__product-detail-row product-detail-row"
+            data-testid="product-certificate"
+          >
             <span className="product-detail-row__icon product-detail-row__icon--big">
               <svg aria-hidden="true">
                 <use href="#icon-certificate" />
@@ -67,10 +91,17 @@ export const SaleTunnelStepValidation = ({ product, next }: SaleTunnelStepValida
           </li>
         ) : null}
       </ol>
+      {product.instructions ? (
+        <div
+          className="product-detail-row__content product-detail-row__instructions"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: product.instructions }}
+        />
+      ) : null}
       <footer className="SaleTunnelStepValidation__footer">
-        <button className="button button-sale--primary" onClick={next}>
+        <Button onClick={next}>
           <FormattedMessage {...messages.proceedToPayment} />
-        </button>
+        </Button>
       </footer>
     </section>
   );

package/js/{widgets/CourseProductItem → components/SaleTunnel}/components/StepBreadcrumb/index.spec.tsx

@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { IconTypeEnum } from 'components/Icon';
-import { type Manifest, useStepManager } from '../../hooks/useStepManager';
+import { type Manifest, useStepManager } from 'hooks/useStepManager';
 import { StepBreadcrumb } from '.';
 
 describe('StepBreadcrumb', () => {

package/js/{widgets/CourseProductItem → components/SaleTunnel}/components/StepBreadcrumb/index.tsx

@@ -5,7 +5,7 @@ import { Children, Fragment, useCallback } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { Nullable } from 'types/utils';
 import { Icon } from 'components/Icon';
-import { Manifest, Step, useStepManager } from '../../hooks/useStepManager';
+import { Manifest, Step, useStepManager } from 'hooks/useStepManager';
 
 interface Props<Keys extends PropertyKey, LastKey extends Keys> {
   manifest: Manifest<Keys, LastKey>;

package/js/components/SaleTunnel/context.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext } from 'react';
+import {
+  CourseLight,
+  Order,
+  Enrollment,
+  CertificateProduct,
+  CredentialProduct,
+  OrderGroup,
+} from 'types/Joanie';
+
+interface SaleTunnelContextBase {
+  product: CredentialProduct | CertificateProduct;
+  orderGroup?: OrderGroup;
+  order?: Order;
+  key: string;
+  enrollment?: Enrollment;
+  course?: CourseLight;
+}
+
+export interface SaleTunnelCredentialContext extends SaleTunnelContextBase {
+  course: CourseLight;
+  enrollment?: undefined;
+  product: CredentialProduct | CertificateProduct;
+}
+
+export interface SaleTunnelCertificateContext extends SaleTunnelContextBase {
+  enrollment: Enrollment;
+  course?: undefined;
+  product: CertificateProduct;
+}
+
+export type SaleTunnelContextType = SaleTunnelCredentialContext | SaleTunnelCertificateContext;
+
+export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
+
+export const useSaleTunnelContext = () => {
+  const context = useContext(SaleTunnelContext);
+
+  if (context === undefined) {
+    throw new Error('useSaleTunnelContext must be used within a SaleTunnelContextProvider.');
+  }
+
+  return context;
+};

package/js/{widgets/CourseProductItem/components → components}/SaleTunnel/index.spec.tsx

@@ -4,10 +4,9 @@ import { Fragment } from 'react';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { ProductFactory } from 'utils/test/factories/joanie';
+import { CourseLightFactory, ProductFactory } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { CourseProductProvider } from 'widgets/CourseProductItem/contexts/CourseProductContext';
 import SaleTunnel from '.';
 
 const StepComponent =
@@ -19,13 +18,13 @@ const StepComponent =
     </Fragment>
   );
 
-jest.mock('../SaleTunnelStepValidation', () => ({
+jest.mock('./components/SaleTunnelStepValidation', () => ({
   SaleTunnelStepValidation: StepComponent('SaleTunnelStepValidation Component'),
 }));
-jest.mock('../SaleTunnelStepPayment', () => ({
+jest.mock('./components/SaleTunnelStepPayment', () => ({
   SaleTunnelStepPayment: StepComponent('SaleTunnelStepPayment Component'),
 }));
-jest.mock('../SaleTunnelStepResume', () => ({
+jest.mock('./components/SaleTunnelStepResume', () => ({
   SaleTunnelStepResume: StepComponent('SaleTunnelStepResume Component'),
 }));
 jest.mock('utils/context', () => ({
@@ -37,25 +36,16 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('SaleTunnel', () => {
-  beforeAll(() => {
-    // As dialog is rendered through a Portal, we have to add the DOM element in which the dialog will be rendered.
-    const modalExclude = document.createElement('div');
-    modalExclude.setAttribute('id', 'modal-exclude');
-    document.body.appendChild(modalExclude);
-  });
-
   afterEach(() => {
     fetchMock.restore();
   });
 
   const Wrapper = ({ children }: React.PropsWithChildren<{}>) => (
-    <CourseProductProvider courseCode="00000" productId="00000">
-      <IntlProvider locale="en">
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <SessionProvider>{children}</SessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    </CourseProductProvider>
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <SessionProvider>{children}</SessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
   );
 
   it('does not render when isOpen property is false', async () => {
@@ -64,7 +54,12 @@ describe('SaleTunnel', () => {
     await act(async () => {
       render(
         <Wrapper>
-          <SaleTunnel isOpen={false} product={product} onClose={jest.fn()} />
+          <SaleTunnel
+            isOpen={false}
+            product={product}
+            onClose={jest.fn()}
+            course={CourseLightFactory({ code: '00000' }).one()}
+          />
         </Wrapper>,
       );
     });
@@ -84,7 +79,12 @@ describe('SaleTunnel', () => {
     await act(async () => {
       render(
         <Wrapper>
-          <SaleTunnel isOpen={true} product={product} onClose={onClose} />
+          <SaleTunnel
+            isOpen={true}
+            product={product}
+            onClose={onClose}
+            course={CourseLightFactory({ code: '00000' }).one()}
+          />
         </Wrapper>,
       );
     });
@@ -130,7 +130,12 @@ describe('SaleTunnel', () => {
     await act(async () => {
       render(
         <Wrapper>
-          <SaleTunnel isOpen={true} product={product} onClose={onClose} />
+          <SaleTunnel
+            isOpen={true}
+            product={product}
+            onClose={onClose}
+            course={CourseLightFactory({ code: '00000' }).one()}
+          />
         </Wrapper>,
       );
     });

package/js/{widgets/CourseProductItem/components → components}/SaleTunnel/index.tsx

@@ -1,17 +1,27 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useQueryClient } from '@tanstack/react-query';
 import { Modal } from 'components/Modal';
-import type * as Joanie from 'types/Joanie';
-import { useOrders } from 'hooks/useOrders';
+import {
+  CourseLight,
+  Order,
+  OrderGroup,
+  CertificateProduct,
+  CredentialProduct,
+  Enrollment,
+  ProductType,
+} from 'types/Joanie';
+import { useOmniscientOrders, useOrders } from 'hooks/useOrders';
 import { IconTypeEnum } from 'components/Icon';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
 import { CourseProductEvent } from 'types/web-analytics';
-import { useCourseProduct } from 'widgets/CourseProductItem/contexts/CourseProductContext';
-import { StepBreadcrumb } from '../StepBreadcrumb';
-import { Manifest, useStepManager } from '../../hooks/useStepManager';
-import { SaleTunnelStepResume } from '../SaleTunnelStepResume';
-import { SaleTunnelStepValidation } from '../SaleTunnelStepValidation';
-import { SaleTunnelStepPayment } from '../SaleTunnelStepPayment';
+import { Manifest, useStepManager } from 'hooks/useStepManager';
+import useProductOrder from 'hooks/useProductOrder';
+import { SaleTunnelContext, SaleTunnelContextType } from './context';
+import { StepBreadcrumb } from './components/StepBreadcrumb';
+import { SaleTunnelStepValidation } from './components/SaleTunnelStepValidation';
+import { SaleTunnelStepPayment } from './components/SaleTunnelStepPayment';
+import { SaleTunnelStepResume } from './components/SaleTunnelStepResume';
 
 const messages = defineMessages({
   stepValidation: {
@@ -40,16 +50,41 @@ const focusCurrentStep = (container: HTMLElement) => {
   }
 };
 
-type Props = {
-  product: Joanie.Product;
+export interface SaleTunnelProps {
   isOpen: boolean;
   onClose: () => void;
-};
+  course?: CourseLight;
+  enrollment?: Enrollment;
+  product: CredentialProduct | CertificateProduct;
+  orderGroup?: OrderGroup;
+  onFinish?: (order: Order) => void;
+}
 
-const SaleTunnel = ({ product, isOpen = false, onClose }: Props) => {
+const SaleTunnel = ({
+  product,
+  course,
+  isOpen = false,
+  onClose,
+  enrollment,
+  orderGroup,
+  onFinish,
+}: SaleTunnelProps) => {
   const intl = useIntl();
-  const { methods: ordersMethods } = useOrders();
-  const { key } = useCourseProduct();
+  const {
+    methods: { refetch: refetchOmniscientOrders },
+  } = useOmniscientOrders();
+  const {
+    methods: { invalidate: invalidateOrders },
+  } = useOrders(undefined, { enabled: false });
+  const key = `${product.type === ProductType.CREDENTIAL ? course!.code : enrollment!.id}+${
+    product.id
+  }`;
+  const queryClient = useQueryClient();
+  const { item: order } = useProductOrder({
+    courseCode: course?.code,
+    enrollmentId: enrollment?.id,
+    productId: product.id,
+  });
 
   const manifest: Manifest<TunnelSteps, 'resume'> = {
     start: 'validation',
@@ -76,11 +111,14 @@ const SaleTunnel = ({ product, isOpen = false, onClose }: Props) => {
         next: null,
         onEnter: () => {
           WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.PAYMENT_SUCCEED, key);
-        },
-        onExit: () => {
           // Once the user has completed the purchase, we need to refetch the orders
           // to update the ordersQuery cache
-          ordersMethods.refetch();
+          invalidateOrders();
+          refetchOmniscientOrders();
+          queryClient.invalidateQueries({ queryKey: ['user', 'enrollments'] });
+          onFinish?.(order!);
+        },
+        onExit: () => {
           handleModalClose();
         },
       },
@@ -98,6 +136,38 @@ const SaleTunnel = ({ product, isOpen = false, onClose }: Props) => {
     reset();
   };
 
+  const context: SaleTunnelContextType = useMemo(() => {
+    if (product.type === ProductType.CREDENTIAL) {
+      return {
+        product: product as CredentialProduct,
+        order,
+        key,
+        course: course!,
+        enrollment: undefined,
+      };
+    } else {
+      return {
+        product: product as CertificateProduct,
+        order,
+        key,
+        course: undefined,
+        enrollment: enrollment!,
+      };
+    }
+  }, [product, order]);
+
+  useMemo(
+    () => ({
+      product,
+      order,
+      key,
+      course,
+      enrollment,
+      orderGroup,
+    }),
+    [product, order, key, course, enrollment, orderGroup],
+  );
+
   /**
    * correctly handle keyboard/screen reader users navigation on step change.
    * Without this, since elements are removed from the DOM from step to step,
@@ -128,12 +198,14 @@ const SaleTunnel = ({ product, isOpen = false, onClose }: Props) => {
       shouldCloseOnEsc={false}
       testId="SaleTunnel__modal"
     >
-      <div className="SaleTunnel__modal-body">
-        <StepBreadcrumb manifest={manifest} step={step} />
-        {step === 'validation' && <SaleTunnelStepValidation product={product} next={next} />}
-        {step === 'payment' && <SaleTunnelStepPayment product={product} next={next} />}
-        {step === 'resume' && <SaleTunnelStepResume next={next} />}
-      </div>
+      <SaleTunnelContext.Provider value={context}>
+        <div className="SaleTunnel__modal-body">
+          <StepBreadcrumb manifest={manifest} step={step} />
+          {step === 'validation' && <SaleTunnelStepValidation next={next} />}
+          {step === 'payment' && <SaleTunnelStepPayment next={next} />}
+          {step === 'resume' && <SaleTunnelStepResume next={next} />}
+        </div>
+      </SaleTunnelContext.Provider>
     </Modal>
   );
 };

package/js/components/SignContractButton/index.omniscientOrders.spec.tsx

@@ -0,0 +1,135 @@
+import { PropsWithChildren } from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { useOmniscientOrders } from 'hooks/useOrders';
+import { CredentialOrder } from 'types/Joanie';
+import { SessionProvider } from 'contexts/SessionContext';
+import SignContractButton from '.';
+
+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', () => ({
+  __esModule: true,
+  ...jest.requireActual('settings'),
+  CONTRACT_SETTINGS: { dummySignatureSignTimeout: 0 },
+}));
+
+describe('<SignContractButton/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <MemoryRouter>{children}</MemoryRouter>
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // JoanieSession api omniscient calls
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should hide sign button on learner training contract sign', async () => {
+    const ApiOrdersWrapper = () => {
+      const { items: orders } = useOmniscientOrders();
+      return (
+        orders[0] && (
+          <SignContractButton
+            order={orders[0] as CredentialOrder}
+            contract={orders[0].contract}
+            writable={true}
+          />
+        )
+      );
+    };
+    const order = CredentialOrderFactory({
+      contract: ContractFactory({ student_signed_on: undefined }).one(),
+    }).one();
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/',
+      { results: [order], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+
+    fetchMock.post(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`, {
+      invitation_link:
+        'https://dummysignaturebackend.fr/?requestToken=wfl_fake_dummy_dbe038b3-b6fe-40f4-b5bb-101fc80047a6#requestId=req',
+    });
+
+    render(
+      <Wrapper>
+        <ApiOrdersWrapper />
+      </Wrapper>,
+    );
+
+    expect(await screen.findByRole('button', { name: 'Sign' })).toBeInTheDocument();
+
+    // The modal is not shown.
+    expect(screen.queryByTestId('dashboard-contract-frame')).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    const $openContractFrameButton = screen.getByRole('button', { name: 'Sign' });
+    expect($openContractFrameButton).toBeEnabled();
+    await user.click($openContractFrameButton);
+    expect($openContractFrameButton).toBeDisabled();
+
+    const signedOrder = {
+      ...order,
+      contract: {
+        ...order.contract,
+        student_signed_on: new Date().toISOString(),
+      },
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/`,
+      {
+        results: [signedOrder],
+        next: null,
+        previous: null,
+        count: 1,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, signedOrder, {
+      overwriteRoutes: true,
+    });
+    const $modal = screen.getByTestId('dashboard-contract-frame');
+    await user.click(await within($modal).findByRole('button', { name: 'Sign' }));
+
+    // The final step should be displayed
+    expect(
+      await within($modal).findByRole('heading', { name: 'Congratulations!' }),
+    ).toBeInTheDocument();
+    // Orders's cache validation shouln't have close the ContractFrame.
+    expect(screen.queryByTestId('dashboard-contract-frame')).toBeInTheDocument();
+
+    // Close modal.
+    const $closeButton = screen.getByRole('button', { name: 'Close dialog' });
+    await user.click($closeButton);
+    expect(screen.queryByTestId('dashboard-contract-frame')).not.toBeInTheDocument();
+
+    expect(await screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+  });
+});