richie-education 3.2.1-dev9 → 3.2.2-dev26

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} />;
+};

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

@@ -0,0 +1,27 @@
+import fetchMock from 'fetch-mock';
+import { screen } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import { DashboardItemBatchOrder } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<DashboardItemBatchOrder />', () => {
+  setupJoanieSession();
+
+  it('renders a batch order', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/`, [batchOrder]);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+    render(<DashboardItemBatchOrder batchOrder={batchOrder} />);
+    expect(await screen.findByText(batchOrder.offering?.product.title)).toBeVisible();
+  });
+});