diff --git a/.env b/.env index eb78342..71125d0 100644 --- a/.env +++ b/.env @@ -2,9 +2,6 @@ USE_DEV_COLORS= BASE_PATH= -####### USERS ######## -USERS_SUPER=["akalinina","vchikalkin"] - ####### URLS ######## URL_GET_USER_DIRECT= URL_CRM_GRAPHQL_DIRECT= diff --git a/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx b/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx index 3547673..459bcb6 100644 --- a/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx +++ b/apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx @@ -12,12 +12,18 @@ const Grid = styled(Flex)` `; const Validation = observer(() => { - const store = useStore(); + const { $tables, $process } = useStore(); - const errors = store.$tables.fingap.validation.getErrors(); + const errors = $tables.fingap.validation.getErrors(); if (errors?.length) { - return ; + return ( + + ); } return null; diff --git a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx index 24ef8af..1a362ea 100644 --- a/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx +++ b/apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx @@ -17,12 +17,18 @@ const TableWrapper = styled.div` `; const Validation = observer(() => { - const store = useStore(); + const { $tables, $process } = useStore(); - const errors = store.$tables.insurance.validation.getErrors(); + const errors = $tables.insurance.validation.getErrors(); if (errors?.length) { - return ; + return ( + + ); } return null; diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx index a8fd83b..7659990 100644 --- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx +++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx @@ -30,13 +30,19 @@ const TablesGroupGrid = styled(Box)` `; const Validation = observer(() => { - const store = useStore(); - const { payments } = store.$tables; + const { $tables, $process } = useStore(); + const { payments } = $tables; const errors = payments.validation.getErrors(); if (errors?.length) { - return ; + return ( + + ); } return null; diff --git a/apps/web/Components/Calculation/Form/Unlimited/config.ts b/apps/web/Components/Calculation/Form/Unlimited/config.ts new file mode 100644 index 0000000..2c5cc34 --- /dev/null +++ b/apps/web/Components/Calculation/Form/Unlimited/config.ts @@ -0,0 +1,12 @@ +import type { FormTabRows } from '../../lib/render-rows'; + +export const id = 'unlimited'; +export const title = 'Без ограничений'; + +export const rows: FormTabRows = [ + [['cbxDisableChecks', 'selectUser']], + [['selectTarif', 'tbxCreditRate', 'selectRate']], + [['tbxMinPriceChange', 'tbxMaxPriceChange']], + [['tbxImporterRewardPerc', 'tbxImporterRewardRub']], + [['tbxBonusCoefficient', 'tbxComissionRub', 'tbxComissionPerc']], +]; diff --git a/apps/web/Components/Calculation/Form/Unlimited/index.jsx b/apps/web/Components/Calculation/Form/Unlimited/index.jsx new file mode 100644 index 0000000..91f340f --- /dev/null +++ b/apps/web/Components/Calculation/Form/Unlimited/index.jsx @@ -0,0 +1,12 @@ +import renderFormRows from '../../lib/render-rows'; +import { id, rows, title } from './config'; + +function Unlimited() { + return renderFormRows(rows); +} + +export default { + Component: Unlimited, + id, + title, +}; diff --git a/apps/web/Components/Calculation/Form/index.jsx b/apps/web/Components/Calculation/Form/index.jsx index 175cb11..7ba84b9 100644 --- a/apps/web/Components/Calculation/Form/index.jsx +++ b/apps/web/Components/Calculation/Form/index.jsx @@ -5,12 +5,22 @@ import Leasing from './Leasing'; import LeasingObject from './LeasingObject'; import Payments from './Payments'; import SupplierAgent from './SupplierAgent'; +import Unlimited from './Unlimited'; import Background from '@/Components/Layout/Background'; import { min } from '@/styles/mq'; import styled from 'styled-components'; import Tabs from 'ui/elements/layout/Tabs'; -const formTabs = [Leasing, Payments, LeasingObject, SupplierAgent, Insurance, AddProduct, CreateKP]; +const formTabs = [ + Leasing, + Payments, + LeasingObject, + SupplierAgent, + Insurance, + AddProduct, + CreateKP, + Unlimited, +]; const Wrapper = styled(Background)` padding: 4px 6px; @@ -32,17 +42,19 @@ const ComponentWrapper = styled.div` } `; -function Form() { +function Form({ prune }) { return ( - {formTabs.map(({ id, title, Component }) => ( - - - - - - ))} + {formTabs + .filter((tab) => !prune?.includes(tab.id)) + .map(({ id, title, Component }) => ( + + + + + + ))} ); diff --git a/apps/web/Components/Calculation/builders/build-action.tsx b/apps/web/Components/Calculation/builders/build-action.tsx index 5b165b3..c2074d0 100644 --- a/apps/web/Components/Calculation/builders/build-action.tsx +++ b/apps/web/Components/Calculation/builders/build-action.tsx @@ -1,5 +1,5 @@ import type { Elements } from '../config/map/actions'; -import { useProcessContext } from '@/process/hooks'; +import { useProcessContext } from '@/process/hooks/common'; import { useStatus } from '@/stores/calculation/statuses/hooks'; import { observer } from 'mobx-react-lite'; import type { ComponentType } from 'react'; diff --git a/apps/web/Components/Calculation/builders/build-options.tsx b/apps/web/Components/Calculation/builders/build-options.tsx index e08f34b..63bbec8 100644 --- a/apps/web/Components/Calculation/builders/build-options.tsx +++ b/apps/web/Components/Calculation/builders/build-options.tsx @@ -19,13 +19,13 @@ export default function buildOptions( return observer((props: T) => { const [value, setValue] = useStoreValue(valueName); const status = useStatus(elementName); - const { isValid, help } = useValidation(elementName); + const { validateStatus, help } = useValidation(elementName); const options = useOptions(elementName); return ( ( return observer((props: T) => { const [value, setValue] = useStoreValue(valueName); const status = useStatus(elementName); - const { isValid, help } = useValidation(elementName); + const { validateStatus, help } = useValidation(elementName); return ( = { direction: 'vertical', }, }, + selectUser: { + showSearch: true, + optionFilterProp: 'label', + }, }; export default props; diff --git a/apps/web/Components/Calculation/config/elements-titles.ts b/apps/web/Components/Calculation/config/elements-titles.ts index ba37e87..81b3f67 100644 --- a/apps/web/Components/Calculation/config/elements-titles.ts +++ b/apps/web/Components/Calculation/config/elements-titles.ts @@ -125,6 +125,7 @@ const titles: Record = { tbxBonusCoefficient: 'Коэффициент снижения бонуса', selectLeasingWithoutKasko: 'Лизинг без КАСКО', tbxVIN: 'VIN', + selectUser: 'Пользователь', /** Link Elements */ linkDownloadKp: '', diff --git a/apps/web/Components/Calculation/config/elements-types.ts b/apps/web/Components/Calculation/config/elements-types.ts index 8142aa5..de258b4 100644 --- a/apps/web/Components/Calculation/config/elements-types.ts +++ b/apps/web/Components/Calculation/config/elements-types.ts @@ -162,6 +162,7 @@ const types = wrapElementsTypes({ tbxBonusCoefficient: t.Value, selectLeasingWithoutKasko: t.Options, tbxVIN: t.Value, + selectUser: t.Options, labelLeaseObjectRisk: t.Readonly, tbxInsKaskoPriceLeasePeriod: t.Readonly, diff --git a/apps/web/Components/Calculation/config/map/values.ts b/apps/web/Components/Calculation/config/map/values.ts index 5271277..d3fe420 100644 --- a/apps/web/Components/Calculation/config/map/values.ts +++ b/apps/web/Components/Calculation/config/map/values.ts @@ -128,6 +128,7 @@ const elementsToValues = wrapElementsMap({ tbxMinPriceChange: 'minPriceChange', tbxBonusCoefficient: 'bonusCoefficient', tbxVIN: 'vin', + selectUser: 'user', /** Readonly Elements */ labelLeaseObjectRisk: 'leaseObjectRiskName', diff --git a/apps/web/Components/Layout/Logo.jsx b/apps/web/Components/Layout/Logo.jsx index 509569f..7edee39 100644 --- a/apps/web/Components/Layout/Logo.jsx +++ b/apps/web/Components/Layout/Logo.jsx @@ -1,10 +1,13 @@ /* eslint-disable react/forbid-component-props */ import styles from './Logo.module.css'; +import { useStore } from '@/stores/hooks'; +import getColors from '@/styles/colors'; import { min } from '@/styles/mq'; +import { observer } from 'mobx-react-lite'; import Image from 'next/image'; import logo from 'public/assets/images/logo-primary.svg'; import styled from 'styled-components'; -import { Flex } from 'ui'; +import { Flex, Tag } from 'ui'; const ImageWrapper = styled.div` width: 100px; @@ -26,13 +29,41 @@ const LogoText = styled.h3` } `; +const TagWrapper = styled.div` + font-family: 'Montserrat'; + font-weight: 500; + * { + font-size: 0.7rem; + } +`; + +const { COLOR_PRIMARY } = getColors(); + +const UnlimitedTag = observer(() => { + const { $process } = useStore(); + if ($process.has('Unlimited')) { + return ( + + + без ограничений + + + ); + } + + return false; +}); + function Logo() { return ( logo - Лизинговый Калькулятор + + Лизинговый Калькулятор + + ); } diff --git a/apps/web/Components/Layout/Page.jsx b/apps/web/Components/Layout/Page.jsx new file mode 100644 index 0000000..b2a6439 --- /dev/null +++ b/apps/web/Components/Layout/Page.jsx @@ -0,0 +1,27 @@ +import { min } from '@/styles/mq'; +import styled from 'styled-components'; +import { Box } from 'ui/grid'; + +export const Grid = styled(Box)` + display: flex; + flex-direction: column; + gap: 10px; + + ${min('laptop')} { + display: grid; + align-items: flex-start; + grid-template-columns: 2fr 1fr; + } + + ${min('laptop-hd')} { + grid-template-columns: 2fr 1fr 1.5fr; + } + + ${min('desktop')} { + margin: 8px 5%; + } + + ${min('desktop-xl')} { + margin: 8px 10%; + } +`; diff --git a/apps/web/Components/Output/Validation.jsx b/apps/web/Components/Output/Validation.jsx index c66cff2..e5397a4 100644 --- a/apps/web/Components/Output/Validation.jsx +++ b/apps/web/Components/Output/Validation.jsx @@ -23,41 +23,61 @@ const AlertWrapper = styled(Box)` margin: 0 0 5px 0; `; -function getElementsErrors($calculation) { +function getElementsErrors({ $calculation, $process }) { return Object.values($calculation.$validation).map((validation) => { const elementErrors = validation.getErrors(); const elementTitle = validation.params.err_title; return elementErrors.map(({ key, message }) => ( - + )); }); } -function getPaymentsTableErrors($tables) { +function getPaymentsTableErrors({ $tables, $process }) { const { payments } = $tables; const errors = payments.validation.getErrors(); const title = payments.validation.params.err_title; return errors.map(({ key, message }) => ( - + + + )); } -function getInsuranceTableErrors($tables) { +function getInsuranceTableErrors({ $tables, $process }) { const { insurance } = $tables; const errors = insurance.validation.getErrors(); const title = insurance.validation.params.err_title; return errors.map(({ key, message }) => ( - + + + )); } const Errors = observer(() => { - const { $calculation, $tables } = useStore(); + const store = useStore(); + const { $calculation, $tables } = store; const hasElementsErrors = Object.values($calculation.$validation).some( (validation) => validation.hasErrors @@ -69,9 +89,9 @@ const Errors = observer(() => { return ; } - const elementsErrors = getElementsErrors($calculation); - const paymentsErrors = getPaymentsTableErrors($tables); - const insuranceErrors = getInsuranceTableErrors($tables); + const elementsErrors = getElementsErrors(store); + const paymentsErrors = getPaymentsTableErrors(store); + const insuranceErrors = getInsuranceTableErrors(store); const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors]; diff --git a/apps/web/Components/Output/index.jsx b/apps/web/Components/Output/index.jsx index c15e8fd..055e5ce 100644 --- a/apps/web/Components/Output/index.jsx +++ b/apps/web/Components/Output/index.jsx @@ -2,11 +2,39 @@ import PaymentsTable from './PaymentsTable'; import Results from './Results'; import Validation from './Validation'; import Background from '@/Components/Layout/Background'; +import { useStore } from '@/stores/hooks'; import { min } from '@/styles/mq'; +import { observer } from 'mobx-react-lite'; import styled from 'styled-components'; -import Tabs from 'ui/elements/layout/Tabs'; +import { Badge, Tabs } from 'ui'; const outputTabs = [PaymentsTable, Results, Validation]; +const items = outputTabs.map(({ Component, id, title }) => { + let Label = () => title; + + if (id === 'validation') { + Label = observer(() => { + const { $calculation, $tables } = useStore(); + const hasErrors = + $calculation.hasErrors || + $tables.fingap.hasErrors || + $tables.insurance.hasErrors || + $tables.payments.hasErrors; + + return ( + + {title} + + ); + }); + } + + return { + children: , + key: id, + label: