IO-3051 Replace inlince css with juice.

.platform/hooks/predeploy/01-install-dd.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-DD_API_KEY=58d91898a70c6fd659f6eea768a57976 DD_SITE="us3.datadoghq.com" bash -c "$(curl -L https://install.datadoghq.com/scripts/install_script_agent7.sh)"
-
-echo "Datadog agent installed."

Dockerfile

@@ -7,6 +7,7 @@ RUN dnf install -y git \
     && dnf install -y nodejs \
     && dnf clean all
 
+
 # Install dependencies required by node-canvas
 RUN dnf install -y \
     gcc \
@@ -18,22 +19,9 @@ RUN dnf install -y \
     libpng-devel \
     make \
     python3 \
-    fontconfig \
-    freetype \
     python3-pip \
-    wget \
-    unzip \
     && dnf clean all
 
-# Install Montserrat fonts
-RUN cd /tmp \
-    && wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip \
-    && unzip montserrat.zip -d montserrat \
-    && mv montserrat/montserrat/*.ttf /usr/share/fonts \
-    && fc-cache -fv \
-    && rm -rf /tmp/montserrat /tmp/montserrat.zip \
-    && echo "Montserrat fonts installed and cached successfully."
-
 # Set the working directory
 WORKDIR /app
 

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -334,75 +334,29 @@ export const registerMessagingHandlers = ({ socket, client }) => {
           break;
 
         case "tag-added":
-          // Ensure `job_conversations` is properly formatted
-          const formattedJobConversations = job_conversations.map((jc) => ({
-            __typename: "job_conversations",
-            jobid: jc.jobid || jc.job?.id,
-            conversationid: conversationId,
-            job: jc.job || {
-              __typename: "jobs",
-              id: data.selectedJob.id,
-              ro_number: data.selectedJob.ro_number,
-              ownr_co_nm: data.selectedJob.ownr_co_nm,
-              ownr_fn: data.selectedJob.ownr_fn,
-              ownr_ln: data.selectedJob.ownr_ln
-            }
-          }));
-
           client.cache.modify({
             id: client.cache.identify({ __typename: "conversations", id: conversationId }),
             fields: {
-              job_conversations: (existing = []) => {
-                // Ensure no duplicates based on both `conversationid` and `jobid`
-                const existingLinks = new Set(
-                  existing.map((jc) => {
-                    const jobId = client.cache.readFragment({
-                      id: client.cache.identify(jc),
-                      fragment: gql`
-                        fragment JobConversationLinkAdded on job_conversations {
-                          jobid
-                          conversationid
-                        }
-                      `
-                    })?.jobid;
-                    return `${jobId}:${conversationId}`; // Unique identifier for a job-conversation link
-                  })
-                );
-
-                const newItems = formattedJobConversations.filter((jc) => {
-                  const uniqueLink = `${jc.jobid}:${jc.conversationid}`;
-                  return !existingLinks.has(uniqueLink);
-                });
-
-                return [...existing, ...newItems];
-              }
+              job_conversations: (existing = []) => [...existing, ...job_conversations]
             }
           });
-
           break;
 
         case "tag-removed":
-          try {
-            const conversationCacheId = client.cache.identify({ __typename: "conversations", id: conversationId });
-
-            // Evict the specific cache entry for job_conversations
-            client.cache.evict({
-              id: conversationCacheId,
-              fieldName: "job_conversations"
-            });
-
-            // Garbage collect evicted entries
-            client.cache.gc();
-
-            logLocal("handleConversationChanged - tag removed - Refetched conversation list after state change", {
-              conversationId,
-              type
-            });
-          } catch (error) {
-            console.error("Error refetching queries after conversation state change: (Tag Removed)", error);
-          }
-
+          client.cache.modify({
+            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+            fields: {
+              job_conversations: (existing = [], { readField }) => {
+                return existing.filter((jobRef) => {
+                  // Read the `jobid` field safely, even if the structure is normalized
+                  const jobId = readField("jobid", jobRef);
+                  return jobId !== fields.jobId;
+                });
+              }
+            }
+          });
           break;
+
         default:
           logLocal("handleConversationChanged - Unhandled type", { type });
           client.cache.modify({

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { renderMessage } from "./renderMessage";
 import "./chat-message-list.styles.scss";
@@ -16,7 +16,7 @@ export default function ChatMessageListComponent({ messages }) {
     loadedImagesRef.current = 0;
   };
 
-  const preloadImages = useCallback((imagePaths, onComplete) => {
+  const preloadImages = (imagePaths, onComplete) => {
     resetImageLoadState();
 
     if (imagePaths.length === 0) {
@@ -34,7 +34,7 @@ export default function ChatMessageListComponent({ messages }) {
         }
       };
     });
-  }, []);
+  };
 
   // Ensure all images are loaded on initial render
   useEffect(() => {
@@ -51,7 +51,7 @@ export default function ChatMessageListComponent({ messages }) {
         });
       }
     });
-  }, [messages, preloadImages]);
+  }, [messages]);
 
   // Handle scrolling when new messages are added
   useEffect(() => {
@@ -69,7 +69,7 @@ export default function ChatMessageListComponent({ messages }) {
         });
       }
     });
-  }, [messages, atBottom, preloadImages]);
+  }, [messages, atBottom]);
 
   return (
     <div className="chat">

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,11 +1,11 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
+import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
@@ -38,14 +38,6 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
-  // Query for unread count when chat is not visible
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    skip: chatVisible, // Skip when chat is visible
-    ...(pollInterval > 0 ? { pollInterval } : {})
-  });
-
   // Socket connection status
   useEffect(() => {
     const handleSocketStatus = () => {
@@ -85,29 +77,23 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
 
   // Get unread count from the cache
   const unreadCount = (() => {
-    if (chatVisible) {
-      try {
-        const cachedData = client.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: { offset: 0 }
-        });
+    try {
+      const cachedData = client.readQuery({
+        query: CONVERSATION_LIST_QUERY,
+        variables: { offset: 0 }
+      });
 
-        if (!cachedData?.conversations) return 0;
+      if (!cachedData?.conversations) return 0;
 
-        // Aggregate unread message count
-        return cachedData.conversations.reduce((total, conversation) => {
-          const unread = conversation.messages_aggregate?.aggregate?.count || 0;
-          return total + unread;
-        }, 0);
-      } catch (error) {
-        console.warn("Unread count not found in cache:", error);
-        return 0; // Fallback if not in cache
-      }
-    } else if (unreadData?.messages_aggregate?.aggregate?.count) {
-      // Use the unread count from the query result
-      return unreadData.messages_aggregate.aggregate.count;
+      // Aggregate unread message count
+      return cachedData.conversations.reduce((total, conversation) => {
+        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
+        return total + unread;
+      }, 0);
+    } catch (error) {
+      console.warn("Unread count not found in cache:", error);
+      return 0; // Fallback if not in cache
     }
-    return 0;
   })();
 
   return (

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -52,26 +52,20 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
       // Find the job details from the search data
       const selectedJob = data?.search_jobs.find((job) => job.id === option.key);
       if (!selectedJob) return;
+      const newJobConversation = {
+        __typename: "job_conversations",
+        jobid: selectedJob.id,
+        conversationid: conversation.id,
+        job: {
+          __typename: "jobs",
+          ...selectedJob
+        }
+      };
       socket.emit("conversation-modified", {
         conversationId: conversation.id,
         bodyshopId: bodyshop.id,
         type: "tag-added",
-        selectedJob,
-        job_conversations: [
-          {
-            __typename: "job_conversations",
-            jobid: selectedJob.id,
-            conversationid: conversation.id,
-            job: {
-              __typename: "jobs",
-              id: selectedJob.id,
-              ro_number: selectedJob.ro_number,
-              ownr_co_nm: selectedJob.ownr_co_nm,
-              ownr_fn: selectedJob.ownr_fn,
-              ownr_ln: selectedJob.ownr_ln
-            }
-          }
-        ]
+        job_conversations: [newJobConversation]
       });
     }
 

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -25,9 +25,6 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         <Form.Item label={t("owners.fields.ownr_co_nm")} name="ownr_co_nm">
           <Input />
         </Form.Item>
-        <Form.Item label={t("owners.fields.accountingid")} name="accountingid">
-          <Input disabled/>
-        </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow header={t("owners.forms.address")}>
         <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">

client/src/graphql/owners.queries.js

@@ -48,7 +48,6 @@ export const QUERY_OWNER_BY_ID = gql`
   query QUERY_OWNER_BY_ID($id: uuid!) {
     owners_by_pk(id: $id) {
       id
-      accountingid
       allow_text_message
       ownr_addr1
       ownr_addr2

client/src/translations/en_us/common.json

@@ -2394,7 +2394,6 @@
         "selectexistingornew": "Select an existing owner record or create a new one. "
       },
       "fields": {
-        "accountingid": "Accounting ID",
         "address": "Address",
         "allow_text_message": "Permission to Text?",
         "name": "Name",
@@ -3058,7 +3057,6 @@
         "production_not_production_status": "Production not in Production Status",
         "production_over_time": "Production Level over Time",
         "psr_by_make": "Percent of Sales by Vehicle Make",
-        "purchase_return_ratio_excel": "Purchase & Return Ratio - Excel",
         "purchase_return_ratio_grouped_by_vendor_detail": "Purchase & Return Ratio by Vendor (Detail)",
         "purchase_return_ratio_grouped_by_vendor_summary": "Purchase & Return Ratio by Vendor (Summary)",
         "purchases_by_cost_center_detail": "Purchases by Cost Center (Detail)",
@@ -3084,7 +3082,6 @@
         "timetickets": "Time Tickets",
         "timetickets_employee": "Employee Time Tickets",
         "timetickets_summary": "Time Tickets Summary",
-        "total_loss_jobs": "Jobs Marked as Total Loss",
         "unclaimed_hrs": "Unflagged Hours",
         "void_ros": "Void ROs",
         "work_in_progress_committed_labour": "Work in Progress - Committed Labor",

client/src/translations/es/common.json

@@ -2394,7 +2394,6 @@
         "selectexistingornew": ""
       },
       "fields": {
-        "accountingid": "",
         "address": "Dirección",
         "allow_text_message": "Permiso de texto?",
         "name": "Nombre",
@@ -3058,7 +3057,6 @@
         "production_not_production_status": "",
         "production_over_time": "",
         "psr_by_make": "",
-        "purchase_return_ratio_excel": "",
         "purchase_return_ratio_grouped_by_vendor_detail": "",
         "purchase_return_ratio_grouped_by_vendor_summary": "",
         "purchases_by_cost_center_detail": "",
@@ -3084,7 +3082,6 @@
         "timetickets": "",
         "timetickets_employee": "",
         "timetickets_summary": "",
-        "total_loss_jobs": "",
         "unclaimed_hrs": "",
         "void_ros": "",
         "work_in_progress_committed_labour": "",

client/src/translations/fr/common.json

@@ -2394,7 +2394,6 @@
         "selectexistingornew": ""
       },
       "fields": {
-        "accountingid": "",
         "address": "Adresse",
         "allow_text_message": "Autorisation de texte?",
         "name": "Prénom",
@@ -3058,7 +3057,6 @@
         "production_not_production_status": "",
         "production_over_time": "",
         "psr_by_make": "",
-        "purchase_return_ratio_excel": "",
         "purchase_return_ratio_grouped_by_vendor_detail": "",
         "purchase_return_ratio_grouped_by_vendor_summary": "",
         "purchases_by_cost_center_detail": "",
@@ -3084,7 +3082,6 @@
         "timetickets": "",
         "timetickets_employee": "",
         "timetickets_summary": "",
-        "total_loss_jobs": "",
         "unclaimed_hrs": "",
         "void_ros": "",
         "work_in_progress_committed_labour": "",

client/src/utils/GraphQLClient.js

@@ -3,7 +3,7 @@ import { setContext } from "@apollo/client/link/context";
 import { HttpLink } from "@apollo/client/link/http"; //"apollo-link-http";
 import { RetryLink } from "@apollo/client/link/retry";
 import { WebSocketLink } from "@apollo/client/link/ws";
-import { getMainDefinition } from "@apollo/client/utilities";
+import { getMainDefinition, offsetLimitPagination } from "@apollo/client/utilities";
 //import { split } from "apollo-link";
 import apolloLogger from "apollo-link-logger";
 //import axios from "axios";
@@ -143,7 +143,36 @@ middlewares.push(
   new SentryLink().concat(roundTripLink.concat(retryLink.concat(errorLink.concat(authLink.concat(link)))))
 );
 
-const cache = new InMemoryCache({});
+const cache = new InMemoryCache({
+  typePolicies: {
+    conversations: {
+      fields: {
+        job_conversations: {
+          merge(existing = [], incoming = [], { readField }) {
+            const merged = new Map();
+
+            // Add existing data to the map
+            existing.forEach((jobConversation) => {
+              // Use `readField` to get the unique `jobid`, fallback to `__ref`
+              const jobId = readField("jobid", jobConversation) || jobConversation.__ref;
+              if (jobId) merged.set(jobId, jobConversation);
+            });
+
+            // Add or replace with incoming data
+            incoming.forEach((jobConversation) => {
+              // Use `readField` to get the unique `jobid`, fallback to `__ref`
+              const jobId = readField("jobid", jobConversation) || jobConversation.__ref;
+              if (jobId) merged.set(jobId, jobConversation);
+            });
+
+            // Return the merged data as an array
+            return Array.from(merged.values());
+          }
+        }
+      }
+    }
+  }
+});
 const client = new ApolloClient({
   link: ApolloLink.from(middlewares),
   cache,

client/src/utils/TemplateConstants.js

@@ -2184,30 +2184,6 @@ export const TemplateList = (type, context) => {
             },
             group: "payroll",
             adp_payroll: true
-          },
-          purchase_return_ratio_excel: {
-            title: i18n.t("reportcenter.templates.purchase_return_ratio_excel"),
-            subject: i18n.t("reportcenter.templates.purchase_return_ratio_excel"),
-            key: "purchase_return_ratio_excel",
-            //idtype: "vendor",
-            reporttype: "excel",
-            disabled: false,
-            rangeFilter: {
-              object: i18n.t("reportcenter.labels.objects.bills"),
-              field: i18n.t("bills.fields.date")
-            },
-            group: "purchases"
-          },
-          total_loss_jobs: {
-            title: i18n.t("reportcenter.templates.total_loss_jobs"),
-            subject: i18n.t("reportcenter.templates.total_loss_jobs"),
-            key: "total_loss_jobs",
-            disabled: false,
-            rangeFilter: {
-              object: i18n.t("reportcenter.labels.objects.jobs"),
-              field: i18n.t("jobs.fields.date_open")
-            },
-            group: "jobs"
           }
         }
       : {}),

package.json

@@ -41,7 +41,6 @@
     "cors": "2.8.5",
     "crisp-status-reporter": "^1.2.2",
     "csrf": "^3.1.0",
-    "dd-trace": "^5.28.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -52,6 +51,7 @@
     "intuit-oauth": "^4.1.3",
     "ioredis": "^5.4.1",
     "json-2-csv": "^5.5.6",
+    "juice": "^11.0.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
@@ -63,7 +63,6 @@
     "recursive-diff": "^1.0.9",
     "redis": "^4.7.0",
     "rimraf": "^6.0.1",
-    "skia-canvas": "^2.0.0",
     "soap": "^1.1.6",
     "socket.io": "^4.8.1",
     "socket.io-adapter": "^2.5.5",

server.js

@@ -4,14 +4,6 @@ require("dotenv").config({
   path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
 });
 
-if (process.env.NODE_ENV) {
-  const tracer = require("dd-trace").init({
-    profiling: true,
-    env: process.env.NODE_ENV,
-    service: "bodyshop-api"
-  });
-}
-
 const cors = require("cors");
 const http = require("http");
 const Redis = require("ioredis");

server/accounting/qbo/qbo-receivables.js

@@ -328,7 +328,6 @@ async function InsertOwner(oauthClient, qbo_realmId, req, job, isThreeTier, pare
       PostalCode: job.ownr_zip,
       CountrySubDivisionCode: job.ownr_st
     },
-    ...(job.ownr_ea ? { BillEmail: { Address: job.ownr_ea.trim() } } : {}),
     ...(isThreeTier
       ? {
           Job: true,
@@ -396,7 +395,7 @@ async function InsertJob(oauthClient, qbo_realmId, req, job, parentTierRef) {
       PostalCode: job.ownr_zip,
       CountrySubDivisionCode: job.ownr_st
     },
-    ...(job.ownr_ea ? { BillEmail: { Address: job.ownr_ea.trim() } } : {}),
+
     Job: true,
     ParentRef: {
       value: parentTierRef.Id
@@ -557,8 +556,7 @@ async function InsertInvoice(oauthClient, qbo_realmId, req, job, bodyshop, paren
       Line3: `${job.ownr_city || ""}, ${job.ownr_st || ""} ${job.ownr_zip || ""}`.trim(),
       Line2: job.ownr_addr1 || "",
       Line1: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`
-    },
-    ...(job.ownr_ea ? { BillEmail: { Address: job.ownr_ea.trim() } } : {})
+    }
   };
 
   logger.log("qbo-receivable-objectlog", "DEBUG", req.user.email, job.id, {
@@ -675,8 +673,7 @@ async function InsertInvoiceMultiPayerInvoice(
       Line3: `${job.ownr_city || ""}, ${job.ownr_st || ""} ${job.ownr_zip || ""}`.trim(),
       Line2: job.ownr_addr1 || "",
       Line1: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`
-    },
-    ...(job.ownr_ea ? { BillEmail: { Address: job.ownr_ea.trim() } } : {})
+    }
   };
 
   logger.log("qbo-receivable-objectlog", "DEBUG", req.user.email, job.id, {

server/middleware/validateCanvasInputMiddleware.js

@@ -1,32 +0,0 @@
-const { isObject } = require("lodash");
-
-const validateCanvasInputMiddleware = (req, res, next) => {
-  const { values, keys, override, w, h } = req.body;
-
-  if (!Array.isArray(values) || !Array.isArray(keys)) {
-    return res.status(400).send("Invalid input: 'values' and 'keys' must be arrays.");
-  }
-
-  if (values.some((value) => typeof value !== "number")) {
-    return res.status(400).send("Invalid input: 'values' must be an array of numbers.");
-  }
-
-  if (keys.some((key) => typeof key !== "string")) {
-    return res.status(400).send("Invalid input: 'keys' must be an array of strings.");
-  }
-
-  if (override && !isObject(override)) {
-    return res.status(400).send("Override must be an object");
-  }
-
-  if (w && (!Number.isFinite(w) || w <= 0)) {
-    return res.status(400).send("Width must be a positive number");
-  }
-  if (h && (!Number.isFinite(h) || h <= 0)) {
-    return res.status(400).send("Height must be a positive number");
-  }
-
-  next(); // Proceed to the next middleware or route handler
-};
-
-module.exports = validateCanvasInputMiddleware;

server/middleware/validateCanvasRequestMiddleware.js

@@ -0,0 +1,20 @@
+const { isObject } = require("lodash");
+
+const validateCanvasRequestMiddleware = (req, res, next) => {
+  const { w, h, values, keys, override } = req.body;
+  if (!values || !keys) {
+    return res.status(400).send("Missing required data");
+  }
+  if (override && !isObject(override)) {
+    return res.status(400).send("Override must be an object");
+  }
+  if (w && (!Number.isFinite(w) || w <= 0)) {
+    return res.status(400).send("Width must be a positive number");
+  }
+  if (h && (!Number.isFinite(h) || h <= 0)) {
+    return res.status(400).send("Height must be a positive number");
+  }
+  next();
+};
+
+module.exports = validateCanvasRequestMiddleware;

server/render/canvas-handler.js

@@ -1,149 +1,124 @@
 const { createCanvas } = require("canvas");
-const { Canvas, FontLibrary } = require("skia-canvas");
 const Chart = require("chart.js/auto");
+const logger = require("../utils/logger");
 
 const { backgroundColors, borderColors } = require("./canvas-colors");
-const { defaultsDeep, isNumber } = require("lodash");
-
-const CANVAS_QUEUE_LIMIT = 100;
+const { isObject, defaultsDeep, isNumber } = require("lodash");
 
 let isProcessing = false;
 const requestQueue = [];
 
-try {
-  FontLibrary.use("Montserrat", [
-    "/usr/share/fonts/Montserrat-Regular.ttf",
-    "/usr/share/fonts/Montserrat-Bold.ttf",
-    "/usr/share/fonts/Montserrat-Italic.ttf"
-  ]);
-} catch (error) {
-  console.error(
-    "Error loading fonts Skia Canvas Fonts, please be sure to install Montserrat font package",
-    error.message
-  );
-}
+const processCanvasRequest = async (req, res) => {
+  try {
+    const { w, h, values, keys, override } = req.body;
+    logger.log("inbound-canvas-creation", "debug", "jsr", null, { w, h, values, keys, override });
 
-// Utility to create a chart configuration
-const getChartConfiguration = (keys, values, override) => {
-  const defaultConfiguration = {
-    type: "doughnut",
-    data: {
-      labels: keys,
-      datasets: [
-        {
-          data: values,
-          backgroundColor: backgroundColors,
-          borderColor: borderColors,
-          borderWidth: 1
-        }
-      ]
-    },
-    options: {
-      devicePixelRatio: 4,
-      responsive: false,
-      animation: false,
-      maintainAspectRatio: true,
-      circumference: 180,
-      rotation: -90,
-      plugins: {
-        legend: {
-          labels: {
-            boxWidth: 20,
-            font: {
-              family: "'Montserrat'",
-              size: 10,
-              style: "normal",
-              weight: "normal"
-            }
-          },
-          position: "left"
+    // Set dimensions with defaults
+    const width = isNumber(w) ? w : 500;
+    const height = isNumber(h) ? h : 275;
+
+    const configuration = {
+      type: "doughnut",
+      data: {
+        labels: keys,
+        datasets: [
+          {
+            data: values,
+            backgroundColor: backgroundColors,
+            borderColor: borderColors,
+            borderWidth: 1
+          }
+        ]
+      },
+      options: {
+        animation: false,
+        devicePixelRatio: 4,
+        responsive: false,
+        maintainAspectRatio: true,
+        circumference: 180,
+        rotation: -90,
+        plugins: {
+          legend: {
+            labels: {
+              boxWidth: 20,
+              font: {
+                family: "'Montserrat'",
+                size: 10,
+                style: "normal",
+                weight: "normal"
+              }
+            },
+            position: "left"
+          }
         }
       }
-    }
-  };
+    };
 
-  return defaultsDeep(override || {}, defaultConfiguration);
-};
+    // If we have a valid override object, merge it with the default configuration object.
+    // This allows for you to override the default configuration with a custom one.
+    const defaults = () => {
+      if (!override || !isObject(override)) {
+        return configuration;
+      }
+      return defaultsDeep(override, configuration);
+    };
 
-const processCanvasRequest = async (req, res, isSkia = false) => {
-  const { logger } = req;
-  const { w, h, values, keys, override } = req.body;
+    // Generate chart
+    let canvas = createCanvas(width, height);
+    let ctx = canvas.getContext("2d");
+    let chart = new Chart(ctx, defaults());
+    const result = canvas.toDataURL();
 
-  logger.log("inbound-canvas-creation", "debug", "jsr", null, { w, h, values, keys, override });
+    chart.destroy();
+    canvas.width = 0;
+    canvas.height = 0;
+    ctx = null;
+    canvas = null;
+    chart = null;
 
-  // Default width and height
-  const width = isNumber(w) && w > 0 ? w : 500;
-  const height = isNumber(h) && h > 0 ? h : 275;
-
-  const configuration = getChartConfiguration(keys, values, override);
-
-  // Placeholders to allow fine control over GAC
-  let canvas = null;
-  let ctx = null;
-  let chart = null;
-  let chartImage = null;
-
-  try {
-    // Create the canvas
-    canvas = isSkia ? new Canvas(width, height) : createCanvas(width, height);
-    ctx = canvas.getContext("2d");
-
-    // Render the chart
-    chart = new Chart(ctx, configuration);
-
-    // Generate and send the image
-    chartImage = isSkia ? (await canvas.toBuffer("image/png")).toString("base64") : canvas.toDataURL();
-
-    res.status(200).send(isSkia ? `data:image/png;base64,${chartImage}` : chartImage);
+    res.status(200).send(result);
   } catch (error) {
-    // Log the error and send the response
-    logger.log("canvas-error", "error", "jsr", null, { error: error.message });
-    res.status(500).send("Failed to generate canvas.");
-  } finally {
-    // Cleanup resources
-    if (chart) {
-      chart.destroy();
+    if (chart) chart.destroy();
+    if (canvas) {
+      canvas.width = 0;
+      canvas.height = 0;
     }
-    ctx = null; // Explicitly nullify for garbage collection
-    canvas = null; // Explicitly nullify for garbage collection
-    chartImage = null;
-  }
-};
+    ctx = null;
+    canvas = null;
+    chart = null;
 
-const enqueueRequest = (req, res, isSkia) => {
-  if (requestQueue.length >= CANVAS_QUEUE_LIMIT) {
-    res.status(503).send("Server is busy. Please try again later.");
-    return false;
+    logger.log("inbound-canvas-creation", "error", "jsr", null, { error: error.message, stack: error.stack });
+    res.status(500).send("Error generating canvas");
   }
-  requestQueue.push({ req, res, isSkia });
-  req.logger.log("inbound-canvas-creation-queue", "debug", "jsr", null, { queue: requestQueue.length });
-  return true;
 };
 
 const processNextInQueue = async () => {
-  while (requestQueue.length > 0) {
-    const { req, res, isSkia } = requestQueue.shift();
-    try {
-      await processCanvasRequest(req, res, isSkia);
-    } catch (err) {
-      console.error("canvas-queue-error", "error", "jsr", null, { error: err.message });
-    }
+  if (requestQueue.length === 0) {
+    isProcessing = false;
+    return;
   }
-  isProcessing = false;
+
+  const { req, res } = requestQueue.shift();
+  await processCanvasRequest(req, res);
+  processNextInQueue();
 };
 
 exports.canvastest = function (req, res) {
   res.status(200).send("OK");
 };
 
-exports.canvas = async (req, res) => {
-  if (isProcessing || !enqueueRequest(req, res, false)) return;
-  isProcessing = true;
-  processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message }));
-};
+exports.canvas = async function (req, res) {
+  if (isProcessing) {
+    if (requestQueue.length >= 100) {
+      // Set a maximum queue size
+      return res.status(503).send("Server is busy. Please try again later.");
+    }
+    requestQueue.push({ req, res });
+    logger.log("inbound-canvas-creation-queue", "debug", "jsr", null, { queue: requestQueue.length });
+    return;
+  }
 
-exports.canvasSkia = async (req, res) => {
-  if (isProcessing || !enqueueRequest(req, res, true)) return;
   isProcessing = true;
-  processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message }));
+  await processCanvasRequest(req, res);
+  processNextInQueue();
 };

server/render/inlinecss.js

@@ -3,24 +3,36 @@ require("dotenv").config({
   path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
 });
 const logger = require("../utils/logger");
-const inlineCssTool = require("inline-css");
+//const inlineCssTool = require("inline-css");
+const juice = require("juice");
 
-exports.inlinecss = (req, res) => {
+exports.inlinecss = async (req, res) => {
   //Perform request validation
-
   logger.log("email-inline-css", "DEBUG", req.user.email, null, null);
 
   const { html, url } = req.body;
-
-  inlineCssTool(html, { url: url })
-    .then((inlinedHtml) => {
-      res.send(inlinedHtml);
-    })
-    .catch((error) => {
-      logger.log("email-inline-css-error", "ERROR", req.user.email, null, {
-        error
-      });
-
-      res.send(error);
+  try {
+    const inlinedHtml = juice(html, {
+      applyAttributesTableElements: false,
+      preserveMediaQueries: false,
+      applyWidthAttributes: false
     });
+    res.send(inlinedHtml);
+  } catch (error) {
+    logger.log("email-inline-css-error", "ERROR", req.user.email, null, {
+      error
+    });
+    res.send(error.message);
+  }
+
+  // inlineCssTool(html, { url: url })
+  //   .then((inlinedHtml) => {
+  //     res.send(inlinedHtml);
+  //   })
+  //   .catch((error) => {
+  //     logger.log("email-inline-css-error", "ERROR", req.user.email, null, {
+  //       error
+  //     });
+
+  //   });
 };

server/routes/renderRoutes.js

@@ -2,12 +2,11 @@ const express = require("express");
 const router = express.Router();
 const { inlinecss } = require("../render/inlinecss");
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
-const { canvas, canvasSkia } = require("../render/canvas-handler");
-const validateCanvasInputMiddleware = require("../middleware/validateCanvasInputMiddleware");
+const validateCanvasRequestMiddleware = require("../middleware/validateCanvasRequestMiddleware");
+const { canvas } = require("../render/canvas-handler");
 
 // Define the route for inline CSS rendering
 router.post("/inlinecss", validateFirebaseIdTokenMiddleware, inlinecss);
-router.post("/canvas", [validateFirebaseIdTokenMiddleware, validateCanvasInputMiddleware], canvas);
-router.post("/canvas-skia", [validateFirebaseIdTokenMiddleware, validateCanvasInputMiddleware], canvasSkia);
+router.post("/canvas", [validateFirebaseIdTokenMiddleware, validateCanvasRequestMiddleware], canvas);
 
 module.exports = router;