show gp icons when entering transactions

handlers/lotOccupancies-post/doGetDynamicsGPDocument.d.ts

@@ -0,0 +1,3 @@
+import type { Request, Response } from 'express';
+export declare function handler(request: Request, response: Response): Promise<void>;
+export default handler;

handlers/lotOccupancies-post/doGetDynamicsGPDocument.js

@@ -0,0 +1,17 @@
+import { getDynamicsGPDocument } from '../../helpers/functions.dynamicsGP.js';
+export async function handler(request, response) {
+    const externalReceiptNumber = request.body.externalReceiptNumber;
+    const dynamicsGPDocument = await getDynamicsGPDocument(externalReceiptNumber);
+    if (dynamicsGPDocument === undefined) {
+        response.json({
+            success: false
+        });
+    }
+    else {
+        response.json({
+            success: true,
+            dynamicsGPDocument
+        });
+    }
+}
+export default handler;

handlers/lotOccupancies-post/doGetDynamicsGPDocument.ts

@@ -0,0 +1,27 @@
+/* eslint-disable unicorn/filename-case */
+
+import type { Request, Response } from 'express'
+
+import { getDynamicsGPDocument } from '../../helpers/functions.dynamicsGP.js'
+
+export async function handler(
+  request: Request,
+  response: Response
+): Promise<void> {
+  const externalReceiptNumber = request.body.externalReceiptNumber
+
+  const dynamicsGPDocument = await getDynamicsGPDocument(externalReceiptNumber)
+
+  if (dynamicsGPDocument === undefined) {
+    response.json({
+      success: false
+    })
+  } else {
+    response.json({
+      success: true,
+      dynamicsGPDocument
+    })
+  }
+}
+
+export default handler

public-typescript/lotOccupancyEdit.js

@@ -1462,17 +1462,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         if (lotOccupancyTransaction.dynamicsGPDocument === undefined) {
                             externalReceiptNumberHTML += ` <span data-tooltip="No Matching Document Found">
                     <i class="fas fa-times-circle has-text-danger" aria-label="No Matching Document Found"></i>
+                    </span>`;
+                        }
+                        else if (lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2) === lotOccupancyTransaction.transactionAmount.toFixed(2)) {
+                            externalReceiptNumberHTML += ` <span data-tooltip="Matching Document Found">
+                    <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
                     </span>`;
                         }
                         else {
-                            externalReceiptNumberHTML +=
+                            externalReceiptNumberHTML += ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}">
-                                lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2) === lotOccupancyTransaction.transactionAmount.toFixed(2)
+                    <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}"></i>
-                                    ? ` <span data-tooltip="Matching Document Found">
+                    </span>`;
-                      <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
-                      </span>`
-                                    : ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}">
-                      <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}"></i>
-                      </span>`;
                         }
                     }
                     externalReceiptNumberHTML += '<br />';
@@ -1521,6 +1521,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
         document
             .querySelector('#button--addTransaction')
             .addEventListener('click', () => {
+            let transactionAmountElement;
+            let externalReceiptNumberElement;
             let addCloseModalFunction;
             function doAddTransaction(submitEvent) {
                 submitEvent.preventDefault();
@@ -1541,16 +1543,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     }
                 });
             }
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            function dynamicsGP_refreshExternalReceiptNumberIcon() {
+                const externalReceiptNumber = externalReceiptNumberElement.value;
+                const iconElement = externalReceiptNumberElement
+                    .closest('.control')
+                    .querySelector('.icon');
+                const helpTextElement = externalReceiptNumberElement
+                    .closest('.field')
+                    .querySelector('.help');
+                if (externalReceiptNumber === '') {
+                    helpTextElement.innerHTML = '&nbsp;';
+                    iconElement.innerHTML =
+                        '<i class="fas fa-minus" aria-hidden="true"></i>';
+                    return;
+                }
+                cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument', {
+                    externalReceiptNumber
+                }, (rawResponseJSON) => {
+                    const responseJSON = rawResponseJSON;
+                    if (!responseJSON.success ||
+                        responseJSON.dynamicsGPDocument === undefined) {
+                        helpTextElement.textContent = 'No Matching Document Found';
+                        iconElement.innerHTML =
+                            '<i class="fas fa-times-circle" aria-hidden="true"></i>';
+                    }
+                    else if (transactionAmountElement.valueAsNumber ===
+                        responseJSON.dynamicsGPDocument.documentTotal) {
+                        helpTextElement.textContent = 'Matching Document Found';
+                        iconElement.innerHTML =
+                            '<i class="fas fa-check-circle" aria-hidden="true"></i>';
+                    }
+                    else {
+                        helpTextElement.textContent =
+                            'Matching Document: $' +
+                                responseJSON.dynamicsGPDocument.documentTotal.toFixed(2);
+                        iconElement.innerHTML =
+                            '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>';
+                    }
+                });
+            }
             cityssm.openHtmlModal('lotOccupancy-addTransaction', {
                 onshow(modalElement) {
                     los.populateAliases(modalElement);
                     modalElement.querySelector('#lotOccupancyTransactionAdd--lotOccupancyId').value = lotOccupancyId.toString();
                     const feeGrandTotal = getFeeGrandTotal();
                     const transactionGrandTotal = getTransactionGrandTotal();
-                    const transactionAmountElement = modalElement.querySelector('#lotOccupancyTransactionAdd--transactionAmount');
+                    transactionAmountElement = modalElement.querySelector('#lotOccupancyTransactionAdd--transactionAmount');
                     transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
                     transactionAmountElement.max = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
                     transactionAmountElement.value = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
+                    if (los.dynamicsGPIntegrationIsEnabled) {
+                        externalReceiptNumberElement = modalElement.querySelector('#lotOccupancyTransactionAdd--externalReceiptNumber');
+                        const externalReceiptNumberControlElement = externalReceiptNumberElement.closest('.control');
+                        externalReceiptNumberControlElement.classList.add('has-icons-right');
+                        externalReceiptNumberControlElement.insertAdjacentHTML('beforeend', '<span class="icon is-small is-right"></span>');
+                        externalReceiptNumberControlElement.insertAdjacentHTML('afterend', '<p class="help has-text-right"></p>');
+                        externalReceiptNumberElement.addEventListener('change', dynamicsGP_refreshExternalReceiptNumberIcon);
+                        transactionAmountElement.addEventListener('change', dynamicsGP_refreshExternalReceiptNumberIcon);
+                        dynamicsGP_refreshExternalReceiptNumberIcon();
+                    }
                 },
                 onshown(modalElement, closeModalFunction) {
                     bulmaJS.toggleHtmlClipped();

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js

@@ -372,17 +372,17 @@ function renderLotOccupancyTransactions() {
                 if (lotOccupancyTransaction.dynamicsGPDocument === undefined) {
                     externalReceiptNumberHTML += ` <span data-tooltip="No Matching Document Found">
             <i class="fas fa-times-circle has-text-danger" aria-label="No Matching Document Found"></i>
+            </span>`;
+                }
+                else if (lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2) === lotOccupancyTransaction.transactionAmount.toFixed(2)) {
+                    externalReceiptNumberHTML += ` <span data-tooltip="Matching Document Found">
+            <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
             </span>`;
                 }
                 else {
-                    externalReceiptNumberHTML +=
+                    externalReceiptNumberHTML += ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}">
-                        lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2) === lotOccupancyTransaction.transactionAmount.toFixed(2)
+            <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}"></i>
-                            ? ` <span data-tooltip="Matching Document Found">
+            </span>`;
-              <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
-              </span>`
-                            : ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}">
-              <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(2)}"></i>
-              </span>`;
                 }
             }
             externalReceiptNumberHTML += '<br />';
@@ -431,6 +431,8 @@ function renderLotOccupancyTransactions() {
 document
     .querySelector('#button--addTransaction')
     .addEventListener('click', () => {
+    let transactionAmountElement;
+    let externalReceiptNumberElement;
     let addCloseModalFunction;
     function doAddTransaction(submitEvent) {
         submitEvent.preventDefault();
@@ -451,16 +453,66 @@ document
             }
         });
     }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    function dynamicsGP_refreshExternalReceiptNumberIcon() {
+        const externalReceiptNumber = externalReceiptNumberElement.value;
+        const iconElement = externalReceiptNumberElement
+            .closest('.control')
+            .querySelector('.icon');
+        const helpTextElement = externalReceiptNumberElement
+            .closest('.field')
+            .querySelector('.help');
+        if (externalReceiptNumber === '') {
+            helpTextElement.innerHTML = '&nbsp;';
+            iconElement.innerHTML =
+                '<i class="fas fa-minus" aria-hidden="true"></i>';
+            return;
+        }
+        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument', {
+            externalReceiptNumber
+        }, (rawResponseJSON) => {
+            const responseJSON = rawResponseJSON;
+            if (!responseJSON.success ||
+                responseJSON.dynamicsGPDocument === undefined) {
+                helpTextElement.textContent = 'No Matching Document Found';
+                iconElement.innerHTML =
+                    '<i class="fas fa-times-circle" aria-hidden="true"></i>';
+            }
+            else if (transactionAmountElement.valueAsNumber ===
+                responseJSON.dynamicsGPDocument.documentTotal) {
+                helpTextElement.textContent = 'Matching Document Found';
+                iconElement.innerHTML =
+                    '<i class="fas fa-check-circle" aria-hidden="true"></i>';
+            }
+            else {
+                helpTextElement.textContent =
+                    'Matching Document: $' +
+                        responseJSON.dynamicsGPDocument.documentTotal.toFixed(2);
+                iconElement.innerHTML =
+                    '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>';
+            }
+        });
+    }
     cityssm.openHtmlModal('lotOccupancy-addTransaction', {
         onshow(modalElement) {
             los.populateAliases(modalElement);
             modalElement.querySelector('#lotOccupancyTransactionAdd--lotOccupancyId').value = lotOccupancyId.toString();
             const feeGrandTotal = getFeeGrandTotal();
             const transactionGrandTotal = getTransactionGrandTotal();
-            const transactionAmountElement = modalElement.querySelector('#lotOccupancyTransactionAdd--transactionAmount');
+            transactionAmountElement = modalElement.querySelector('#lotOccupancyTransactionAdd--transactionAmount');
             transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
             transactionAmountElement.max = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
             transactionAmountElement.value = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
+            if (los.dynamicsGPIntegrationIsEnabled) {
+                externalReceiptNumberElement = modalElement.querySelector('#lotOccupancyTransactionAdd--externalReceiptNumber');
+                const externalReceiptNumberControlElement = externalReceiptNumberElement.closest('.control');
+                externalReceiptNumberControlElement.classList.add('has-icons-right');
+                externalReceiptNumberControlElement.insertAdjacentHTML('beforeend', '<span class="icon is-small is-right"></span>');
+                externalReceiptNumberControlElement.insertAdjacentHTML('afterend', '<p class="help has-text-right"></p>');
+                externalReceiptNumberElement.addEventListener('change', dynamicsGP_refreshExternalReceiptNumberIcon);
+                transactionAmountElement.addEventListener('change', dynamicsGP_refreshExternalReceiptNumberIcon);
+                dynamicsGP_refreshExternalReceiptNumberIcon();
+            }
         },
         onshown(modalElement, closeModalFunction) {
             bulmaJS.toggleHtmlClipped();

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts

@@ -527,21 +527,22 @@ function renderLotOccupancyTransactions(): void {
           externalReceiptNumberHTML += ` <span data-tooltip="No Matching Document Found">
             <i class="fas fa-times-circle has-text-danger" aria-label="No Matching Document Found"></i>
             </span>`
+        } else if (
+          lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
+            2
+          ) === lotOccupancyTransaction.transactionAmount.toFixed(2)
+        ) {
+          externalReceiptNumberHTML += ` <span data-tooltip="Matching Document Found">
+            <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
+            </span>`
         } else {
-          externalReceiptNumberHTML +=
+          externalReceiptNumberHTML += ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
-            lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
+            2
+          )}">
+            <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
               2
-            ) === lotOccupancyTransaction.transactionAmount.toFixed(2)
+            )}"></i>
-              ? ` <span data-tooltip="Matching Document Found">
+            </span>`
-              <i class="fas fa-check-circle has-text-success" aria-label="Matching Document Found"></i>
-              </span>`
-              : ` <span data-tooltip="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
-                  2
-                )}">
-              <i class="fas fa-check-circle has-text-warning" aria-label="Matching Document: $${lotOccupancyTransaction.dynamicsGPDocument.documentTotal.toFixed(
-                2
-              )}"></i>
-              </span>`
         }
       }
 
@@ -604,6 +605,9 @@ function renderLotOccupancyTransactions(): void {
 document
   .querySelector('#button--addTransaction')!
   .addEventListener('click', () => {
+    let transactionAmountElement: HTMLInputElement
+    let externalReceiptNumberElement: HTMLInputElement
+
     let addCloseModalFunction: () => void
 
     function doAddTransaction(submitEvent: SubmitEvent): void {
@@ -634,6 +638,61 @@ document
       )
     }
 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    function dynamicsGP_refreshExternalReceiptNumberIcon(): void {
+      const externalReceiptNumber = externalReceiptNumberElement.value
+
+      const iconElement = externalReceiptNumberElement
+        .closest('.control')!
+        .querySelector('.icon') as HTMLElement
+
+      const helpTextElement = externalReceiptNumberElement
+        .closest('.field')!
+        .querySelector('.help') as HTMLElement
+
+      if (externalReceiptNumber === '') {
+        helpTextElement.innerHTML = '&nbsp;'
+        iconElement.innerHTML =
+          '<i class="fas fa-minus" aria-hidden="true"></i>'
+        return
+      }
+
+      cityssm.postJSON(
+        los.urlPrefix + '/lotOccupancies/doGetDynamicsGPDocument',
+        {
+          externalReceiptNumber
+        },
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as {
+            success: boolean
+            dynamicsGPDocument?: recordTypes.DynamicsGPDocument
+          }
+
+          if (
+            !responseJSON.success ||
+            responseJSON.dynamicsGPDocument === undefined
+          ) {
+            helpTextElement.textContent = 'No Matching Document Found'
+            iconElement.innerHTML =
+              '<i class="fas fa-times-circle" aria-hidden="true"></i>'
+          } else if (
+            transactionAmountElement.valueAsNumber ===
+            responseJSON.dynamicsGPDocument.documentTotal
+          ) {
+            helpTextElement.textContent = 'Matching Document Found'
+            iconElement.innerHTML =
+              '<i class="fas fa-check-circle" aria-hidden="true"></i>'
+          } else {
+            helpTextElement.textContent =
+              'Matching Document: $' +
+              responseJSON.dynamicsGPDocument.documentTotal.toFixed(2)
+            iconElement.innerHTML =
+              '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>'
+          }
+        }
+      )
+    }
+
     cityssm.openHtmlModal('lotOccupancy-addTransaction', {
       onshow(modalElement) {
         los.populateAliases(modalElement)
@@ -646,19 +705,54 @@ document
         const feeGrandTotal = getFeeGrandTotal()
         const transactionGrandTotal = getTransactionGrandTotal()
 
-        const transactionAmountElement = modalElement.querySelector(
+        transactionAmountElement = modalElement.querySelector(
           '#lotOccupancyTransactionAdd--transactionAmount'
         ) as HTMLInputElement
 
         transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2)
+
         transactionAmountElement.max = Math.max(
           feeGrandTotal - transactionGrandTotal,
           0
         ).toFixed(2)
+
         transactionAmountElement.value = Math.max(
           feeGrandTotal - transactionGrandTotal,
           0
         ).toFixed(2)
+
+        if (los.dynamicsGPIntegrationIsEnabled) {
+          externalReceiptNumberElement = modalElement.querySelector(
+            '#lotOccupancyTransactionAdd--externalReceiptNumber'
+          )!
+
+          const externalReceiptNumberControlElement =
+            externalReceiptNumberElement.closest('.control')!
+
+          externalReceiptNumberControlElement.classList.add('has-icons-right')
+
+          externalReceiptNumberControlElement.insertAdjacentHTML(
+            'beforeend',
+            '<span class="icon is-small is-right"></span>'
+          )
+
+          externalReceiptNumberControlElement.insertAdjacentHTML(
+            'afterend',
+            '<p class="help has-text-right"></p>'
+          )
+
+          externalReceiptNumberElement.addEventListener(
+            'change',
+            dynamicsGP_refreshExternalReceiptNumberIcon
+          )
+
+          transactionAmountElement.addEventListener(
+            'change',
+            dynamicsGP_refreshExternalReceiptNumberIcon
+          )
+
+          dynamicsGP_refreshExternalReceiptNumberIcon()
+        }
       },
       onshown(modalElement, closeModalFunction) {
         bulmaJS.toggleHtmlClipped()

routes/lotOccupancies.js

@@ -19,9 +19,11 @@ import handler_doDeleteLotOccupancyComment from '../handlers/lotOccupancies-post
 import handler_doGetFees from '../handlers/lotOccupancies-post/doGetFees.js';
 import handler_doAddLotOccupancyFee from '../handlers/lotOccupancies-post/doAddLotOccupancyFee.js';
 import handler_doDeleteLotOccupancyFee from '../handlers/lotOccupancies-post/doDeleteLotOccupancyFee.js';
+import handler_doGetDynamicsGPDocument from '../handlers/lotOccupancies-post/doGetDynamicsGPDocument.js';
 import handler_doAddLotOccupancyTransaction from '../handlers/lotOccupancies-post/doAddLotOccupancyTransaction.js';
 import handler_doDeleteLotOccupancyTransaction from '../handlers/lotOccupancies-post/doDeleteLotOccupancyTransaction.js';
 import * as permissionHandlers from '../handlers/permissions.js';
+import * as configFunctions from '../helpers/functions.config.js';
 export const router = Router();
 router.get('/', handler_search);
 router.post('/doSearchLotOccupancies', handler_doSearchLotOccupancies);
@@ -43,6 +45,9 @@ router.post('/doDeleteLotOccupancyComment', permissionHandlers.updatePostHandler
 router.post('/doGetFees', permissionHandlers.updatePostHandler, handler_doGetFees);
 router.post('/doAddLotOccupancyFee', permissionHandlers.updatePostHandler, handler_doAddLotOccupancyFee);
 router.post('/doDeleteLotOccupancyFee', permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyFee);
+if (configFunctions.getProperty('settings.dynamicsGP.integrationIsEnabled')) {
+    router.post('/doGetDynamicsGPDocument', permissionHandlers.updatePostHandler, handler_doGetDynamicsGPDocument);
+}
 router.post('/doAddLotOccupancyTransaction', permissionHandlers.updatePostHandler, handler_doAddLotOccupancyTransaction);
 router.post('/doDeleteLotOccupancyTransaction', permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyTransaction);
 export default router;

routes/lotOccupancies.ts

@@ -27,11 +27,14 @@ import handler_doGetFees from '../handlers/lotOccupancies-post/doGetFees.js'
 import handler_doAddLotOccupancyFee from '../handlers/lotOccupancies-post/doAddLotOccupancyFee.js'
 import handler_doDeleteLotOccupancyFee from '../handlers/lotOccupancies-post/doDeleteLotOccupancyFee.js'
 
+import handler_doGetDynamicsGPDocument from '../handlers/lotOccupancies-post/doGetDynamicsGPDocument.js'
 import handler_doAddLotOccupancyTransaction from '../handlers/lotOccupancies-post/doAddLotOccupancyTransaction.js'
 import handler_doDeleteLotOccupancyTransaction from '../handlers/lotOccupancies-post/doDeleteLotOccupancyTransaction.js'
 
 import * as permissionHandlers from '../handlers/permissions.js'
 
+import * as configFunctions from '../helpers/functions.config.js'
+
 export const router = Router()
 
 // Search
@@ -161,6 +164,14 @@ router.post(
 
 // Transactions
 
+if (configFunctions.getProperty('settings.dynamicsGP.integrationIsEnabled')) {
+  router.post(
+    '/doGetDynamicsGPDocument',
+    permissionHandlers.updatePostHandler,
+    handler_doGetDynamicsGPDocument as RequestHandler
+  )
+}
+
 router.post(
   '/doAddLotOccupancyTransaction',
   permissionHandlers.updatePostHandler,