All files / libs/payout-calculation/statements/components/src/lib/components/drawer/details/header StatementDrawerHeader.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
83
84
85
86
87
88
89
90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconArrowUpRight, IconMessage2 } from '@tabler/icons-react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { generatePath } from 'react-router-dom';

import { ButtonLink, CountBadge, Group, Skeleton, Tooltip } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { canViewThreadsOfThisStatement } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { getUserTeamFromUserStatement } from '@amalia/payout-calculation/statements/shared';
import { useOpenStatementThreads } from '@amalia/payout-collaboration/comments/state';

import { useStatementDrawerContext } from '../../StatementDrawer.context';
import { useStatementDrawerComputeContext } from '../../StatementDrawerCompute.context';
import { StatementDrawerUser } from '../../user/StatementDrawerUser';

import { StatementDrawerComputeButton } from './compute/StatementDrawerComputeButton';

export const StatementDrawerHeader = memo(function StatementDrawerHeader() {
  const { statement, isForecast } = useStatementDrawerContext();
  const ability = useAbilityContext();

  const canViewThreads = canViewThreadsOfThisStatement(ability, statement);

  const { data: statementThreads, isPending: isStatementThreadsLoading } = useOpenStatementThreads(statement.id, {
    enabled: !isForecast && canViewThreads,
  });

  const { canCompute } = useStatementDrawerComputeContext();

  const team = getUserTeamFromUserStatement(statement);

  return (
    <div>
      <Group
        gap={24}
        justify="space-between"
        css={css`
          padding: 8px 16px 8px 24px;
        `}
      >
        <StatementDrawerUser
          plan={statement.plan!}
          team={team}
          user={statement.user!}
        />

        <Group
          align="center"
          gap={8}
        >
          {!!canViewThreads && !isForecast && !!(isStatementThreadsLoading || statementThreads?.length) && (
            <Skeleton visible={isStatementThreadsLoading}>
              <Tooltip content={<FormattedMessage defaultMessage="Open thread in statement" />}>
                <ButtonLink
                  countBadge={<CountBadge variant="primary">{statementThreads?.length ?? 0}</CountBadge>}
                  icon={<IconMessage2 />}
                  size="small"
                  variant="light-text"
                  to={
                    statementThreads?.length
                      ? generatePath(routes.STATEMENT_COMMENT, {
                          id: statement.id,
                          statementThreadId: statementThreads[0].id,
                        })
                      : undefined
                  }
                />
              </Tooltip>
            </Skeleton>
          )}

          {!!canCompute && <StatementDrawerComputeButton />}

          <ButtonLink
            icon={<IconArrowUpRight />}
            iconPosition="right"
            size="small"
            to={generatePath(isForecast ? routes.FORECAST : routes.STATEMENT, { id: statement.id })}
            variant="primary-text"
          >
            <FormattedMessage defaultMessage="View statement" />
          </ButtonLink>
        </Group>
      </Group>
    </div>
  );
});