All files / libs/payout-calculation/payments/views/commission-report/src/lib/delete DeletePaymentModal.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useCallback, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Modal } from '@allshares/studio-design-system';
import { isSplit, type PaymentContract } from '@amalia/core/types';
import { assert } from '@amalia/ext/typescript';
import { useDeletePayment, usePaymentsDetails } from '@amalia/payout-calculation/payments/state';

export type DeletePaymentModalProps = {
  readonly isOpen: boolean;
  readonly payment: PaymentContract | null;
  readonly onClose: () => void;
};

export const DeletePaymentModal = memo(function DeletePaymentModal({
  isOpen,
  payment,
  onClose,
}: DeletePaymentModalProps) {
  const { data: paymentDetails, isPending: isPaymentDetailsLoading } = usePaymentsDetails(payment, {
    enabled: !!isOpen,
  });

  const { mutateAsync: deletePayment, isPending: isDeletePaymentLoading } = useDeletePayment();

  const isSplitPayment = useMemo(() => !!payment && isSplit(payment), [payment]);

  const [masterPayment, otherPayments]: [PaymentContract | null, PaymentContract[]] = useMemo(() => {
    if (!isSplitPayment || !paymentDetails) {
      return [payment, []];
    }

    const masterPayment = paymentDetails.find((paymentItem) => !paymentItem.masterPaymentId);

    assert(!!masterPayment, 'Master payment should be defined');

    const otherPayments = paymentDetails.filter((paymentItem) => !!paymentItem.masterPaymentId);

    return [masterPayment, otherPayments];
  }, [isSplitPayment, paymentDetails, payment]);

  const handleConfirmDeletePayment = useCallback(async () => {
    if (masterPayment) {
      await deletePayment(masterPayment.id);
      onClose();
    }
  }, [deletePayment, masterPayment, onClose]);

  return (
    <Modal
      isOpen={isOpen}
      variant="danger"
      onClose={onClose}
    >
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>
            <FormattedMessage defaultMessage="Delete payment" />
          </Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <Modal.Description>
            {isSplitPayment ? (
              <FormattedMessage
                defaultMessage="This payment is part of a split payment.{br}All {count} payments will be merged into 1 before deleting the resulting payment.{br}Are you sure?"
                values={{ count: otherPayments.length + 1 }}
              />
            ) : (
              <FormattedMessage defaultMessage="This payment will be permanently deleted.{br}Are you sure?" />
            )}
          </Modal.Description>
        </Modal.Body>
      </Modal.Content>

      <Modal.Actions>
        <Modal.CancelAction
          disabled={isPaymentDetailsLoading}
          onClick={onClose}
        >
          <FormattedMessage defaultMessage="Cancel" />
        </Modal.CancelAction>

        <Modal.MainAction
          disabled={isDeletePaymentLoading || isPaymentDetailsLoading}
          onClick={handleConfirmDeletePayment}
        >
          <FormattedMessage defaultMessage="Delete" />
        </Modal.MainAction>
      </Modal.Actions>
    </Modal>
  );
});