All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib/modals/delete-token-modal DeleteTokenModal.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo, useCallback } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';

import { Modal, type ModalProps } from '@allshares/studio-design-system';
import { TokenType } from '@amalia/amalia-lang/tokens/types';

type DeleteTokenType = TokenType.FIELD | TokenType.FILTER | TokenType.LINK | TokenType.QUOTA | TokenType.VARIABLE;

const deleteTokenTitleMessage = defineMessages<DeleteTokenType>({
  [TokenType.VARIABLE]: { defaultMessage: 'Delete variable' },
  [TokenType.FIELD]: { defaultMessage: 'Delete column' },
  [TokenType.FILTER]: { defaultMessage: 'Delete table' },
  [TokenType.QUOTA]: { defaultMessage: 'Delete quota' },
  [TokenType.LINK]: { defaultMessage: 'Delete link' },
});

const deleteTokenConfirmMessage = defineMessages<DeleteTokenType>({
  [TokenType.VARIABLE]: { defaultMessage: 'Are you sure you want to delete the variable “<b>{tokenName}</b>”?' },
  [TokenType.FIELD]: { defaultMessage: 'Are you sure you want to delete the column “<b>{tokenName}</b>”?' },
  [TokenType.FILTER]: { defaultMessage: 'Are you sure you want to delete the table “<b>{tokenName}</b>”?' },
  [TokenType.QUOTA]: { defaultMessage: 'Are you sure you want to delete the quota “<b>{tokenName}</b>”?' },
  [TokenType.LINK]: { defaultMessage: 'Are you sure you want to delete the link “<b>{tokenName}</b>”?' },
});

export type DeleteTokenModalProps = Required<Pick<ModalProps, 'isOpen' | 'onClose'>> & {
  readonly tokenName: string;
  readonly tokenType: DeleteTokenType;
  readonly onConfirm: () => void;
  readonly isConfirmPending: boolean;
};

export const DeleteTokenModal = memo(function DeleteTokenModal({
  tokenName,
  isOpen,
  onClose,
  tokenType,
  onConfirm,
  isConfirmPending,
}: DeleteTokenModalProps) {
  const handleDeleteToken = useCallback(() => {
    onConfirm();
    onClose();
  }, [onClose, onConfirm]);

  return (
    <Modal
      isOpen={isOpen}
      variant="danger"
      onClose={onClose}
    >
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>
            <FormattedMessage
              {...deleteTokenTitleMessage[tokenType]}
              values={{ tokenName }}
            />
          </Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <FormattedMessage
            {...deleteTokenConfirmMessage[tokenType]}
            values={{ tokenName, b: (chunks) => <strong>{chunks}</strong> }}
          />
        </Modal.Body>
      </Modal.Content>

      <Modal.Actions>
        <Modal.CancelAction />

        <Modal.MainAction
          isLoading={isConfirmPending}
          onClick={handleDeleteToken}
        >
          <FormattedMessage defaultMessage="Delete" />
        </Modal.MainAction>
      </Modal.Actions>
    </Modal>
  );
});