richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -1,9 +1,11 @@
+import c from 'classnames';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useMemo, useState } from 'react';
+import { Button, ButtonProps } from '@openfun/cunningham-react';
 import { useSession } from 'contexts/SessionContext';
 import * as Joanie from 'types/Joanie';
-import { Priority } from 'types';
-import SaleTunnel from '../SaleTunnel';
+import SaleTunnel, { SaleTunnelProps } from 'components/SaleTunnel';
+import { isOpenedCourseRunCertificate, isOpenedCourseRunCredential } from 'utils/CourseRuns';
 
 const messages = defineMessages({
   loginToPurchase: {
@@ -11,11 +13,17 @@ const messages = defineMessages({
     description: "Label displayed inside the product's CTA when user is not logged in",
     id: 'components.SaleTunnel.loginToPurchase',
   },
-  noCourseRunToPurchase: {
+  noCourseRunToPurchaseCredential: {
     defaultMessage:
-      'At least one course has no course runs, this product is not currently available for sale',
+      'At least one course has no course runs. This product is not currently available for sale.',
     description: "Label displayed below the product's CTA when there is no courseRun",
-    id: 'components.SaleTunnel.noCourseRunToPurchase',
+    id: 'components.SaleTunnel.noCourseRunToPurchaseCredential',
+  },
+  noCourseRunToPurchaseCertificate: {
+    defaultMessage:
+      'The course run is not active. This product is not currently available for sale.',
+    description: "Label displayed below the product's CTA when there is no courseRun",
+    id: 'components.SaleTunnel.noCourseRunToPurchaseCertificate',
   },
   noRemainingOrder: {
     defaultMessage: 'There are no more places available for this product.',
@@ -31,34 +39,66 @@ const messages = defineMessages({
   },
 });
 
-interface PurchaseButtonProps {
-  product: Joanie.Product;
-  disabled: boolean;
+interface PurchaseButtonPropsBase {
+  product: Joanie.CredentialProduct | Joanie.CertificateProduct;
+  orderGroup?: Joanie.OrderGroup;
+  disabled?: boolean;
+  className?: string;
+  buttonProps?: ButtonProps;
+  onFinish?: SaleTunnelProps['onFinish'];
+}
+
+interface CredentialPurchaseButtonProps extends PurchaseButtonPropsBase {
+  product: Joanie.CredentialProduct;
+  course: Joanie.CourseLight;
+  enrollment?: undefined;
 }
 
-const PurchaseButton = ({ product, disabled }: PurchaseButtonProps) => {
+interface CertificatePurchaseButtonProps extends PurchaseButtonPropsBase {
+  product: Joanie.CertificateProduct;
+  course?: undefined;
+  enrollment: Joanie.Enrollment;
+}
+
+const PurchaseButton = ({
+  product,
+  course,
+  enrollment,
+  orderGroup,
+  disabled = false,
+  className,
+  buttonProps,
+  onFinish,
+}: CredentialPurchaseButtonProps | CertificatePurchaseButtonProps) => {
   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(() => {
+    if (product.type === Joanie.ProductType.CERTIFICATE) {
+      if (!enrollment?.course_run) {
+        throw new Error(
+          'Unable to instanciate PurchaseButton with a product CERTIFICATE without the according CourseRun.',
+        );
+      }
+      return isOpenedCourseRunCertificate(enrollment.course_run.state);
+    }
     return (
       product.target_courses.length > 0 &&
-      !product.target_courses.some(({ course_runs }) => !course_runs.some(isOpenedCourseRun))
+      product.target_courses.every(({ course_runs }) =>
+        course_runs.some((targetCourseRun) => isOpenedCourseRunCredential(targetCourseRun.state)),
+      )
     );
   }, [product]);
 
   if (!user) {
     return (
-      <button className="product-item__cta" onClick={login}>
+      <Button fullWidth onClick={login}>
         <FormattedMessage
           {...messages.loginToPurchase}
           values={{ product: <span className="offscreen">&quot;{product.title}&quot;</span> }}
         />
-      </button>
+      </Button>
     );
   }
 
@@ -70,10 +110,10 @@ const PurchaseButton = ({ product, disabled }: PurchaseButtonProps) => {
     <>
       {!disabled && (
         <>
-          {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
-          <button
+          <Button
+            size="small"
             data-testid="PurchaseButton__cta"
-            className="product-item__cta"
+            className={c('purchase-button__cta', className)}
             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
@@ -82,16 +122,21 @@ const PurchaseButton = ({ product, disabled }: PurchaseButtonProps) => {
               product: product.title,
             })}
             disabled={!isPurchasable}
+            {...buttonProps}
           >
             {product.call_to_action}
-          </button>
+          </Button>
           {!hasAtLeastOneCourseRun && (
-            <p className="product-item__no-course-run">
-              <FormattedMessage {...messages.noCourseRunToPurchase} />
+            <p className="purchase-button__no-course-run">
+              <FormattedMessage
+                {...(product.type === Joanie.ProductType.CREDENTIAL
+                  ? messages.noCourseRunToPurchaseCredential
+                  : messages.noCourseRunToPurchaseCertificate)}
+              />
             </p>
           )}
           {hasAtLeastOneCourseRun && !hasAtLeastOneRemainingOrder && (
-            <p className="product-item__no-course-run">
+            <p className="purchase-button__no-course-run">
               <FormattedMessage {...messages.noRemainingOrder} />
             </p>
           )}
@@ -99,8 +144,12 @@ const PurchaseButton = ({ product, disabled }: PurchaseButtonProps) => {
       )}
       <SaleTunnel
         isOpen={isSaleTunnelOpen}
-        product={product}
         onClose={() => setIsSaleTunnelOpen(false)}
+        product={product}
+        enrollment={enrollment}
+        orderGroup={orderGroup}
+        course={course}
+        onFinish={onFinish}
       />
     </>
   );

package/js/components/PurchaseButton/styles.scss

@@ -0,0 +1,7 @@
+.purchase-button__no-course-run {
+  color: r-theme-val(product-item, feedback-color);
+  font-size: 0.8125rem;
+  line-height: 1.2em;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  text-align: center;
+}

package/js/components/RegisteredAddress/_styles.scss

@@ -72,9 +72,7 @@
     display: flex;
     gap: 0.5rem;
 
-    & > .button {
-      min-width: 100px;
-
+    & > .c__button {
       &:disabled {
         visibility: hidden;
       }

package/js/components/RegisteredAddress/index.spec.tsx

@@ -56,7 +56,7 @@ describe('RegisteredAddress', () => {
       </Wrapper>,
     );
 
-    const $button = getByRole(container, 'button', {
+    const $button = getByRole(container, 'radio', {
       name: `Define "${address.title}" address as main`,
     });
     fireEvent.click($button);

package/js/components/RegisteredAddress/index.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { AddressFactory } from 'utils/test/factories/joanie';
+import RegisteredAddress from '.';
+
+export default {
+  component: RegisteredAddress,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  args: {
+    address: AddressFactory().one(),
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(
+      <div className="SaleTunnel__modal modal" style={{ width: '600px' }}>
+        <div className="AddressesManagement">
+          <div className="address-form">
+            <RegisteredAddress {...args} />
+            <RegisteredAddress {...args} address={{ ...args.address, is_main: false }} />
+            <RegisteredAddress {...args} address={{ ...args.address, is_main: false }} />
+          </div>
+        </div>
+      </div>,
+    );
+  },
+} as Meta<typeof RegisteredAddress>;
+
+type Story = StoryObj<typeof RegisteredAddress>;
+
+export const Default: Story = {};
+export const MainAddress: Story = {
+  args: {
+    address: AddressFactory({ is_main: true }).one(),
+  },
+};

package/js/components/RegisteredAddress/index.tsx

@@ -1,3 +1,4 @@
+import { Button, Radio } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import type { Address } from 'types/Joanie';
 
@@ -57,19 +58,14 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
 
   return (
     <li className="registered-addresses-item">
-      <button
+      <Radio
         aria-describedby={`address-${address.id}-infos`}
         aria-label={intl.formatMessage(messages.promoteButtonLabel, { title: address.title })}
-        className="button"
-        onClick={() => promote(address)}
+        onChange={() => promote(address)}
         title={intl.formatMessage(messages.promoteButtonLabel, { title: address.title })}
-      >
-        <span
-          className={`address-main-indicator ${
-            address.is_main ? 'address-main-indicator--is-main' : ''
-          }`}
-        />
-      </button>
+        name="registered-addresses"
+        checked={address.is_main}
+      />
       <strong
         data-testid={`address-${address.id}-title`}
         className="h6 registered-addresses-item__title"
@@ -86,30 +82,32 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
         {address.address} {address.postcode} {address.city}, {address.country}
       </address>
       <p className="registered-addresses-item__actions">
-        <button
+        <Button
           aria-label={intl.formatMessage(messages.selectButtonLabel, { title: address.title })}
-          className="button button--tiny button--pill button-sale--primary"
+          size="small"
           onClick={() => select(address)}
         >
           <FormattedMessage {...messages.selectButton} />
-        </button>
-        <button
+        </Button>
+        <Button
           aria-label={intl.formatMessage(messages.editButtonLabel, { title: address.title })}
-          className="button button--tiny button--pill  button-sale--secondary"
+          color="secondary"
+          size="small"
           onClick={() => edit(address)}
         >
           <FormattedMessage {...messages.editButton} />
-        </button>
-        <button
+        </Button>
+        <Button
           aria-label={intl.formatMessage(messages.deleteButtonLabel, {
             title: address.title,
           })}
-          className="button button--tiny button--pill  button-sale--secondary"
+          color="secondary"
+          size="small"
           disabled={address.is_main}
           onClick={() => remove(address)}
         >
           <FormattedMessage {...messages.deleteButton} />
-        </button>
+        </Button>
       </p>
     </li>
   );

package/js/components/SaleTunnel/_styles.scss

@@ -0,0 +1,11 @@
+.SaleTunnel__modal {
+  min-height: 500px;
+
+  &-body {
+    padding: 0 3rem 1.5rem 3rem;
+
+    @include media-breakpoint-down(sm) {
+      padding: 0 1rem 1.5rem 1rem;
+    }
+  }
+}

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

@@ -1,3 +1,4 @@
+import { Checkbox } from '@openfun/cunningham-react';
 import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import type * as Joanie from 'types/Joanie';
@@ -35,8 +36,8 @@ export const RegisteredCreditCard = ({ selected, handleSelect, ...creditCard }:
 
   return (
     <label className="registered-credit-card">
-      <p className="form-field">
-        <input
+      <div className="form-field">
+        <Checkbox
           aria-label={intl.formatMessage(messages.inputAriaLabel, {
             title: creditCard.title,
             selected,
@@ -48,14 +49,7 @@ export const RegisteredCreditCard = ({ selected, handleSelect, ...creditCard }:
           type="checkbox"
           id={inputId}
         />
-        <label htmlFor={inputId} className="form-field__label">
-          <span className="form-field__checkbox-control">
-            <svg role="img" aria-hidden="true">
-              <use href="#icon-check" />
-            </svg>
-          </span>
-        </label>
-      </p>
+      </div>
       <div id={`credit-card-${creditCard.id}-infos`} className="registered-credit-card__infos">
         <strong className="h6 registered-credit-card__name">
           {creditCard.title || creditCard.brand}

package/js/{widgets/CourseProductItem → components/SaleTunnel}/components/SaleTunnelStepPayment/_styles.scss

@@ -153,6 +153,13 @@
       }
     }
 
+    &__address-selection {
+      margin-top: 0.625rem;
+      &__address {
+        margin-top: 0.625rem;
+      }
+    }
+
     .form-field {
       margin-bottom: 0;
     }

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

@@ -1,19 +1,30 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { PropsWithChildren, useMemo, useState } from 'react';
+import userEvent from '@testing-library/user-event';
+import { queryByRole } from '@testing-library/dom';
 import {
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
 } from 'utils/test/factories/richie';
-import { ProductFactory, AddressFactory, CreditCardFactory } from 'utils/test/factories/joanie';
+import {
+  ProductFactory,
+  AddressFactory,
+  CreditCardFactory,
+  CourseLightFactory,
+} from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
-import { Address, CreditCard } from 'types/Joanie';
+import { Address, CreditCard, Order, Product } from 'types/Joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
+import { SaleTunnelContext, SaleTunnelContextType } from 'components/SaleTunnel/context';
+import { Maybe } from 'types/utils';
 import { SaleTunnelStepPayment } from '.';
 
-jest.mock('../PaymentButton', () => ({
+jest.mock('components/PaymentButton', () => ({
   __esModule: true,
   default: () => <h1>Payment Button</h1>,
 }));
@@ -27,6 +38,35 @@ jest.mock('utils/context', () => ({
 }));
 
 describe('SaleTunnelStepPayment', () => {
+  const Wrapper = ({
+    children,
+    user,
+    product,
+  }: PropsWithChildren<{ user?: User; product: Product }>) => {
+    const [order, setOrder] = useState<Maybe<Order>>();
+    const context: SaleTunnelContextType = useMemo(
+      () => ({
+        product,
+        order,
+        setOrder,
+        course: CourseLightFactory({ code: '00000' }).one(),
+        key: `00000+${product.id}`,
+      }),
+      [product, order, setOrder],
+    );
+
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: user || true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <CunninghamProvider>
+              <SaleTunnelContext.Provider value={context}>{children}</SaleTunnelContext.Provider>
+            </CunninghamProvider>
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
   const mockNext = jest.fn();
 
   beforeEach(() => {
@@ -45,13 +85,9 @@ describe('SaleTunnelStepPayment', () => {
 
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -63,22 +99,17 @@ describe('SaleTunnelStepPayment', () => {
     // - It should display product information (title & price)
     screen.getByRole('heading', { level: 2, name: 'You are about to purchase' });
     screen.getByText(product.title, { exact: true });
-    screen.getByText(formatter.format(product.price).replaceAll(' ', ' '));
+    screen.getByText(formatter.format(product.price).replaceAll(/\s/g, ' '));
   });
 
   it('should display authenticated user information', async () => {
-    const user: User = UserFactory({ fullname: undefined }).one();
     const product = ProductFactory().one();
-
+    const user: User = UserFactory({ full_name: undefined }).one();
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper user={user} product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -90,15 +121,11 @@ describe('SaleTunnelStepPayment', () => {
   it('should display a button to create an address if user has no address ', async () => {
     const product = ProductFactory().one();
 
-    await act(() => {
+    await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -131,13 +158,9 @@ describe('SaleTunnelStepPayment', () => {
 
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -148,12 +171,22 @@ describe('SaleTunnelStepPayment', () => {
 
     // - A select field containing all addresses should be displayed
     const dropdown = screen.getByRole('combobox', { name: 'Select a billing address' });
+    const addressListBox = screen.getByRole('listbox');
+    const $addressOptionById: Record<string, HTMLOptionElement> = {};
+    await act(async () => {
+      const user = userEvent.setup();
+      await user.click(dropdown);
+    });
     addresses.forEach((address) => {
-      const $option = screen.getByTestId(`address-${address.id}-option`) as HTMLOptionElement;
+      $addressOptionById[address.id] = within(addressListBox).getByRole('option', {
+        name: new RegExp(address.title),
+      }) as HTMLOptionElement;
       // - By default, the main address should be selected
-      expect($option.selected).toBe(address.is_main);
+      expect($addressOptionById[address.id]).toHaveAttribute(
+        'aria-selected',
+        address.is_main.toString(),
+      );
     });
-
     const mainAddress = addresses.find((address) => address.is_main)!;
     screen.getByText(
       new RegExp(
@@ -167,7 +200,7 @@ describe('SaleTunnelStepPayment', () => {
     // Select another address should update the combobox
     const notMainAddress = addresses.find((a) => !a.is_main)!;
     await act(async () => {
-      fireEvent.change(dropdown, { target: { value: notMainAddress.id } });
+      await userEvent.click($addressOptionById[notMainAddress.id]);
     });
     screen.getByText(
       new RegExp(
@@ -178,6 +211,9 @@ describe('SaleTunnelStepPayment', () => {
       },
     );
 
+    // The select field should not be clearable
+    expect(queryByRole(dropdown, 'button', { name: 'Clear selection' })).toBeNull();
+
     // A button to add an address should be displayed
     const $button = screen.getByText('Add an address', { selector: 'button' });
 
@@ -194,13 +230,9 @@ describe('SaleTunnelStepPayment', () => {
 
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -223,13 +255,9 @@ describe('SaleTunnelStepPayment', () => {
 
     await act(async () => {
       render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <SaleTunnelStepPayment product={product} next={mockNext} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
+        <Wrapper product={product}>
+          <SaleTunnelStepPayment next={mockNext} />
+        </Wrapper>,
       );
     });
 
@@ -279,13 +307,9 @@ describe('SaleTunnelStepPayment', () => {
     const product = ProductFactory().one();
 
     render(
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <SaleTunnelStepPayment product={product} next={mockNext} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>,
+      <Wrapper product={product}>
+        <SaleTunnelStepPayment next={mockNext} />
+      </Wrapper>,
     );
 
     await waitFor(() => {