download kp button

package.json

@@ -2,6 +2,7 @@
   "name": "evocalculator.client",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@apollo/client": "^3.3.4",
     "@babel/code-frame": "^7.10.4",
     "@babel/helper-split-export-declaration": "^7.11.0",

src/client/Containers/Calculation/Sections/sectionsList.ts

@@ -357,6 +357,9 @@ const sections: ISection[] = [
           {
             elements: ['btnCreateKP'],
           },
+          {
+            elements: ['linkDownloadKp'],
+          },
         ],
       },
     ],

src/client/Containers/Calculation/lib/buildElement.js

@@ -1,6 +1,7 @@
 import {
   withButton,
   withComputedValue,
+  withLink,
   withTable,
   withValue,
 } from 'client/hocs/Calculation';
@@ -13,6 +14,7 @@ import elementsProps from './elements/elementsProps';
 import elementsTypes from './elements/types';
 import elementsValues from './elements/values';
 import tables from './elements/tables';
+import elementsUrls from './elements/urls';
 
 export function buildElement(elementName) {
   const elementType = elementsTypes[elementName];
@@ -40,6 +42,13 @@ export function buildElement(elementName) {
         ...elementProps,
       });
     }
+    case ElementType.Link: {
+      return withLink(Component)({
+        name: elementName,
+        urlName: elementsUrls[elementName],
+        ...elementProps,
+      });
+    }
     default: {
       return withValue(Component)({
         name: elementName,

src/client/Containers/Calculation/lib/elements/components.ts

@@ -9,6 +9,7 @@ import Select from 'client/Elements/Select';
 import Switch from 'client/Elements/Switch';
 import Table from 'client/Elements/Table';
 import TextArea from 'client/Elements/TextArea';
+import Download from 'client/Elements/Download';
 
 import { Component } from 'core/types/Calculation/components';
 import { TElements } from 'core/types/Calculation/Store/elements';
@@ -155,6 +156,7 @@ const elementsComponents: TElements<Component> = {
   labelResultBonusMPL: Label,
   labelResultDopMPLLeasing: Label,
   labelResultBonusDopProd: Label,
+  linkDownloadKp: Download,
 };
 
 const tablesComponents: StoreTables<Component> = {

src/client/Containers/Calculation/lib/elements/elementsProps.ts

@@ -12,6 +12,8 @@ import {
   validatePhone,
 } from 'client/tools/validate';
 
+import { DownloadOutlined } from '@ant-design/icons';
+
 const elementsProps: TElements<ElementProps> = {
   selectChannel: {
     showSearch: true,
@@ -70,7 +72,6 @@ const elementsProps: TElements<ElementProps> = {
   },
   btnCreateLead: {
     type: 'primary',
-    size: 'large',
     text: 'Создать интерес',
   },
   tbxLeaseObjectPrice: {
@@ -277,7 +278,6 @@ const elementsProps: TElements<ElementProps> = {
   },
   btnCreateKP: {
     type: 'primary',
-    size: 'large',
     text: 'Создать КП',
   },
   tbxCreditRate: {
@@ -318,6 +318,11 @@ const elementsProps: TElements<ElementProps> = {
     max: '500.0000',
     step: '0.0001',
   },
+  linkDownloadKp: {
+    type: 'primary',
+    text: 'Скачать КП',
+    icon: DownloadOutlined,
+  },
 };
 
 const resultElementsProps: TElements<ElementProps> = [

src/client/Containers/Calculation/lib/elements/types.ts

@@ -10,6 +10,7 @@ const elementsTypes: TElements<ElementType> = {
   btnCreateKP: ElementType.Action,
   btnCalculate: ElementType.Action,
   labelIrrInfo: ElementType.Computed,
+  linkDownloadKp: ElementType.Link,
 };
 
 const tablesTypes: StoreTables<ElementType> = {

src/client/Containers/Calculation/lib/elements/urls.ts

@@ -0,0 +1,8 @@
+import { LinksNames } from 'core/types/Calculation/Store/links';
+import { TElements } from 'core/types/Calculation/Store/elements';
+
+const elementsUrls: TElements<LinksNames> = {
+  linkDownloadKp: 'kpUrl',
+};
+
+export default elementsUrls;

src/client/Elements/Download.jsx

@@ -0,0 +1,20 @@
+import { Button as AntButton } from 'antd';
+import { ElementStatus } from 'core/types/statuses';
+import React from 'react';
+
+const Download = ({ status, url, text, icon: Icon, ...props }) => {
+  return (
+    <AntButton
+      {...props}
+      target="_blank"
+      href={url}
+      disabled={status === ElementStatus.Disabled || !url}
+      loading={status === ElementStatus.Loading}
+      icon={<Icon />}
+    >
+      {text}
+    </AntButton>
+  );
+};
+
+export default Download;

src/client/hocs/Calculation/index.js

@@ -1,7 +1,15 @@
 import withButton from './withButton';
+import withLink from './withLink';
 import withComputedValue from './withComputedValue';
 import withModal from './withModal';
 import withTable from './withTable';
 import withValue from './withValue';
 
-export { withButton, withValue, withComputedValue, withModal, withTable };
+export {
+  withButton,
+  withLink,
+  withValue,
+  withComputedValue,
+  withModal,
+  withTable,
+};

src/client/hocs/Calculation/withLink.jsx

@@ -0,0 +1,12 @@
+import { useStatus } from 'client/hooks/Calculation/useStatus';
+import { useUrl } from 'client/hooks/Calculation/useUrl';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+export default Button => ({ name, urlName, ...props }) =>
+  observer(() => {
+    const { status } = useStatus(name);
+    const { url } = useUrl({ urlName });
+
+    return <Button status={status} {...props} url={url} />;
+  });

src/client/hooks/Calculation/useUrl.js

@@ -0,0 +1,6 @@
+import { calculationUrls } from 'client/stores/CalculationStore';
+
+export const useUrl = ({ urlName }) => {
+  const url = calculationUrls.urls[urlName];
+  return { url };
+};

src/client/stores/CalculationStore/Effects/actions/createKP.js

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 import { message } from 'antd';
 import CrmService from 'client/services/CrmService';
 import { getUser } from 'client/tools/user';
-import CalculationStore from '../..';
+import CalculationStore, { calculationUrls } from '../..';
 import customValues from '../lib/customValues';
 import { openNotification } from 'client/Elements/Notification';
 
@@ -14,6 +14,8 @@ export default async () => {
     return;
   }
 
+  calculationUrls.setUrl({ name: 'kpUrl', url: undefined });
+
   const insurances = tables.tableInsurance.rows.map(insuranceRow => {
     const resObj = {};
     Object.keys(insuranceRow).forEach(prop => {
@@ -77,10 +79,10 @@ export default async () => {
           });
 
           if (quote?.offerprintform) {
-            Object.assign(document.createElement('a'), {
+            calculationUrls.setUrl({
-              target: '_blank',
+              name: 'kpUrl',
-              href: quote.offerprintform,
+              url: quote.offerprintform,
-            }).click();
+            });
           }
         }
       });

src/client/stores/CalculationStore/index.ts

@@ -1,3 +1,4 @@
+import { LinksNames } from './../../../core/types/Calculation/Store/links';
 import { ICalculationStore } from 'core/types/Calculation/Store';
 import { Process } from 'core/types/Calculation/Store/process';
 import { isEqual } from 'lodash';
@@ -20,6 +21,13 @@ export const calculationProcess = makeAutoObservable({
   },
 });
 
+export const calculationUrls = makeAutoObservable({
+  urls: {},
+  setUrl({ name, url }: { name: LinksNames; url: string }) {
+    this.urls[name] = url;
+  },
+});
+
 const CalculationStore: ICalculationStore = makeAutoObservable(
   Object.assign(
     {},

src/core/types/Calculation/Store/elements.ts

@@ -133,6 +133,8 @@ export type ElementsNames =
   | 'selectTracker'
   | 'labelIrrInfo';
 
+export type LinkElementsNames = 'linkDownloadKp';
+
 export type ResultElementsNames =
   | 'labelResultTotalGraphwithNDS'
   | 'labelResultPlPrice'
@@ -156,8 +158,9 @@ export enum ElementType {
   Computed,
   Table,
   Action,
+  Link,
 }
 
 export type TElements<T> = {
-  [elementName in ElementsNames | ResultElementsNames]?: T;
+  [elementName in ElementsNames | ResultElementsNames | LinkElementsNames]?: T;
 };

src/core/types/Calculation/Store/links.ts

@@ -0,0 +1 @@
+export type LinksNames = 'kpUrl';

src/core/types/Calculation/components.ts

@@ -1,4 +1,8 @@
-import { ElementsNames, ResultElementsNames } from './Store/elements';
+import {
+  ElementsNames,
+  ResultElementsNames,
+  LinkElementsNames,
+} from './Store/elements';
 import { TableNames, TableValuesNames } from './Store/tables';
 
 export type ElementProps = { [key: string]: any };
@@ -23,7 +27,12 @@ export interface ITableElement {
 
 interface IBlock {
   title?: string;
-  elements: (ElementsNames | ResultElementsNames | TableNames)[];
+  elements: (
+    | ElementsNames
+    | ResultElementsNames
+    | TableNames
+    | LinkElementsNames
+  )[];
   layout?: { [key: string]: any };
   [key: string]: any;
 }