richie-education 3.2.2-dev56 → 3.2.2-dev60

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -134,7 +134,10 @@ const OpenEdxFullNameForm = () => {
   return (
     <FormProvider {...form}>
       <Form name="openedx-fullname-form" noValidate>
-        <Alert type={formState.errors.name?.message ? VariantType.ERROR : VariantType.WARNING}>
+        <Alert
+          className="mt-s"
+          type={formState.errors.name?.message ? VariantType.ERROR : VariantType.WARNING}
+        >
           <FormattedMessage {...messages.fullNameInputDescription} />
         </Alert>
         <Input

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

@@ -268,7 +268,7 @@ const BatchOrderForm = () => {
             }
           }}
           hidden={activeStep === 0}
-          color="secondary"
+          color="tertiary"
         >
           <FormattedMessage {...messages.previousButton} />
         </Button>

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

@@ -112,6 +112,16 @@ const messages = defineMessages({
     description: 'Discount description',
     defaultMessage: 'Discount applied',
   },
+  noPaymentSchedule: {
+    id: 'components.SaleTunnel.Information.noPaymentSchedule',
+    description: 'Message displayed representing the payment schedule when the order is free.',
+    defaultMessage: 'No payment required. This order is fully covered.',
+  },
+  noBillingInformation: {
+    id: 'components.SaleTunnel.Information.noBillingInformation',
+    description: 'Message displayed when the order is part of a batch order',
+    defaultMessage: 'No billing information required. This order is covered by your organization.',
+  },
 });
 
 export const SaleTunnelInformationSingular = () => {
@@ -162,14 +172,6 @@ export const SaleTunnelInformationSingular = () => {
 
   return (
     <>
-      <div>
-        <Voucher
-          discount={discount}
-          voucherError={voucherError}
-          setVoucherError={setVoucherError}
-        />
-        <Total price={price} discountedPrice={discountedPrice} />
-      </div>
       {needsPayment && (
         <div>
           <h3 className="block-title mb-t">
@@ -178,7 +180,6 @@ export const SaleTunnelInformationSingular = () => {
           <div className="description mb-s">
             <FormattedMessage {...messages.description} />
           </div>
-          <AddressSelector />
           {isKeycloakBackend ? (
             <KeycloakAccountEdit />
           ) : (
@@ -189,10 +190,38 @@ export const SaleTunnelInformationSingular = () => {
               </div>
             </>
           )}
+          <AddressSelector />
+        </div>
+      )}
+      {!needsPayment && (
+        <div>
+          <h3 className="block-title">
+            <FormattedMessage {...messages.title} />
+          </h3>
+          <Alert type={VariantType.NEUTRAL}>
+            <FormattedMessage {...messages.noBillingInformation} />
+          </Alert>
         </div>
       )}
       <div>
-        {showPaymentSchedule && <PaymentScheduleBlock schedule={schedule} />}
+        {showPaymentSchedule ? (
+          <PaymentScheduleBlock schedule={schedule!} />
+        ) : (
+          <div>
+            <h4 className="block-title">
+              <FormattedMessage {...messages.paymentSchedule} />
+            </h4>
+            <Alert type={VariantType.NEUTRAL}>
+              <FormattedMessage {...messages.noPaymentSchedule} />
+            </Alert>
+          </div>
+        )}
+        <Voucher
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
+        <Total price={price} discountedPrice={discountedPrice} />
         {needsPayment && <WithdrawRightCheckbox />}
       </div>
     </>

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

@@ -216,7 +216,9 @@ export const StepContent = ({
   return (
     <div className="step-content">
       <div className="step organization" hidden={activeStep !== 0}>
-        <FormattedMessage {...messages.stepCompanyTitle} />
+        <h4 className="title">
+          <FormattedMessage {...messages.stepCompanyTitle} />
+        </h4>
         <Input
           className="field"
           label={intl.formatMessage(messages.companyName)}
@@ -294,7 +296,9 @@ export const StepContent = ({
       </div>
       {otherBillingAddress && (
         <div className="step billing" hidden={activeStep !== 0}>
-          <FormattedMessage {...messages.stepBillingTitle} />
+          <h4 className="title">
+            <FormattedMessage {...messages.stepBillingTitle} />
+          </h4>
           <Input
             className="field"
             {...register('billing_address.contact_name')}
@@ -347,7 +351,9 @@ export const StepContent = ({
         </div>
       )}
       <div className="step admin" hidden={activeStep !== 1}>
-        <FormattedMessage {...messages.stepAdminTitle} />
+        <h4 className="title">
+          <FormattedMessage {...messages.stepAdminTitle} />
+        </h4>
         <Input
           className="field"
           {...register('administrative_lastname')}
@@ -411,7 +417,9 @@ export const StepContent = ({
         />
       </div>
       <div className="step signatory" hidden={activeStep !== 2}>
-        <FormattedMessage {...messages.stepSignatoryTitle} />
+        <h4 className="title">
+          <FormattedMessage {...messages.stepSignatoryTitle} />
+        </h4>
         <Input
           className="field"
           {...register('signatory_lastname')}
@@ -467,7 +475,9 @@ export const StepContent = ({
         />
       </div>
       <div className="step seats" hidden={activeStep !== 3}>
-        <FormattedMessage {...messages.stepParticipantsTitle} />
+        <h4 className="title">
+          <FormattedMessage {...messages.stepParticipantsTitle} />
+        </h4>
         <Input
           className="field"
           type="number"
@@ -479,7 +489,9 @@ export const StepContent = ({
         />
       </div>
       <div className="step financing" hidden={activeStep !== 4}>
-        <FormattedMessage {...messages.stepFinancingTitle} />
+        <h4 className="title">
+          <FormattedMessage {...messages.stepFinancingTitle} />
+        </h4>
         <RadioGroup fullWidth={true} className="payment-block">
           <Radio
             {...register('payment_method')}
@@ -512,7 +524,10 @@ export const StepContent = ({
             }
           />
         </RadioGroup>
-        <FormattedMessage {...messages.fundingEntity} />
+
+        <h4 className="title">
+          <FormattedMessage {...messages.fundingEntity} />
+        </h4>
         <div className="organism-block">
           <Input
             {...register('funding_entity')}
@@ -524,7 +539,10 @@ export const StepContent = ({
             label={intl.formatMessage(messages.fundingEntityAmount)}
           />
         </div>
-        <FormattedMessage {...messages.recommandation} />
+
+        <h4 className="title">
+          <FormattedMessage {...messages.recommandation} />
+        </h4>
         <Select
           label={intl.formatMessage(messages.participatingOrganisations)}
           clearable

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

@@ -44,11 +44,11 @@ export const SaleTunnelInformation = () => {
   ];
   const [purchaseType, setPurchaseType] = useState(FormType.SINGULAR);
 
+  const isCertificate = productType === ProductType.CERTIFICATE;
+
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
-      {productType === ProductType.CERTIFICATE ? (
-        <SaleTunnelInformationSingular />
-      ) : (
+      {!isCertificate && (
         <div>
           <h3 className="block-title mb-t">
             <FormattedMessage {...messages.purchaseTypeTitle} />
@@ -65,10 +65,10 @@ export const SaleTunnelInformation = () => {
               setSchedule(undefined);
             }}
           />
-          {purchaseType === FormType.SINGULAR && <SaleTunnelInformationSingular />}
-          {purchaseType === FormType.GROUP && <SaleTunnelInformationGroup />}
         </div>
       )}
+      {purchaseType === FormType.SINGULAR && <SaleTunnelInformationSingular />}
+      {purchaseType === FormType.GROUP && !isCertificate && <SaleTunnelInformationGroup />}
     </div>
   );
 };

package/js/components/SaleTunnel/_styles.scss

@@ -157,6 +157,13 @@
       align-items: center;
       margin: 1rem 0;
       gap: 0.5rem;
+
+      .title {
+        font-weight: var(--c--theme--font--weights--bold);
+        font-size: var(--c--theme--font--sizes--l);
+        margin: 0 0 0.5rem;
+      }
+
       .field {
         width: 90%;
       }
@@ -169,7 +176,7 @@
       }
       .payment-block {
         & > div {
-          margin: 1rem 0;
+          margin: 0 0 1rem;
           flex-direction: row;
         }
       }

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

@@ -374,7 +374,8 @@ describe('SaleTunnel', () => {
     );
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT100');
     await user.click(screen.getByRole('button', { name: 'Validate' }));
-    expect(screen.queryByRole('heading', { name: 'Payment schedule' })).not.toBeInTheDocument();
+    await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
+    screen.getByText('No payment required. This order is fully covered.');
     await screen.findByTestId('sale-tunnel__total__amount');
     const $totalAmountVoucher = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmountVoucher).toHaveTextContent(

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

@@ -484,7 +484,8 @@ describe.each([
         });
       });
     } else {
-      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
+      screen.getByText('No payment required. This order is fully covered.');
       expect(screen.queryByRole('table')).toBeNull();
     }
 
@@ -623,7 +624,8 @@ describe.each([
         });
       });
     } else {
-      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
+      screen.getByText('No payment required. This order is fully covered.');
       expect(screen.queryByRole('table')).toBeNull();
     }
 
@@ -830,6 +832,16 @@ describe.each([
       ).not.toBeInTheDocument(),
     );
     expect(await screen.queryByTestId('withdraw-right-checkbox')).not.toBeInTheDocument();
+
+    expect(
+      screen.getByText(
+        'No billing information required. This order is covered by your organization.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 4, name: 'Payment schedule' })).toBeInTheDocument();
+    expect(
+      screen.getByText('No payment required. This order is fully covered.'),
+    ).toBeInTheDocument();
   });
 
   it('should hide voucher code input when one is already used', async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.2.2-dev56",
+  "version": "3.2.2-dev60",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -157,7 +157,7 @@
     "workerDirectory": "../richie/static/richie/js"
   },
   "volta": {
-    "node": "20.11.0",
+    "node": "20.19.0",
     "yarn": "1.22.22"
   },
   "devDependencies": {