dates LtiGrantDateSection.tsx

0% Statements 0/70
0% Branches 0/1
0% Functions 0/1
0% Lines 0/70
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { Group, Paper, Typography } from '@allshares/studio-design-system';
import { dayjs } from '@amalia/ext/dayjs';
import { type LtiParticipantGrants } from '@amalia/lti/types';

const StyledSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 20px 40px;
  flex: 1;

  & + & {
    border-left: 1px solid var(--ds-border-color-100);
  }
`;

interface LtiGrantDateSectionProps {
  readonly grants: LtiParticipantGrants;
}

export const LtiGrantDateSection = memo(function LtiGrantDateSection({ grants }: LtiGrantDateSectionProps) {
  return (
    <Paper>
      <Group
        css={css`
          border-top: 1px solid var(--ds-border-color-100);
        `}
      >
        <StyledSection>
          <Typography
            variant="bodySmallRegular"
            css={css`
              color: var(--ds-text-color-500);
            `}
          >
            <FormattedMessage defaultMessage="Estimated reward date" />
          </Typography>
          <Typography variant="heading3Medium">{dayjs(grants.plan.earningDate).format('LL')}</Typography>
        </StyledSection>

        <StyledSection>
          <Typography
            variant="bodySmallRegular"
            css={css`
              color: var(--ds-text-color-500);
            `}
          >
            <FormattedMessage defaultMessage="Performance period" />
          </Typography>

          <Typography variant="heading3Medium">
            <FormattedMessage
              defaultMessage="{startDate} - {endDate}"
              values={{
                startDate: dayjs(grants.plan.startDate).format('LL'),
                endDate: dayjs(grants.plan.endDate).format('LL'),
              }}
            />
          </Typography>
        </StyledSection>
      </Group>
    </Paper>
  );
});