All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib PlanHubRuleDesigner.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled from '@emotion/styled';
import { lazy, memo, Suspense } from 'react';
import { match } from 'ts-pattern';

import { Stack } from '@allshares/studio-design-system';
import { CalculationType } from '@amalia/core/types';
import { useShallowObjectMemo } from '@amalia/ext/react/hooks';
import { useParams } from '@amalia/ext/react-router-dom';
import { RuleType } from '@amalia/payout-definition/plans/types';
import { useRulePlanConfiguration } from '@amalia/payout-definition/state';

import { RuleDesignerComputeContextProvider } from './compute/RuleDesignerCompute.context';
import { PlanHubRuleDesignerDrawerContextProvider } from './drawer/PlanHubRuleDesignerDrawer.context';
import { RuleDesignerForecastContextProvider } from './forecast/RuleDesignerForecast.context';
import { PlanHubRuleDesignerHeader } from './header/PlanHubRuleDesignerHeader';
import { PlanHubRuleDesignerTabLayoutSkeleton } from './layout/PlanHubRuleDesignerTabLayoutSkeleton';
import { PlanHubRuleDesignerContextProvider } from './PlanHubRuleDesigner.context';
import { PlanHubRuleDesignerChallengeTabContainer } from './tabs/challenge-rules/PlanHubRuleDesignerChallengeTabContainer';
import { PlanHubRuleDesignerTabsSkeleton } from './tabs/PlanHubRuleDesignerTabsSkeleton';
import { RuleTemplateDrawerContextProvider } from './template-drawer/RuleTemplateDrawer.context';

const PlanHubRuleDesignerTabs = lazy(async () => ({
  default: (await import('./tabs/standard-rules/PlanHubRuleDesignerTabs')).PlanHubRuleDesignerTabs,
}));

const PlanHubRuleDesignerChallengeTabs = lazy(async () => ({
  default: (await import('./tabs/challenge-rules/PlanHubRuleDesignerChallengeTabs')).PlanHubRuleDesignerChallengeTabs,
}));

const PlanHubRuleDesignerTabContainer = lazy(async () => ({
  default: (await import('./tabs/standard-rules/PlanHubRuleDesignerTabContainer')).PlanHubRuleDesignerTabContainer,
}));

const StyledPlanHubRuleContainer = styled(Stack)`
  height: 100%;
`;

const StyledHeaderAndTabsContainer = styled(Stack)`
  min-height: 150px;
  height: 150px;
  border-bottom: 1px solid ${({ theme }) => theme.ds.colors.gray[100]};
  box-shadow: 0px 0px 8px 0px ${({ theme }) => theme.ds.colors.gray[900]}14; // 8% opacity;
  justify-content: space-between;

  [data-color-scheme='dark'] & {
    border-color: ${({ theme }) => theme.ds.colors.dark[500]};
  }
`;

interface PlanHubRuleDesigner {
  readonly isForecastView?: boolean;
}

export const PlanHubRuleDesigner = memo(function PlanHubRuleDesigner({ isForecastView = false }: PlanHubRuleDesigner) {
  const { planId, ruleId } = useParams<{ planId: string; ruleId: string }>();

  const contextValues = useShallowObjectMemo({
    ruleId,
    planId,
    calculationType: isForecastView ? CalculationType.FORECAST : CalculationType.STATEMENT,
  });

  const { data: rule } = useRulePlanConfiguration(planId, ruleId);

  return (
    <PlanHubRuleDesignerContextProvider value={contextValues}>
      <PlanHubRuleDesignerDrawerContextProvider>
        <RuleTemplateDrawerContextProvider>
          <RuleDesignerComputeContextProvider>
            <RuleDesignerForecastContextProvider isForecastedView={isForecastView}>
              <StyledPlanHubRuleContainer>
                <StyledHeaderAndTabsContainer>
                  <PlanHubRuleDesignerHeader />

                  <Suspense fallback={<PlanHubRuleDesignerTabsSkeleton />}>
                    {match(rule?.rule.type ?? null)
                      .with(null, () => <PlanHubRuleDesignerTabsSkeleton />)
                      .with(RuleType.CHALLENGE, () => <PlanHubRuleDesignerChallengeTabs />)
                      .otherwise(() => (
                        <PlanHubRuleDesignerTabs />
                      ))}
                  </Suspense>
                </StyledHeaderAndTabsContainer>

                <Suspense fallback={<PlanHubRuleDesignerTabLayoutSkeleton />}>
                  {match(rule?.rule.type ?? null)
                    .with(null, () => <PlanHubRuleDesignerTabLayoutSkeleton />)
                    .with(RuleType.CHALLENGE, () => <PlanHubRuleDesignerChallengeTabContainer />)
                    .otherwise(() => (
                      <PlanHubRuleDesignerTabContainer />
                    ))}
                </Suspense>
              </StyledPlanHubRuleContainer>
            </RuleDesignerForecastContextProvider>
          </RuleDesignerComputeContextProvider>
        </RuleTemplateDrawerContextProvider>
      </PlanHubRuleDesignerDrawerContextProvider>
    </PlanHubRuleDesignerContextProvider>
  );
});