richie-education 3.2.1-dev9 → 3.2.2-dev26

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

@@ -1,282 +1,68 @@
-import { ChangeEvent, useEffect, useState } from 'react';
-import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
-import { Alert, Button, Input, VariantType } from '@openfun/cunningham-react';
-import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
-import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
+import { useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Select } from '@openfun/cunningham-react';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
-import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
-import { useSession } from 'contexts/SessionContext';
-import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
-import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
-import { PaymentSchedule, ProductType } from 'types/Joanie';
-import { usePaymentPlan } from 'hooks/usePaymentPlan';
+import { SaleTunnelInformationSingular } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular';
+import { SaleTunnelInformationGroup } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup';
 
 const messages = defineMessages({
-  title: {
-    id: 'components.SaleTunnel.Information.title',
-    description: 'Title for the information section',
-    defaultMessage: 'Information',
+  purchaseTypeTitle: {
+    id: 'components.SaleTunnel.Information.purchaseTypeTitle',
+    description: 'Title for purchase type',
+    defaultMessage: 'Select purchase type',
   },
-  description: {
-    id: 'components.SaleTunnel.Information.description',
-    description: 'Description of the information section',
-    defaultMessage: 'Those information will be used for billing',
+  purchaseTypeSelect: {
+    id: 'components.SaleTunnel.Information.purchaseTypeSelect',
+    description: 'Label for purchase type select',
+    defaultMessage: 'Purchase type',
   },
-  fullNameLabel: {
-    id: 'components.SaleTunnel.Information.fullNameLabel',
-    description: 'Label for the full name input',
-    defaultMessage: 'Full name',
+  purchaseTypeOptionSingle: {
+    id: 'components.SaleTunnel.Information.purchaseTypeOptionSingle',
+    description: 'Label for B2C option',
+    defaultMessage: 'Single purchase (B2C)',
   },
-  paymentSchedule: {
-    id: 'components.SaleTunnel.Information.paymentSchedule',
-    description: 'Title for the payment schedule section',
-    defaultMessage: 'Payment schedule',
-  },
-  totalInfo: {
-    id: 'components.SaleTunnel.Information.total.info',
-    description: 'Information about the total amount',
-    defaultMessage: 'You will then pay on the secured platform of our payment provider.',
-  },
-  totalLabel: {
-    id: 'components.SaleTunnel.Information.total.label',
-    description: 'Label for the total amount',
-    defaultMessage: 'Total',
-  },
-  emailLabel: {
-    id: 'components.SaleTunnel.Information.email.label',
-    description: 'Label for the email',
-    defaultMessage: 'Account email',
-  },
-  emailInfo: {
-    id: 'components.SaleTunnel.Information.email.info',
-    description: 'Info for the email',
-    defaultMessage:
-      'This email will be used to send you confirmation mails, it is the one you created your account with.',
-  },
-  voucherTitle: {
-    id: 'components.SaleTunnel.Information.voucher.title',
-    description: 'Title for the voucher',
-    defaultMessage: 'Voucher code',
-  },
-  voucherInfo: {
-    id: 'components.SaleTunnel.Information.voucher.info',
-    description: 'Info for the voucher',
-    defaultMessage: 'If you have a voucher code, please enter it in the field below.',
-  },
-  voucherValidate: {
-    id: 'components.SaleTunnel.Information.voucher.validate',
-    description: 'Validate text for the voucher',
-    defaultMessage: 'Validate',
-  },
-  voucherDelete: {
-    id: 'components.SaleTunnel.Information.voucher.delete',
-    description: 'Delete text for the voucher',
-    defaultMessage: 'Delete this voucher',
-  },
-  voucherError: {
-    id: 'components.SaleTunnel.Information.voucher.error',
-    description: 'Error when voucher is invalid',
-    defaultMessage: 'The submitted voucher code is not valid.',
-  },
-  discount: {
-    id: 'components.SaleTunnel.Information.voucher.discount',
-    description: 'Discount description',
-    defaultMessage: 'Discount applied',
+  purchaseTypeOptionGroup: {
+    id: 'components.SaleTunnel.Information.purchaseTypeOptionGroup',
+    description: 'Label for B2C option',
+    defaultMessage: 'Group purchase (B2B)',
   },
 });
 
-export const SaleTunnelInformation = () => {
-  const { props, product, voucherCode, setVoucherCode } = useSaleTunnelContext();
-  const [voucherError, setVoucherError] = useState(false);
-  const query = usePaymentPlan({
-    course_code: props.course?.code ?? props.enrollment!.course_run.course.code,
-    product_id: props.product.id,
-    ...(voucherCode ? { voucher_code: voucherCode } : {}),
-  });
-  const schedule = query.data?.payment_schedule ?? props.paymentPlan?.payment_schedule;
-  const price = query.data?.price ?? props.paymentPlan?.price;
-  const discountedPrice = query.data?.discounted_price ?? props.paymentPlan?.discounted_price;
-  const discount = query.data?.discount ?? props.paymentPlan?.discount;
-
-  const showPaymentSchedule =
-    product.type === ProductType.CREDENTIAL &&
-    schedule &&
-    (discountedPrice != null ? discountedPrice > 0 : price != null && price > 0);
+export enum FormType {
+  GROUP = 'group',
+  SINGULAR = 'singular',
+}
 
-  useEffect(() => {
-    if (query.error && voucherCode) {
-      setVoucherCode('');
-      setVoucherError(true);
-    }
-  }, [query.error, voucherCode, setVoucherCode]);
+export const SaleTunnelInformation = () => {
+  const intl = useIntl();
+  const { setBatchOrder, setSchedule } = useSaleTunnelContext();
+  const options = [
+    { label: intl.formatMessage(messages.purchaseTypeOptionSingle), value: FormType.SINGULAR },
+    { label: intl.formatMessage(messages.purchaseTypeOptionGroup), value: FormType.GROUP },
+  ];
+  const [purchaseType, setPurchaseType] = useState(FormType.SINGULAR);
 
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
         <h3 className="block-title mb-t">
-          <FormattedMessage {...messages.title} />
+          <FormattedMessage {...messages.purchaseTypeTitle} />
         </h3>
-        <div className="description mb-s">
-          <FormattedMessage {...messages.description} />
-        </div>
-        <OpenEdxFullNameForm />
-        <AddressSelector />
-        <div className="mt-s">
-          <Email />
-        </div>
-      </div>
-      <div>
-        {showPaymentSchedule && <PaymentScheduleBlock schedule={schedule} />}
-        <Voucher
-          discount={discount}
-          voucherError={voucherError}
-          setVoucherError={setVoucherError}
+        <Select
+          label={intl.formatMessage(messages.purchaseTypeSelect)}
+          options={options}
+          fullWidth
+          value={purchaseType}
+          clearable={false}
+          onChange={(e) => {
+            setPurchaseType(e.target.value as FormType);
+            setBatchOrder(undefined);
+            setSchedule(undefined);
+          }}
         />
-        <Total price={price} discountedPrice={discountedPrice} />
-        <WithdrawRightCheckbox />
-      </div>
-    </div>
-  );
-};
-
-const Email = () => {
-  const { user } = useSession();
-  const { data: openEdxProfileData } = useOpenEdxProfile({
-    username: user!.username,
-  });
-
-  return (
-    <div className="sale-tunnel__email">
-      <div className="sale-tunnel__email__top">
-        <h4>
-          <FormattedMessage {...messages.emailLabel} />
-        </h4>
-        <div className="fw-bold">{openEdxProfileData?.email}</div>
-      </div>
-      <div className="sale-tunnel__email__description">
-        <FormattedMessage {...messages.emailInfo} />
-      </div>
-    </div>
-  );
-};
-
-const Total = ({ price, discountedPrice }: { price?: number; discountedPrice?: number }) => {
-  const { product } = useSaleTunnelContext();
-  const totalPrice = price || product.price;
-  return (
-    <div className="sale-tunnel__total">
-      <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
-        <div className="block-title">
-          <FormattedMessage {...messages.totalLabel} />
-        </div>
-
-        <div className="block-title">
-          {discountedPrice !== undefined ? (
-            <>
-              <span className="price--striked">
-                <FormattedNumber
-                  value={totalPrice}
-                  style="currency"
-                  currency={product.price_currency}
-                />
-              </span>
-              <FormattedNumber
-                value={discountedPrice}
-                style="currency"
-                currency={product.price_currency}
-              />
-            </>
-          ) : (
-            <FormattedNumber
-              value={totalPrice}
-              style="currency"
-              currency={product.price_currency}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const Voucher = ({
-  discount,
-  voucherError,
-  setVoucherError,
-}: {
-  discount?: string;
-  voucherError: boolean;
-  setVoucherError: (value: boolean) => void;
-}) => {
-  const intl = useIntl();
-  const { voucherCode, setVoucherCode } = useSaleTunnelContext();
-  const [voucher, setVoucher] = useState('');
-  const handleVoucher = (e: ChangeEvent<HTMLInputElement>) => setVoucher(e.target.value);
-  const submitVoucher = () => {
-    setVoucherError(false);
-    setVoucherCode(voucher);
-    setVoucher('');
-  };
-
-  return (
-    <div className="sale-tunnel__voucher">
-      <div className="description">
-        <h4 className="block-title mb-t">
-          <FormattedMessage {...messages.voucherTitle} />
-        </h4>
-        <span className="mb-t">
-          <FormattedMessage {...messages.voucherInfo} />
-        </span>
-      </div>
-      <div className="form">
-        <Input
-          className="form-field mt-s"
-          value={voucher}
-          onChange={handleVoucher}
-          label={intl.formatMessage(messages.voucherTitle)}
-          disabled={!!voucherCode}
-        />
-        <Button size="small" color="primary" onClick={submitVoucher} disabled={!!voucherCode}>
-          <FormattedMessage {...messages.voucherValidate} />
-        </Button>
-      </div>
-      {voucherCode && (
-        <div className="voucher-tag">
-          <span>{voucherCode}</span>
-          <button
-            onClick={() => setVoucherCode('')}
-            title={intl.formatMessage(messages.voucherDelete)}
-          >
-            <span className="material-icons">close</span>
-          </button>
-        </div>
-      )}
-      {discount && (
-        <div className="voucher-discount">
-          <span>
-            <FormattedMessage {...messages.discount} />
-          </span>
-          <span>{discount}</span>
-        </div>
-      )}
-      {voucherError && (
-        <Alert type={VariantType.ERROR} className="mt-s">
-          <FormattedMessage {...messages.voucherError} />
-        </Alert>
-      )}
-    </div>
-  );
-};
-
-const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
-  return (
-    <div className="payment-schedule">
-      <h4 className="block-title mb-t">
-        <FormattedMessage {...messages.paymentSchedule} />
-      </h4>
-      <div className="mt-t">
-        <PaymentScheduleGrid schedule={schedule} />
       </div>
+      {purchaseType === FormType.SINGULAR && <SaleTunnelInformationSingular />}
+      {purchaseType === FormType.GROUP && <SaleTunnelInformationGroup />}
     </div>
   );
 };

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

@@ -33,7 +33,7 @@ const messages = defineMessages({
 
 export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) => {
   const intl = useIntl();
-  const { order, product } = useSaleTunnelContext();
+  const { order, product, batchOrder, schedule } = useSaleTunnelContext();
 
   return (
     <section className="sale-tunnel-step" data-testid="generic-sale-tunnel-success-step">
@@ -46,24 +46,38 @@ export const SaleTunnelSuccess = ({ closeModal }: { closeModal: () => void }) =>
       <p className="sale-tunnel-step__content">
         <FormattedMessage {...messages.successMessage} />
         <br />
-        <FormattedMessage {...messages.successDetailMessage} />
+        {schedule && <FormattedMessage {...messages.successDetailMessage} />}
       </p>
-      <footer className="sale-tunnel-step__footer">
-        {product.type === ProductType.CREDENTIAL ? (
+      {order && (
+        <footer className="sale-tunnel-step__footer">
+          {product.type === ProductType.CREDENTIAL ? (
+            <Button
+              href={
+                getDashboardBasename(intl.locale) +
+                generatePath(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+              }
+            >
+              <FormattedMessage {...messages.cta} />
+            </Button>
+          ) : (
+            <Button onClick={closeModal}>
+              <FormattedMessage {...messages.cta} />
+            </Button>
+          )}
+        </footer>
+      )}
+      {batchOrder?.id && (
+        <footer className="sale-tunnel-step__footer">
           <Button
             href={
               getDashboardBasename(intl.locale) +
-              generatePath(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+              generatePath(LearnerDashboardPaths.BATCH_ORDER, { batchOrderId: batchOrder.id })
             }
           >
             <FormattedMessage {...messages.cta} />
           </Button>
-        ) : (
-          <Button onClick={closeModal}>
-            <FormattedMessage {...messages.cta} />
-          </Button>
-        )}
-      </footer>
+        </footer>
+      )}
     </section>
   );
 };

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

@@ -2,7 +2,9 @@ import { useEffect, useMemo, useState } from 'react';
 import { Alert, Button, VariantType } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { validationSchema } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup';
 import { useOrders } from 'hooks/useOrders';
+import { useBatchOrder } from 'hooks/useBatchOrder';
 import { OrderCreationPayload } from 'types/Joanie';
 import { useMatchMediaLg } from 'hooks/useMatchMedia';
 import { SubscriptionErrorMessageId } from 'components/PaymentInterfaces/types';
@@ -60,6 +62,11 @@ const messages = defineMessages({
     description: 'Label for screen reader when an order creation is in progress.',
     id: 'components.SubscriptionButton.orderCreationInProgress',
   },
+  batchOrderFormInvalid: {
+    id: 'components.SubscriptionButton.batchOrderFormInvalid',
+    defaultMessage: 'Some required fields are missing in the form.',
+    description: 'Some required fields are missing in the form.',
+  },
 });
 
 enum ComponentStates {
@@ -82,16 +89,23 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     order,
     creditCard,
     billingAddress,
+    batchOrder,
+    setBatchOrder,
+    batchOrderFormMethods,
+    validateBatchOrder,
     hasWaivedWithdrawalRight,
     product,
     nextStep,
     runSubmitCallbacks,
     props: saleTunnelProps,
     voucherCode,
+    needsPayment,
   } = useSaleTunnelContext();
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
+  const { methods: batchOrderMethods } = useBatchOrder();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
   const [error, setError] = useState<SubscriptionErrorMessageId | string>();
+  const [isBatchOrderValid, setIsBatchOrderValid] = useState(false);
   const isMobile = useMatchMediaLg();
 
   const handleError = (
@@ -112,12 +126,12 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
-    if (!billingAddress) {
+    if (!billingAddress && needsPayment) {
       handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
       return;
     }
 
-    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight) {
+    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight && needsPayment) {
       handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
       return;
     }
@@ -142,15 +156,43 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     });
   };
 
+  const createBatchOrder = async () => {
+    setState(ComponentStates.LOADING);
+    try {
+      await runSubmitCallbacks();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
+      setState(ComponentStates.IDLE);
+      return;
+    }
+    if (!batchOrder) return;
+    const isFormValid = await batchOrderFormMethods?.trigger();
+    if (!isFormValid) {
+      handleError(SubscriptionErrorMessageId.ERROR_BATCH_ORDER_FORM_INVALID);
+      return;
+    }
+    batchOrderMethods.create(batchOrder, {
+      onError: async () => {
+        handleError();
+      },
+      onSuccess: async (createdBatchOrder: any) => {
+        if (createdBatchOrder.id) {
+          setBatchOrder(createdBatchOrder);
+          validateBatchOrder();
+        }
+      },
+    });
+  };
+
   const walkthroughMessages = useMemo(() => {
     if (product.contract_definition && product.price > 0) {
       return messages.walkthroughToSignAndSavePayment;
     } else if (product.contract_definition && product.price === 0) {
       return messages.walkthroughToSign;
-    } else if (!product.contract_definition && product.price > 0) {
+    } else if (!product.contract_definition && product.price > 0 && needsPayment) {
       return messages.walkthroughToSavePayment;
     }
-  }, [product, creditCard]);
+  }, [product, creditCard, needsPayment]);
 
   useEffect(() => {
     if (order) nextStep();
@@ -165,6 +207,12 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     }
   }, [state]);
 
+  useEffect(() => {
+    if (batchOrder) {
+      validationSchema.isValid(batchOrder).then((isValid) => setIsBatchOrderValid(isValid));
+    }
+  }, [batchOrder]);
+
   return (
     <>
       <div style={{ maxWidth: '680px' }} className="mb-s" data-testid="walkthrough-banner">
@@ -178,9 +226,9 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
         )}
       </div>
       <Button
-        onClick={createOrder}
+        onClick={batchOrder ? createBatchOrder : createOrder}
         fullWidth={isMobile}
-        disabled={state === ComponentStates.LOADING}
+        disabled={state === ComponentStates.LOADING || (batchOrder && !isBatchOrderValid)}
         {...(state === ComponentStates.ERROR && {
           'aria-describedby': 'sale-tunnel-payment-error',
         })}

package/js/components/SaleTunnel/_styles.scss

@@ -130,6 +130,61 @@
       font-size: var(--c--theme--font--sizes--l);
     }
   }
+
+  .stepper {
+    flex-wrap: wrap;
+    gap: 0.2rem;
+  }
+
+  .navigationButton {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  .step-content {
+    .step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 1rem 0;
+      gap: 0.5rem;
+      .field {
+        width: 90%;
+      }
+      .city-fields {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 0.25rem;
+        width: 90%;
+      }
+      .payment-block {
+        & > div {
+          margin: 1rem 0;
+          flex-direction: row;
+        }
+      }
+      .organism-block {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        margin-bottom: 1rem;
+        .opco-order {
+          display: flex;
+          flex-direction: row;
+          gap: 0.25rem;
+          & > div {
+            width: 100%;
+          }
+        }
+      }
+      .recommandation {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .description {