richie-education 3.2.1 → 3.2.2-dev26

package/js/api/joanie.ts

@@ -101,6 +101,13 @@ export const getRoutes = () => {
         submit_installment_payment: `${baseUrl}/orders/:id/submit-installment-payment/`,
         set_payment_method: `${baseUrl}/orders/:id/payment-method/`,
       },
+      batchOrders: {
+        get: `${baseUrl}/batch-orders/:id/`,
+        create: `${baseUrl}/batch-orders/`,
+        submit_for_payment: {
+          create: `${baseUrl}/batch-orders/:id/submit-for-payment/`,
+        },
+      },
       certificates: {
         download: `${baseUrl}/certificates/:id/download/`,
         get: `${baseUrl}/certificates/:id/`,
@@ -136,6 +143,25 @@ export const getRoutes = () => {
         get: `${baseUrl}/organizations/:organization_id/contracts/:id/`,
         getSignatureLinks: `${baseUrl}/organizations/:organization_id/contracts-signature-link/`,
       },
+      quotes: {
+        get: `${baseUrl}/organizations/:organization_id/quotes/:id/`,
+        update: `${baseUrl}/organizations/:organization_id/confirm-quote/`,
+        purchase_order: {
+          update: `${baseUrl}/organizations/:organization_id/confirm-purchase-order/`,
+        },
+        bank_transfer: {
+          create: `${baseUrl}/organizations/:organization_id/confirm-bank-transfer/`,
+        },
+        submit_for_signature: {
+          create: `${baseUrl}/organizations/:organization_id/submit-for-signature-batch-order/`,
+        },
+        download_quote: {
+          get: `${baseUrl}/organizations/:organization_id/download-quote/`,
+        },
+      },
+      agreements: {
+        get: `${baseUrl}/organizations/:organization_id/agreements/:id/`,
+      },
     },
     courses: {
       get: `${baseUrl}/courses/:id/`,
@@ -157,6 +183,9 @@ export const getRoutes = () => {
     },
     offerings: {
       get: `${baseUrl}/offerings/:id/`,
+      organizations: {
+        get: `${baseUrl}/offerings/:id/get-organizations/`,
+      },
     },
     contractDefinitions: {
       previewTemplate: `${baseUrl}/contract_definitions/:id/preview_template/`,
@@ -303,6 +332,26 @@ const API = (): Joanie.API => {
             body: JSON.stringify(payload),
           }).then(checkStatus),
       },
+      batchOrders: {
+        create: async (payload) =>
+          fetchWithJWT(ROUTES.user.batchOrders.create, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+          }).then(checkStatus),
+        get: async (filters?: Joanie.BatchOrderQueryFilters) => {
+          return fetchWithJWT(buildApiUrl(ROUTES.user.batchOrders.get, filters)).then(checkStatus);
+        },
+        submit_for_payment: {
+          create: async (filters) => {
+            return fetchWithJWT(
+              buildApiUrl(ROUTES.user.batchOrders.submit_for_payment.create, filters),
+              {
+                method: 'POST',
+              },
+            ).then(checkStatus);
+          },
+        },
+      },
       enrollments: {
         create: async (payload) =>
           fetchWithJWT(ROUTES.user.enrollments.create, {
@@ -406,6 +455,94 @@ const API = (): Joanie.API => {
           ).then(checkStatus);
         },
       },
+      quotes: {
+        get: async (filters?: Joanie.OrganizationQuoteQueryFilters) => {
+          return fetchWithJWT(buildApiUrl(ROUTES.organizations.quotes.get, filters), {
+            method: 'GET',
+          }).then(checkStatus);
+        },
+        update: async (filters: { organization_id: string; payload: any }) => {
+          if (filters.organization_id && filters.payload) {
+            return fetchWithJWT(
+              ROUTES.organizations.quotes.update.replace(
+                ':organization_id',
+                filters.organization_id,
+              ),
+              {
+                method: 'PATCH',
+                body: JSON.stringify(filters.payload),
+              },
+            ).then(checkStatus);
+          }
+        },
+        purchase_order: {
+          update: async (filters: { organization_id: string; payload: any }) => {
+            if (filters.organization_id && filters.payload) {
+              return fetchWithJWT(
+                ROUTES.organizations.quotes.purchase_order.update.replace(
+                  ':organization_id',
+                  filters.organization_id,
+                ),
+                {
+                  method: 'PATCH',
+                  body: JSON.stringify(filters.payload),
+                },
+              ).then(checkStatus);
+            }
+          },
+        },
+        bank_transfer: {
+          create: async (filters: { organization_id: string; payload: any }) => {
+            if (filters.organization_id && filters.payload) {
+              return fetchWithJWT(
+                ROUTES.organizations.quotes.bank_transfer.create.replace(
+                  ':organization_id',
+                  filters.organization_id,
+                ),
+                {
+                  method: 'POST',
+                  body: JSON.stringify(filters.payload),
+                },
+              ).then(checkStatus);
+            }
+          },
+        },
+        submit_for_signature: {
+          create: async (filters: { organization_id: string; payload: any }) => {
+            if (filters.organization_id && filters.payload) {
+              return fetchWithJWT(
+                ROUTES.organizations.quotes.submit_for_signature.create.replace(
+                  ':organization_id',
+                  filters.organization_id,
+                ),
+                {
+                  method: 'POST',
+                  body: JSON.stringify(filters.payload),
+                },
+              ).then(checkStatus);
+            }
+          },
+        },
+        download_quote: {
+          get: async (filters?: Joanie.OrganizationQuoteQueryFilters) => {
+            return fetchWithJWT(
+              buildApiUrl(ROUTES.organizations.quotes.download_quote.get, filters),
+              {
+                method: 'GET',
+              },
+            )
+              .then(checkStatus)
+              .then(getFileFromResponse);
+          },
+        },
+      },
+      agreements: {
+        get: async (filters) => {
+          return fetchWithJWT(buildApiUrl(ROUTES.organizations.agreements.get, filters), {
+            method: 'GET',
+          }).then(checkStatus);
+        },
+      },
     },
     courses: {
       get: (filters?: Joanie.CourseQueryFilters) => {
@@ -477,6 +614,13 @@ const API = (): Joanie.API => {
             : buildApiUrl(ROUTES.offerings.get, filters),
         ).then(checkStatus);
       },
+      organizations: {
+        get: (filters?: Joanie.OrganizationQuoteQueryFilters) => {
+          return fetchWithJWT(buildApiUrl(ROUTES.offerings.organizations.get, filters)).then(
+            checkStatus,
+          );
+        },
+      },
     },
     contractDefinitions: {
       previewTemplate(id: string): Promise<File> {

package/js/components/PaymentInterfaces/types.ts

@@ -9,6 +9,7 @@ export enum SubscriptionErrorMessageId {
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
   ERROR_WITHDRAWAL_RIGHT = 'errorWithdrawalRight',
+  ERROR_BATCH_ORDER_FORM_INVALID = 'batchOrderFormInvalid',
 }
 
 export enum PaymentProviders {
@@ -17,6 +18,12 @@ export enum PaymentProviders {
   LYRA = 'lyra',
 }
 
+export enum PaymentMethod {
+  CARD_PAYMENT = 'card_payment',
+  BANK_TRANSFER = 'bank_transfer',
+  PURCHASE_ORDER = 'purchase_order',
+}
+
 export interface PaymentWithId {
   payment_id: string;
 }

package/js/components/PaymentScheduleGrid/index.tsx

@@ -59,8 +59,8 @@ export const PaymentScheduleGrid = ({ schedule }: Props) => {
       <DataGrid
         displayHeader={false}
         columns={[
-          { field: 'index', size: 10 },
-          { field: 'amount', size: 90 },
+          { field: 'index', size: 10, enableSorting: false },
+          { field: 'amount', size: 90, enableSorting: false },
           {
             field: 'date',
             renderCell: ({ row }) => (
@@ -68,6 +68,7 @@ export const PaymentScheduleGrid = ({ schedule }: Props) => {
                 <FormattedMessage {...messages.withdrawnAt} values={{ date: row.date }} />
               </span>
             ),
+            enableSorting: false,
           },
           {
             id: 'state',
@@ -79,6 +80,7 @@ export const PaymentScheduleGrid = ({ schedule }: Props) => {
               ) : (
                 ''
               ),
+            enableSorting: false,
           },
         ]}
         rows={schedule.map((installment, index) => ({

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

@@ -10,7 +10,7 @@ import {
   SaleTunnelContext,
   SaleTunnelContextType,
 } from 'components/SaleTunnel/GenericSaleTunnel';
-import { Address } from 'types/Joanie';
+import { Address, PaymentSchedule } from 'types/Joanie';
 import {
   AddressFactory,
   CredentialOrderFactory,
@@ -50,6 +50,7 @@ describe('AddressSelector', () => {
     const Wrapper = () => {
       const [billingAddress, setBillingAddress] = useState<Address>();
       const [voucherCode, setVoucherCode] = useState<string>();
+      const [schedule, setSchedule] = useState<PaymentSchedule>();
       const context: SaleTunnelContextType = useMemo(
         () => ({
           webAnalyticsEventKey: 'eventKey',
@@ -58,6 +59,9 @@ describe('AddressSelector', () => {
           props: {} as SaleTunnelProps,
           billingAddress,
           setBillingAddress,
+          setBatchOrder: jest.fn(),
+          setBatchOrderFormMethods: jest.fn(),
+          validateBatchOrder: jest.fn(),
           setCreditCard: jest.fn(),
           step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
@@ -67,8 +71,11 @@ describe('AddressSelector', () => {
           hasWaivedWithdrawalRight: false,
           setHasWaivedWithdrawalRight: jest.fn(),
           setVoucherCode,
+          setSchedule,
+          needsPayment: false,
+          setNeedsPayment: jest.fn(),
         }),
-        [billingAddress, voucherCode],
+        [billingAddress, voucherCode, schedule],
       );
       contextRef.current = context;
 

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -8,6 +8,7 @@ import {
   useState,
   useCallback,
 } from 'react';
+import { UseFormReturn } from 'react-hook-form';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import {
@@ -18,6 +19,8 @@ import {
   Order,
   OrderState,
   Product,
+  BatchOrder,
+  PaymentSchedule,
 } from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
@@ -43,6 +46,11 @@ export interface SaleTunnelContextType {
   // meta
   billingAddress?: Address;
   setBillingAddress: (address?: Address) => void;
+  batchOrder?: BatchOrder;
+  setBatchOrder: (batchOrder?: BatchOrder) => void;
+  batchOrderFormMethods?: UseFormReturn<BatchOrder>;
+  setBatchOrderFormMethods: (methods?: UseFormReturn<BatchOrder>) => void;
+  validateBatchOrder: () => void;
   creditCard?: CreditCard;
   setCreditCard: (creditCard?: CreditCard) => void;
   hasWaivedWithdrawalRight: boolean;
@@ -53,6 +61,10 @@ export interface SaleTunnelContextType {
   nextStep: () => void;
   voucherCode?: string;
   setVoucherCode: (code?: string) => void;
+  schedule?: PaymentSchedule;
+  setSchedule: (schedule?: PaymentSchedule) => void;
+  needsPayment: boolean;
+  setNeedsPayment: (needsPayment: boolean) => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -89,6 +101,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
     productId: props.product.id,
   });
   const [billingAddress, setBillingAddress] = useState<Address>();
+  const [batchOrder, setBatchOrder] = useState<BatchOrder>();
+  const [batchOrderFormMethods, setBatchOrderFormMethods] = useState<UseFormReturn<BatchOrder>>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
   const [hasWaivedWithdrawalRight, setHasWaivedWithdrawalRight] = useState(false);
   const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
@@ -96,6 +110,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
     new Map(),
   );
   const [voucherCode, setVoucherCode] = useState<string>();
+  const [needsPayment, setNeedsPayment] = useState(true);
 
   const nextStep = useCallback(() => {
     if (order)
@@ -123,6 +138,12 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       }
   }, [order, step]);
 
+  const validateBatchOrder = useCallback(() => {
+    if (batchOrder && step === SaleTunnelStep.IDLE) setStep(SaleTunnelStep.SUCCESS);
+  }, [batchOrder]);
+
+  const [schedule, setSchedule] = useState<PaymentSchedule | undefined>(undefined);
+
   const context: SaleTunnelContextType = useMemo(
     () => ({
       webAnalyticsEventKey: props.eventKey,
@@ -133,6 +154,11 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       props,
       billingAddress,
       setBillingAddress,
+      batchOrder,
+      setBatchOrder,
+      batchOrderFormMethods,
+      setBatchOrderFormMethods,
+      validateBatchOrder,
       creditCard,
       setCreditCard,
       hasWaivedWithdrawalRight,
@@ -154,16 +180,23 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       },
       voucherCode,
       setVoucherCode,
+      schedule,
+      setSchedule,
+      needsPayment,
+      setNeedsPayment,
     }),
     [
       props,
       order,
       billingAddress,
+      batchOrder,
+      batchOrderFormMethods,
       creditCard,
       step,
       submitCallbacks,
       hasWaivedWithdrawalRight,
       voucherCode,
+      needsPayment,
     ],
   );
 

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

@@ -0,0 +1,253 @@
+import { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { FormProvider, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
+import { Step, StepLabel, Stepper } from '@mui/material';
+import { Button } from '@openfun/cunningham-react';
+import { BatchOrder } from 'types/Joanie';
+import Form from 'components/Form';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { ObjectHelper } from 'utils/ObjectHelper';
+import { PaymentMethod } from 'components/PaymentInterfaces/types';
+import { StepContent } from 'components/SaleTunnel/SaleTunnelInformation/StepContent';
+
+const messages = defineMessages({
+  title: {
+    id: 'components.SaleTunnel.Information.title',
+    description: 'Title for the section containing purchase/billing information',
+    defaultMessage: 'Information',
+  },
+  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',
+  },
+  purchaseTypeTitle: {
+    id: 'components.SaleTunnel.Information.purchaseTypeTitle',
+    description: 'Title of the section where the user selects the purchase type',
+    defaultMessage: 'Select purchase type',
+  },
+  purchaseTypeSelect: {
+    id: 'components.SaleTunnel.Information.purchaseTypeSelect',
+    description: 'Label for the select field used to choose the purchase type',
+    defaultMessage: 'Purchase type',
+  },
+  purchaseTypeOptionSingle: {
+    id: 'components.SaleTunnel.Information.purchaseTypeOptionSingle',
+    description: 'Option label for selecting a single purchase (B2C)',
+    defaultMessage: 'Single purchase (B2C)',
+  },
+  purchaseTypeOptionGroup: {
+    id: 'components.SaleTunnel.Information.purchaseTypeOptionGroup',
+    description: 'Option label for selecting a group purchase (B2B)',
+    defaultMessage: 'Group purchase (B2B)',
+  },
+  stepCompany: {
+    id: 'components.SaleTunnel.BatchOrderForm.stepCompany',
+    description: 'Step label for company information in the batch order form',
+    defaultMessage: 'Organization',
+  },
+  stepAdmin: {
+    id: 'components.SaleTunnel.BatchOrderForm.stepAdmin',
+    description: 'Step label for administrative follow-up in the batch order form',
+    defaultMessage: 'Follow-up',
+  },
+  stepSignatory: {
+    id: 'components.SaleTunnel.BatchOrderForm.stepSignatory',
+    description: 'Step label for signatory person in the batch order form',
+    defaultMessage: 'Signatory',
+  },
+  stepParticipants: {
+    id: 'components.SaleTunnel.BatchOrderForm.stepParticipants',
+    description: 'Step label for participants information in the batch order form',
+    defaultMessage: 'Participants',
+  },
+  stepFinancing: {
+    id: 'components.SaleTunnel.BatchOrderForm.stepFinancing',
+    description: 'Step label for financing/payment in the batch order form',
+    defaultMessage: 'Financing',
+  },
+});
+
+export const SaleTunnelInformationGroup = () => {
+  return (
+    <>
+      <div>
+        <h3 className="block-title mb-t">
+          <FormattedMessage {...messages.title} />
+        </h3>
+        <div className="description mb-s">
+          <FormattedMessage {...messages.description} />
+        </div>
+      </div>
+      <BatchOrderForm />
+    </>
+  );
+};
+
+export const validationSchema = Yup.object().shape({
+  offering_id: Yup.string().required(),
+  company_name: Yup.string().required(),
+  identification_number: Yup.string().required(),
+  vat_registration: Yup.string().optional(),
+  address: Yup.string().required(),
+  postcode: Yup.string().required(),
+  city: Yup.string().required(),
+  country: Yup.string().required(),
+  administrative_lastname: Yup.string().required(),
+  administrative_firstname: Yup.string().required(),
+  administrative_profession: Yup.string().required(),
+  administrative_email: Yup.string().email().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_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(),
+  }),
+  nb_seats: Yup.number().required().min(1),
+  payment_method: Yup.mixed<PaymentMethod>().oneOf(Object.values(PaymentMethod)).required(),
+  funding_entity: Yup.string().optional(),
+  funding_amount: Yup.number().optional(),
+  organization_id: Yup.string().optional(),
+});
+
+const requiredFieldsByStep: (keyof BatchOrder)[][] = [
+  ['company_name', 'identification_number', 'address', 'postcode', 'city', 'country'],
+  [
+    'administrative_lastname',
+    'administrative_firstname',
+    'administrative_profession',
+    'administrative_email',
+    'administrative_telephone',
+  ],
+  [
+    'signatory_lastname',
+    'signatory_firstname',
+    'signatory_profession',
+    'signatory_email',
+    'signatory_telephone',
+  ],
+  ['nb_seats'],
+  ['payment_method'],
+];
+
+const BatchOrderForm = () => {
+  const intl = useIntl();
+  const { offering, batchOrder, setBatchOrder, setBatchOrderFormMethods } = useSaleTunnelContext();
+  const [isCurrentStepValid, setIsCurrentStepValid] = useState(false);
+  const defaultValues: BatchOrder = {
+    offering_id: offering?.id ?? '',
+    company_name: '',
+    identification_number: '',
+    address: '',
+    postcode: '',
+    city: '',
+    country: '',
+    administrative_lastname: '',
+    administrative_firstname: '',
+    administrative_profession: '',
+    administrative_email: '',
+    administrative_telephone: '',
+    signatory_lastname: '',
+    signatory_firstname: '',
+    signatory_profession: '',
+    signatory_email: '',
+    signatory_telephone: '',
+    nb_seats: 0,
+    payment_method: PaymentMethod.PURCHASE_ORDER,
+    funding_amount: 0,
+  };
+
+  const [activeStep, setActiveStep] = useState(0);
+  const steps = [
+    intl.formatMessage(messages.stepCompany),
+    intl.formatMessage(messages.stepAdmin),
+    intl.formatMessage(messages.stepSignatory),
+    intl.formatMessage(messages.stepParticipants),
+    intl.formatMessage(messages.stepFinancing),
+  ];
+
+  const form = useForm<BatchOrder>({
+    defaultValues: batchOrder || defaultValues,
+    mode: 'onBlur',
+    resolver: yupResolver(validationSchema),
+  });
+  const { watch } = form;
+  const values = watch();
+
+  useEffect(() => {
+    setBatchOrderFormMethods(form);
+  }, [form]);
+
+  useEffect(() => {
+    const cleanedValues = ObjectHelper.removeEmptyFields(values);
+    if (JSON.stringify(cleanedValues) !== JSON.stringify(batchOrder)) {
+      setBatchOrder(cleanedValues);
+    }
+  }, [values, batchOrder, setBatchOrder]);
+
+  useEffect(() => {
+    const requiredRules = requiredFieldsByStep[activeStep];
+    const isStepValid = requiredRules.every((field) => !!batchOrder?.[field]);
+    setIsCurrentStepValid(isStepValid);
+  }, [activeStep, batchOrder]);
+
+  return (
+    <FormProvider {...form}>
+      <Form noValidate>
+        <Stepper activeStep={activeStep} alternativeLabel className="stepper">
+          {steps.map((label, index) => (
+            <Step key={label}>
+              <StepLabel
+                onClick={() => {
+                  if (index < activeStep) {
+                    setActiveStep(index);
+                  }
+                }}
+                style={{ cursor: index < activeStep ? 'pointer' : 'default' }}
+              >
+                {label}
+              </StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+        <StepContent activeStep={activeStep} form={form} />
+      </Form>
+      <div className="navigationButton">
+        <Button
+          onClick={() => {
+            if (activeStep > 0) {
+              setActiveStep(activeStep - 1);
+            }
+          }}
+          hidden={activeStep === 0}
+          color="secondary"
+        >
+          Previous
+        </Button>
+        <Button
+          onClick={() => {
+            if (activeStep < steps.length - 1) {
+              setActiveStep(activeStep + 1);
+            }
+          }}
+          disabled={!isCurrentStepValid}
+          hidden={activeStep === steps.length - 1}
+        >
+          Next
+        </Button>
+      </div>
+    </FormProvider>
+  );
+};