richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -1,15 +1,17 @@
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
+import { Button, Select } from '@openfun/cunningham-react';
+import PaymentButton from 'components/PaymentButton';
 import AddressesManagement, { LOCAL_BILLING_ADDRESS_ID } from 'components/AddressesManagement';
-import { SelectField } from 'components/Form';
 import { useSession } from 'contexts/SessionContext';
 import { useAddresses } from 'hooks/useAddresses';
 import { useCreditCards } from 'hooks/useCreditCards';
 import type * as Joanie from 'types/Joanie';
 import type { Maybe, Nullable } from 'types/utils';
 import { Icon, IconTypeEnum } from 'components/Icon';
+import { useSaleTunnelContext } from 'components/SaleTunnel/context';
+import { UserHelper } from 'utils/UserHelper';
 import { RegisteredCreditCard } from '../RegisteredCreditCard';
-import PaymentButton from '../PaymentButton';
 
 const messages = defineMessages({
   resumeTile: {
@@ -55,11 +57,11 @@ const messages = defineMessages({
 });
 
 interface SaleTunnelStepPaymentProps {
-  product: Joanie.Product;
   next: () => void;
 }
 
-export const SaleTunnelStepPayment = ({ product, next }: SaleTunnelStepPaymentProps) => {
+export const SaleTunnelStepPayment = ({ next }: SaleTunnelStepPaymentProps) => {
+  const { product } = useSaleTunnelContext();
   /**
    * Sort addresses ascending by title according to the locale
    *
@@ -121,10 +123,10 @@ export const SaleTunnelStepPayment = ({ product, next }: SaleTunnelStepPaymentPr
    * Retrieve address through its `id` provided by the event target value
    * then update `selectedAddress` state
    *
-   * @param {React.ChangeEvent<HTMLSelectElement>} event
+   * @param {string} newValue
    */
-  const handleSelectAddress = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const targetedAddress = addresses.items.find((a) => a.id === event.target.value);
+  const handleSelectAddress = (newValue: string) => {
+    const targetedAddress = addresses.items.find((a) => a.id === newValue);
     if (targetedAddress) {
       setAddress(targetedAddress);
     }
@@ -188,7 +190,7 @@ export const SaleTunnelStepPayment = ({ product, next }: SaleTunnelStepPaymentPr
         </header>
         <div className="SaleTunnelStepPayment__block--buyer">
           <strong className="h6 SaleTunnelStepPayment__block--buyer__name">
-            {user.fullname || user.username}
+            {UserHelper.getName(user)}
           </strong>
           {user.email ? (
             <p className="SaleTunnelStepPayment__block--buyer__email">{user.email}</p>
@@ -202,59 +204,56 @@ export const SaleTunnelStepPayment = ({ product, next }: SaleTunnelStepPaymentPr
               <FormattedMessage {...messages.userBillingAddressFieldset} />
             </h3>
             {addressesItems.length > 0 && (
-              <button
-                className="button button--tiny button--pill button-sale--secondary"
+              <Button
+                size="small"
+                color="secondary"
                 onClick={() => setShowAddressCreationForm(true)}
+                icon={<Icon name={IconTypeEnum.PLUS} className="button__icon" size="small" />}
               >
-                <Icon name={IconTypeEnum.PLUS} className="button__icon" size="small" />
                 <FormattedMessage {...messages.userBillingAddressAddLabel} />
-              </button>
+              </Button>
             )}
           </header>
-          {addressesItems.length > 0 ? (
-            <Fragment>
-              <SelectField
-                fieldClasses={['form-field--minimal']}
-                id="invoice_address"
-                name="invoice_address"
-                label={intl.formatMessage(messages.userBillingAddressSelectLabel)}
-                onChange={handleSelectAddress}
-                defaultValue={selectedAddress!.id || ''}
-              >
-                {addressesItems.map(({ id, title }) => (
-                  <option
-                    data-testid={`address-${id}-option`}
-                    key={`address-${id}-option`}
-                    value={id}
-                  >
-                    {title}
-                  </option>
-                ))}
-              </SelectField>
-              <address className="SaleTunnelStepPayment__block--buyer__address">
-                {selectedAddress!.first_name}&nbsp;{selectedAddress!.last_name}
-                <br />
-                {selectedAddress!.address}
-                <br />
-                {selectedAddress!.postcode} {selectedAddress!.city}, {selectedAddress!.country}
-              </address>
-            </Fragment>
-          ) : (
-            <Fragment>
-              <p className="SaleTunnelStepPayment__block--buyer__address__noAddress">
-                <em>
-                  <FormattedMessage {...messages.userBillingAddressNoEntry} />
-                </em>
-              </p>
-              <button
-                className="button button--tiny button--pill button-sale--primary"
-                onClick={() => setShowAddressCreationForm(true)}
-              >
-                <Icon name={IconTypeEnum.PLUS} size="small" className="button__icon" />
-                <FormattedMessage {...messages.userBillingAddressCreateLabel} />
-              </button>
-            </Fragment>
-          )}
+          <div className="SaleTunnelStepPayment__block--buyer__address-selection">
+            {addressesItems.length > 0 ? (
+              <Fragment>
+                <Select
+                  className="form-field--minimal"
+                  name="invoice_address"
+                  clearable={false}
+                  label={intl.formatMessage(messages.userBillingAddressSelectLabel)}
+                  onChange={(e) => handleSelectAddress((e.target.value || '') as string)}
+                  defaultValue={selectedAddress!.id || ''}
+                  options={addressesItems.map(({ id, title }) => ({
+                    label: title,
+                    value: id,
+                  }))}
+                />
+                <address className="SaleTunnelStepPayment__block--buyer__address-selection__address">
+                  {selectedAddress!.first_name}&nbsp;{selectedAddress!.last_name}
+                  <br />
+                  {selectedAddress!.address}
+                  <br />
+                  {selectedAddress!.postcode} {selectedAddress!.city}, {selectedAddress!.country}
+                </address>
+              </Fragment>
+            ) : (
+              <Fragment>
+                <p className="SaleTunnelStepPayment__block--buyer__address__noAddress">
+                  <em>
+                    <FormattedMessage {...messages.userBillingAddressNoEntry} />
+                  </em>
+                </p>
+                <Button
+                  size="small"
+                  onClick={() => setShowAddressCreationForm(true)}
+                  icon={<Icon name={IconTypeEnum.PLUS} size="small" className="button__icon" />}
+                >
+                  <FormattedMessage {...messages.userBillingAddressCreateLabel} />
+                </Button>
+              </Fragment>
+            )}
+          </div>
         </div>
       </section>
       {creditCards.items?.length > 0 ? (
@@ -279,7 +278,6 @@ export const SaleTunnelStepPayment = ({ product, next }: SaleTunnelStepPaymentPr
       ) : null}
       <footer className="SaleTunnelStepPayment__footer">
         <PaymentButton
-          product={product}
           creditCard={selectedCreditCard}
           billingAddress={selectedAddress}
           onSuccess={next}

package/js/components/SaleTunnel/components/SaleTunnelStepResume/_styles.scss

@@ -0,0 +1,63 @@
+//
+// 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;
+  }
+
+  &__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/components/SaleTunnel/components/SaleTunnelStepResume/index.spec.tsx

@@ -0,0 +1,80 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import {
+  CourseLightFactory,
+  CredentialOrderFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
+import { SaleTunnelContext } from 'components/SaleTunnel/context';
+import { SaleTunnelStepResume } from '.';
+
+describe('SaleTunnelStepResume', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('shows a success message and a CTA to start the course for a product without contract definition', () => {
+    const mockNext = jest.fn();
+    const product = ProductFactory().one();
+    product.contract_definition = undefined;
+
+    render(
+      <IntlProvider locale="en">
+        <SaleTunnelContext.Provider
+          value={{
+            product,
+            course: CourseLightFactory({ code: '00000' }).one(),
+            key: `00000+${product.id}`,
+          }}
+        >
+          <SaleTunnelStepResume next={mockNext} />
+        </SaleTunnelContext.Provider>
+      </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);
+  });
+
+  it('shows a success message and a CTA to sign the order for a product with a contract definition', () => {
+    const mockNext = jest.fn();
+    const product = ProductFactory().one();
+    const order = CredentialOrderFactory().one();
+
+    render(
+      <IntlProvider locale="en">
+        <SaleTunnelContext.Provider
+          value={{
+            product,
+            order,
+            course: CourseLightFactory({ code: '00000' }).one(),
+            key: `00000+${product.id}`,
+          }}
+        >
+          <SaleTunnelStepResume next={mockNext} />
+        </SaleTunnelContext.Provider>
+      </IntlProvider>,
+    );
+
+    const successLogo = screen.getByRole('img');
+    expect(successLogo).toBeInstanceOf(SVGElement);
+
+    screen.getByRole('heading', { level: 3, name: 'Congratulations!' });
+    screen.getByText(
+      /In order to enroll to course runs you first need to sign the training contract/,
+    );
+
+    // Click on the button trigger the next function
+    const button = screen.getByRole('link', { name: 'Sign the training contract' });
+    expect(button).toHaveAttribute('href', `/en/dashboard/courses/orders/${order.id}`);
+    fireEvent.click(button);
+    expect(mockNext).toHaveBeenCalledTimes(0);
+  });
+});

package/js/components/SaleTunnel/components/SaleTunnelStepResume/index.tsx

@@ -0,0 +1,88 @@
+import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { SuccessIcon } from 'components/SuccessIcon';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
+import { useSaleTunnelContext } from 'components/SaleTunnel/context';
+import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
+
+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',
+  },
+  successDetailSignatureMessage: {
+    defaultMessage:
+      'In order to enroll to course runs you first need to sign the training contract.',
+    description: 'Text to remind that order needs to be signed',
+    id: 'components.SaleTunnelStepResume.successDetailSignatureMessage',
+  },
+  cta: {
+    defaultMessage: 'Start this course now!',
+    description: 'Label to the call to action to close sale tunnel',
+    id: 'components.SaleTunnelStepResume.cta',
+  },
+  ctaSignature: {
+    defaultMessage: 'Sign the training contract',
+    description: 'Label to the call to action to close sale tunnel if there is a pending signature',
+    id: 'components.SaleTunnelStepResume.ctaSignature',
+  },
+});
+
+interface SaleTunnelStepResumeProps {
+  next: () => void;
+}
+
+export const SaleTunnelStepResume = ({ next }: SaleTunnelStepResumeProps) => {
+  const intl = useIntl();
+  const { order, product } = useSaleTunnelContext();
+
+  return (
+    <section className="SaleTunnelStepResume">
+      <header className="SaleTunnelStepResume__header">
+        <SuccessIcon />
+        <h3 className="SaleTunnelStepResume__title">
+          <FormattedMessage {...messages.congratulations} />
+        </h3>
+      </header>
+      <p className="SaleTunnelStepResume__content">
+        <FormattedMessage {...messages.successMessage} />
+        <br />
+        <FormattedMessage {...messages.successDetailMessage} />
+        {product.contract_definition && (
+          <>
+            <br />
+            <FormattedMessage {...messages.successDetailSignatureMessage} />
+          </>
+        )}
+      </p>
+      <footer className="SaleTunnelStepResume__footer">
+        {product.contract_definition ? (
+          <Button
+            href={
+              getDashboardBasename(intl.locale) +
+              getDashboardRoutePath(intl)(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+            }
+          >
+            <FormattedMessage {...messages.ctaSignature} />
+          </Button>
+        ) : (
+          <Button onClick={next}>
+            <FormattedMessage {...messages.cta} />
+          </Button>
+        )}
+      </footer>
+    </section>
+  );
+};

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

@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import * as Joanie from 'types/Joanie';
 import useDateFormat from 'hooks/useDateFormat';
 import { IntlHelper } from 'utils/IntlHelper';
-import EnrollmentDate from 'widgets/CourseProductItem/components/EnrollmentDate';
+import EnrollmentDate from 'components/EnrollmentDate';
 
 const messages = defineMessages({
   availableCourseRuns: {
@@ -66,7 +66,11 @@ const CourseRunsList = ({ courseRuns }: PropsWithChildren<{ courseRuns: Joanie.C
       </p>
       <ul className="product-detail-row__course-run-dates__list">
         {courseRuns.map((courseRun) => (
-          <li className="product-detail-row__course-run-dates__item" key={courseRun.id}>
+          <li
+            className="product-detail-row__course-run-dates__item"
+            key={courseRun.id}
+            data-testid="course-run-list-item"
+          >
             <FormattedMessage
               {...messages.courseRunDates}
               values={{

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

@@ -122,6 +122,11 @@
       margin: 0;
       padding: 0;
     }
+
+    &__instructions {
+      margin-top: rem-calc(8px);
+      max-width: rem-calc(600px);
+    }
   }
 
   .product-detail-row__course-run {

package/js/components/SaleTunnel/components/SaleTunnelStepValidation/index.spec.tsx

@@ -0,0 +1,170 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { userEvent } from '@storybook/testing-library';
+import { PropsWithChildren, useMemo, useState } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { Priority } from 'types';
+import {
+  CourseRun,
+  Enrollment,
+  Order,
+  Product,
+  ProductType,
+  isCertificateProduct,
+} from 'types/Joanie';
+import {
+  CertificateProductFactory,
+  CourseLightFactory,
+  CredentialProductFactory,
+  EnrollmentFactory,
+} from 'utils/test/factories/joanie';
+import { User } from 'types/User';
+import { Maybe } from 'types/utils';
+import { SaleTunnelContext, SaleTunnelContextType } from 'components/SaleTunnel/context';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { SessionProvider } from 'contexts/SessionContext';
+import { SaleTunnelStepValidation } from '.';
+
+describe('SaleTunnelStepValidation', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  const Wrapper = ({
+    children,
+    user,
+    product,
+    enrollment,
+  }: PropsWithChildren<{ user?: User; product: Product; enrollment?: Enrollment }>) => {
+    const [order, setOrder] = useState<Maybe<Order>>();
+    const context: SaleTunnelContextType = useMemo(() => {
+      if (isCertificateProduct(product)) {
+        return {
+          product,
+          order,
+          setOrder,
+          key: `${enrollment!.id}+${product.id}`,
+          enrollment: enrollment!,
+        };
+      }
+      return {
+        product,
+        order,
+        setOrder,
+        course: CourseLightFactory({ code: '00000' }).one(),
+        key: `00000+${product.id}`,
+      };
+    }, [product, order, setOrder, enrollment]);
+
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: user || true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <CunninghamProvider>
+              <SaleTunnelContext.Provider value={context}>{children}</SaleTunnelContext.Provider>
+            </CunninghamProvider>
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  it.each([
+    { productType: ProductType.CERTIFICATE, instructions: true },
+    { productType: ProductType.CREDENTIAL, instructions: true },
+    { productType: ProductType.CERTIFICATE, instructions: false },
+    { productType: ProductType.CREDENTIAL, instructions: false },
+  ])('shows generic informations for product %s', async ({ productType, instructions }) => {
+    const productInstructions = instructions ? '<h2>Product instructions</h2>' : null;
+    const product =
+      productType === ProductType.CERTIFICATE
+        ? CertificateProductFactory({ instructions: productInstructions }).one()
+        : CredentialProductFactory({ instructions: productInstructions }).one();
+    const enrollment =
+      productType === ProductType.CERTIFICATE ? EnrollmentFactory().one() : undefined;
+
+    const mockNext = jest.fn();
+    render(
+      <Wrapper product={product} enrollment={enrollment}>
+        <SaleTunnelStepValidation next={mockNext} />
+      </Wrapper>,
+    );
+
+    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(/\s/g, ' ')} including VAT`);
+
+    expect(screen.getByTestId('product-certificate')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 3, name: product.certificate_definition.title }));
+
+    if (instructions) {
+      expect(screen.getByRole('heading', { name: 'Product instructions' })).toBeInTheDocument();
+    }
+
+    // Click on the button trigger the next function
+    const button = screen.getByRole('button', { name: 'Proceed to payment' });
+    await userEvent.click(button);
+    expect(mockNext).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows product credential target course runs informations', async () => {
+    const product = CredentialProductFactory().one();
+    render(
+      <Wrapper product={product}>
+        <SaleTunnelStepValidation next={jest.fn()} />
+      </Wrapper>,
+    );
+
+    const targetCourses = screen.getAllByTestId('product-target-course');
+    expect(targetCourses).toHaveLength(product.target_courses.length);
+    targetCourses.forEach((targetCourse, index) => {
+      const courseItem = product.target_courses[index];
+      const courseDetail = within(targetCourse).getByTestId(
+        `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 = targetCourse.querySelectorAll(
+        '.product-detail-row__course-run-dates__item',
+      );
+      // Only course runs opened for enrollment should be displayed
+      const openedCourseRuns = courseItem.course_runs.filter(
+        (cr: CourseRun) => cr.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
+      );
+      expect(courseRuns).toHaveLength(openedCourseRuns.length);
+    });
+  });
+
+  it('shows product certificate linked course run informations', () => {
+    const product = CertificateProductFactory().one();
+    const enrollment = EnrollmentFactory().one();
+
+    render(
+      <Wrapper product={product} enrollment={enrollment}>
+        <SaleTunnelStepValidation next={jest.fn()} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        level: 3,
+        name: enrollment.course_run.course.title,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('course-run-list-item')).toBeInTheDocument();
+  });
+});