From e8d1057c69c2a08c419c1e1cb570c698a7c2d3f3 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Wed, 29 Mar 2023 10:07:34 +0300 Subject: [PATCH] merge feature/unlimited --- .env | 3 - .../Form/Insurance/FinGAPTable/index.jsx | 12 +- .../Form/Insurance/InsuranceTable/index.jsx | 12 +- .../Form/Payments/PaymentsTable/index.jsx | 12 +- .../Calculation/Form/Unlimited/config.ts | 12 ++ .../Calculation/Form/Unlimited/index.jsx | 12 ++ .../web/Components/Calculation/Form/index.jsx | 30 ++-- .../Calculation/builders/build-action.tsx | 2 +- .../Calculation/builders/build-options.tsx | 4 +- .../Calculation/builders/build-value.tsx | 4 +- .../Calculation/config/elements-components.ts | 1 + .../Calculation/config/elements-props.tsx | 4 + .../Calculation/config/elements-titles.ts | 1 + .../Calculation/config/elements-types.ts | 1 + .../Calculation/config/map/values.ts | 1 + apps/web/Components/Layout/Logo.jsx | 35 +++- apps/web/Components/Layout/Page.jsx | 27 ++++ apps/web/Components/Output/Validation.jsx | 40 +++-- apps/web/Components/Output/index.jsx | 38 ++++- apps/web/api/core/types/calculate.ts | 5 + apps/web/api/user/tools.ts | 9 +- apps/web/config/default-options.ts | 1 + apps/web/config/default-statuses.ts | 1 + apps/web/config/default-values.ts | 1 + apps/web/config/process/default.ts | 42 ----- apps/web/config/process/index.ts | 1 - apps/web/config/schema/env.js | 1 - apps/web/config/schema/runtime-config.js | 1 - apps/web/config/schema/values.ts | 1 + apps/web/config/users.js | 3 + apps/web/graphql/crm.query.graphql | 9 ++ apps/web/graphql/crm.types.ts | 8 + apps/web/pages/_document.jsx | 2 +- apps/web/pages/index.jsx | 151 ++++++++---------- apps/web/pages/unlimited.jsx | 37 +++++ .../process/calculate/reactions/validation.ts | 55 ++++--- .../process/configurator/reactions/index.ts | 1 + .../configurator/reactions/unlimited.ts | 41 +++++ .../web/process/{hooks.ts => hooks/common.ts} | 11 +- apps/web/process/hooks/index.ts | 3 + .../{ => hooks}/init/get-initial-data.ts | 0 .../{ => hooks}/init/get-insurance-data.js | 0 .../process/{ => hooks}/init/get-main-data.js | 0 apps/web/process/hooks/init/get-users.js | 37 +++++ apps/web/process/{ => hooks}/init/index.js | 1 + apps/web/process/hooks/reactions.ts | 58 +++++++ apps/web/process/types.ts | 2 +- apps/web/server/middleware.ts | 18 ++- apps/web/server/routers/calculate/index.ts | 38 +++-- .../server/routers/calculate/lib/request.ts | 29 ++-- apps/web/server/routers/quote/index.ts | 40 +++-- apps/web/stores/calculation/index.ts | 21 ++- apps/web/stores/calculation/statuses/index.ts | 8 +- .../stores/calculation/validation/hooks.js | 6 +- apps/web/stores/process/index.ts | 2 +- apps/web/stores/tables/fingap/index.ts | 15 +- apps/web/stores/tables/insurance/index.ts | 21 ++- apps/web/stores/tables/payments/index.ts | 17 +- apps/web/stores/validation/index.ts | 8 +- packages/ui/elements/Checkbox.tsx | 4 +- packages/ui/elements/Input.tsx | 11 +- packages/ui/elements/InputNumber.tsx | 10 +- packages/ui/elements/Radio.tsx | 4 +- packages/ui/elements/Segmented.tsx | 12 +- packages/ui/elements/Select.tsx | 4 +- packages/ui/elements/Switch.tsx | 11 +- packages/ui/elements/badge.js | 1 + packages/ui/elements/index.ts | 2 + packages/ui/elements/tag.js | 1 + packages/ui/elements/types.ts | 4 +- 70 files changed, 713 insertions(+), 307 deletions(-) create mode 100644 apps/web/Components/Calculation/Form/Unlimited/config.ts create mode 100644 apps/web/Components/Calculation/Form/Unlimited/index.jsx create mode 100644 apps/web/Components/Layout/Page.jsx delete mode 100644 apps/web/config/process/default.ts delete mode 100644 apps/web/config/process/index.ts create mode 100644 apps/web/config/users.js create mode 100644 apps/web/pages/unlimited.jsx create mode 100644 apps/web/process/configurator/reactions/unlimited.ts rename apps/web/process/{hooks.ts => hooks/common.ts} (71%) create mode 100644 apps/web/process/hooks/index.ts rename apps/web/process/{ => hooks}/init/get-initial-data.ts (100%) rename apps/web/process/{ => hooks}/init/get-insurance-data.js (100%) rename apps/web/process/{ => hooks}/init/get-main-data.js (100%) create mode 100644 apps/web/process/hooks/init/get-users.js rename apps/web/process/{ => hooks}/init/index.js (78%) create mode 100644 apps/web/process/hooks/reactions.ts create mode 100644 packages/ui/elements/badge.js create mode 100644 packages/ui/elements/tag.js 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: