richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/CourseProductItem/components/PurchaseButton/index.spec.tsx

@@ -1,259 +0,0 @@
-import { act, render, screen } from '@testing-library/react';
-import fetchMock from 'fetch-mock';
-import { IntlProvider } from 'react-intl';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import userEvent from '@testing-library/user-event';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { 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 PurchaseButton from '.';
-
-jest.mock('utils/context', () => ({
-  __esModule: true,
-  default: mockRichieContextFactory({
-    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
-  }).one(),
-}));
-
-describe('PurchaseButton', () => {
-  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 = ({ client, children }: React.PropsWithChildren<{ client: QueryClient }>) => (
-    <CourseProductProvider courseCode="00000" productId="00000">
-      <IntlProvider locale="en">
-        <QueryClientProvider client={client}>
-          <SessionProvider>{children}</SessionProvider>
-        </QueryClientProvider>
-      </IntlProvider>
-    </CourseProductProvider>
-  );
-
-  it('shows a login button if user is not authenticated', async () => {
-    const product = ProductFactory().one();
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: null })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    expect(
-      await screen.findByRole('button', { name: `Login to purchase "${product.title}"` }),
-    ).toBeInTheDocument();
-  });
-
-  it('shows cta to open sale tunnel when user is authenticated', async () => {
-    const product = ProductFactory().one();
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    fetchMock.resetHistory();
-
-    // Only CTA is displayed
-    const button = screen.getByRole('button', { name: product.call_to_action });
-
-    // - SaleTunnel should not be opened
-    expect(screen.queryByTestId('SaleTunnel__modal')).toBeNull();
-
-    // act is needed here because we've no way, in SaleTunnel, to check useOrder !fetching state from the DOM
-    // Then user can enter into the sale tunnel and follow its 3 steps
-    await act(async () => userEvent.click(button));
-
-    // - SaleTunnel should have been opened
-    expect(screen.getByTestId('SaleTunnel__modal')).toBeInTheDocument();
-  });
-
-  it('shows cta to open sale tunnel when remaining orders is null', async () => {
-    const product = ProductFactory({ remaining_order_count: null }).one();
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    fetchMock.resetHistory();
-
-    // Only CTA is displayed
-    const button = await screen.findByRole('button', { name: product.call_to_action });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toBeDisabled();
-
-    // - SaleTunnel should not be opened
-    expect(screen.queryByTestId('SaleTunnel__modal')).not.toBeInTheDocument();
-
-    // act is needed here because we've no way, in SaleTunnel, to check useOrder !fetching state from the DOM
-    // Then user can enter into the sale tunnel and follow its 3 steps
-    await act(async () => userEvent.click(button));
-
-    // - SaleTunnel should have been opened
-    expect(await screen.findByTestId('SaleTunnel__modal')).toBeInTheDocument();
-  });
-
-  it('shows cta to open sale tunnel when remaining orders is undefined', async () => {
-    const product = ProductFactory().one();
-    delete product.remaining_order_count;
-
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    fetchMock.resetHistory();
-
-    // Only CTA is displayed
-    const button = await screen.findByRole('button', { name: product.call_to_action });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toBeDisabled();
-
-    // - SaleTunnel should not be opened
-    expect(screen.queryByTestId('SaleTunnel__modal')).not.toBeInTheDocument();
-
-    // act is needed here because we've no way, in SaleTunnel, to check useOrder !fetching state from the DOM
-    // Then user can enter into the sale tunnel and follow its 3 steps
-    await act(async () => userEvent.click(button));
-
-    // - SaleTunnel should have been opened
-    expect(await screen.findByTestId('SaleTunnel__modal')).toBeInTheDocument();
-  });
-
-  it('renders a disabled CTA if the product have no remaining orders', async () => {
-    const product = ProductFactory({ remaining_order_count: 0 }).one();
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    // CTA is displayed but disabled
-    const button: HTMLButtonElement = screen.getByRole('button', { name: product.call_to_action });
-    expect(button).toBeDisabled();
-
-    // Further, a message is displayed to explain why the CTA is disabled
-    screen.findByText('This product is full, is currently not available for sale');
-  });
-
-  it.each([
-    { label: 'base product', productData: {} },
-    { label: 'No remaining orders', productData: { remaining_order_count: 0 } },
-  ])(
-    'renders a disabled CTA if one target course has no course runs. Case "$label"',
-    async ({ productData }) => {
-      const product = ProductFactory(productData).one();
-      product.target_courses[0].course_runs = [];
-      fetchMock
-        .get('https://joanie.test/api/v1.0/addresses/', [])
-        .get('https://joanie.test/api/v1.0/credit-cards/', [])
-        .get('https://joanie.test/api/v1.0/orders/', []);
-
-      act(() => {
-        render(
-          <Wrapper client={createTestQueryClient({ user: true })}>
-            <PurchaseButton product={product} disabled={false} />
-          </Wrapper>,
-        );
-      });
-
-      // CTA is displayed but disabled
-      const button: HTMLButtonElement = screen.getByRole('button', {
-        name: product.call_to_action,
-      });
-      expect(button).toBeDisabled();
-
-      // Further, a message is displayed to explain why the CTA is disabled
-      screen.findByText(
-        'At least one course has no course runs, this product is not currently available for sale',
-      );
-    },
-  );
-
-  it('renders a disabled CTA if product has no target courses', async () => {
-    const product = ProductFactory().one();
-    product.target_courses = [];
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} />
-        </Wrapper>,
-      );
-    });
-
-    // CTA is displayed but disabled
-    const button: HTMLButtonElement = screen.getByRole('button', { name: product.call_to_action });
-    expect(button).toBeDisabled();
-
-    // Further, a message is displayed to explain why the CTA is disabled
-    screen.findByText(
-      'At least one course has no course runs, this product is not currently available for sale',
-    );
-  });
-
-  it('does not render CTA if disabled property is false', async () => {
-    const product = ProductFactory().one();
-    fetchMock
-      .get('https://joanie.test/api/v1.0/addresses/', [])
-      .get('https://joanie.test/api/v1.0/credit-cards/', [])
-      .get('https://joanie.test/api/v1.0/orders/', []);
-
-    act(() => {
-      render(
-        <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={true} />
-        </Wrapper>,
-      );
-    });
-
-    // CTA is not displayed
-    expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
-  });
-});

package/js/widgets/CourseProductItem/components/SaleTunnel/_styles.scss

@@ -1,41 +0,0 @@
-.SaleTunnel__modal {
-  min-height: 500px;
-
-  &-body {
-    padding: 0 3rem 1.5rem 3rem;
-
-    @include media-breakpoint-down(sm) {
-      padding: 0 1rem 1.5rem 1rem;
-    }
-  }
-
-  .button-sale--primary {
-    $scheme: r-theme-val(sale-tunnel, primary-button-scheme);
-    $outline: r-theme-val(sale-tunnel, primary-button-is-outlined);
-    @include r-button-apply-scheme($scheme, $apply-border: true, $outline: $outline);
-
-    &:hover {
-      @include r-button-apply-scheme($scheme, $apply-border: true, $prefix: 'hover');
-    }
-  }
-
-  .button-sale--secondary {
-    $scheme: r-theme-val(sale-tunnel, secondary-button-scheme);
-    $outline: r-theme-val(sale-tunnel, secondary-button-is-outlined);
-    @include r-button-apply-scheme($scheme, $apply-border: true, $outline: $outline);
-
-    &:hover {
-      @include r-button-apply-scheme($scheme, $apply-border: true, $prefix: 'hover');
-    }
-  }
-
-  .button-sale--tertiary {
-    $scheme: r-theme-val(sale-tunnel, tertiary-button-scheme);
-    $outline: r-theme-val(sale-tunnel, tertiary-button-is-outlined);
-    @include r-button-apply-scheme($scheme, $apply-border: true, $outline: $outline);
-
-    &:hover {
-      @include r-button-apply-scheme($scheme, $apply-border: true, $prefix: 'hover');
-    }
-  }
-}

package/js/widgets/CourseProductItem/components/SaleTunnelStepResume/_styles.scss

@@ -1,130 +0,0 @@
-//
-// SaleTunnelStepResume component styles
-//
-
-//
-// Mixins
-//
-
-//
-// keyframe-strokedLineAppear
-//
-// Generate a keyframe to make svg stroked element appears slightly
-//
-// @param {string}  name     the keyframe's name to use from `animation`
-// @param {length}  length   the full length of the stroke line`
-// @param {reverse} reverse  animation direction`
-@mixin keyframe-strokedLineAppear($name, $length, $reverse: false) {
-  $direction: 1;
-  @if $reverse == true {
-    $direction: -1;
-  }
-
-  @keyframes #{$name} {
-    from {
-      stroke-dashoffset: $direction * $length;
-    }
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-}
-
-//
-// Styles
-//
-.SaleTunnelStepResume {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-
-  &__header {
-    margin-bottom: 0;
-    text-align: center;
-  }
-
-  &__success-icon {
-    $duration: 1.1s;
-    align-items: center;
-    animation: wave $duration * 0.95 backwards;
-    border-radius: 100vw;
-    color: r-theme-val(steps-content, icon-success-color);
-    display: inline-flex;
-    fill: none;
-    height: 4.5rem;
-    justify-content: center;
-    margin-bottom: 1.25rem;
-    max-height: 100%;
-    stroke: currentColor;
-    width: 4.5rem;
-
-    @keyframes wave {
-      0% {
-        transform: scale(1);
-      }
-      33% {
-        transform: scale(1.2);
-      }
-      66% {
-        transform: scale(0.8);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    & > * {
-      fill: none;
-      stroke-linecap: round;
-      stroke-width: 2;
-      stroke: r-theme-val(steps-content, icon-success-background);
-      &.back {
-        stroke: lighten(r-theme-val(steps-content, icon-success-background), 20%);
-      }
-    }
-
-    .line {
-      $length: 25.52px;
-      @include keyframe-strokedLineAppear(checkAppear, $length);
-      animation: checkAppear $duration * 0.5 $duration * 0.4 backwards $r-ease-out;
-      stroke-dasharray: $length;
-
-      &:nth-of-type(1) {
-        animation-delay: $duration * 0.3;
-        animation-duration: $duration * 0.5;
-      }
-    }
-
-    .circle {
-      $PI: 3.14159265;
-      $radius: 16px;
-      @include keyframe-strokedLineAppear(circleAppear, 2 * $PI * $radius, true);
-      animation: circleAppear $duration $r-ease-out;
-      stroke-dasharray: 2 * $PI * $radius;
-      transform-origin: center center;
-      transform: rotateZ(-45deg);
-
-      &:nth-of-type(1) {
-        animation-duration: $duration * 0.9;
-      }
-    }
-  }
-
-  &__title {
-    color: r-theme-val(steps-content, title-color);
-    font-size: 1.5rem;
-  }
-
-  &__content {
-    color: r-theme-val(steps-content, content-color);
-    font-size: 0.875rem;
-    line-height: 1.3em;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-  }
-
-  &__footer {
-    margin-top: 2.5rem;
-  }
-}

package/js/widgets/CourseProductItem/components/SaleTunnelStepResume/index.spec.tsx

@@ -1,29 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { SaleTunnelStepResume } from '.';
-
-describe('SaleTunnelStepResume', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('shows a success message and a CTA to start the course', () => {
-    const mockNext = jest.fn();
-
-    render(
-      <IntlProvider locale="en">
-        <SaleTunnelStepResume next={mockNext} />
-      </IntlProvider>,
-    );
-
-    const successLogo = screen.getByRole('img');
-    expect(successLogo).toBeInstanceOf(SVGElement);
-
-    screen.getByRole('heading', { level: 3, name: 'Congratulations!' });
-
-    // Click on the button trigger the next function
-    const button = screen.getByRole('button', { name: 'Start this course now!' });
-    fireEvent.click(button);
-    expect(mockNext).toHaveBeenCalledTimes(1);
-  });
-});

package/js/widgets/CourseProductItem/components/SaleTunnelStepResume/index.tsx

@@ -1,59 +0,0 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-const messages = defineMessages({
-  congratulations: {
-    defaultMessage: 'Congratulations!',
-    description: 'Text displayed to thank user for his order',
-    id: 'components.SaleTunnelStepResume.congratulations',
-  },
-  successMessage: {
-    defaultMessage: 'Your order has been successfully created.',
-    description: 'Message to confirm that order has been created',
-    id: 'components.SaleTunnelStepResume.successMessage',
-  },
-  successDetailMessage: {
-    defaultMessage: 'You will receive your invoice by email in a few moments.',
-    description: "Text to remind that order's invoice will be send by email soon",
-    id: 'components.SaleTunnelStepResume.successDetailMessage',
-  },
-  cta: {
-    defaultMessage: 'Start this course now!',
-    description: 'Label to the call to action to close sale tunnel',
-    id: 'components.SaleTunnelStepResume.cta',
-  },
-});
-
-interface SaleTunnelStepResumeProps {
-  next: () => void;
-}
-
-export const SaleTunnelStepResume = ({ next }: SaleTunnelStepResumeProps) => (
-  <section className="SaleTunnelStepResume">
-    <header className="SaleTunnelStepResume__header">
-      <svg
-        className="SaleTunnelStepResume__success-icon"
-        role="img"
-        viewBox="0 0 32 32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle className="circle back" cx="16" cy="16" r="14" />
-        <circle className="circle" cx="16" cy="16" r="14" />
-        <polyline className="line back" points="7.5 15.5 14 22.5 24 10.5" />
-        <polyline className="line" points="7.5 15.5 14 22.5 24 10.5" />
-      </svg>
-      <h3 className="SaleTunnelStepResume__title">
-        <FormattedMessage {...messages.congratulations} />
-      </h3>
-    </header>
-    <p className="SaleTunnelStepResume__content">
-      <FormattedMessage {...messages.successMessage} />
-      <br />
-      <FormattedMessage {...messages.successDetailMessage} />
-    </p>
-    <footer className="SaleTunnelStepResume__footer">
-      <button className="button button-sale--primary" onClick={next}>
-        <FormattedMessage {...messages.cta} />
-      </button>
-    </footer>
-  </section>
-);

package/js/widgets/CourseProductItem/components/SaleTunnelStepValidation/index.spec.tsx

@@ -1,71 +0,0 @@
-import { fireEvent, getByRole, getByTestId, render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { Priority } from 'types';
-import type * as Joanie from 'types/Joanie';
-import { ProductFactory } from 'utils/test/factories/joanie';
-import { SaleTunnelStepValidation } from '.';
-
-describe('SaleTunnelStepValidation', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('shows product information and details course runs included', () => {
-    const product = ProductFactory().one();
-
-    const mockNext = jest.fn();
-
-    const { container } = render(
-      <IntlProvider locale="en">
-        <SaleTunnelStepValidation next={mockNext} product={product} />
-      </IntlProvider>,
-    );
-
-    const formatter = new Intl.NumberFormat('en', {
-      currency: product.price_currency,
-      style: 'currency',
-    });
-
-    screen.getByRole('heading', { level: 2, name: product.title });
-    screen.getByText(`${formatter.format(product.price).replaceAll(' ', ' ')} including VAT`);
-
-    const courses = container.querySelectorAll('.product-detail-row--course');
-    expect(courses).toHaveLength(product.target_courses.length);
-    courses.forEach((course, index) => {
-      const courseItem = product.target_courses[index];
-      const courseDetail: HTMLDetailsElement = getByTestId(
-        course as HTMLElement,
-        `target-course-detail-${courseItem.code}`,
-      );
-
-      // Details should be closed by default
-      expect(courseDetail).not.toHaveAttribute('open');
-
-      // Check if the course title is displayed
-      const summary = courseDetail.querySelector('summary')!;
-      expect(summary).toHaveTextContent(courseItem.title);
-
-      // Click on summary should open the details
-      fireEvent.click(summary);
-      expect(courseDetail).toHaveAttribute('open');
-
-      const courseRuns = course.querySelectorAll('.product-detail-row__course-run-dates__item');
-      // Only course runs opened for enrollment should be displayed
-      const openedCourseRuns = courseItem.course_runs.filter(
-        (cr: Joanie.CourseRun) => cr.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
-      );
-      expect(courseRuns).toHaveLength(openedCourseRuns.length);
-    });
-
-    const certificate = container.querySelector('.product-detail-row--certificate');
-    expect(certificate).not.toBeNull();
-    expect(
-      getByRole(container, 'heading', { level: 3, name: product.certificate_definition.title }),
-    );
-
-    // Click on the button trigger the next function
-    const button = screen.getByRole('button', { name: 'Proceed to payment' });
-    fireEvent.click(button);
-    expect(mockNext).toHaveBeenCalledTimes(1);
-  });
-});

package/js/widgets/CourseProductItem/contexts/CourseProductContext/index.spec.tsx

@@ -1,35 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { noop } from 'utils';
-import { CourseProductProvider, useCourseProduct } from '.';
-
-describe('useCourseProduct', () => {
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('returns the course code stored within CourseProductProvider', () => {
-    // Refactor of the wrapper parameters is caused by the behavior describe here
-    // https://stackoverflow.com/questions/72346908/react-testing-library-merged-with-testing-library-react-hooks-wrapper-inconsis
-    const { result } = renderHook(useCourseProduct, {
-      wrapper: ({ children }) => (
-        <CourseProductProvider courseCode="00013" productId="dce9acb4-df59-4856-a5a8-1b732bc9b565">
-          {children}
-        </CourseProductProvider>
-      ),
-    });
-    expect(result.current).toStrictEqual({
-      courseCode: '00013',
-      productId: 'dce9acb4-df59-4856-a5a8-1b732bc9b565',
-      key: '00013+dce9acb4-df59-4856-a5a8-1b732bc9b565',
-    });
-  });
-
-  it('throws an error if it is not used within a CourseProductProvider', () => {
-    jest.spyOn(console, 'error').mockImplementation(noop);
-    expect(() => {
-      renderHook(useCourseProduct);
-    }).toThrow(
-      'useCourseProduct must be used within a component wrapped by a <CourseProductProvider />.',
-    );
-  });
-});

package/js/widgets/CourseProductItem/contexts/CourseProductContext/index.tsx

@@ -1,45 +0,0 @@
-import { type PropsWithChildren, useMemo, createContext, useContext } from 'react';
-import type { Maybe } from 'types/utils';
-import type * as Joanie from 'types/Joanie';
-
-const Context = createContext<
-  Maybe<{
-    courseCode: Joanie.CourseLight['code'];
-    productId: Joanie.Product['id'];
-    key: string;
-  }>
->(undefined);
-
-export interface CourseProductProviderProps {
-  courseCode: Joanie.CourseLight['code'];
-  productId: Joanie.Product['id'];
-}
-
-/**
- * A React Provider which aims to wrap components related to a specific course. In this
- * way we are able to pass down course's code to children.
- */
-export const CourseProductProvider = ({
-  courseCode,
-  productId,
-  children,
-}: PropsWithChildren<CourseProductProviderProps>) => {
-  const value = useMemo(
-    () => ({ productId, courseCode, key: `${courseCode}+${productId}` }),
-    [productId, courseCode],
-  );
-  return <Context.Provider value={value}>{children}</Context.Provider>;
-};
-
-/**
- * A hook to use within `CourseProductProvider`. It returns the course code and product id context.
- */
-export const useCourseProduct = () => {
-  const context = useContext(Context);
-  if (context === undefined) {
-    throw new Error(
-      'useCourseProduct must be used within a component wrapped by a <CourseProductProvider />.',
-    );
-  }
-  return context;
-};