richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -1,486 +0,0 @@
-import {
-  getByText,
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
-import fetchMock from 'fetch-mock';
-import type { PropsWithChildren } from 'react';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import {
-  CertificateProductFactory,
-  EnrollmentFactory,
-  OrderFactory,
-  ProductFactory,
-} from 'utils/test/factories/joanie';
-import JoanieApiProvider from 'contexts/JoanieApiContext';
-import { CourseRun, Enrollment, Order, OrderState, Product } from 'types/Joanie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { Deferred } from 'utils/test/deferred';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import CourseProductItem from '.';
-
-jest.mock('utils/context', () => ({
-  __esModule: true,
-  default: mockRichieContextFactory({
-    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
-    joanie_backend: { endpoint: 'https://joanie.test' },
-  }).one(),
-}));
-
-jest.mock('./components/CourseProductCertificateItem', () => ({
-  __esModule: true,
-  default: () => <div data-testid="CertificateItem" />,
-}));
-
-jest.mock('./components/CourseProductCourseRuns', () => ({
-  CourseRunList: ({ courseRuns }: { courseRuns: CourseRun[] }) => (
-    <div data-testid={`CourseRunList-${courseRuns.map(({ id }) => id).join('-')}`} />
-  ),
-  EnrollableCourseRunList: ({ courseRuns, order }: { courseRuns: CourseRun[]; order: Order }) => (
-    <div
-      data-testid={`EnrollableCourseRunList-${courseRuns.map(({ id }) => id).join('-')}-${
-        order.id
-      }`}
-    />
-  ),
-  EnrolledCourseRun: ({ enrollment }: { enrollment: Enrollment }) => (
-    <div data-testid={`EnrolledCourseRun-${enrollment.id}`} />
-  ),
-}));
-
-describe('CourseProductItem', () => {
-  const priceFormatter = (currency: string, price: number) =>
-    new Intl.NumberFormat('en', {
-      currency,
-      style: 'currency',
-    }).format(price);
-
-  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);
-  });
-
-  beforeEach(() => {
-    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
-  });
-
-  afterEach(() => {
-    fetchMock.restore();
-  });
-
-  const Wrapper = ({ withSession, children }: PropsWithChildren<{ withSession?: boolean }>) => (
-    <IntlProvider locale="en">
-      <JoanieApiProvider>
-        <QueryClientProvider client={createTestQueryClient({ user: withSession || null })}>
-          <JoanieSessionProvider>{children}</JoanieSessionProvider>
-        </QueryClientProvider>
-      </JoanieApiProvider>
-    </IntlProvider>
-  );
-
-  it('renders product information', async () => {
-    const product: Product = ProductFactory().one();
-    const productDeferred = new Deferred();
-    fetchMock.get(
-      `https://joanie.test/api/v1.0/products/${product.id}/?course=00000`,
-      productDeferred.promise,
-    );
-
-    render(
-      <Wrapper>
-        <CourseProductItem courseCode="00000" productId={product.id} />
-      </Wrapper>,
-    );
-
-    // - A loader should be displayed while product information are fetching
-    screen.getByRole('status', { name: 'Loading product information...' });
-
-    productDeferred.resolve(product);
-
-    await screen.findByRole('heading', { level: 3, name: product.title });
-    // the price shouldn't be a heading to prevent misdirection for screen reader users,
-    // but we want to it to visually look like a h6
-
-    const $price = screen.getByText(
-      // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
-      // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
-    );
-    expect($price.tagName).toBe('STRONG');
-    expect($price.classList.contains('h6')).toBe(true);
-
-    // Languages and date range should not be displayed
-    expect(screen.queryByTestId('product-widget__header-metadata-dates')).not.toBeInTheDocument();
-    expect(
-      screen.queryByTestId('product-widget__header-metadata-languages'),
-    ).not.toBeInTheDocument();
-
-    // - Render all target courses information
-    product.target_courses.forEach((course) => {
-      const $item = screen.getByTestId(`course-item-${course.code}`);
-      // the course title shouldn't be a heading to prevent misdirection for screen reader users,
-      // but we want to it to visually look like a h5
-      const $courseTitle = getByText($item, course.title);
-      expect($courseTitle.tagName).toBe('STRONG');
-      expect($courseTitle.classList.contains('h5')).toBe(true);
-      screen.getByTestId(`CourseRunList-${course.course_runs.map(({ id }) => id).join('-')}`);
-    });
-
-    // - Render <CertificateItem />
-    screen.getByTestId('CertificateItem');
-
-    // - Render a login button
-    screen.getByRole('button', { name: `Login to purchase "${product.title}"` });
-    // - Does not render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
-  });
-
-  it('does not render <CertificateItem /> if product do not have a certificate', async () => {
-    const product: Product = ProductFactory({ certificate_definition: undefined }).one();
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-
-    render(
-      <Wrapper>
-        <CourseProductItem productId={product.id} courseCode="00000" />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - Does not render <CertificateItem />
-    expect(screen.queryByTestId('CertificateItem')).toBeNull();
-  });
-
-  it('adapts its layout if compact is set', async () => {
-    const product: Product = ProductFactory().one();
-    const productDeferred = new Deferred();
-    fetchMock.get(
-      `https://joanie.test/api/v1.0/products/${product.id}/?course=00000`,
-      productDeferred.promise,
-    );
-
-    const { container } = render(
-      <Wrapper>
-        <CourseProductItem courseCode="00000" productId={product.id} compact />
-      </Wrapper>,
-    );
-
-    // - A loader should be displayed while product information are fetching
-    screen.getByRole('status', { name: 'Loading product information...' });
-
-    productDeferred.resolve(product);
-
-    // In the header, we should display the product title, the product price
-    // and product date range and languages
-    await screen.findByRole('heading', { level: 3, name: product.title });
-    // the price shouldn't be a heading to prevent misdirection for screen reader users,
-    // but we want to it to visually look like a h6
-
-    const $price = screen.getByText(
-      // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
-      // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
-    );
-    expect($price.tagName).toBe('STRONG');
-    expect($price.classList.contains('h6')).toBe(true);
-
-    screen.getByTestId('product-widget__header-metadata-dates');
-    screen.getByTestId('product-widget__header-metadata-languages');
-
-    // Then the content block should only display the purchase button.
-    const $productWidgetContent = container.querySelector('.product-widget__content');
-    expect($productWidgetContent).not.toBeInTheDocument();
-
-    // - Any target courses information should be displayed
-    product.target_courses.forEach((course) => {
-      const $item = screen.queryByTestId(`course-item-${course.code}`);
-      expect($item).not.toBeInTheDocument();
-    });
-
-    // - Any <CertificateItem /> should be displayed
-    expect(screen.queryByTestId('CertificateItem')).not.toBeInTheDocument();
-
-    // - Render a login button
-    screen.getByRole('button', { name: `Login to purchase "${product.title}"` });
-    // - Does not render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
-  });
-
-  it('adapts information when user purchased the product', async () => {
-    const product: Product = ProductFactory().one();
-    const order: Order = OrderFactory({
-      product: product.id,
-      course: '00000',
-      target_courses: product.target_courses,
-    }).one();
-
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-    fetchMock.get(`https://joanie.test/api/v1.0/orders/`, [order]);
-
-    render(
-      <Wrapper withSession>
-        <CourseProductItem productId={product.id} courseCode="00000" />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - In place of product price, a label should be displayed
-    const $enrolledInfo = await screen.findByText('Purchased');
-    expect($enrolledInfo.tagName).toBe('STRONG');
-    expect($enrolledInfo.classList.contains('h6')).toBe(true);
-
-    // - Render all order's target courses information with EnrollableCourseRunList component
-    await waitFor(() => {
-      order.target_courses.forEach((course) => {
-        const $item = screen.getByTestId(`course-item-${course.code}`);
-        // the course title shouldn't be a heading to prevent misdirection for screen reader users,
-        // but we want to it to visually look like a h5
-        const $courseTitle = getByText($item, course.title);
-        expect($courseTitle.tagName).toBe('STRONG');
-        expect($courseTitle.classList.contains('h5')).toBe(true);
-        screen.getByTestId(
-          `EnrollableCourseRunList-${course.course_runs.map(({ id }) => id).join('-')}-${order.id}`,
-        );
-      });
-    });
-
-    // - Render <CertificateItem />
-    screen.getByTestId('CertificateItem');
-
-    // - Does not Render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
-  });
-
-  it('adapts information when user purchased the product even if compact is set', async () => {
-    const product: Product = ProductFactory().one();
-    const order: Order = OrderFactory({
-      product: product.id,
-      course: '00000',
-      target_courses: product.target_courses,
-    }).one();
-
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-    fetchMock.get(`https://joanie.test/api/v1.0/orders/`, [order]);
-
-    render(
-      <Wrapper withSession>
-        <CourseProductItem productId={product.id} courseCode="00000" compact />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - In place of product price, a label should be displayed
-    const $enrolledInfo = await screen.findByText('Purchased');
-    expect($enrolledInfo.tagName).toBe('STRONG');
-    expect($enrolledInfo.classList.contains('h6')).toBe(true);
-
-    // - Product date range and languages should not be displayed anymore
-    expect(screen.queryByTestId('product-widget__header-metadata-dates')).not.toBeInTheDocument();
-    expect(
-      screen.queryByTestId('product-widget__header-metadata-languages'),
-    ).not.toBeInTheDocument();
-
-    // - Render all order's target courses information with EnrollableCourseRunList component
-    await waitFor(() => {
-      order.target_courses.forEach((course) => {
-        const $item = screen.getByTestId(`course-item-${course.code}`);
-        // the course title shouldn't be a heading to prevent misdirection for screen reader users,
-        // but we want to it to visually look like a h5
-        const $courseTitle = getByText($item, course.title);
-        expect($courseTitle.tagName).toBe('STRONG');
-        expect($courseTitle.classList.contains('h5')).toBe(true);
-        screen.getByTestId(
-          `EnrollableCourseRunList-${course.course_runs.map(({ id }) => id).join('-')}-${order.id}`,
-        );
-      });
-    });
-
-    // - Render <CertificateItem />
-    screen.getByTestId('CertificateItem');
-
-    // - Does not Render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
-  });
-
-  it('renders enrollment information when user is enrolled to a course run', async () => {
-    const product: Product = CertificateProductFactory().one();
-    // - Create an order with an active enrollment
-    const enrollment: Enrollment = EnrollmentFactory({
-      course_run: product.target_courses[0]!.course_runs[0]! as CourseRun,
-    }).one();
-    const order: Order = OrderFactory({
-      product: product.id,
-      course: '00000',
-      target_courses: product.target_courses,
-      enrollments: [enrollment],
-    }).one();
-
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-    fetchMock.get(`https://joanie.test/api/v1.0/orders/`, [order]);
-
-    render(
-      <Wrapper withSession>
-        <CourseProductItem productId={product.id} courseCode="00000" />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - In place of product price, a label should be displayed
-    const $enrolledInfo: HTMLElement = await screen.findByText('Purchased');
-    expect($enrolledInfo!.tagName).toBe('STRONG');
-    expect($enrolledInfo!.classList.contains('h6')).toBe(true);
-
-    const [targetCourse, ...targetCourses] = product.target_courses;
-    // - The first target course should display the EnrolledCourseRun component
-    const $courseTitle = screen.getByText(targetCourse.title);
-    expect($courseTitle.tagName).toBe('STRONG');
-    expect($courseTitle.classList.contains('h5')).toBe(true);
-    await waitFor(() => {
-      screen.getByTestId(`EnrolledCourseRun-${enrollment.id}`);
-    });
-
-    // - Other target courses should display EnrollableCourseRunList component
-    targetCourses.forEach((course) => {
-      const $item = screen.getByTestId(`course-item-${course.code}`);
-      const $itemTitle = getByText($item, course.title);
-      expect($itemTitle.tagName).toBe('STRONG');
-      expect($itemTitle.classList.contains('h5')).toBe(true);
-
-      screen.getByTestId(
-        `EnrollableCourseRunList-${course.course_runs.map(({ id }) => id).join('-')}-${order.id}`,
-      );
-    });
-  });
-
-  it('does not render sale tunnel button if user already has a pending order', async () => {
-    const product: Product = ProductFactory().one();
-    const order: Order = OrderFactory({
-      product: product.id,
-      course: '00000',
-      target_courses: product.target_courses,
-      state: OrderState.PENDING,
-    }).one();
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-    fetchMock.get(`https://joanie.test/api/v1.0/orders/`, [order]);
-
-    render(
-      <Wrapper withSession>
-        <CourseProductItem productId={product.id} courseCode="00000" />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - In place of product price, a label "Pending" should be displayed
-    const $enrolledInfo = await screen.findByText('Pending');
-    expect($enrolledInfo.tagName).toBe('STRONG');
-    expect($enrolledInfo.classList.contains('h6')).toBe(true);
-
-    // - As order is pending, the user should not be able to enroll to course runs.
-    await waitFor(() => {
-      order.target_courses.forEach((course) => {
-        const $item = screen.getByTestId(`course-item-${course.code}`);
-        // the course title shouldn't be a heading to prevent misdirection for screen reader users,
-        // but we want to it to visually look like a h5
-        const $courseTitle = getByText($item, course.title);
-        expect($courseTitle.tagName).toBe('STRONG');
-        expect($courseTitle.classList.contains('h5')).toBe(true);
-        screen.getByTestId(`CourseRunList-${course.course_runs.map(({ id }) => id).join('-')}`);
-      });
-    });
-
-    // - Render <CertificateItem />
-    screen.getByTestId('CertificateItem');
-
-    // - Does not Render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
-  });
-
-  it('adapts layout when user has a pending order and compact prop is set', async () => {
-    const product: Product = ProductFactory().one();
-    const order: Order = OrderFactory({
-      product: product.id,
-      course: '00000',
-      target_courses: product.target_courses,
-      state: OrderState.PENDING,
-    }).one();
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, product);
-    fetchMock.get(`https://joanie.test/api/v1.0/orders/`, [order]);
-
-    render(
-      <Wrapper withSession>
-        <CourseProductItem productId={product.id} courseCode="00000" compact />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    // - In place of product price, a label should be displayed
-    const $enrolledInfo = await screen.findByText('Pending');
-    expect($enrolledInfo.tagName).toBe('STRONG');
-    expect($enrolledInfo.classList.contains('h6')).toBe(true);
-
-    // - Product date range and languages should be displayed
-    screen.getByTestId('product-widget__header-metadata-dates');
-    screen.getByTestId('product-widget__header-metadata-languages');
-
-    // - Target courses should not be rendered
-    await waitFor(() => {
-      order.target_courses.forEach((course) => {
-        const $item = screen.queryByTestId(`course-item-${course.code}`);
-        expect($item).not.toBeInTheDocument();
-      });
-    });
-
-    // - <CertificateItem /> should not be rendered
-    expect(screen.queryByTestId('CertificateItem')).not.toBeInTheDocument();
-
-    // - Does not Render PurchaseButton cta
-    expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
-  });
-
-  it('renders error message when product fetching has failed', async () => {
-    const product: Product = ProductFactory().one();
-
-    fetchMock.get(`https://joanie.test/api/v1.0/products/${product.id}/?course=00000`, 404, {});
-
-    render(
-      <Wrapper>
-        <CourseProductItem productId={product.id} courseCode="00000" />
-      </Wrapper>,
-    );
-
-    // Wait for product information to be fetched
-    const loadingMessage = screen.getByRole('status', { name: 'Loading product information...' });
-    await waitForElementToBeRemoved(loadingMessage);
-
-    // - As product fetching has failed, an error message should be displayed
-    await screen.findByText('An error occurred while fetching product. Please retry later.');
-  });
-});

package/js/widgets/CourseProductItem/index.tsx

@@ -1,205 +0,0 @@
-import { Children, useMemo } from 'react';
-import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
-import c from 'classnames';
-import type * as Joanie from 'types/Joanie';
-import { OrderState } from 'types/Joanie';
-import { useProduct } from 'hooks/useProduct';
-import { Spinner } from 'components/Spinner';
-import { useOrders } from 'hooks/useOrders';
-import { Icon, IconTypeEnum } from 'components/Icon';
-import { Maybe } from 'types/utils';
-import useDateFormat from 'hooks/useDateFormat';
-import { ProductHelper } from 'utils/ProductHelper';
-import CertificateItem from './components/CourseProductCertificateItem';
-import CourseRunItem from './components/CourseRunItem';
-import PurchaseButton from './components/PurchaseButton';
-import { CourseProductProvider } from './contexts/CourseProductContext';
-
-const messages = defineMessages({
-  purchased: {
-    defaultMessage: 'Purchased',
-    description: 'Message displayed when authenticated user owned the product',
-    id: 'components.CourseProductItem.purchased',
-  },
-  pending: {
-    defaultMessage: 'Pending',
-    description:
-      'Message displayed when authenticated user has purchased the product but order is still pending',
-    id: 'components.CourseProductItem.pending',
-  },
-  loading: {
-    defaultMessage: 'Loading product information...',
-    description:
-      'Accessible text for the initial loading spinner displayed when product is fetching',
-    id: 'components.CourseProductItem.loadingInitial',
-  },
-  fromTo: {
-    defaultMessage: 'From {from} to {to}',
-    description: 'Course run date range',
-    id: 'components.CourseProductItem.fromTo',
-  },
-  availableIn: {
-    defaultMessage: 'Available in {languages}',
-    description: 'Course run languages',
-    id: 'components.CourseProductItem.availableIn',
-  },
-});
-
-export interface Props {
-  compact?: boolean;
-  courseCode: Joanie.CourseLight['code'];
-  productId: Joanie.Product['id'];
-}
-
-type HeaderProps = {
-  compact: boolean;
-  hasPurchased: boolean;
-  order: Maybe<Joanie.Order>;
-  product: Joanie.Product;
-};
-const Header = ({ product, order, hasPurchased, compact }: HeaderProps) => {
-  const intl = useIntl();
-  const formatDate = useDateFormat();
-
-  const canShowMetadata = useMemo(() => {
-    return compact && !order;
-  }, [compact, hasPurchased]);
-
-  const [minDate, maxDate] = useMemo(() => {
-    if (!canShowMetadata) return [undefined, undefined];
-    return ProductHelper.getDateRange(product);
-  }, [canShowMetadata, product]);
-
-  const languages = useMemo(() => {
-    if (!canShowMetadata) return '';
-    return ProductHelper.getLanguages(product, true, intl);
-  }, [canShowMetadata, product, intl]);
-
-  return (
-    <header className="product-widget__header">
-      <div className="product-widget__header-main">
-        <h3 className="product-widget__title">{product.title}</h3>
-        <strong className="product-widget__price h6">
-          {order && <FormattedMessage {...messages.purchased} />}
-          {hasPurchased && !order && <FormattedMessage {...messages.pending} />}
-          {!hasPurchased && (
-            <FormattedNumber
-              currency={product.price_currency}
-              value={product.price}
-              style="currency"
-            />
-          )}
-        </strong>
-      </div>
-      {canShowMetadata && (
-        <>
-          <p
-            className="product-widget__header-metadata"
-            data-testid="product-widget__header-metadata-dates"
-          >
-            <Icon name={IconTypeEnum.CALENDAR} size="small" />
-            <FormattedMessage
-              {...messages.fromTo}
-              values={{
-                from: formatDate(minDate!),
-                to: formatDate(maxDate!),
-              }}
-            />
-          </p>
-          <p
-            className="product-widget__header-metadata"
-            data-testid="product-widget__header-metadata-languages"
-          >
-            <Icon name={IconTypeEnum.LANGUAGES} size="small" />
-            <FormattedMessage {...messages.availableIn} values={{ languages }} />
-          </p>
-        </>
-      )}
-    </header>
-  );
-};
-const Content = ({ product, order }: { product: Joanie.Product; order?: Joanie.Order }) => {
-  const targetCourses = useMemo(() => {
-    if (order) {
-      return order.target_courses;
-    }
-
-    if (product) {
-      return product.target_courses;
-    }
-
-    return [];
-  }, [product, order]);
-
-  return (
-    <ol className="product-widget__content">
-      {Children.toArray(
-        targetCourses.map((target_course) => (
-          <CourseRunItem targetCourse={target_course} order={order} />
-        )),
-      )}
-      {product.certificate_definition && (
-        <CertificateItem certificateDefinition={product.certificate_definition} order={order} />
-      )}
-    </ol>
-  );
-};
-
-const CourseProductItem = ({ productId, courseCode, compact = false }: Props) => {
-  const productQuery = useProduct(productId, { course: courseCode });
-  const product = productQuery.item;
-  const ordersQuery = useOrders({
-    product: productId,
-    course: courseCode,
-    state: [OrderState.VALIDATED, OrderState.PENDING],
-  });
-
-  const order = useMemo(
-    () => ordersQuery.items.find(({ state }) => state === OrderState.VALIDATED),
-    [ordersQuery.items],
-  );
-
-  const hasPurchased = useMemo(() => ordersQuery.items?.length > 0, [ordersQuery.items]);
-  const hasError = Boolean(productQuery.states.error);
-  const isFetching = productQuery.states.fetching || ordersQuery.states.fetching;
-  const canShowContent = !compact || order;
-
-  return (
-    <CourseProductProvider courseCode={courseCode} productId={productId}>
-      <section
-        className={c('product-widget', {
-          'product-widget--has-error': hasError,
-          'product-widget--compact': compact,
-          'product-widget--purchased': hasPurchased,
-        })}
-      >
-        {isFetching && (
-          <div className="product-widget__overlay">
-            <Spinner aria-labelledby="loading-course" theme="light" size="large">
-              <span id="loading-course">
-                <FormattedMessage {...messages.loading} />
-              </span>
-            </Spinner>
-          </div>
-        )}
-        {hasError && (
-          <p className="product-widget__content">
-            <Icon name={IconTypeEnum.WARNING} size="small" />
-            {productQuery.states.error}
-          </p>
-        )}
-        {!hasError && product && (
-          <>
-            <Header product={product} order={order} hasPurchased={hasPurchased} compact={compact} />
-            {canShowContent && <Content product={product} order={order} />}
-            <footer className="product-widget__footer">
-              <PurchaseButton product={product} disabled={hasPurchased} />
-            </footer>
-          </>
-        )}
-      </section>
-    </CourseProductProvider>
-  );
-};
-
-export default CourseProductItem;