richie-education 2.28.2-dev26 → 2.28.2-dev39

package/js/utils/test/factories/joanie.ts

@@ -4,40 +4,42 @@ import {
   Address,
   Certificate,
   CertificateDefinition,
-  CourseListItem,
+  CertificateOrder,
+  CertificateOrderWithPaymentInfo,
+  CertificateProduct,
+  Contract,
+  ContractDefinition,
+  ContractLight,
   CourseLight,
+  CourseListItem,
   CourseProduct,
   CourseProductRelation,
   CourseRun,
+  CredentialOrder,
+  CredentialOrderWithPaymentInfo,
+  CredentialProduct,
   CreditCard,
   CreditCardBrand,
+  DefinitionResourcesProduct,
   Enrollment,
+  EnrollmentLight,
   EnrollmentState,
+  JoanieFile,
+  NestedCertificateOrder,
+  NestedCourseOrder,
+  NestedCredentialOrder,
+  Order,
+  OrderEnrollment,
+  OrderGroup,
+  PaymentInstallment,
   OrderLite,
   OrderState,
   Organization,
   OrganizationLight,
+  PaymentScheduleState,
   ProductType,
   TargetCourse,
-  JoanieFile,
-  Contract,
-  OrderEnrollment,
-  ContractDefinition,
-  NestedCredentialOrder,
-  NestedCertificateOrder,
-  Order,
-  CertificateOrder,
-  CredentialOrder,
-  CertificateOrderWithPaymentInfo,
-  CredentialOrderWithPaymentInfo,
-  EnrollmentLight,
-  OrderGroup,
-  CertificateProduct,
-  CredentialProduct,
-  NestedCourseOrder,
   UserLight,
-  ContractLight,
-  DefinitionResourcesProduct,
 } from 'types/Joanie';
 import { Payment, PaymentProviders } from 'components/PaymentInterfaces/types';
 import { CourseStateFactory } from 'utils/test/factories/richie';
@@ -347,6 +349,16 @@ export const CourseListItemFactory = factory((): CourseListItem => {
   };
 });
 
+export const PaymentInstallmentFactory = factory((): PaymentInstallment => {
+  return {
+    id: faker.string.uuid(),
+    currency: faker.finance.currencyCode(),
+    amount: faker.number.int(),
+    due_date: faker.date.future().toISOString(),
+    state: PaymentScheduleState.PAID,
+  };
+});
+
 export const OrderEnrollmentFactory = factory((): OrderEnrollment => {
   return {
     id: faker.string.uuid(),
@@ -415,6 +427,7 @@ export const CredentialOrderFactory = factory((): CredentialOrder => {
     ...AbstractOrderFactory().one(),
     course: CourseLightFactory().one(),
     enrollment: null,
+    payment_schedule: PaymentInstallmentFactory().many(3),
   };
   return order;
 });

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -21,11 +21,19 @@ import {
   CertificateFactory,
   CourseLightFactory,
   CourseRunFactory,
-  EnrollmentFactory,
   CredentialOrderFactory,
+  CredentialOrderWithPaymentFactory,
+  EnrollmentFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
-import { Certificate, CourseLight, CourseRun, CredentialOrder, OrderState } from 'types/Joanie';
+import {
+  Certificate,
+  CourseLight,
+  CourseRun,
+  CredentialOrder,
+  OrderState,
+  PaymentScheduleState,
+} from 'types/Joanie';
 import { resolveAll } from 'utils/resolveAll';
 import { confirm } from 'utils/indirection/window';
 import { Priority } from 'types';
@@ -40,6 +48,7 @@ import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { OrderHelper } from 'utils/OrderHelper';
 import { DashboardTest } from '../../DashboardTest';
 import { DashboardItemOrder } from './DashboardItemOrder';
 
@@ -53,8 +62,15 @@ jest.mock('utils/context', () => ({
 
 jest.mock('utils/indirection/window', () => ({
   confirm: jest.fn(() => true),
+  matchMedia: () => ({
+    matches: true,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }),
 }));
 
+jest.mock('../../../../../components/PaymentInterfaces');
+
 describe('<DashboardItemOrder/>', () => {
   setupJoanieSession();
 
@@ -852,4 +868,96 @@ describe('<DashboardItemOrder/>', () => {
     within(block).getByText(new RegExp(order.organization?.address?.postcode!));
     within(block).getByText(new RegExp(order.organization?.address?.country!));
   });
+
+  it('renders a writable order with failed payment and retry it successfully', async () => {
+    const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
+
+    const validOrder = { ...order };
+    validOrder.payment_schedule = [
+      { ...order.payment_schedule![0] },
+      { ...order.payment_schedule![1] },
+      { ...order.payment_schedule![2] },
+    ];
+    fetchMock
+      .post(
+        `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_installment_payment/`,
+        paymentInfo,
+      )
+      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, validOrder);
+
+    order.state = OrderState.FAILED_PAYMENT;
+    order.payment_schedule![1].state = PaymentScheduleState.REFUSED;
+
+    const formatPrice = (price: number, currency: string) =>
+      new Intl.NumberFormat('en', {
+        currency,
+        style: 'currency',
+      }).format(price);
+
+    const { product } = mockCourseProductWithOrder(order);
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/',
+      { results: [order], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+    screen.getByText(/a payment failed, please update your payment method/i);
+    const failedInstallment = OrderHelper.getFailedInstallment(order)!;
+    const button = screen.getByRole('button', {
+      name: 'Pay ' + formatPrice(failedInstallment.amount, failedInstallment.currency),
+    });
+    const user = userEvent.setup();
+
+    await user.click(button);
+
+    // Retry modal is shown.
+    screen.getByText('Retry payment');
+    screen.getByText(
+      /The payment failed, please choose another payment method or add a new one during the payment/,
+    );
+    screen.getByText('Use another credit card during payment');
+
+    // Prepare for cache invalidation.
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/',
+      { results: [validOrder], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+
+    // Click on pay button.
+    const payButton = screen.getByTestId('order-payment-retry-modal-submit-button');
+    expect(payButton.innerHTML.replace('&nbsp;', ' ')).toEqual(
+      'Pay ' +
+        formatPrice(failedInstallment.amount, failedInstallment.currency).replace(
+          /(\u202F|\u00a0)/g,
+          ' ',
+        ),
+    );
+    await user.click(payButton);
+    // Pay via mocked payment interface
+    screen.getByText('Payment interface component');
+    await user.click(screen.getByTestId('payment-success'));
+
+    // Make sure retry modal is closed.
+    expect(screen.queryByText('Retry payment')).not.toBeInTheDocument();
+
+    // Success modal is shown, close it.
+    screen.getByText('Payment successful');
+    screen.getByText('The payment was successful');
+    const okButton = screen.getByRole('button', { name: 'Ok' });
+    await user.click(okButton);
+
+    // Warning alert is not shown anymore.
+    await waitFor(() => {
+      expect(
+        screen.queryByText(/a payment failed, please update your payment method/i),
+      ).not.toBeInTheDocument();
+    });
+  });
 });

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -1,5 +1,5 @@
-import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
-import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Alert, Button, useModal, VariantType } from '@openfun/cunningham-react';
 import classNames from 'classnames';
 import { generatePath } from 'react-router-dom';
 import { CourseLight, CredentialOrder, Product } from 'types/Joanie';
@@ -16,6 +16,8 @@ import ContractStatus from 'components/ContractStatus';
 import SignContractButton from 'components/SignContractButton';
 import { AddressView } from 'components/Address';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { OrderPaymentDetailsModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal';
+import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
@@ -78,6 +80,31 @@ const messages = defineMessages({
     description: 'Label for the organization DPO contact',
     defaultMessage: 'Data protection email',
   },
+  paymentTitle: {
+    id: 'components.DashboardItemOrder.paymentTitle',
+    description: 'Label for the payment block',
+    defaultMessage: 'Payment',
+  },
+  paymentLabel: {
+    id: 'components.DashboardItemOrder.paymentLabel',
+    description: 'Label for the payment block',
+    defaultMessage: 'You can see and manage all installments.',
+  },
+  paymentButton: {
+    id: 'components.DashboardItemOrder.paymentButton',
+    description: 'Button label for the payment block',
+    defaultMessage: 'Manage payment',
+  },
+  paymentNeededMessage: {
+    id: 'components.DashboardItemOrder.paymentNeededMessage',
+    description: 'Message displayed when payment is needed',
+    defaultMessage: 'A payment failed, please update your payment method',
+  },
+  paymentNeededButton: {
+    id: 'components.DashboardItemOrder.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
 });
 
 interface DashboardItemOrderProps {
@@ -299,11 +326,72 @@ const OrganizationBlock = ({ order, product }: { order: CredentialOrder; product
             </div>
           </div>
         )}
+        <Installment order={order} />
       </div>
     </div>
   );
 };
 
+const Installment = ({ order }: { order: CredentialOrder }) => {
+  const modal = useModal();
+  const retryModal = useModal();
+  const failedInstallment = OrderHelper.getFailedInstallment(order);
+  const intl = useIntl();
+
+  const pay = async () => {
+    retryModal.open();
+  };
+
+  return (
+    <>
+      <div className="dashboard-splitted-card__item">
+        <div
+          className={classNames('dashboard-splitted-card__item__title', {
+            'dashboard-splitted-card__item__title--dot': !!failedInstallment,
+          })}
+        >
+          <span>
+            <FormattedMessage {...messages.paymentTitle} />
+          </span>
+        </div>
+        {failedInstallment && (
+          <Alert
+            className="mb-t"
+            type={VariantType.ERROR}
+            buttons={
+              <Button size="small" onClick={pay}>
+                <FormattedMessage
+                  {...messages.paymentNeededButton}
+                  values={{
+                    amount: intl.formatNumber(failedInstallment.amount, {
+                      style: 'currency',
+                      currency: failedInstallment.currency,
+                    }),
+                  }}
+                />
+              </Button>
+            }
+          >
+            <FormattedMessage {...messages.paymentNeededMessage} />
+          </Alert>
+        )}
+        <div className="dashboard-splitted-card__item__description">
+          <FormattedMessage {...messages.paymentLabel} />
+        </div>
+        <div className="dashboard-splitted-card__item__actions">
+          <Button size="small" color="secondary" onClick={modal.open}>
+            <FormattedMessage {...messages.paymentButton} />
+          </Button>
+        </div>
+      </div>
+      <OrderPaymentDetailsModal {...modal} order={order} />
+      {failedInstallment && (
+        <OrderPaymentRetryModal {...retryModal} installment={failedInstallment} order={order} />
+      )}
+    </>
+  );
+};
+
 const ContractItem = ({ product, order }: { order: CredentialOrder; product: Product }) => {
   if (!product?.contract_definition) {
     return;

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/_styles.scss

@@ -0,0 +1,7 @@
+.order-payment-details {
+  &__title {
+    font-weight: var(--c--theme--font--weights--bold);
+    font-size: var(--c--theme--font--sizes--l);
+    text-align: left;
+  }
+}

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/index.tsx

@@ -0,0 +1,106 @@
+import {
+  Alert,
+  Button,
+  Modal,
+  ModalProps,
+  ModalSize,
+  useModal,
+  VariantType,
+} from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useState } from 'react';
+import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
+import { CreditCard, Order } from 'types/Joanie';
+import { CreditCardSelector } from 'components/CreditCardSelector';
+import { OrderHelper } from 'utils/OrderHelper';
+import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
+
+const messages = defineMessages({
+  title: {
+    id: 'components.DashboardItemOrder.PaymentModal.title',
+    defaultMessage: 'Payment details',
+    description: 'Title of the payment modal',
+  },
+  scheduleTitle: {
+    id: 'components.DashboardItemOrder.PaymentModal.scheduleTitle',
+    defaultMessage: 'Repayment schedule',
+    description: 'Title of the payment schedule',
+  },
+  paymentMethodTitle: {
+    id: 'components.DashboardItemOrder.PaymentModal.paymentMethodTitle',
+    defaultMessage: 'Payment method',
+    description: 'Title of the payment method section',
+  },
+  paymentNeededMessage: {
+    id: 'components.DashboardItemOrder.paymentNeededMessage',
+    description: 'Message displayed when payment is needed',
+    defaultMessage: 'The payment failed, please update your payment method',
+  },
+  paymentNeededButton: {
+    id: 'components.DashboardItemOrder.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
+});
+
+interface PaymentModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  order: Order;
+}
+
+export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps) => {
+  const intl = useIntl();
+  const retryModal = useModal();
+  const failedInstallment = OrderHelper.getFailedInstallment(order);
+  return (
+    <>
+      <Modal {...props} size={ModalSize.MEDIUM} title={intl.formatMessage(messages.title)}>
+        <h3 className="order-payment-details__title mb-s">
+          <FormattedMessage {...messages.paymentMethodTitle} />
+        </h3>
+        <CreditCardSelectorWrapper />
+        <h3 className="order-payment-details__title mb-s mt-b">
+          <FormattedMessage {...messages.scheduleTitle} />
+        </h3>
+        {failedInstallment && (
+          <Alert
+            className="mb-t"
+            type={VariantType.ERROR}
+            buttons={
+              <Button size="small" onClick={retryModal.open}>
+                <FormattedMessage
+                  {...messages.paymentNeededButton}
+                  values={{
+                    amount: intl.formatNumber(failedInstallment.amount, {
+                      style: 'currency',
+                      currency: failedInstallment.currency,
+                    }),
+                  }}
+                />
+              </Button>
+            }
+          >
+            <FormattedMessage {...messages.paymentNeededMessage} />
+          </Alert>
+        )}
+        {order.payment_schedule && <PaymentScheduleGrid schedule={order.payment_schedule} />}
+      </Modal>
+      {failedInstallment && (
+        <OrderPaymentRetryModal {...retryModal} installment={failedInstallment} order={order} />
+      )}
+    </>
+  );
+};
+
+const CreditCardSelectorWrapper = () => {
+  // TODO: At the moment is automatically selects the default credit card but it must select the credit card used to
+  // buy the order.
+  const [creditCard, setCreditCard] = useState<CreditCard>();
+  return (
+    <CreditCardSelector
+      creditCard={creditCard}
+      setCreditCard={setCreditCard}
+      quickRemove={false}
+      allowEdit={false}
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal/index.tsx

@@ -0,0 +1,212 @@
+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 { CreditCard, Order, PaymentInstallment, OrderState } from 'types/Joanie';
+import { CreditCardSelector } from 'components/CreditCardSelector';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { Payment, PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
+import PaymentInterface from 'components/PaymentInterfaces';
+import { PAYMENT_SETTINGS } from 'settings';
+import { useOrders } from 'hooks/useOrders';
+import { Spinner } from 'components/Spinner';
+
+const messages = defineMessages({
+  title: {
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.title',
+    defaultMessage: 'Retry payment',
+    description: 'Title of the payment retry modal',
+  },
+  description: {
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.description',
+    defaultMessage:
+      'The payment failed, please choose another payment method or add a new one during the payment',
+    description: 'Message displayed when payment is needed',
+  },
+  submit: {
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.submit',
+    defaultMessage: 'Pay {amount}',
+    description: 'Message displayed when payment is needed',
+  },
+  paymentInProgress: {
+    defaultMessage: 'Payment in progress',
+    description: 'Label for screen reader when a retry payment is in progress.',
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.paymentInProgress',
+  },
+  successTitle: {
+    defaultMessage: 'Payment successful',
+    description: 'Title of the payment success modal',
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.successTitle',
+  },
+  successDescription: {
+    defaultMessage: 'The payment was successful',
+    description: 'Description of the payment success modal',
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.successDescription',
+  },
+  errorFailedSubmitInstallmentPayment: {
+    defaultMessage: 'Failed to submit installment payment, please retry later.',
+    description: 'Error message when submitting installment payment fails',
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.errorFailedSubmitInstallmentPayment',
+  },
+  errorAbortingPolling: {
+    defaultMessage:
+      'Your payment has succeeded but your order validation is taking too long, you can close this dialog and come back later.',
+    description: 'Error message when submitting installment payment fails',
+    id: 'components.DashboardItemOrder.OrderPaymentRetryModal.errorAbortingPolling',
+  },
+});
+
+interface Props extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  installment: PaymentInstallment;
+  order: Order;
+}
+
+enum ComponentStates {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error',
+}
+
+export const OrderPaymentRetryModal = ({ installment, order, ...props }: Props) => {
+  const intl = useIntl();
+  const API = useJoanieApi();
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
+  const [payment, setPayment] = useState<Payment>();
+  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
+  const [error, setError] = useState<string>();
+  const [creditCard, setCreditCard] = useState<CreditCard>();
+  const modals = useModals();
+
+  const pay = async () => {
+    setState(ComponentStates.LOADING);
+    try {
+      const paymentResponse = await API.user.orders.submit_installment_payment(order.id, {
+        credit_card_id: creditCard?.id,
+      });
+      if (paymentResponse) {
+        setPayment(paymentResponse);
+      } else {
+        // In case of bug.
+        setError(intl.formatMessage(messages.errorFailedSubmitInstallmentPayment));
+        setState(ComponentStates.ERROR);
+      }
+    } catch (e) {
+      setError(intl.formatMessage(messages.errorFailedSubmitInstallmentPayment));
+      setState(ComponentStates.ERROR);
+    }
+  };
+
+  const handleError = (messageId: string = PaymentErrorMessageId.ERROR_DEFAULT) => {
+    setState(ComponentStates.ERROR);
+    setError(messageId);
+  };
+
+  const isOrderValidated = async (id: string): Promise<Boolean> => {
+    const orderToCheck = await API.user.orders.get({ id });
+    return (
+      orderToCheck?.state === OrderState.VALIDATED ||
+      orderToCheck?.state === OrderState.PENDING_PAYMENT
+    );
+  };
+
+  const settled = async () => {
+    await orderMethods.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 checkOrderValidity = async () => {
+      if (round >= PAYMENT_SETTINGS.pollLimit) {
+        timeoutRef.current = undefined;
+        setState(ComponentStates.ERROR);
+        setError(intl.formatMessage(messages.errorAbortingPolling));
+      } else {
+        const isValidated = await isOrderValidated(order.id);
+        if (isValidated) {
+          setState(ComponentStates.IDLE);
+          timeoutRef.current = undefined;
+          settled();
+        } else {
+          round++;
+          timeoutRef.current = setTimeout(checkOrderValidity, PAYMENT_SETTINGS.pollInterval);
+        }
+      }
+    };
+
+    checkOrderValidity();
+  };
+
+  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(installment.amount, {
+                    style: 'currency',
+                    currency: installment.currency,
+                  }),
+                }}
+              />
+            )}
+          </Button>
+        }
+      >
+        {error && (
+          <Alert type={VariantType.ERROR} className="mb-t">
+            {error}
+          </Alert>
+        )}
+        <Alert className="mb-b">
+          <FormattedMessage {...messages.description} />
+        </Alert>
+        <CreditCardSelector
+          creditCard={creditCard}
+          setCreditCard={setCreditCard}
+          quickRemove={state !== ComponentStates.LOADING}
+          allowEdit={state !== ComponentStates.LOADING}
+        />
+      </Modal>
+      {state === ComponentStates.LOADING && payment && (
+        <PaymentInterface {...payment} onError={handleError} onSuccess={handleSuccess} />
+      )}
+    </>
+  );
+};