All files / libs/assignments/plans/components/src/lib/plan-assignments-table/cells/actions PlanAssignmentsTableDeleteAssignmentAction.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconTrash } from '@tabler/icons-react';
import { Fragment, memo, useCallback } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';

import { Modal, Table, Typography } from '@allshares/studio-design-system';
import { useDeletePlanAssignments } from '@amalia/assignments/plans/state';
import { useBoolState } from '@amalia/ext/react/hooks';
import { type Plan, type PlanAssignment } from '@amalia/payout-definition/plans/types';
import { formatUserFullName, type UserContract } from '@amalia/tenants/users/types';

export type PlanAssignmentsTableDeleteAssignmentActionProps = {
  readonly plan: Pick<Plan, 'archived' | 'name'>;
  readonly user: Pick<UserContract, 'firstName' | 'lastName'>;
  readonly planAssignment: Pick<PlanAssignment, 'id'>;
};

export const PlanAssignmentsTableDeleteAssignmentAction = memo(function PlanAssignmentsTableDeleteAssignmentAction({
  plan,
  user,
  planAssignment,
}: PlanAssignmentsTableDeleteAssignmentActionProps) {
  const { formatMessage } = useIntl();
  const { mutate: deletePlanAssignments, isPending } = useDeletePlanAssignments();

  const { isDeleteModalOpen, setDeleteModalOpenTrue, setDeleteModalOpenFalse } = useBoolState(false, 'deleteModalOpen');

  const handleDeletePlanAssignment = useCallback(
    () => deletePlanAssignments([planAssignment.id]),
    [deletePlanAssignments, planAssignment.id],
  );

  return (
    <Fragment>
      <Table.Cell.IconAction
        disabled={plan.archived}
        icon={<IconTrash />}
        isLoading={isPending}
        label={formatMessage({ defaultMessage: 'Delete assignment' })}
        variant="danger"
        onClick={setDeleteModalOpenTrue}
      />

      <Modal
        isOpen={isDeleteModalOpen}
        variant="danger"
        onClose={setDeleteModalOpenFalse}
      >
        <Modal.Content>
          <Modal.Header>
            <Modal.Title>
              <FormattedMessage defaultMessage="Delete assignment" />
            </Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <FormattedMessage
              defaultMessage="Are you sure you want to delete the assignment to “<b>{planName}</b>” for <b>{userName}</b>?"
              values={{
                userName: formatUserFullName(user),
                planName: plan.name,
                b: (chunks) => <Typography variant="bodyBaseBold">{chunks}</Typography>,
              }}
            />
          </Modal.Body>
        </Modal.Content>

        <Modal.Actions>
          <Modal.CancelAction />

          <Modal.MainAction
            isLoading={isPending}
            onClick={handleDeletePlanAssignment}
          >
            <FormattedMessage defaultMessage="Delete" />
          </Modal.MainAction>
        </Modal.Actions>
      </Modal>
    </Fragment>
  );
});