From 6ebebccab24c12773749c10496baba333b87cf79 Mon Sep 17 00:00:00 2001
From: karthikalakshmi <karthigalakshmi@pozomind.com>
Date: Tue, 24 Mar 2026 12:45:51 +0530
Subject: [PATCH] Fix #301 Html2pdf issue solving

---
 package.json                                  |  1 +
 src/Pages/paymentpdfPage/LinkUrlCreate.jsx    | 51 ++++++++++++-------
 .../UtillComponents/BSNavBarComponents.scss   |  2 +-
 src/index.css                                 |  4 +-
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 5c6f84f..b880d73 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "esbuild": "^0.27.4",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
diff --git a/src/Pages/paymentpdfPage/LinkUrlCreate.jsx b/src/Pages/paymentpdfPage/LinkUrlCreate.jsx
index bc26d20..5e8e3a0 100644
--- a/src/Pages/paymentpdfPage/LinkUrlCreate.jsx
+++ b/src/Pages/paymentpdfPage/LinkUrlCreate.jsx
@@ -1,6 +1,5 @@
 // InvoiceDetail.jsx
 import React, { useEffect, useRef, useState } from 'react';
-import html2pdf from 'html2pdf.js';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import {
@@ -47,7 +46,8 @@ import PrintStyle13 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintSt
 import PrintA5Style11 from '../BookingScreen/PrintTemplates/A4/PrintStyleA5';
 import InvoiceTemplate from '../BookingScreen/PrintTemplates/A4/A4Standard';
 import PrintA4Style11 from '../BookingScreen/PrintTemplates/A4/PrintA4Style11';
-
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 const apiUrlToken = import.meta.env.ENV_API_URL_TOKEN;
 
 const LinkUrlCreate = () => {
@@ -126,7 +126,7 @@ const commonModulePreference = appPreferences?.find(
   };
 
   const addSession = async () => {
-    if (!sessionStorage.getItem('auth')) {
+    if (!getSession('auth')) {
       try {
         let data = {
           username: '1000000001',
@@ -144,7 +144,7 @@ const commonModulePreference = appPreferences?.find(
         );
 
         const { token } = response?.data;
-        sessionStorage.setItem('auth', token);
+        sessionStore('auth', token);
         sessionStore('LoginType', 'Kiosk');
       } catch (error) {
         console.error('Error adding session:', error);
@@ -307,21 +307,38 @@ const commonModulePreference = appPreferences?.find(
   // };
 
 
-  const handleDownloadPDF = () => {
-    const element = printRef.current;
-    const options = {
-      // margin: 0.5,
-      margin: 0,
-      filename: "document.pdf",
-      image: { type: "jpeg", quality: 0.98 },
-      html2canvas: { scale: 2, useCORS: true }, // makes CSS + images sharper
-      // jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
-      jsPDF: { unit: "px", format: [element.offsetWidth, element.offsetHeight] },
-    };
+  // const handleDownloadPDF = () => {
+  //   const element = printRef.current;
+  //   const options = {
+  //     // margin: 0.5,
+  //     margin: 0,
+  //     filename: "document.pdf",
+  //     image: { type: "jpeg", quality: 0.98 },
+  //     html2canvas: { scale: 2, useCORS: true }, // makes CSS + images sharper
+  //     // jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
+  //     jsPDF: { unit: "px", format: [element.offsetWidth, element.offsetHeight] },
+  //   };
 
-    html2pdf().set(options).from(element).save();
-  };
+  //   html2pdf().set(options).from(element).save();
+  // };
+const handleDownloadPDF = async () => {
+  const element = printRef.current;
 
+  const canvas = await html2canvas(element, {
+    scale: 2,
+    useCORS: true
+  });
+
+  const imgData = canvas.toDataURL("image/jpeg", 0.98);
+
+  const pdf = new jsPDF({
+    unit: "px",
+    format: [canvas.width, canvas.height],
+  });
+
+  pdf.addImage(imgData, "JPEG", 0, 0, canvas.width, canvas.height);
+  pdf.save("document.pdf");
+};
   const scrollToPage = (pageIndex) => {
     const pages = containerRef.current?.children;
     if (pages && pages[pageIndex]) {
diff --git a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss
index 453bd05..0664353 100644
--- a/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss
+++ b/src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss
@@ -246,7 +246,7 @@
 }
 
 .BSC1Payment-HoldModel-delete {
-  color: var(-ERROR_COLOR);
+  color: var(--ERROR_COLOR);
   padding-top: 5px;
   font-size: 25px;
 }
diff --git a/src/index.css b/src/index.css
index 36850ea..2d2d833 100644
--- a/src/index.css
+++ b/src/index.css
@@ -288,8 +288,8 @@ a {
 
 .payment-error-msg {
   font-size: 12px;
-  font-family: VAR(--PARA_FONT_FAMILY);
-  color: VAR(--ERROR_COLOR);
+  font-family: var(--PARA_FONT_FAMILY);
+  color: var(--ERROR_COLOR);
 }
 
 /* Disable all Ant Design table animations and hover effects */