All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib/compute/review StatementStatusBanner.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconArrowUpRight, IconReload } from '@tabler/icons-react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { generatePath } from 'react-router-dom';

import { AlertBanner, Button, ButtonLink, Group, IconLoading } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { Link } from '@amalia/ext/react-router-dom';

import { usePlanHubRuleDesignerContext } from '../../PlanHubRuleDesigner.context';
import { useRuleDesignerComputeContext } from '../RuleDesignerCompute.context';

interface StatementStatusBannerProps {
  readonly className?: string;
}

export const StatementStatusBanner = memo(function StatementStatusBanner({ className }: StatementStatusBannerProps) {
  const { planId } = usePlanHubRuleDesignerContext();
  const {
    isReviewOngoing,
    statement,
    launchCalculation,
    canCompute,
    fetchStatementError,
    userId,
    isCurrentStatementComputing,
    hasNoStatement,
  } = useRuleDesignerComputeContext();

  if (hasNoStatement) {
    return (
      <div className={className}>
        <AlertBanner
          alignCenter
          inline
        >
          <Group
            align="center"
            gap={8}
          >
            <FormattedMessage defaultMessage="No statement is available for this user on this period. Compute if you want to generate statement and view data." />
            <Button
              disabled={!canCompute}
              icon={<IconReload />}
              iconLoading={<IconLoading icon={IconReload} />}
              iconPosition="right"
              isLoading={isCurrentStatementComputing}
              size="small"
              variant="light"
              onClick={() => launchCalculation()}
            >
              <FormattedMessage defaultMessage="Compute" />
            </Button>
          </Group>
        </AlertBanner>
      </div>
    );
  }

  if (fetchStatementError) {
    return (
      <div className={className}>
        <AlertBanner
          inline
          variant="error"
        >
          <FormattedMessage
            defaultMessage="Error when fetching the statement: {errorMessage}"
            values={{ errorMessage: fetchStatementError.message }}
          />
        </AlertBanner>
      </div>
    );
  }

  if (statement && isReviewOngoing) {
    return (
      <div className={className}>
        <AlertBanner
          alignCenter
          inline
        >
          <Group
            align="center"
            gap={8}
          >
            <span>
              <FormattedMessage defaultMessage="Statement for the corresponding user and period is reviewed or under review.{br}Undo review then relaunch calculation to see plan changes applied to this statement." />
            </span>

            <ButtonLink
              icon={<IconArrowUpRight />}
              iconPosition="right"
              size="small"
              variant="light"
              to={
                <Link
                  openInNewTab
                  to={generatePath(routes.STATEMENT, { id: statement.id })}
                />
              }
            >
              <FormattedMessage defaultMessage="Go to statement" />
            </ButtonLink>
          </Group>
        </AlertBanner>
      </div>
    );
  }

  if (!userId) {
    return (
      <div className={className}>
        <AlertBanner
          alignCenter
          inline
        >
          <Group
            align="center"
            gap={8}
          >
            <FormattedMessage defaultMessage="Assign users to the plan then compute to view values. Go to assignments or assign a user on the top right corner." />
            <ButtonLink
              icon={<IconArrowUpRight />}
              iconPosition="right"
              size="small"
              variant="light"
              to={
                <Link
                  openInNewTab
                  to={generatePath(routes.PLAN_HUB_ASSIGNMENTS, { planId })}
                />
              }
            >
              <FormattedMessage defaultMessage="Go to assignments" />
            </ButtonLink>
          </Group>
        </AlertBanner>
      </div>
    );
  }

  return null;
});