validation: block btnCalculate if errors

config/default-statuses.ts

@@ -133,6 +133,8 @@ const defaultStatuses: CalculationStatuses = {
   linkOpportunityUrl: 'Default',
   linkQuoteUrl: 'Default',
   tbxBonusCoefficient: 'Default',
+  btnCalculate: 'Default',
+  btnCreateKP: 'Default',
 };
 
 export default defaultStatuses;

pages/index.tsx

@@ -5,6 +5,7 @@ import Output from 'Components/Output';
 import type { BaseOption } from 'Elements/types';
 import type { GetServerSideProps } from 'next';
 import Head from 'next/head';
+import calculateValidationReactions from 'process/calculate/reactions/validation';
 import leadOpportunityUrlsReactions from 'process/lead-opportunity/reactions/urls';
 import paymentsReactions from 'process/payments/reactions';
 import { fetchUser } from 'services/user';
@@ -48,6 +49,7 @@ function Home({ graphQLData }: PageProps) {
    */
   leadOpportunityUrlsReactions(store, apolloClient);
   paymentsReactions(store, apolloClient);
+  calculateValidationReactions(store, apolloClient);
 
   /**
    * set graphql data to store

process/calculate/reactions/validation.ts

@@ -0,0 +1,31 @@
+import type { ApolloClient } from '@apollo/client';
+import { reaction } from 'mobx';
+import type RootStore from 'stores/root';
+
+export default function calculateValidationReactions(
+  store: RootStore,
+  apolloClient: ApolloClient<object>
+) {
+  const { $calculation, $tables } = store;
+  reaction(
+    () => {
+      const hasElementsErrors = $calculation.$validation.hasErrors;
+      const hasPaymentsErrors = $tables.payments.validation.hasErrors;
+      const hasInsuranceErrors = $tables.insurance.validation.hasErrors;
+
+      return hasElementsErrors || hasPaymentsErrors || hasInsuranceErrors;
+    },
+    (hasErrors) => {
+      if (hasErrors) {
+        $calculation.$status.setStatus('btnCalculate', 'Disabled');
+        $calculation.$status.setStatus('btnCreateKP', 'Disabled');
+      } else {
+        $calculation.$status.resetStatus('btnCalculate');
+        $calculation.$status.resetStatus('btnCreateKP');
+      }
+    },
+    {
+      fireImmediately: true,
+    }
+  );
+}

stores/calculation/statuses/index.ts

@@ -1,5 +1,6 @@
 /* eslint-disable object-curly-newline */
-import type { Elements } from 'Components/Calculation/config/map/values';
+import type { Elements as ElementsActions } from 'Components/Calculation/config/map/actions';
+import type { Elements as ElementsValues } from 'Components/Calculation/config/map/values';
 import defaultStatuses from 'config/default-statuses';
 import type { Status } from 'Elements/types';
 import { makeAutoObservable } from 'mobx';
@@ -19,11 +20,11 @@ export default class StatusStore {
     this.statuses = initialStatuses;
   };
 
-  getStatus(elementName: Elements) {
+  getStatus(elementName: ElementsValues | ElementsActions) {
     return this.statuses[elementName];
   }
 
-  setStatus = (elementName: Elements, status: Status) => {
+  setStatus = (elementName: ElementsValues | ElementsActions, status: Status) => {
     this.statuses[elementName] = status;
   };
 
@@ -31,7 +32,7 @@ export default class StatusStore {
     this.statuses = Object.assign(this.statuses, statuses);
   };
 
-  resetStatus = (elementName: Elements) => {
+  resetStatus = (elementName: ElementsValues | ElementsActions) => {
     this.statuses[elementName] = defaultStatuses[elementName];
   };
 }

stores/calculation/statuses/types.ts

@@ -1,4 +1,5 @@
-import type { Elements } from 'Components/Calculation/config/map/values';
+import type { Elements as ElementsActions } from 'Components/Calculation/config/map/actions';
+import type { Elements as ElementsValues } from 'Components/Calculation/config/map/values';
 import type { Status } from 'Elements/types';
 
-export type CalculationStatuses = Record<Elements, Status>;
+export type CalculationStatuses = Record<ElementsValues | ElementsActions, Status>;