All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib/compute/result RuleDesignerComputeResult.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';

import { Group } from '@allshares/studio-design-system';
import { type Rule } from '@amalia/payout-definition/plans/types';

import { AchievedOrForecastComponentSwitcher } from '../../forecast/AchievedOrForecastComponentSwitcher';

import { RuleDesignerRulePayoutAchieved } from './compute-result/rule-payout/RuleDesignerRulePayoutAchieved';
import { RuleDesignerRulePayoutForecasted } from './compute-result/rule-payout/RuleDesignerRulePayoutForecasted';
import { RuleDesignerStatementTotalAchieved } from './compute-result/statement-total/RuleDesignerStatementTotalAchieved';
import { RuleDesignerStatementTotalForecasted } from './compute-result/statement-total/RuleDesignerStatementTotalForecasted';
import { RuleDesignerMasterComputeButtonAchieved } from './master-compute-button/RuleDesignerMasterComputeButtonAchieved';
import { RuleDesignerMasterComputeButtonForecast } from './master-compute-button/RuleDesignerMasterComputeButtonForecast';
import { RuleDesignerMasterComputeLoadingAchieved } from './master-compute-button/RuleDesignerMasterComputeLoadingAchieved';
import { RuleDesignerMasterComputeLoadingForecast } from './master-compute-button/RuleDesignerMasterComputeLoadingForecast';

interface RuleDesignerComputeResultProps {
  readonly ruleDefinition: Rule;
  readonly highlightPayout: boolean;
}

export const RuleDesignerComputeResult = memo(function RuleDesignerComputeResult(
  props: RuleDesignerComputeResultProps,
) {
  return (
    <Group
      align="center"
      gap={24}
    >
      <AchievedOrForecastComponentSwitcher
        achievedComponent={<RuleDesignerMasterComputeLoadingAchieved />}
        forecastedComponent={<RuleDesignerMasterComputeLoadingForecast />}
      />

      <Group
        align="center"
        gap={16}
      >
        <AchievedOrForecastComponentSwitcher
          achievedComponent={<RuleDesignerRulePayoutAchieved {...props} />}
          forecastedComponent={<RuleDesignerRulePayoutForecasted {...props} />}
        />

        <AchievedOrForecastComponentSwitcher
          achievedComponent={<RuleDesignerStatementTotalAchieved />}
          forecastedComponent={<RuleDesignerStatementTotalForecasted />}
        />
      </Group>

      <AchievedOrForecastComponentSwitcher
        achievedComponent={<RuleDesignerMasterComputeButtonAchieved />}
        forecastedComponent={<RuleDesignerMasterComputeButtonForecast />}
      />
    </Group>
  );
});