richie-education 3.2.2-dev36 → 3.2.2-dev38

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

@@ -21,7 +21,7 @@ const messages = defineMessages({
   description: {
     id: 'components.SaleTunnel.Information.description',
     description: 'Helper text explaining that the information will be used for billing',
-    defaultMessage: 'Those information will be used for billing',
+    defaultMessage: 'This information will be used for billing',
   },
   purchaseTypeTitle: {
     id: 'components.SaleTunnel.Information.purchaseTypeTitle',
@@ -36,12 +36,12 @@ const messages = defineMessages({
   purchaseTypeOptionSingle: {
     id: 'components.SaleTunnel.Information.purchaseTypeOptionSingle',
     description: 'Option label for selecting a single purchase (B2C)',
-    defaultMessage: 'Single purchase (B2C)',
+    defaultMessage: 'I am purchasing as an individual',
   },
   purchaseTypeOptionGroup: {
     id: 'components.SaleTunnel.Information.purchaseTypeOptionGroup',
     description: 'Option label for selecting a group purchase (B2B)',
-    defaultMessage: 'Group purchase (B2B)',
+    defaultMessage: 'I am purchasing on behalf of an organization',
   },
   stepCompany: {
     id: 'components.SaleTunnel.BatchOrderForm.stepCompany',

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

@@ -21,7 +21,7 @@ const messages = defineMessages({
   description: {
     id: 'components.SaleTunnel.Information.description',
     description: 'Description of the information section',
-    defaultMessage: 'Those information will be used for billing',
+    defaultMessage: 'This information will be used for billing',
   },
   paymentSchedule: {
     id: 'components.SaleTunnel.Information.paymentSchedule',

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

@@ -38,7 +38,7 @@ const messages = defineMessages({
     id: 'components.SaleTunnel.BatchOrderForm.stepAdminTitle',
     description:
       'Title of the section with details about the person responsible for admin follow-up',
-    defaultMessage: 'Responsible for the administrative follow-up',
+    defaultMessage: 'Administrative contact',
   },
   stepSignatoryTitle: {
     id: 'components.SaleTunnel.BatchOrderForm.stepSignatoryTitle',
@@ -49,17 +49,17 @@ const messages = defineMessages({
   stepBillingTitle: {
     id: 'components.SaleTunnel.BatchOrderForm.stepBillingTitle',
     description: 'Title of the section with billing details',
-    defaultMessage: 'Billing informations',
+    defaultMessage: 'Billing details',
   },
   stepParticipantsTitle: {
     id: 'components.SaleTunnel.BatchOrderForm.stepParticipantsTitle',
     description: 'Title of the section to enter the number of registrations/participants',
-    defaultMessage: 'How many registrations ?',
+    defaultMessage: 'Number of registrations',
   },
   stepFinancingTitle: {
     id: 'components.SaleTunnel.BatchOrderForm.stepFinancingTitle',
     description: 'Title of the section to select the payment plan of the course',
-    defaultMessage: 'Payment plan of the course',
+    defaultMessage: 'Ordering method',
   },
   companyName: {
     id: 'batchOrder.companyName',
@@ -70,7 +70,7 @@ const messages = defineMessages({
     id: 'batchOrder.identificationNumber',
     description:
       'Label for the field asking the company identification number (eg. SIRET in France)',
-    defaultMessage: 'Identification number (SIRET for french company)',
+    defaultMessage: 'Registration number (SIRET for French companies)',
   },
   vatNumber: {
     id: 'batchOrder.vatNumber',
@@ -85,7 +85,7 @@ const messages = defineMessages({
   postCode: {
     id: 'batchOrder.postCode',
     description: 'Label for the field asking the postal code',
-    defaultMessage: 'Post code',
+    defaultMessage: 'Postal code',
   },
   city: {
     id: 'batchOrder.city',
@@ -120,42 +120,42 @@ const messages = defineMessages({
   phone: {
     id: 'batchOrder.phone',
     description: 'Label for the field asking the phone number of the contact person',
-    defaultMessage: 'Phone',
+    defaultMessage: 'Phone number',
   },
   checkBilling: {
     id: 'components.SaleTunnel.BatchOrderForm.checkBilling',
     description: 'Checkbox label to indicate using alternative billing information',
-    defaultMessage: 'Use other informations for billing',
+    defaultMessage: 'Use different billing information',
   },
   contactName: {
     id: 'batchOrder.contactName',
     description: 'Label for the field asking the billing contact name',
-    defaultMessage: 'Name of the contact',
+    defaultMessage: 'Contact name',
   },
   contactEmail: {
     id: 'batchOrder.contactEmail',
     description: 'Label for the field asking the billing contact email',
-    defaultMessage: 'Email of the contact',
+    defaultMessage: 'Contact email',
   },
   nbSeats: {
     id: 'batchOrder.nbSeats',
     description: 'Label for the field asking the number of participants/seats',
-    defaultMessage: 'How many participants ?',
+    defaultMessage: 'Number of participants to register',
   },
   cardPayment: {
     id: 'batchOrder.cardPayment',
     description: 'Option label for selecting credit card payment',
-    defaultMessage: 'Payment by credit card',
+    defaultMessage: 'Credit card',
   },
   bankTransfer: {
     id: 'batchOrder.bankTransfer',
     description: 'Option label for selecting bank transfer payment',
-    defaultMessage: 'Payment by bank transfer',
+    defaultMessage: 'Bank transfer',
   },
   purchaseOrder: {
     id: 'batchOrder.purchaseOrder',
     description: 'Option label for selecting payment via purchase order',
-    defaultMessage: 'Payment with purchase order',
+    defaultMessage: 'Purchase order',
   },
   withoutOrderForm: {
     id: 'batchOrder.withoutOrderForm',
@@ -191,7 +191,7 @@ const messages = defineMessages({
   participatingOrganisations: {
     id: 'batchOrder.participatingOrganisations',
     description: 'Label for the field listing other participating organisations',
-    defaultMessage: 'Participating organisations',
+    defaultMessage: 'Participating organizations',
   },
 });
 

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

@@ -19,12 +19,12 @@ const messages = defineMessages({
   purchaseTypeOptionSingle: {
     id: 'components.SaleTunnel.Information.purchaseTypeOptionSingle',
     description: 'Label for B2C option',
-    defaultMessage: 'Single purchase (B2C)',
+    defaultMessage: 'I am purchasing as an individual',
   },
   purchaseTypeOptionGroup: {
     id: 'components.SaleTunnel.Information.purchaseTypeOptionGroup',
     description: 'Label for B2C option',
-    defaultMessage: 'Group purchase (B2B)',
+    defaultMessage: 'I am purchasing on behalf of an organization',
   },
 });
 

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

@@ -152,13 +152,13 @@ describe('SaleTunnel', () => {
     expectMenuToBeClosed(menu);
     await user.click(formTypeSelect);
     expectMenuToBeOpen(menu);
-    await user.click(screen.getByText('Group purchase (B2B)'));
+    await user.click(screen.getByText('I am purchasing on behalf of an organization'));
 
     // Company step
     const $companyName = await screen.findByRole('textbox', { name: 'Company name' });
-    const $idNumber = screen.getByRole('textbox', { name: /Identification number/ });
+    const $idNumber = screen.getByRole('textbox', { name: /Registration number/ });
     const $address = screen.getByRole('textbox', { name: 'Address' });
-    const $postCode = screen.getByRole('textbox', { name: 'Post code' });
+    const $postCode = screen.getByRole('textbox', { name: 'Postal code' });
     const $city = screen.getByRole('textbox', { name: 'City' });
     const $country = screen.getByRole('combobox', { name: 'Country' });
 
@@ -183,7 +183,7 @@ describe('SaleTunnel', () => {
     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' });
+    const $phone = screen.getByRole('textbox', { name: 'Phone number' });
 
     await user.type($lastName, 'Doe');
     await user.type($firstName, 'John');
@@ -200,7 +200,7 @@ describe('SaleTunnel', () => {
     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' });
+    const $signatoryPhone = screen.getByRole('textbox', { name: 'Phone number' });
 
     await user.type($signatoryLastName, 'Doe');
     await user.type($signatoryFirstName, 'John');
@@ -210,7 +210,7 @@ describe('SaleTunnel', () => {
 
     // Participants step
     await user.click(screen.getByRole('button', { name: 'Next' }));
-    const $nbParticipants = await screen.findByLabelText('How many participants ?');
+    const $nbParticipants = await screen.findByLabelText('Number of participants to register');
     await user.type($nbParticipants, '13');
     expect($nbParticipants).toHaveValue(13);
 
@@ -429,13 +429,13 @@ describe('SaleTunnel', () => {
     expectMenuToBeClosed(menu);
     await user.click(formTypeSelect);
     expectMenuToBeOpen(menu);
-    await user.click(screen.getByText('Group purchase (B2B)'));
+    await user.click(screen.getByText('I am purchasing on behalf of an organization'));
 
     // Company step
     const $companyName = await screen.findByRole('textbox', { name: 'Company name' });
-    const $idNumber = screen.getByRole('textbox', { name: /Identification number/ });
+    const $idNumber = screen.getByRole('textbox', { name: /Registration number/ });
     const $address = screen.getByRole('textbox', { name: 'Address' });
-    const $postCode = screen.getByRole('textbox', { name: 'Post code' });
+    const $postCode = screen.getByRole('textbox', { name: 'Postal code' });
     const $city = screen.getByRole('textbox', { name: 'City' });
     const $country = screen.getByRole('combobox', { name: 'Country' });
 
@@ -460,7 +460,7 @@ describe('SaleTunnel', () => {
     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' });
+    const $phone = screen.getByRole('textbox', { name: 'Phone number' });
 
     await user.type($lastName, 'Doe');
     await user.type($firstName, 'John');
@@ -477,7 +477,7 @@ describe('SaleTunnel', () => {
     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' });
+    const $signatoryPhone = screen.getByRole('textbox', { name: 'Phone number' });
 
     await user.type($signatoryLastName, 'Doe');
     await user.type($signatoryFirstName, 'John');
@@ -487,7 +487,7 @@ describe('SaleTunnel', () => {
 
     // Participants step
     await user.click(screen.getByRole('button', { name: 'Next' }));
-    const $nbParticipants = await screen.findByLabelText('How many participants ?');
+    const $nbParticipants = await screen.findByLabelText('Number of participants to register');
     await user.type($nbParticipants, '13');
     expect($nbParticipants).toHaveValue(13);
 

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

@@ -772,7 +772,7 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     expect(
-      await screen.queryByText('Those information will be used for billing'),
+      await screen.queryByText('This information will be used for billing'),
     ).toBeInTheDocument();
 
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT100');
@@ -781,7 +781,7 @@ describe.each([
     expect(await screen.findByText('Discount applied')).toBeInTheDocument();
     await waitFor(async () =>
       expect(
-        await screen.queryByText('Those information will be used for billing'),
+        await screen.queryByText('This information will be used for billing'),
       ).not.toBeInTheDocument(),
     );
     expect(await screen.queryByTestId('withdraw-right-checkbox')).not.toBeInTheDocument();

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

@@ -201,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.tsx

@@ -66,6 +66,16 @@ 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',
@@ -249,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);
@@ -294,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();
   };
 
@@ -363,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)}
@@ -525,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/package.json

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