All files / libs/payout-definition/plans/components/src/lib/plan-awards/award PlanAward.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { format } from 'date-fns';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Group, Popover } from '@allshares/studio-design-system';
import { StatementFrequency } from '@amalia/core/types';
import { toDate } from '@amalia/ext/dates';
import { type Period } from '@amalia/payout-definition/periods/types';
import { type BadgeConfiguration } from '@amalia/payout-definition/plans/types';

import { PlanAwardDetails } from '../award-details/PlanAwardDetails';
import { PlanAwardIcon } from '../award-icon/PlanAwardIcon';

export type PlanAwardProps = {
  /** If false, the award is available but not won. */
  readonly isAwarded: boolean;
  /** Award configuration. */
  readonly configuration: BadgeConfiguration;
  /** Current period. */
  readonly period?: Period;
};

export const PlanAward = memo(function PlanAward({ isAwarded, configuration, period }: PlanAwardProps) {
  return (
    <Popover
      shouldTriggerOnHover
      initialFocus={-1}
      content={
        <Popover.Layout>
          <Popover.Header>
            <Popover.Title>
              <FormattedMessage
                defaultMessage="Badge {isAwarded, select, true {earned} other {not earned}}{hasPeriod, select, true {{periodFrequency, select, month { on {period}} quarter { on {period}} other {}}} other {}}"
                values={{
                  isAwarded: String(isAwarded),
                  hasPeriod: String(!!period),
                  periodFrequency: period?.frequency,
                  period: period
                    ? format(
                        toDate(period.startDate),
                        period.frequency === StatementFrequency.month ? 'MMMM yyyy' : 'QQQ yyyy',
                      )
                    : undefined,
                }}
              />
            </Popover.Title>
          </Popover.Header>
          <Popover.Body>
            <PlanAwardDetails
              configuration={configuration}
              isAwarded={isAwarded}
            />
          </Popover.Body>
        </Popover.Layout>
      }
    >
      <Group
        align="center"
        data-badge-icon={configuration.icon}
      >
        <PlanAwardIcon
          icon={configuration.icon}
          isAwarded={isAwarded}
          size={32}
        />
      </Group>
    </Popover>
  );
});