Calculation: fetch currencysymbol for tbxLeaseObjectPrice, tbxLeaseObjectPriceWthtVAT, tbxVATInLeaseObjectPrice

Components/Calculation/addons/__generated__/GetCurrencySymbol.ts

@@ -0,0 +1,21 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: GetCurrencySymbol
+// ====================================================
+
+export interface GetCurrencySymbol_transactioncurrency {
+  __typename: "transactioncurrency";
+  currencysymbol: string | null;
+}
+
+export interface GetCurrencySymbol {
+  transactioncurrency: GetCurrencySymbol_transactioncurrency | null;
+}
+
+export interface GetCurrencySymbolVariables {
+  currencyid: any;
+}

Components/Calculation/addons/currency-addon.tsx

@@ -0,0 +1,44 @@
+import { gql, useApolloClient } from '@apollo/client';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useStore } from 'stores/hooks';
+// prettier-ignore
+import type { GetCurrencySymbol, GetCurrencySymbolVariables } from './__generated__/GetCurrencySymbol';
+
+const QUERY_GET_CURRENCY_SYMBOL = gql`
+  query GetCurrencySymbol($currencyid: Uuid!) {
+    transactioncurrency(transactioncurrencyid: $currencyid) {
+      currencysymbol
+    }
+  }
+`;
+
+const CurrencyAddon = observer(() => {
+  const { $calculation } = useStore();
+
+  const currencyid = $calculation.$values.getValue('supplierCurrency');
+
+  const [currencySymbol, setCurrencySymbol] = useState('');
+
+  const apolloClient = useApolloClient();
+
+  if (currencyid) {
+    apolloClient
+      .query<GetCurrencySymbol, GetCurrencySymbolVariables>({
+        query: QUERY_GET_CURRENCY_SYMBOL,
+        variables: {
+          currencyid,
+        },
+      })
+      .then(({ data }) => {
+        setCurrencySymbol(data?.transactioncurrency?.currencysymbol || '');
+      })
+      .catch(() => {
+        setCurrencySymbol('');
+      });
+  }
+
+  return <div>{currencySymbol}</div>;
+});
+
+export default <CurrencyAddon />;

Components/Calculation/config/elements-props.ts

@@ -2,6 +2,7 @@ import { MAX_FRANCHISE, MAX_LEASING_PERIOD } from 'constants/values';
 import dayjs from 'dayjs';
 import DownloadOutlined from 'Elements/icons/DownloadOutlined';
 import { formatter, formatterExtra, parser } from 'tools/number';
+import CurrencyAddon from '../addons/currency-addon';
 import type { ElementsProps } from './elements-components';
 
 const props: Partial<ElementsProps> = {
@@ -12,6 +13,7 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     parser,
     formatter,
+    addonAfter: CurrencyAddon,
   },
   tbxLeaseObjectPriceWthtVAT: {
     min: 0,
@@ -20,6 +22,7 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     parser,
     formatter,
+    addonAfter: CurrencyAddon,
   },
   tbxVATInLeaseObjectPrice: {
     min: 0,
@@ -28,6 +31,7 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     parser,
     formatter,
+    addonAfter: CurrencyAddon,
   },
   tbxEngineHours: {
     min: 0,

apollo.config.js

@@ -7,6 +7,6 @@ module.exports = {
       localSchemaFile: './graphql/crm.schema.graphql',
     },
     excludes: ['graphql/**/*'],
-    includes: ['pages/**/*', 'process/**/*'],
+    includes: ['pages/**/*', 'process/**/*', 'Components/**/*'],
   },
 };