From 502dd919f5573fef659b0868a78abd4048068b8e Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 19 Jan 2024 14:42:43 +0300
Subject: [PATCH] add addon to selectProduct

---
 .../Calculation/Form/Leasing/config.ts        |  1 -
 .../Calculation/addons/product-addon.tsx      | 48 +++++++++++++++++++
 .../config/elements-render/override.tsx       | 24 ++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/Components/Calculation/addons/product-addon.tsx

diff --git a/apps/web/Components/Calculation/Form/Leasing/config.ts b/apps/web/Components/Calculation/Form/Leasing/config.ts
index 3653009..23f0338 100644
--- a/apps/web/Components/Calculation/Form/Leasing/config.ts
+++ b/apps/web/Components/Calculation/Form/Leasing/config.ts
@@ -5,7 +5,6 @@ export const title = 'Лизинг';
 
 export const rows: FormTabRows = [
   [['selectProduct'], { gridTemplateColumns: '1fr' }],
-  [['cbxPartialVAT', 'cbxFloatingRate']],
   [['tbxLeaseObjectPrice', 'tbxVATInLeaseObjectPrice', 'tbxLeaseObjectPriceWthtVAT']],
   [['selectSupplierCurrency', 'tbxSupplierDiscountRub', 'tbxSupplierDiscountPerc']],
   [['tbxFirstPaymentPerc', 'tbxFirstPaymentRub']],
diff --git a/apps/web/Components/Calculation/addons/product-addon.tsx b/apps/web/Components/Calculation/addons/product-addon.tsx
new file mode 100644
index 0000000..0a9e2dd
--- /dev/null
+++ b/apps/web/Components/Calculation/addons/product-addon.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable react/forbid-component-props */
+import titles from '../config/elements-titles';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { pick } from 'radash';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Tag } from 'ui/elements';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+`;
+
+const tagsData = pick(titles, ['cbxPartialVAT', 'cbxFloatingRate']);
+
+const { CheckableTag } = Tag;
+
+export const ProductAddon = observer(() => {
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const { $calculation } = useStore();
+
+  function handleChange(elementName: keyof typeof tagsData, checked: boolean) {
+    if (checked) {
+      setSelectedTags([...selectedTags, elementName]);
+      $calculation.element(elementName).setValue(true);
+    } else {
+      setSelectedTags(selectedTags.filter((x) => x !== elementName));
+      $calculation.element(elementName).setValue(false);
+    }
+  }
+
+  return (
+    <Container>
+      {(Object.keys(tagsData) as Array<keyof typeof tagsData>).map((elementName) => (
+        <CheckableTag
+          checked={selectedTags.includes(elementName)}
+          onChange={(checked) => handleChange(elementName, checked)}
+          key={elementName}
+          style={{ marginInlineEnd: 0 }}
+        >
+          {tagsData[elementName]}
+        </CheckableTag>
+      ))}
+    </Container>
+  );
+});
diff --git a/apps/web/Components/Calculation/config/elements-render/override.tsx b/apps/web/Components/Calculation/config/elements-render/override.tsx
index 94a0b32..df6723d 100644
--- a/apps/web/Components/Calculation/config/elements-render/override.tsx
+++ b/apps/web/Components/Calculation/config/elements-render/override.tsx
@@ -1,3 +1,4 @@
+import { ProductAddon } from '../../addons/product-addon';
 import { buildLink } from '../../builders';
 import components from '../elements-components';
 import elementsProps from '../elements-props';
@@ -221,6 +222,29 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
     },
   },
 
+  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';