All files / libs/payout-definition/plans/views/hub/rule-designer/src/lib/tabs/standard-rules PlanHubRuleDesignerTabContainer.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { memo } from 'react';
import { match } from 'ts-pattern';

import { PlanHubRuleDesignerDrawerContainer } from '../../drawer/PlanHubRuleDesignerDrawerContainer';
import { usePlanHubRuleDesignerStepTab } from '../../hooks/use-plan-hub-rule-designer-step-tab';
import { PlanHubRuleDesignerImportMenuDrawerContainer } from '../../import-menu/PlanHubRuleDesignerImportMenuDrawerContainer';
import { PlanHubRuleDesignerSummary } from '../../summary/PlanHubRuleDesignerSummary';
import { RuleTemplateDrawerContainer } from '../../template-drawer/RuleTemplateDrawerContainer';

import { DefineCreditingTab } from './1-define-crediting-tab/DefineCreditingTab';
import { DefineCommissionStructureTab } from './2-design-commission-structure-tab/DefineCommissionStructureTab';
import { ConfigurePaymentTab } from './3-configure-payment-tab/ConfigurePaymentTab';
import { ConfigurePaymentTabDrawerFormContextProvider } from './3-configure-payment-tab/drawer/form/ConfigurePaymentTabDrawerForm.context';

export const PlanHubRuleDesignerTabContainer = memo(function PlanHubRuleDesignerTabContainer() {
  const [selectedRuleDesignerTab, setSelectedRuleDesignerTab] = usePlanHubRuleDesignerStepTab();

  const planHubRuleDesignerSummary = <PlanHubRuleDesignerSummary selectedRuleDesignerTab={selectedRuleDesignerTab} />;

  return (
    <PlanHubRuleDesignerDrawerContainer
      selectedRuleDesignerTab={selectedRuleDesignerTab}
      setSelectedRuleDesignerTab={setSelectedRuleDesignerTab}
    >
      <RuleTemplateDrawerContainer>
        <PlanHubRuleDesignerImportMenuDrawerContainer>
          {match(selectedRuleDesignerTab)
            .with('1-define-crediting', () => <DefineCreditingTab ruleSummary={planHubRuleDesignerSummary} />)
            .with('2-design-commission-structure', () => (
              <DefineCommissionStructureTab ruleSummary={planHubRuleDesignerSummary} />
            ))
            .with('3-configure-payment', () => (
              <ConfigurePaymentTabDrawerFormContextProvider>
                <ConfigurePaymentTab ruleSummary={planHubRuleDesignerSummary} />
              </ConfigurePaymentTabDrawerFormContextProvider>
            ))
            .exhaustive()}
        </PlanHubRuleDesignerImportMenuDrawerContainer>
      </RuleTemplateDrawerContainer>
    </PlanHubRuleDesignerDrawerContainer>
  );
});