386 lines
11 KiB
TypeScript
386 lines
11 KiB
TypeScript
import { IRRAddon } from '../../addons/irr-addon';
|
||
import { ProductAddon } from '../../addons/product-addon';
|
||
import { buildLink } from '../../builders';
|
||
import components from '../elements-components';
|
||
import elementsProps from '../elements-props';
|
||
import titles from '../elements-titles';
|
||
import types from '../elements-types';
|
||
import map from '../map';
|
||
import type { RenderProps } from './types';
|
||
import { Container, Head } from '@/Components/Layout/Element';
|
||
import { useErrors, useStore } from '@/stores/hooks';
|
||
import { useIsFetching } from '@tanstack/react-query';
|
||
import { observer } from 'mobx-react-lite';
|
||
import type { ComponentProps } from 'react';
|
||
import { Link, Tooltip } from 'ui/elements';
|
||
import { LoadingOutlined } from 'ui/elements/icons';
|
||
|
||
const defaultLinkProps: ComponentProps<typeof Link> = {
|
||
children: 'Открыть в CRM',
|
||
size: 'small',
|
||
style: { padding: 0 },
|
||
type: 'link',
|
||
};
|
||
|
||
const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
|
||
btnCalculate: {
|
||
render: () => {
|
||
const elementName = 'btnCalculate';
|
||
const title = titles.btnCalculate;
|
||
const valueName = map.btnCalculate;
|
||
const Component = components.btnCalculate;
|
||
const props = elementsProps.btnCalculate;
|
||
const { builder } = types.btnCalculate();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const RenderedComponent = observer(() => {
|
||
const { $process } = useStore();
|
||
const { hasErrors } = useErrors();
|
||
|
||
return (
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} />
|
||
<Element
|
||
{...props}
|
||
loading={$process.has('Calculate') || $process.has('CreateKP')}
|
||
disabled={
|
||
$process.has('LoadKP') ||
|
||
(!$process.has('Unlimited') && hasErrors) ||
|
||
$process.has('Tarif')
|
||
}
|
||
/>
|
||
</Container>
|
||
);
|
||
});
|
||
|
||
return <RenderedComponent />;
|
||
},
|
||
},
|
||
|
||
btnCreateKP: {
|
||
render: () => {
|
||
const elementName = 'btnCreateKP';
|
||
const title = titles.btnCreateKP;
|
||
const valueName = map.btnCreateKP;
|
||
const Component = components.btnCreateKP;
|
||
const props = elementsProps.btnCreateKP;
|
||
const { builder } = types.btnCreateKP();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const RenderedComponent = observer(() => {
|
||
const { $process } = useStore();
|
||
const { hasErrors } = useErrors();
|
||
|
||
return (
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} />
|
||
<Element
|
||
{...props}
|
||
loading={$process.has('Calculate') || $process.has('CreateKP')}
|
||
disabled={
|
||
$process.has('LoadKP') ||
|
||
(!$process.has('Unlimited') && hasErrors) ||
|
||
$process.has('Tarif')
|
||
}
|
||
/>
|
||
</Container>
|
||
);
|
||
});
|
||
|
||
return <RenderedComponent />;
|
||
},
|
||
},
|
||
|
||
btnCreateKPMini: {
|
||
render: () => {
|
||
const elementName = 'btnCreateKPMini';
|
||
const title = titles.btnCreateKPMini;
|
||
const valueName = map.btnCreateKPMini;
|
||
const Component = components.btnCreateKPMini;
|
||
const props = elementsProps.btnCreateKPMini;
|
||
const { builder } = types.btnCreateKPMini();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const RenderedComponent = observer(() => {
|
||
const { $process } = useStore();
|
||
const { hasErrors } = useErrors();
|
||
|
||
return (
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} />
|
||
<Element
|
||
{...props}
|
||
loading={$process.has('Calculate') || $process.has('CreateKP')}
|
||
disabled={$process.has('LoadKP') || (!$process.has('Unlimited') && hasErrors)}
|
||
/>
|
||
</Container>
|
||
);
|
||
});
|
||
|
||
return <RenderedComponent />;
|
||
},
|
||
},
|
||
|
||
selectHighSeasonStart: {
|
||
render: () => {
|
||
const elementName = 'selectHighSeasonStart';
|
||
const title = titles.selectHighSeasonStart;
|
||
const valueName = map.selectHighSeasonStart;
|
||
const Component = components.selectHighSeasonStart;
|
||
const props = elementsProps.selectHighSeasonStart;
|
||
const { builder } = types.selectHighSeasonStart();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
return (
|
||
<Tooltip placement="topLeft" title="С какого платежа начинается полный высокий сезон">
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} />
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
</Tooltip>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectLead: {
|
||
render: () => {
|
||
const elementName = 'selectLead';
|
||
const title = titles.selectLead;
|
||
const valueName = map.selectLead;
|
||
const Component = components.selectLead;
|
||
const props = elementsProps.selectLead;
|
||
const { builder } = types.selectLead();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildLink(Link, {
|
||
elementName: 'linkLeadUrl',
|
||
valueName: 'leadUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key={elementName}>
|
||
<Head
|
||
addon={<LinkComponent {...defaultLinkProps} />}
|
||
htmlFor={elementName}
|
||
title={title}
|
||
/>
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectOpportunity: {
|
||
render: () => {
|
||
const elementName = 'selectOpportunity';
|
||
const title = titles.selectOpportunity;
|
||
const valueName = map.selectOpportunity;
|
||
const Component = components.selectOpportunity;
|
||
const props = elementsProps.selectOpportunity;
|
||
const { builder } = types.selectOpportunity();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildLink(Link, {
|
||
elementName: 'linkOpportunityUrl',
|
||
valueName: 'opportunityUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key={elementName}>
|
||
<Head
|
||
addon={<LinkComponent {...defaultLinkProps} />}
|
||
htmlFor={elementName}
|
||
title={title}
|
||
/>
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectProduct: {
|
||
render: () => {
|
||
const elementName = 'selectProduct';
|
||
const title = titles.selectProduct;
|
||
const valueName = map.selectProduct;
|
||
const Component = components.selectProduct;
|
||
const props = elementsProps.selectProduct;
|
||
const { builder } = types.selectProduct();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
return (
|
||
<Container key={elementName}>
|
||
<Head addon={<ProductAddon />} htmlFor={elementName} title={title} />
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectQuote: {
|
||
render: () => {
|
||
const elementName = 'selectQuote';
|
||
const title = titles.selectQuote;
|
||
const valueName = map.selectQuote;
|
||
const Component = components.selectQuote;
|
||
const props = elementsProps.selectQuote;
|
||
const { builder } = types.selectQuote();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildLink(Link, {
|
||
elementName: 'linkQuoteUrl',
|
||
valueName: 'quoteUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key={elementName}>
|
||
<Head
|
||
addon={<LinkComponent {...defaultLinkProps} />}
|
||
htmlFor={elementName}
|
||
title={title}
|
||
/>
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectSeasonType: {
|
||
render: () => {
|
||
const elementName = 'selectSeasonType';
|
||
const valueName = map.selectSeasonType;
|
||
const Component = components.selectSeasonType;
|
||
const props = elementsProps.selectSeasonType;
|
||
const { builder } = types.selectSeasonType();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const Title = observer(() => {
|
||
const { $calculation } = useStore();
|
||
const graphType = $calculation.element('radioGraphType').getValue();
|
||
|
||
switch (graphType) {
|
||
case 100_000_001: {
|
||
return <span>Тип дегрессии</span>;
|
||
}
|
||
case 100_000_003: {
|
||
return <span>Тип сезонности</span>;
|
||
}
|
||
default: {
|
||
return <span>{titles.selectSeasonType}</span>;
|
||
}
|
||
}
|
||
});
|
||
|
||
return (
|
||
<Container>
|
||
<Head htmlFor={elementName} title={<Title />} />
|
||
<Element {...props} id={elementName} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
tbxIRR_Perc: {
|
||
render: () => {
|
||
const elementName = 'tbxIRR_Perc';
|
||
const title = titles.tbxIRR_Perc;
|
||
const valueName = map.tbxIRR_Perc;
|
||
const Component = components.tbxIRR_Perc;
|
||
const props = elementsProps.tbxIRR_Perc;
|
||
const { builder } = types.tbxIRR_Perc();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
const RenderedComponent = observer(() => {
|
||
const { $calculation } = useStore();
|
||
const { min, max } = $calculation.$values.getValue('irrInfo');
|
||
|
||
return (
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} addon={<IRRAddon />} />
|
||
<Element {...props} min={min > 0 ? min : undefined} max={max > 0 ? max : undefined} />
|
||
</Container>
|
||
);
|
||
});
|
||
|
||
return <RenderedComponent />;
|
||
},
|
||
},
|
||
|
||
tbxVehicleTaxInYear: {
|
||
render: () => {
|
||
const elementName = 'tbxVehicleTaxInYear';
|
||
const title = titles.tbxVehicleTaxInYear;
|
||
const valueName = map.tbxVehicleTaxInYear;
|
||
const Component = components.tbxVehicleTaxInYear;
|
||
const props = elementsProps.tbxVehicleTaxInYear;
|
||
const { builder } = types.tbxVehicleTaxInYear();
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
function RenderedComponent() {
|
||
const isFetching = useIsFetching({ queryKey: ['1c', 'trans-tax'] });
|
||
|
||
return (
|
||
<Tooltip placement="topLeft" title="Без учета налога на роскошь">
|
||
<Container>
|
||
<Head htmlFor={elementName} title={title} />
|
||
<Element
|
||
{...props}
|
||
id={elementName}
|
||
addonBefore={isFetching && <LoadingOutlined spin rev="" />}
|
||
/>
|
||
</Container>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
|
||
return <RenderedComponent />;
|
||
},
|
||
},
|
||
};
|
||
|
||
export default overrideRender;
|