richie-education 3.2.1 → 3.2.2-dev27

package/js/widgets/Dashboard/components/DashboardCard/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@openfun/cunningham-react';
-import Input from 'components/Form/Input';
 import { DashboardBox } from '../DashboardBox';
 import { DashboardCard } from './index';
 
@@ -18,7 +17,15 @@ type Story = StoryObj<typeof DashboardCard>;
 export const Default: Story = {
   args: {
     header: 'Billing Addresses',
-    children: <Input name="default" label="Country" />,
+    children: (
+      <div>
+        <div>
+          <div>Home</div>
+          <strong>Pierre Léger</strong>
+          <p>21 rue du pavillon - 78130 Chapter ( France )</p>
+        </div>
+      </div>
+    ),
     footer: <Button color="primary">Update</Button>,
   },
 };
@@ -47,3 +54,19 @@ export const WithBoxes: Story = {
     ),
   },
 };
+
+export const NotExpanded: Story = {
+  args: {
+    header: 'Not expanded',
+    defaultExpanded: false,
+    children: (
+      <div>
+        <div>
+          <div>Home</div>
+          <strong>Pierre Léger</strong>
+          <p>21 rue du pavillon - 78130 Chapter ( France )</p>
+        </div>
+      </div>
+    ),
+  },
+};

package/js/widgets/Dashboard/components/DashboardCard/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   expandable?: boolean;
   fullWidth?: boolean;
   className?: string;
+  defaultExpanded?: boolean;
 }
 
 export const DashboardCard = ({
@@ -18,10 +19,11 @@ export const DashboardCard = ({
   className,
   expandable = true,
   fullWidth = false,
+  defaultExpanded = true,
 }: PropsWithChildren<Props>) => {
-  const [opened, setOpened] = useState(true);
+  const [opened, setOpened] = useState(defaultExpanded);
   const expandableRef = useRef<HTMLDivElement>(null);
-  const [wrapperHeight, setWrapperHeight] = useState('auto');
+  const [wrapperHeight, setWrapperHeight] = useState(defaultExpanded ? 'auto' : '0');
 
   const toggle = () => {
     if (opened) {

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/BatchOrderPaymentManager.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { Button, useModal } from '@openfun/cunningham-react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { useBatchOrder } from 'hooks/useBatchOrder';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { DashboardSubItemsList } from '../../DashboardSubItemsList';
+import { BatchOrderPaymentModal } from '.';
+
+const messages = defineMessages({
+  batchOrderPayment: {
+    id: 'components.ProductCertificateFooter.batchOrderPayment',
+    description: 'Label before the payment button',
+    defaultMessage: 'We are waiting for your payment to finalize the batch order.',
+  },
+  paymentProcessing: {
+    id: 'components.ProductCertificateFooter.paymentProcessing',
+    description: 'Button label for the payment is processing message',
+    defaultMessage: 'Payment processing...',
+  },
+  paymentNeededButton: {
+    id: 'components.ProductCertificateFooter.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
+  paymentSectionTitle: {
+    id: 'batchOrder.payment.sectionTitle',
+    description: 'Title for the payment section in dashboard',
+    defaultMessage: 'Payment required',
+  },
+});
+
+interface BatchPaymentManagerProps {
+  batchOrder: BatchOrderRead;
+}
+
+export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProps) => {
+  const intl = useIntl();
+  const retryModal = useModal();
+  const batchOrderQuery = useBatchOrder(batchOrder.id);
+  const processingPayment = batchOrder.state === BatchOrderState.PROCESS_PAYMENT;
+
+  useEffect(() => {
+    if (batchOrderQuery.item) {
+      batchOrderQuery.methods.invalidate();
+    }
+  }, [batchOrderQuery.item]);
+
+  return (
+    <DashboardSubItemsList
+      subItems={[
+        <DashboardSubItem
+          title={intl.formatMessage(messages.paymentSectionTitle)}
+          footer={
+            <div className="content">
+              <FormattedMessage {...messages.batchOrderPayment} />
+              <Button
+                size="small"
+                color="primary"
+                onClick={retryModal.open}
+                disabled={processingPayment}
+              >
+                {processingPayment ? (
+                  <FormattedMessage {...messages.paymentProcessing} />
+                ) : (
+                  <FormattedMessage
+                    {...messages.paymentNeededButton}
+                    values={{
+                      amount: intl.formatNumber(batchOrder.total ?? 0, {
+                        style: 'currency',
+                        currency: batchOrder.currency ?? 'EUR',
+                      }),
+                    }}
+                  />
+                )}
+              </Button>
+              <BatchOrderPaymentModal
+                {...retryModal}
+                batchOrder={batchOrder}
+                onClose={batchOrderQuery.methods.invalidate}
+              />
+            </div>
+          }
+        />,
+      ]}
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/index.tsx

@@ -0,0 +1,216 @@
+import {
+  Alert,
+  Button,
+  Modal,
+  ModalProps,
+  ModalSize,
+  useModals,
+  VariantType,
+} from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useRef, useState } from 'react';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { Payment, PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
+import PaymentInterface from 'components/PaymentInterfaces';
+import { PAYMENT_SETTINGS } from 'settings';
+import { Spinner } from 'components/Spinner';
+import { useBatchOrders, useBatchOrdersActions } from 'hooks/useBatchOrder';
+
+const messages = defineMessages({
+  title: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.title',
+    defaultMessage: 'Batch order payment',
+    description: 'Title of the modal prompting the user to complete a batch order payment.',
+  },
+  description: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.description',
+    defaultMessage:
+      'Since you selected payment by credit card, please finalize your batch order to complete the process.',
+    description:
+      'Informational message displayed when the user needs to complete the batch order payment.',
+  },
+  submit: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.submit',
+    defaultMessage: 'Pay {amount}',
+    description: 'Label of the button used to start the batch order payment.',
+  },
+  paymentInProgress: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.paymentInProgress',
+    defaultMessage: 'Payment in progress',
+    description: 'Label displayed when the payment process is currently ongoing.',
+  },
+  paymentError: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.paymentError',
+    defaultMessage: 'An error occurred during the payment process.',
+    description: 'Error message displayed when the payment fails.',
+  },
+  successTitle: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.successTitle',
+    defaultMessage: 'Payment successful',
+    description: 'Title of the modal displayed when the payment completes successfully.',
+  },
+  successDescription: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.successDescription',
+    defaultMessage: 'Your payment has been processed successfully.',
+    description: 'Description displayed in the success modal after a successful payment.',
+  },
+  abortError: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.abortError',
+    defaultMessage: 'Your payment was aborted during the process. Please try again.',
+    description:
+      'Error message displayed when the payment process is aborted by the user or system.',
+  },
+  errorAbortingPolling: {
+    id: 'components.DashboardItemBatchOrder.BatchOrderPaymentModal.errorAbortingPolling',
+    defaultMessage:
+      'Your payment was successful, but order validation is taking longer than expected. You can close this dialog and check your order later.',
+    description:
+      'Message displayed when the payment succeeded but the order validation polling timed out.',
+  },
+});
+
+interface Props extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  batchOrder: BatchOrderRead;
+}
+
+enum ComponentStates {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error',
+}
+
+export const BatchOrderPaymentModal = ({ batchOrder, ...props }: Props) => {
+  const intl = useIntl();
+  const API = useJoanieApi();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
+  const { methods: batchOrderMethods } = useBatchOrders();
+  const [payment, setPayment] = useState<Payment>();
+  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
+  const [error, setError] = useState<string>();
+
+  const modals = useModals();
+  const { submitForPayment } = useBatchOrdersActions();
+  const pay = async () => {
+    setState(ComponentStates.LOADING);
+    try {
+      const paymentResponse = await submitForPayment({
+        id: batchOrder.id,
+      });
+
+      if (paymentResponse) {
+        setPayment(paymentResponse);
+      } else {
+        // In case of bug.
+        setError(intl.formatMessage(messages.paymentError));
+        setState(ComponentStates.ERROR);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
+      setError(intl.formatMessage(messages.paymentError));
+      setState(ComponentStates.ERROR);
+    }
+  };
+
+  const handleError = (messageId: string = PaymentErrorMessageId.ERROR_DEFAULT) => {
+    setState(ComponentStates.ERROR);
+
+    if (messageId === PaymentErrorMessageId.ERROR_ABORT) {
+      setError(intl.formatMessage(messages.abortError));
+    } else {
+      setError(intl.formatMessage(messages.paymentError));
+    }
+  };
+
+  const isBatchOrderValidated = async (id: string): Promise<Boolean> => {
+    const batchOrderToCheck = await API.user.batchOrders.get({ id });
+    return batchOrderToCheck !== null && batchOrderToCheck.state === BatchOrderState.COMPLETED;
+  };
+
+  const settled = async () => {
+    await batchOrderMethods.invalidate();
+    props.onClose();
+    await modals.messageModal({
+      messageType: VariantType.SUCCESS,
+      title: intl.formatMessage(messages.successTitle),
+      children: intl.formatMessage(messages.successDescription),
+    });
+  };
+
+  const handleSuccess = () => {
+    let round = 0;
+
+    const checkBatchOrderValidity = async () => {
+      if (round >= PAYMENT_SETTINGS.pollLimit) {
+        timeoutRef.current = undefined;
+        setState(ComponentStates.ERROR);
+        setError(intl.formatMessage(messages.errorAbortingPolling));
+      } else {
+        const isValidated = await isBatchOrderValidated(batchOrder.id);
+        if (isValidated) {
+          setState(ComponentStates.IDLE);
+          timeoutRef.current = undefined;
+          settled();
+        } else {
+          round++;
+          timeoutRef.current = setTimeout(checkBatchOrderValidity, PAYMENT_SETTINGS.pollInterval);
+        }
+      }
+    };
+
+    checkBatchOrderValidity();
+  };
+
+  return (
+    <>
+      <Modal
+        {...props}
+        size={ModalSize.MEDIUM}
+        title={intl.formatMessage(messages.title)}
+        closeOnEsc={state !== ComponentStates.LOADING}
+        preventClose={state === ComponentStates.LOADING}
+        hideCloseButton={state === ComponentStates.LOADING}
+        actions={
+          <Button
+            color="primary"
+            size="small"
+            fullWidth={true}
+            onClick={pay}
+            disabled={state === ComponentStates.LOADING}
+            data-testid="order-payment-retry-modal-submit-button"
+          >
+            {state === ComponentStates.LOADING ? (
+              <Spinner theme="light" aria-labelledby="payment-in-progress">
+                <span id="payment-in-progress">
+                  <FormattedMessage {...messages.paymentInProgress} />
+                </span>
+              </Spinner>
+            ) : (
+              <FormattedMessage
+                {...messages.submit}
+                values={{
+                  amount: intl.formatNumber(batchOrder.total ?? 0, {
+                    style: 'currency',
+                    currency: batchOrder.currency ?? 'EUR',
+                  }),
+                }}
+              />
+            )}
+          </Button>
+        }
+      >
+        {error && (
+          <Alert type={VariantType.ERROR} className="mb-t">
+            {error}
+          </Alert>
+        )}
+        {!error && (
+          <Alert className="mb-b">
+            <FormattedMessage {...messages.description} />
+          </Alert>
+        )}
+      </Modal>
+      {payment && <PaymentInterface {...payment} onError={handleError} onSuccess={handleSuccess} />}
+    </>
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/DashboardBatchOrderSubItems.tsx

@@ -0,0 +1,316 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { PaymentMethod } from 'components/PaymentInterfaces/types';
+import { BatchOrderRead } from 'types/Joanie';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { DashboardSubItemsList } from '../DashboardSubItemsList';
+
+const messages = defineMessages({
+  stepCompany: {
+    id: 'batchOrder.title.company',
+    description: 'Step label for company information in the batch order form',
+    defaultMessage: 'Organization',
+  },
+  stepAdmin: {
+    id: 'batchOrder.title.admin',
+    description: 'Step label for administrative follow-up in the batch order form',
+    defaultMessage: 'Follow-up',
+  },
+  stepParticipants: {
+    id: 'batchOrder.title.partipants',
+    description: 'Step label for participants information in the batch order form',
+    defaultMessage: 'Participants',
+  },
+  stepFinancing: {
+    id: 'batchOrder.title.financing',
+    description: 'Step label for financing/payment in the batch order form',
+    defaultMessage: 'Financing',
+  },
+  stepSignatory: {
+    id: 'batchOrder.title.signatory',
+    description: 'section with details about the person responsible for signing the quote',
+    defaultMessage: 'Signatory',
+  },
+  seats: {
+    id: 'batchOrder.seats',
+    description: 'Text displayed for seats value in batch order',
+    defaultMessage: 'Seats',
+  },
+  labelName: {
+    id: 'batchOrder.label.name',
+    description: 'Label displayed for the name field in batch order form',
+    defaultMessage: 'Name',
+  },
+  labelProfession: {
+    id: 'batchOrder.label.profession',
+    description: 'Label displayed for the profession field in batch order form',
+    defaultMessage: 'Profession',
+  },
+  labelEmail: {
+    id: 'batchOrder.label.email',
+    description: 'Label displayed for the email field in batch order form',
+    defaultMessage: 'Email',
+  },
+  labelPhone: {
+    id: 'batchOrder.label.phone',
+    description: 'Label displayed for the phone field in batch order form',
+    defaultMessage: 'Phone',
+  },
+  labelMethod: {
+    id: 'batchOrder.label.method',
+    description: 'Label displayed for the payment method field in batch order form',
+    defaultMessage: 'Method',
+  },
+  labelEntity: {
+    id: 'batchOrder.label.entity',
+    description: 'Label displayed for the entity field in batch order form',
+    defaultMessage: 'Entity',
+  },
+  labelAmount: {
+    id: 'batchOrder.label.amount',
+    description: 'Label displayed for the amount field in batch order form',
+    defaultMessage: 'Amount',
+  },
+  labelCompany: {
+    id: 'batchOrder.label.company',
+    description: 'Label displayed for the company field in batch order form',
+    defaultMessage: 'Company',
+  },
+  labelSiret: {
+    id: 'batchOrder.label.siret',
+    description: 'Label displayed for the SIRET field in batch order form',
+    defaultMessage: 'SIRET',
+  },
+  labelVAT: {
+    id: 'batchOrder.label.vat',
+    description: 'Label displayed for the VAT field in batch order form',
+    defaultMessage: 'VAT',
+  },
+  labelAddress: {
+    id: 'batchOrder.label.address',
+    description: 'Label displayed for the address field in batch order form',
+    defaultMessage: 'Address',
+  },
+  labelPostcode: {
+    id: 'batchOrder.label.postcode',
+    description: 'Label displayed for the postcode field in batch order form',
+    defaultMessage: 'Postcode',
+  },
+  labelCity: {
+    id: 'batchOrder.label.city',
+    description: 'Label displayed for the city field in batch order form',
+    defaultMessage: 'City',
+  },
+  labelCountry: {
+    id: 'batchOrder.label.country',
+    description: 'Label displayed for the country field in batch order form',
+    defaultMessage: 'Country',
+  },
+  labelBilling: {
+    id: 'batchOrder.label.billing',
+    description: 'Label displayed for the billing field in batch order form',
+    defaultMessage: 'Billing',
+  },
+  [PaymentMethod.BANK_TRANSFER]: {
+    id: 'batchOrder.payment.bank',
+    description: 'Label for bank transfer payment method',
+    defaultMessage: 'Bank transfer',
+  },
+  [PaymentMethod.CARD_PAYMENT]: {
+    id: 'batchOrder.payment.card',
+    description: 'Label for card payment method',
+    defaultMessage: 'Card payment',
+  },
+  [PaymentMethod.PURCHASE_ORDER]: {
+    id: 'batchOrder.payment.order',
+    description: 'Label for purchase order payment method',
+    defaultMessage: 'Purchase order',
+  },
+});
+
+const DashboardItemField = ({
+  label,
+  value,
+}: {
+  label: React.ReactNode;
+  value?: React.ReactNode;
+}) =>
+  value ? (
+    <div>
+      <span className="dashboard-item__label">{label}: </span>
+      {value}
+    </div>
+  ) : null;
+
+export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchOrderRead }) => {
+  const intl = useIntl();
+
+  const items = [
+    <DashboardSubItem
+      key="company"
+      title={intl.formatMessage(messages.stepCompany)}
+      footer={
+        <div className="content">
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelCompany} />}
+            value={batchOrder.company_name}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelSiret} />}
+            value={batchOrder.identification_number}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelVAT} />}
+            value={batchOrder.vat_registration}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelAddress} />}
+            value={batchOrder.address}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelPostcode} />}
+            value={batchOrder.postcode}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelCity} />}
+            value={batchOrder.city}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelCountry} />}
+            value={batchOrder.country}
+          />
+        </div>
+      }
+    />,
+    <DashboardSubItem
+      key="admin"
+      title={intl.formatMessage(messages.stepAdmin)}
+      footer={
+        <div className="content">
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelName} />}
+            value={`${batchOrder.administrative_firstname} ${batchOrder.administrative_lastname}`}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelProfession} />}
+            value={batchOrder.administrative_profession}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelEmail} />}
+            value={batchOrder.administrative_email}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelPhone} />}
+            value={batchOrder.administrative_telephone}
+          />
+        </div>
+      }
+    />,
+    <DashboardSubItem
+      key="signatory"
+      title={intl.formatMessage(messages.stepSignatory)}
+      footer={
+        <div className="content">
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelName} />}
+            value={`${batchOrder.signatory_firstname} ${batchOrder.signatory_lastname}`}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelProfession} />}
+            value={batchOrder.signatory_profession}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelEmail} />}
+            value={batchOrder.signatory_email}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelPhone} />}
+            value={batchOrder.signatory_telephone}
+          />
+        </div>
+      }
+    />,
+    <DashboardSubItem
+      key="participants"
+      title={intl.formatMessage(messages.stepParticipants)}
+      footer={
+        <div className="content">
+          <DashboardItemField
+            label={<FormattedMessage {...messages.seats} />}
+            value={batchOrder.nb_seats}
+          />
+        </div>
+      }
+    />,
+    <DashboardSubItem
+      key="financing"
+      title={intl.formatMessage(messages.stepFinancing)}
+      footer={
+        <div className="content">
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelMethod} />}
+            value={
+              batchOrder.payment_method && (
+                <FormattedMessage {...messages[batchOrder.payment_method]} />
+              )
+            }
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelEntity} />}
+            value={batchOrder.funding_entity}
+          />
+          <DashboardItemField
+            label={<FormattedMessage {...messages.labelAmount} />}
+            value={batchOrder.funding_amount}
+          />
+        </div>
+      }
+    />,
+  ];
+
+  if (batchOrder.billing_address) {
+    items.push(
+      <DashboardSubItem
+        key="billing"
+        title={intl.formatMessage(messages.labelBilling)}
+        footer={
+          <div className="content">
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelCompany} />}
+              value={batchOrder.billing_address.company_name}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelSiret} />}
+              value={batchOrder.billing_address.identification_number}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelName} />}
+              value={batchOrder.billing_address.contact_name}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelEmail} />}
+              value={batchOrder.billing_address.contact_email}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelAddress} />}
+              value={batchOrder.billing_address.address}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelPostcode} />}
+              value={batchOrder.billing_address.postcode}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelCity} />}
+              value={batchOrder.billing_address.city}
+            />
+            <DashboardItemField
+              label={<FormattedMessage {...messages.labelCountry} />}
+              value={batchOrder.billing_address.country}
+            />
+          </div>
+        }
+      />,
+    );
+  }
+
+  return <DashboardSubItemsList subItems={items} />;
+};