All files / libs/assignments/quotas/components/src/lib/quota-assigned-plans-button-badge QuotaAssignedPlansButtonBadge.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54x
 
 
 
 
20x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
 
import { Badge, UnstyledButton, type BadgeProps } from '@allshares/studio-design-system';
import { type Quota } from '@amalia/amalia-lang/tokens/types';
import { type QuotaWithAssignedPlans } from '@amalia/assignments/quotas/types';
import { type MergeAll } from '@amalia/ext/typescript';
import { AssignedPlansDropdownList } from '@amalia/payout-definition/plans/components';
 
export type QuotaAssignedPlansButtonBadgeProps = MergeAll<
  [
    Omit<BadgeProps, 'children' | 'variant'>,
    {
      readonly quotaId: Quota['id'];
      readonly assignedPlans: QuotaWithAssignedPlans['assignedPlans'];
    },
  ]
>;
 
export const QuotaAssignedPlansButtonBadge = memo(function QuotaAssignedPlansButtonBadge({
  quotaId,
  assignedPlans,
  ...props
}: QuotaAssignedPlansButtonBadgeProps) {
  return (
    <AssignedPlansDropdownList
      id={quotaId}
      plans={assignedPlans}
    >
      <UnstyledButton
        data-testid={`assigned-plans-button-${quotaId}`}
        disabled={!assignedPlans.length}
      >
        <Badge
          {...props}
          variant={assignedPlans.length > 0 ? 'blue' : 'grey'}
        >
          <FormattedMessage
            defaultMessage="{count, plural, =0 {Not used in any plan} one {Used in # plan} other {Used in # plans}}"
            values={{ count: assignedPlans.length }}
          />
        </Badge>
      </UnstyledButton>
    </AssignedPlansDropdownList>
  );
});