richie-education 3.2.2-dev30 → 3.2.2-dev37

package/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 {

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup.tsx

@@ -86,6 +86,8 @@ export const SaleTunnelInformationGroup = () => {
   );
 };
 
+const EMAIL_REGEX = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/;
+
 export const validationSchema = Yup.object().shape({
   offering_id: Yup.string().required(),
   company_name: Yup.string().required(),
@@ -98,23 +100,25 @@ export const validationSchema = Yup.object().shape({
   administrative_lastname: Yup.string().required(),
   administrative_firstname: Yup.string().required(),
   administrative_profession: Yup.string().required(),
-  administrative_email: Yup.string().email().required(),
+  administrative_email: Yup.string().matches(EMAIL_REGEX).required(),
   administrative_telephone: Yup.string().required(),
   signatory_lastname: Yup.string().required(),
   signatory_firstname: Yup.string().required(),
   signatory_profession: Yup.string().required(),
-  signatory_email: Yup.string().email().required(),
+  signatory_email: Yup.string().matches(EMAIL_REGEX).required(),
   signatory_telephone: Yup.string().required(),
-  billing_address: Yup.object().optional().shape({
-    company_name: Yup.string().optional(),
-    identification_number: Yup.string().optional(),
-    contact_name: Yup.string().optional(),
-    contact_email: Yup.string().email().optional(),
-    address: Yup.string().optional(),
-    postcode: Yup.string().optional(),
-    city: Yup.string().optional(),
-    country: Yup.string().optional(),
-  }),
+  billing_address: Yup.object()
+    .optional()
+    .shape({
+      company_name: Yup.string().optional(),
+      identification_number: Yup.string().optional(),
+      contact_name: Yup.string().optional(),
+      contact_email: Yup.string().matches(EMAIL_REGEX).optional(),
+      address: Yup.string().optional(),
+      postcode: Yup.string().optional(),
+      city: Yup.string().optional(),
+      country: Yup.string().optional(),
+    }),
   nb_seats: Yup.number().required().min(1),
   payment_method: Yup.mixed<PaymentMethod>().oneOf(Object.values(PaymentMethod)).required(),
   funding_entity: Yup.string().optional(),
@@ -198,9 +202,29 @@ const BatchOrderForm = () => {
   }, [values, batchOrder, setBatchOrder]);
 
   useEffect(() => {
-    const requiredRules = requiredFieldsByStep[activeStep];
-    const isStepValid = requiredRules.every((field) => !!batchOrder?.[field]);
-    setIsCurrentStepValid(isStepValid);
+    const validateStep = async () => {
+      if (activeStep === 0 && batchOrder?.billing_address?.contact_email) {
+        const isEmailValid = EMAIL_REGEX.test(batchOrder.billing_address.contact_email);
+        if (!isEmailValid) {
+          setIsCurrentStepValid(false);
+          return;
+        }
+      }
+      const fieldsToValidate = requiredFieldsByStep[activeStep];
+      const validationPromises = fieldsToValidate.map(async (field) => {
+        try {
+          const fieldSchema = Yup.reach(validationSchema, field) as Yup.Schema;
+          await fieldSchema.validate(batchOrder?.[field]);
+          return true;
+        } catch {
+          return false;
+        }
+      });
+      const results = await Promise.all(validationPromises);
+      const isStepValid = results.every((isValid) => isValid);
+      setIsCurrentStepValid(isStepValid);
+    };
+    validateStep();
   }, [activeStep, batchOrder]);
 
   return (

package/js/components/SaleTunnel/SaleTunnelInformation/StepContent.tsx

@@ -208,7 +208,7 @@ export const StepContent = ({
   const { items: organizations } = useOfferingOrganizations({ id: offering?.id });
   const orgOptions = organizations.map((organization) => ({
     label: organization.title,
-    value: organization.code,
+    value: organization.id,
   }));
   const [otherBillingAddress, setOtherBillingAddress] = useState(false);
 
@@ -275,7 +275,19 @@ export const StepContent = ({
         />
         <Checkbox
           label={intl.formatMessage(messages.checkBilling)}
-          onChange={() => setOtherBillingAddress(!otherBillingAddress)}
+          onChange={() => {
+            setOtherBillingAddress(!otherBillingAddress);
+            form.resetField('billing_address');
+            form.resetField('billing_address.contact_name');
+            form.resetField('billing_address.contact_email');
+            form.resetField('billing_address.company_name');
+            form.resetField('billing_address.identification_number');
+            form.resetField('billing_address.address');
+            form.resetField('billing_address.postcode');
+            form.resetField('billing_address.city');
+            form.resetField('billing_address.country');
+            form.clearErrors();
+          }}
           checked={otherBillingAddress}
         />
       </div>
@@ -291,6 +303,13 @@ export const StepContent = ({
             className="field"
             {...register('billing_address.contact_email')}
             label={intl.formatMessage(messages.contactEmail)}
+            state={formState.errors.billing_address?.contact_email?.message ? 'error' : 'default'}
+            text={
+              getLocalizedCunninghamErrorProp(
+                intl,
+                formState.errors.billing_address?.contact_email?.message,
+              ).text
+            }
           />
           <Input
             className="field"
@@ -497,21 +516,11 @@ export const StepContent = ({
           <Input
             {...register('funding_entity')}
             label={intl.formatMessage(messages.fundingEntityName)}
-            required
-            state={formState.errors.funding_entity?.message ? 'error' : 'default'}
-            text={
-              getLocalizedCunninghamErrorProp(intl, formState.errors.funding_entity?.message).text
-            }
           />
           <Input
             {...register('funding_amount')}
             type="number"
             label={intl.formatMessage(messages.fundingEntityAmount)}
-            required
-            state={formState.errors.funding_amount?.message ? 'error' : 'default'}
-            text={
-              getLocalizedCunninghamErrorProp(intl, formState.errors.funding_amount?.message).text
-            }
           />
         </div>
         <FormattedMessage {...messages.recommandation} />

package/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) => {

package/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, 'john.doe@fun-mooc.com');
+    await user.type($phone, '+338203920103');
+
+    expect($lastName).toHaveValue('Doe');
+    expect($email).toHaveValue('john.doe@fun-mooc.com');
+
+    // 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, 'john.doe@fun-mooc.com');
+    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);
 });

package/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -2,7 +2,7 @@ import fetchMock from 'fetch-mock';
 import { cleanup, screen } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { OrganizationQuoteFactory } from 'utils/test/factories/joanie';
+import { OrganizationFactory, OrganizationQuoteFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
@@ -35,6 +35,17 @@ describe('full process for the organization quotes dashboard', () => {
   it('should works with the full process workflow for any payment methods', async () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
+    const organization = OrganizationFactory({
+      abilities: {
+        can_submit_for_signature_batch_order: true,
+        confirm_bank_transfer: true,
+        confirm_quote: true,
+        download_quote: true,
+        sign_contracts: true,
+      },
+    }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
+
     const quoteQuoted = OrganizationQuoteFactory({
       batch_order: {
         state: BatchOrderState.QUOTED,
@@ -129,7 +140,6 @@ describe('full process for the organization quotes dashboard', () => {
     await user.click(toggle);
     expect(card).toHaveClass('dashboard-card--opened');
 
-    // Download quote
     const downloadQuoteButton = await screen.findByRole('button', {
       name: /Download quote/i,
     });
@@ -147,7 +157,7 @@ describe('full process for the organization quotes dashboard', () => {
 
     // Second step : to sign quote
     const sendForSignatureButton = await screen.findByRole('button', {
-      name: /send quote for signature/i,
+      name: /send contract for signature/i,
     });
     expect(sendForSignatureButton).toBeVisible();
     await user.click(sendForSignatureButton);
@@ -191,4 +201,133 @@ describe('full process for the organization quotes dashboard', () => {
     expect(processPaymentButton).toBeVisible();
     expect(processPaymentButton).toBeDisabled();
   });
+
+  it('should work with purchase order payment method workflow', async () => {
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+    const organization = OrganizationFactory({
+      abilities: {
+        can_submit_for_signature_batch_order: true,
+        confirm_bank_transfer: true,
+        confirm_quote: true,
+        download_quote: true,
+        sign_contracts: true,
+      },
+    }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
+
+    const quoteQuoted = OrganizationQuoteFactory({
+      batch_order: {
+        state: BatchOrderState.QUOTED,
+        payment_method: PaymentMethod.PURCHASE_ORDER,
+        available_actions: { next_action: 'confirm_quote' },
+      },
+      organization_signed_on: undefined,
+    }).one();
+
+    const quotePurchaseOrder = OrganizationQuoteFactory({
+      id: quoteQuoted.id,
+      batch_order: {
+        state: BatchOrderState.QUOTED,
+        payment_method: PaymentMethod.PURCHASE_ORDER,
+        available_actions: { next_action: 'confirm_purchase_order' },
+      },
+    }).one();
+
+    const quoteSendForSign = OrganizationQuoteFactory({
+      id: quoteQuoted.id,
+      batch_order: {
+        state: BatchOrderState.TO_SIGN,
+        payment_method: PaymentMethod.PURCHASE_ORDER,
+        contract_submitted: false,
+        available_actions: { next_action: 'submit_for_signature' },
+      },
+    }).one();
+
+    const quoteCompleted = OrganizationQuoteFactory({
+      id: quoteQuoted.id,
+      batch_order: {
+        state: BatchOrderState.COMPLETED,
+        payment_method: PaymentMethod.PURCHASE_ORDER,
+      },
+    }).one();
+
+    const quotesResponses = [
+      { results: [quoteQuoted], count: 1, previous: null, next: null },
+      { results: [quotePurchaseOrder], count: 1, previous: null, next: null },
+      { results: [quoteSendForSign], count: 1, previous: null, next: null },
+      { results: [quoteCompleted], count: 1, previous: null, next: null },
+    ];
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`,
+      () => quotesResponses.shift(),
+    );
+
+    fetchMock.patch(`https://joanie.endpoint/api/v1.0/organizations/1/confirm-quote/`, 200);
+    fetchMock.patch(
+      `https://joanie.endpoint/api/v1.0/organizations/1/confirm-purchase-order/`,
+      200,
+    );
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/organizations/1/submit-for-signature-batch-order/`,
+      200,
+    );
+
+    render(<TeacherDashboardOrganizationQuotes />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/quotes',
+        initialEntries: ['/organizations/1/quotes'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    // First step: confirm quote
+    const confirmQuoteButton = await screen.findByRole('button', { name: /confirm quote/i });
+    expect(confirmQuoteButton).toBeVisible();
+    await user.click(confirmQuoteButton);
+    await screen.findByText(/total amount/i);
+    await user.type(screen.getByLabelText(/total amount/i), '1000');
+    await user.click(screen.getByRole('button', { name: /confirm quote/i }));
+
+    // Second step: confirm purchase order with reference via modal
+    const confirmPurchaseOrderButton = await screen.findByRole('button', {
+      name: /confirm receipt of purchase order/i,
+    });
+    expect(confirmPurchaseOrderButton).toBeVisible();
+    await user.click(confirmPurchaseOrderButton);
+
+    // Modal should open with purchase order reference input
+    const modalTitle = await screen.findByText(/confirm purchase order/i);
+    expect(modalTitle).toBeInTheDocument();
+
+    const referenceInput = screen.getByLabelText(/purchase order reference/i);
+    expect(referenceInput).toBeInTheDocument();
+
+    // Type reference and confirm
+    await user.type(referenceInput, 'this-is-a-reference');
+    await user.click(screen.getByRole('button', { name: /confirm receipt of purchase order/i }));
+
+    // Third step: send for signature
+    const sendForSignatureButton = await screen.findByRole('button', {
+      name: /send contract for signature/i,
+    });
+    expect(sendForSignatureButton).toBeVisible();
+    await user.click(sendForSignatureButton);
+
+    // Verify completed state
+    cleanup();
+    render(<TeacherDashboardOrganizationQuotes />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/quotes',
+        initialEntries: ['/organizations/1/quotes'],
+      },
+    });
+    await expectNoSpinner();
+
+    // No action button should be visible for completed quote
+    expect(
+      screen.queryByRole('button', { name: /confirm receipt of purchase order/i }),
+    ).not.toBeInTheDocument();
+  });
 });

package/js/pages/TeacherDashboardOrganizationQuotes/index.spec.tsx

@@ -2,11 +2,12 @@ import fetchMock from 'fetch-mock';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { OrganizationQuoteFactory } from 'utils/test/factories/joanie';
+import { OrganizationFactory, OrganizationQuoteFactory } from 'utils/test/factories/joanie';
 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 { BatchOrderState } from 'types/Joanie';
 import TeacherDashboardOrganizationQuotes from '.';
 
 let user: UserEvent;
@@ -29,6 +30,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
   it('should render a list of quotes for an organization', async () => {
     const quoteList = OrganizationQuoteFactory().many(1);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: quoteList,
       count: 0,
@@ -59,6 +63,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
   it('should render an empty list of quotes for an organization', async () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: [],
       count: 0,
@@ -81,6 +88,8 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
     const quoteList = OrganizationQuoteFactory().many(30);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
 
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
       results: quoteList.slice(0, 10),
       count: 30,
@@ -126,6 +135,9 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
   it('should display an error when API fails', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', []);
+
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10',
       500,
@@ -141,4 +153,49 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
     await expectNoSpinner();
     await expectBannerError('An error occurred while fetching resources. Please retry later.');
   });
+
+  it('should render disabled buttons when the user is not allowed', async () => {
+    const quoteQuoted = OrganizationQuoteFactory({
+      batch_order: {
+        state: BatchOrderState.QUOTED,
+        available_actions: { next_action: 'confirm_quote' },
+      },
+    }).one();
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    const organization = OrganizationFactory({
+      abilities: {
+        can_submit_for_signature_batch_order: false,
+        confirm_bank_transfer: false,
+        confirm_quote: false,
+        download_quote: true,
+        sign_contracts: false,
+      },
+    }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/1/', organization);
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/1/quotes/?page=1&page_size=10`, {
+      results: [quoteQuoted],
+      count: 1,
+      previous: null,
+      next: null,
+    });
+
+    render(<TeacherDashboardOrganizationQuotes />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/quotes',
+        initialEntries: ['/organizations/1/quotes'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    const downloadQuoteButton = await screen.findByRole('button', { name: /Download quote/i });
+    expect(downloadQuoteButton).toBeVisible();
+    expect(downloadQuoteButton).not.toBeDisabled();
+
+    const confirmQuoteButton = await screen.findByRole('button', { name: /Confirm quote/i });
+    expect(confirmQuoteButton).toBeVisible();
+    expect(confirmQuoteButton).toBeDisabled();
+  });
 });

package/js/pages/TeacherDashboardOrganizationQuotes/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import Banner, { BannerType } from 'components/Banner';
 import { useOrganizationsQuotes } from 'hooks/useOrganizationQuotes';
+import { useOrganization } from 'hooks/useOrganizations';
 import { TeacherDashboardContractsParams } from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters';
 import { BatchOrderState, OrganizationQuote } from 'types/Joanie';
 import { PaymentMethod } from 'components/PaymentInterfaces/types';
@@ -65,15 +66,25 @@ const messages = defineMessages({
     id: 'components.OrganizationQuotesTable.confirmPurchaseOrder',
     description: 'Label for confirming receipt of a purchase order',
   },
+  purchaseOrderModalTitle: {
+    defaultMessage: 'Confirm purchase order',
+    id: 'components.OrganizationQuotesTable.purchaseOrderModalTitle',
+    description: 'Title of the confirm purchase order modal',
+  },
+  purchaseOrderReferenceLabel: {
+    defaultMessage: 'Purchase order reference',
+    id: 'components.OrganizationQuotesTable.purchaseOrderReferenceLabel',
+    description: 'Label for the purchase order reference input',
+  },
   confirmBank: {
     defaultMessage: 'Confirm bank transfer',
     id: 'components.OrganizationQuotesTable.confirmBank',
     description: 'Label for confirming a bank transfer',
   },
   sendForSignature: {
-    defaultMessage: 'Send quote for signature',
+    defaultMessage: 'Send contract for signature',
     id: 'components.OrganizationQuotesTable.sendForSignature',
-    description: 'Action label to send a quote for signature',
+    description: 'Action label to send a contract for signature',
   },
   waitingSignature: {
     defaultMessage: 'Waiting signature',
@@ -215,6 +226,13 @@ const messages = defineMessages({
 const TeacherDashboardOrganizationQuotes = () => {
   const intl = useIntl();
   const { organizationId: routeOrganizationId } = useParams<TeacherDashboardContractsParams>();
+  const {
+    item: organization,
+    states: { isPending: isOrganizationPending },
+  } = useOrganization(routeOrganizationId);
+
+  const abilities = organization?.abilities;
+
   const pagination = usePagination({ itemsPerPage: 10 });
 
   const {
@@ -241,6 +259,11 @@ const TeacherDashboardOrganizationQuotes = () => {
   const [amount, setAmount] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [selectedPurchaseOrderQuote, setSelectedPurchaseOrderQuote] =
+    useState<OrganizationQuote | null>(null);
+  const [purchaseOrderReference, setPurchaseOrderReference] = useState('');
+  const [isPurchaseOrderModalOpen, setIsPurchaseOrderModalOpen] = useState(false);
+
   useEffect(() => {
     if (meta?.pagination?.count) {
       pagination.setItemsCount(meta.pagination.count);
@@ -249,7 +272,7 @@ const TeacherDashboardOrganizationQuotes = () => {
 
   if (error) return <Banner message={error} type={BannerType.ERROR} rounded />;
 
-  if (isPending)
+  if (isPending || isOrganizationPending)
     return (
       <Spinner size="large">
         <span id="loading-contract-data">
@@ -286,11 +309,27 @@ const TeacherDashboardOrganizationQuotes = () => {
     await invalidate();
   };
 
-  const handleConfirmPurchaseOrder = async (id: string) => {
+  const handleOpenPurchaseOrderModal = (quote: OrganizationQuote) => {
+    setSelectedPurchaseOrderQuote(quote);
+    setIsPurchaseOrderModalOpen(true);
+  };
+
+  const handleCancelPurchaseOrder = () => {
+    setIsPurchaseOrderModalOpen(false);
+    setPurchaseOrderReference('');
+    setSelectedPurchaseOrderQuote(null);
+  };
+
+  const handleConfirmPurchaseOrder = async () => {
+    if (!selectedPurchaseOrderQuote) return;
     await confirmPurchaseOrder({
       organization_id: routeOrganizationId,
-      payload: { quote_id: id },
+      payload: {
+        quote_id: selectedPurchaseOrderQuote.id,
+        purchase_order_reference: purchaseOrderReference,
+      },
     });
+    handleCancelPurchaseOrder();
     await invalidate();
   };
 
@@ -336,6 +375,7 @@ const TeacherDashboardOrganizationQuotes = () => {
           className="mr-2"
           onClick={() => handleDownloadQuote(quote.id)}
           icon={<span className="material-icons">download</span>}
+          disabled={!abilities?.download_quote}
         >
           {intl.formatMessage(messages.downloadQuote)}
         </Button>
@@ -343,6 +383,7 @@ const TeacherDashboardOrganizationQuotes = () => {
           size="small"
           onClick={() => handleOpenConfirm(quote.id)}
           icon={<span className="material-icons">check_circle</span>}
+          disabled={!abilities?.confirm_quote}
         >
           {intl.formatMessage(messages.confirmQuote)}
         </Button>
@@ -353,7 +394,7 @@ const TeacherDashboardOrganizationQuotes = () => {
       <Button
         size="small"
         className="ml-2"
-        onClick={() => handleConfirmPurchaseOrder(quote.id)}
+        onClick={() => handleOpenPurchaseOrderModal(quote)}
         icon={<span className="material-icons">description</span>}
       >
         {intl.formatMessage(messages.confirmPurchaseOrder)}
@@ -365,6 +406,7 @@ const TeacherDashboardOrganizationQuotes = () => {
         size="small"
         onClick={() => handleConfirmBankTransfer(quote.batch_order.id)}
         icon={<span className="material-icons">account_balance</span>}
+        disabled={!abilities?.confirm_bank_transfer}
       >
         {intl.formatMessage(messages.confirmBank)}
       </Button>
@@ -373,7 +415,7 @@ const TeacherDashboardOrganizationQuotes = () => {
     const submitForSignatureButton = (
       <Button
         size="small"
-        disabled={batchOrder.contract_submitted}
+        disabled={batchOrder.contract_submitted || !abilities?.can_submit_for_signature_batch_order}
         onClick={() =>
           !batchOrder.contract_submitted && handleSubmitForSignature(quote.batch_order.id)
         }
@@ -514,6 +556,26 @@ const TeacherDashboardOrganizationQuotes = () => {
           />
         </div>
       </Modal>
+      <Modal
+        isOpen={isPurchaseOrderModalOpen}
+        onClose={handleCancelPurchaseOrder}
+        title={intl.formatMessage(messages.purchaseOrderModalTitle)}
+        size={ModalSize.MEDIUM}
+        actions={
+          <Button size="small" onClick={handleConfirmPurchaseOrder}>
+            {intl.formatMessage(messages.confirmPurchaseOrder)}
+          </Button>
+        }
+      >
+        <div className="dashboard__quote__modal">
+          <Input
+            type="text"
+            label={intl.formatMessage(messages.purchaseOrderReferenceLabel)}
+            onChange={(e) => setPurchaseOrderReference(e.target.value)}
+            value={purchaseOrderReference}
+          />
+        </div>
+      </Modal>
     </div>
   );
 };

package/js/types/Joanie.ts

@@ -35,6 +35,18 @@ export interface Organization {
   contact_phone: Nullable<string>;
   dpo_email: Nullable<string>;
   address?: Address;
+  abilities: {
+    can_submit_for_signature_batch_order: boolean;
+    confirm_bank_transfer: boolean;
+    confirm_quote: boolean;
+    delete: boolean;
+    download_quote: boolean;
+    get: boolean;
+    manage_accesses: boolean;
+    patch: boolean;
+    put: boolean;
+    sign_contracts: boolean;
+  };
 }
 
 export interface OrganizationResourceQuery extends ResourcesQuery {

package/js/utils/test/factories/joanie.ts

@@ -171,6 +171,18 @@ export const OrganizationFactory = factory((): Organization => {
     dpo_email: faker.internet.email(),
     contact_phone: faker.phone.number(),
     address: AddressFactory().one(),
+    abilities: {
+      can_submit_for_signature_batch_order: faker.datatype.boolean(),
+      confirm_bank_transfer: faker.datatype.boolean(),
+      confirm_quote: faker.datatype.boolean(),
+      delete: faker.datatype.boolean(),
+      download_quote: faker.datatype.boolean(),
+      get: faker.datatype.boolean(),
+      manage_accesses: faker.datatype.boolean(),
+      patch: faker.datatype.boolean(),
+      put: faker.datatype.boolean(),
+      sign_contracts: faker.datatype.boolean(),
+    },
   };
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.2.2-dev30",
+  "version": "3.2.2-dev37",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {