👽️(frontend) show custom error message in b2b sale tunnel

The API now returns a 422 error code when the
batch order was created with more seats than
the maximum available.

Author: liamls

CHANGELOG.md

@@ -11,7 +11,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Added
 
 - Add keycloak as an authentication backend
-- Disable quote actions for member users 
+- Disable quote actions for member users
+- Add custom error message for batch orders when there are no available seats
 
 ### Fixed
 

src/frontend/js/components/PaymentInterfaces/types.ts

@@ -10,6 +10,7 @@ export enum SubscriptionErrorMessageId {
   ERROR_FULL_PRODUCT = 'errorFullProduct',
   ERROR_WITHDRAWAL_RIGHT = 'errorWithdrawalRight',
   ERROR_BATCH_ORDER_FORM_INVALID = 'batchOrderFormInvalid',
+  ERROR_BATCH_ORDER_MAX_ORDERS = 'errorBatchOrderMaxOrders',
 }
 
 export enum PaymentProviders {

src/frontend/js/components/SaleTunnel/SubscriptionButton/index.tsx

@@ -67,6 +67,13 @@ const messages = defineMessages({
     defaultMessage: 'Some required fields are missing in the form.',
     description: 'Some required fields are missing in the form.',
   },
+  errorBatchOrderMaxOrders: {
+    id: 'components.SubscriptionButton.errorBatchOrderMaxOrders',
+    defaultMessage:
+      'Unable to create the order: the maximum number of available seats for this offering has been reached. Please contact support for more information.',
+    description:
+      'Error message shown when batch order creation fails because maximum number of orders is reached by an active offering rule.',
+  },
 });
 
 enum ComponentStates {
@@ -172,7 +179,11 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
     batchOrderMethods.create(batchOrder, {
-      onError: async () => {
+      onError: async (createBatchOrderError: HttpError) => {
+        if (createBatchOrderError.code === 422) {
+          handleError(SubscriptionErrorMessageId.ERROR_BATCH_ORDER_MAX_ORDERS);
+          return;
+        }
         handleError();
       },
       onSuccess: async (createdBatchOrder: any) => {

src/frontend/js/components/SaleTunnel/index.full-process-b2b.spec.tsx

@@ -353,4 +353,158 @@ describe('SaleTunnel', () => {
 
     screen.getByText('Subscription confirmed!');
   }, 10000);
+
+  it('should display the appropriate error message when there are not enough seats available', async () => {
+    const course = PacedCourseFactory().one();
+    const product = ProductFactory().one();
+    const offering = OfferingFactory({ course, product, is_withdrawable: false }).one();
+    const paymentPlan = PaymentPlanFactory().one();
+    const offeringOrganization = OfferingBatchOrderFactory({
+      product: { id: product.id, title: product.title },
+    }).one();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
+      offering,
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+      paymentPlan,
+    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
+        product_id: product.id,
+        course_code: course.code,
+        state: NOT_CANCELED_ORDER_STATES,
+      })}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/offerings/${offering.id}/get-organizations/`,
+      offeringOrganization,
+    );
+
+    render(<CourseProductItem productId={product.id} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // Verify product info
+    await screen.findByRole('heading', { level: 3, name: product.title });
+    await screen.findByText(formatPrice(product.price_currency, product.price));
+    expect(screen.queryByText('Purchased')).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    const buyButton = screen.getByRole('button', { name: product.call_to_action });
+
+    expect(screen.queryByTestId('generic-sale-tunnel-payment-step')).not.toBeInTheDocument();
+    await user.click(buyButton);
+    await screen.findByTestId('generic-sale-tunnel-payment-step');
+
+    // Verify learning path
+    await screen.findByText('Your learning path');
+    const targetCourses = await screen.findAllByTestId('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}`,
+      );
+      const summary = courseDetail.querySelector('summary')!;
+      expect(summary).toHaveTextContent(courseItem.title);
+
+      const courseRuns = targetCourse.querySelectorAll(
+        '.product-detail-row__course-run-dates__item',
+      );
+      const openedCourseRuns = courseItem.course_runs.filter(
+        (cr: CourseRun) => cr.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
+      );
+      expect(courseRuns).toHaveLength(openedCourseRuns.length);
+    });
+
+    // Select group buy form
+    await screen.findByText('Purchase type');
+    const formTypeSelect = screen.getByRole('combobox', { name: 'Purchase type' });
+    const menu: HTMLDivElement = screen.getByRole('listbox', { name: 'Purchase type' });
+    expectMenuToBeClosed(menu);
+    await user.click(formTypeSelect);
+    expectMenuToBeOpen(menu);
+    await user.click(screen.getByText('Group purchase (B2B)'));
+
+    // Company step
+    const $companyName = await screen.findByRole('textbox', { name: 'Company name' });
+    const $idNumber = screen.getByRole('textbox', { name: /Identification number/ });
+    const $address = screen.getByRole('textbox', { name: 'Address' });
+    const $postCode = screen.getByRole('textbox', { name: 'Post code' });
+    const $city = screen.getByRole('textbox', { name: 'City' });
+    const $country = screen.getByRole('combobox', { name: 'Country' });
+
+    await user.type($companyName, 'GIP-FUN');
+    await user.type($idNumber, '789 242 229 01694');
+    await user.type($address, '61 Bis Rue de la Glaciere');
+    await user.type($postCode, '75013');
+    await user.type($city, 'Paris');
+
+    const countryMenu: HTMLDivElement = screen.getByRole('listbox', { name: 'Country' });
+    await user.click($country);
+    expectMenuToBeOpen(countryMenu);
+    await user.click(screen.getByText('France'));
+
+    expect($companyName).toHaveValue('GIP-FUN');
+    const visibleValue = $country.querySelector('.c__select__inner__value span');
+    expect(visibleValue!.textContent).toBe('France');
+
+    // Follow-up step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $lastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $firstName = screen.getByRole('textbox', { name: 'First name' });
+    const $role = screen.getByRole('textbox', { name: 'Role' });
+    const $email = screen.getByRole('textbox', { name: 'Email' });
+    const $phone = screen.getByRole('textbox', { name: 'Phone' });
+
+    await user.type($lastName, 'Doe');
+    await user.type($firstName, 'John');
+    await user.type($role, 'HR');
+    await user.type($email, '[email protected]');
+    await user.type($phone, '+338203920103');
+
+    expect($lastName).toHaveValue('Doe');
+    expect($email).toHaveValue('[email protected]');
+
+    // Signatory step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $signatoryLastName = await screen.findByRole('textbox', { name: 'Last name' });
+    const $signatoryFirstName = screen.getByRole('textbox', { name: 'First name' });
+    const $signatoryRole = screen.getByRole('textbox', { name: 'Role' });
+    const $signatoryEmail = screen.getByRole('textbox', { name: 'Email' });
+    const $signatoryPhone = screen.getByRole('textbox', { name: 'Phone' });
+
+    await user.type($signatoryLastName, 'Doe');
+    await user.type($signatoryFirstName, 'John');
+    await user.type($signatoryRole, 'CEO');
+    await user.type($signatoryEmail, '[email protected]');
+    await user.type($signatoryPhone, '+338203920103');
+
+    // Participants step
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    const $nbParticipants = await screen.findByLabelText('How many participants ?');
+    await user.type($nbParticipants, '13');
+    expect($nbParticipants).toHaveValue(13);
+
+    fetchMock.post('https://joanie.endpoint/api/v1.0/batch-orders/', {
+      status: 422,
+      body: {
+        __all__: ['Maximum number of orders reached for product Credential Product'],
+      },
+    });
+
+    const $subscribeButton = screen.getByRole('button', {
+      name: `Subscribe`,
+    }) as HTMLButtonElement;
+    await user.click($subscribeButton);
+
+    await screen.findByText(
+      'Unable to create the order: the maximum number of available seats for this offering has been reached. Please contact support for more information.',
+    );
+  }, 30000);
 });

src/frontend/js/pages/TeacherDashboardOrganizationQuotes/index.spec.tsx

@@ -7,8 +7,8 @@ import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { expectBannerInfo, expectBannerError } from 'utils/test/expectBanner';
-import TeacherDashboardOrganizationQuotes from '.';
 import { BatchOrderState } from 'types/Joanie';
+import TeacherDashboardOrganizationQuotes from '.';
 
 let user: UserEvent;