richie-education 2.18.0 → 2.19.0

package/i18n/locales/ar-SA.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Loading product information..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "End"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Cannot find the product"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "An error occurred while fetching product. Please retry later."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "An error occurred while creating a resource. Please retry later."

package/i18n/locales/es-ES.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Loading product information..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "Fin"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Cannot find the product"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "An error occurred while fetching product. Please retry later."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "An error occurred while creating a resource. Please retry later."

package/i18n/locales/fa-IR.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Loading product information..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "End"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Cannot find the product"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "An error occurred while fetching product. Please retry later."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "An error occurred while creating a resource. Please retry later."

package/i18n/locales/fr-CA.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Chargement des informations du produit..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "Fin"
@@ -827,13 +831,21 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Impossible de trouver le produit"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
-    "message": "Une erreur s'est produite lors de la récupération du produit. Veuillez réessayer plus tard."
+    "message": "An error occurred while fetching product. Please retry later."
+  },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
   },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",

package/i18n/locales/fr-FR.json

@@ -1,11 +1,11 @@
 {
   "16uca+": {
     "description": "",
-    "message": "Sub \"{value}\""
+    "message": "Sous \"{value}\""
   },
   "9vqPaF": {
     "description": "",
-    "message": "Root"
+    "message": "Racine"
   },
   "components.AddressesManagement.actionPromotion": {
     "description": "Action name for address promotion.",
@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Chargement des informations produit..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "En attente"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "Fin"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "Une erreur s'est produite lors de la modification de votre inscription. Veuillez réessayer plus tard."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Produit introuvable"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "Une erreur s'est produite lors de la récupération de vos commandes. Veuillez réessayer plus tard."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Commandes introuvables."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "Une erreur s'est produite lors de la récupération du produit. Veuillez réessayer plus tard."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Produit introuvable."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "Une erreur s'est produite lors de la création de la ressource. Veuillez réessayer plus tard."

package/i18n/locales/ko-KR.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Loading product information..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "End"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Cannot find the product"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "An error occurred while fetching product. Please retry later."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "An error occurred while creating a resource. Please retry later."

package/i18n/locales/pt-PT.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "A carregar informação do produto..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "Fim"
@@ -827,13 +831,21 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "Ocorreu um erro durante a atualização das inscrições. Por favor, tente mais tarde."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Não foi possível localizar o produto"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "Ocorreu um erro durante o processamento das encomendas. Por favor, tente mais tarde."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Não foi possível encontrar encomendas."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
-    "message": "Ocorreu um erro durante o processamento do produto. Tente novamente mais tarde."
+    "message": "Ocorreu um erro durante o processamento do produto. Por favor, tente mais tarde."
+  },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Não foi possível encontrar o produto."
   },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",

package/i18n/locales/ru-RU.json

@@ -175,6 +175,10 @@
     "description": "Accessible text for the initial loading spinner displayed when product is fetching",
     "message": "Loading product information..."
   },
+  "components.CourseProductItem.pending": {
+    "description": "Message displayed when authenticated user has purchased the product but order is still pending",
+    "message": "Pending"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "Окончание"
@@ -827,14 +831,22 @@
     "description": "Error message shown to the user when enrollment update request fails.",
     "message": "An error occurred while updating the enrollment. Please retry later."
   },
-  "hooks.useProduct.errorNotFound": {
-    "description": "Error message shown to the user when no product matches.",
-    "message": "Cannot find the product"
+  "hooks.useOrders.errorGet": {
+    "description": "Error message shown to the user when orders fetch request fails.",
+    "message": "An error occurred while fetching orders. Please retry later."
+  },
+  "hooks.useOrders.errorNotFound": {
+    "description": "Error message shown to the user when no orders matches.",
+    "message": "Cannot find the orders."
   },
-  "hooks.useProduct.errorSelect": {
+  "hooks.useProduct.errorGet": {
     "description": "Error message shown to the user when product fetch request fails.",
     "message": "An error occurred while fetching product. Please retry later."
   },
+  "hooks.useProduct.errorNotFound": {
+    "description": "Error message shown to the user when no product matches.",
+    "message": "Cannot find the product."
+  },
   "hooks.useResources.errorCreate": {
     "description": "Error message shown to the user when resource creation request fails.",
     "message": "An error occurred while creating a resource. Please retry later."

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

@@ -0,0 +1,154 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ContextFactory as mockContextFactory, ProductFactory } from 'utils/test/factories';
+import { SessionProvider } from 'data/SessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import PurchaseButton from './PurchaseButton';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).generate(),
+}));
+
+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 }>) => (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={client}>
+        <SessionProvider>{children}</SessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+
+  it('shows a login button if user is not authenticated', async () => {
+    const product = ProductFactory.generate();
+
+    await act(async () => {
+      render(
+        <Wrapper client={createTestQueryClient({ user: null })}>
+          <PurchaseButton product={product} disabled={false} />
+        </Wrapper>,
+      );
+    });
+
+    await screen.findByRole('button', { name: `Login to purchase "${product.title}"` });
+  });
+
+  it('shows cta to open sale tunnel when user is authenticated', async () => {
+    const product = ProductFactory.generate();
+    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/', []);
+
+    await act(async () => {
+      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();
+
+    // Then user can enter into the sale tunnel and follow its 3 steps
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    // - SaleTunnel should have been opened
+    screen.getByTestId('SaleTunnel__modal');
+  });
+
+  it('renders a disabled CTA if one target course has no course runs', async () => {
+    const product = ProductFactory.generate();
+    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/', []);
+
+    await act(async () => {
+      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.disabled).toBe(true);
+
+    // 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.generate();
+    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/', []);
+
+    await act(async () => {
+      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.disabled).toBe(true);
+
+    // 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.generate();
+    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/', []);
+
+    await act(async () => {
+      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/components/CourseProductItem/PurchaseButton.tsx

@@ -0,0 +1,93 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useMemo, useState } from 'react';
+import { useSession } from 'data/SessionProvider';
+import * as Joanie from 'types/Joanie';
+import { Priority } from 'types';
+import SaleTunnel from 'components/SaleTunnel';
+
+const messages = defineMessages({
+  loginToPurchase: {
+    defaultMessage: 'Login to purchase {product}',
+    description: "Label displayed inside the product's CTA when user is not logged in",
+    id: 'components.SaleTunnel.loginToPurchase',
+  },
+  noCourseRunToPurchase: {
+    defaultMessage:
+      'At least one course has no course runs, this product is not currently available for sale',
+    description: "Label displayed inside the product's when there is no courseRun",
+    id: 'components.SaleTunnel.noCourseRunToPurchase',
+  },
+  callToActionDescription: {
+    defaultMessage: 'Purchase {product}',
+    description:
+      'Additional description announced by screen readers when focusing the call to action buying button',
+    id: 'components.SaleTunnel.callToActionDescription',
+  },
+});
+
+interface PurchaseButtonProps {
+  product: Joanie.Product;
+  disabled: boolean;
+}
+
+const PurchaseButton = ({ product, disabled }: PurchaseButtonProps) => {
+  const intl = useIntl();
+  const { user, login } = useSession();
+  const [isSaleTunnelOpen, setIsSaleTunnelOpen] = useState(false);
+
+  const isOpenedCourseRun = (courseRun: Joanie.CourseRun) =>
+    courseRun.state.priority <= Priority.FUTURE_NOT_YET_OPEN;
+
+  const hasAtLeastOneCourseRun = useMemo(() => {
+    return (
+      product.target_courses.length > 0 &&
+      !product.target_courses.some(({ course_runs }) => !course_runs.some(isOpenedCourseRun))
+    );
+  }, [product]);
+
+  if (!user) {
+    return (
+      <button className="product-item__cta" onClick={login}>
+        <FormattedMessage
+          {...messages.loginToPurchase}
+          values={{ product: <span className="offscreen">&quot;{product.title}&quot;</span> }}
+        />
+      </button>
+    );
+  }
+
+  return (
+    <>
+      {!disabled && (
+        <>
+          <button
+            data-testid="PurchaseButton__cta"
+            className="product-item__cta"
+            onClick={() => hasAtLeastOneCourseRun && setIsSaleTunnelOpen(true)}
+            // so that the button is explicit on its own, we add a description that doesn't
+            // rely on the text coming from the CMS
+            // eslint-disable-next-line jsx-a11y/aria-props
+            aria-description={intl.formatMessage(messages.callToActionDescription, {
+              product: product.title,
+            })}
+            disabled={!hasAtLeastOneCourseRun}
+          >
+            {product.call_to_action}
+          </button>
+          {!hasAtLeastOneCourseRun && (
+            <p className="product-item__no-course-run">
+              <FormattedMessage {...messages.noCourseRunToPurchase} />
+            </p>
+          )}
+        </>
+      )}
+      <SaleTunnel
+        isOpen={isSaleTunnelOpen}
+        product={product}
+        onClose={() => setIsSaleTunnelOpen(false)}
+      />
+    </>
+  );
+};
+
+export default PurchaseButton;

package/js/components/CourseProductItem/_styles.scss

@@ -8,6 +8,20 @@
   min-height: 100px;
   overflow: hidden;
 
+  &--has-error {
+    align-items: center;
+    border-color: r-theme-val(product-item, feedback-color);
+    display: flex;
+
+    & > .product-widget__content {
+      color: r-theme-val(product-item, feedback-color);
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      margin-bottom: 0;
+    }
+  }
+
   &:not(:last-child) {
     margin-bottom: 1.5rem;
   }