Merge pull request #1572 from gtech-mulearn/dev

devserver

package.json

@@ -19,6 +19,8 @@
         "file-saver": "^2.0.5",
         "formik": "^2.2.9",
         "framer-motion": "^10.18.0",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^2.5.1",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.4",
         "razorpay": "^2.9.3",

src/modules/Public/Donation/Donation.tsx

@@ -42,6 +42,8 @@ const Donation = () => {
                 mobile: mobile,
                 pan: pan
             });
+            //save data to local storage
+            localStorage.setItem("donationData", JSON.stringify({ amount, name, company, email, mobile, pan }));// saving the data because the server does not return all the required data
         } else {
             submitForm({
                 amount: amount,
@@ -50,6 +52,8 @@ const Donation = () => {
                 mobile: mobile,
                 pan: pan
             });
+            //save data to local storage
+            localStorage.setItem("donationData", JSON.stringify({ amount, name, email, mobile, pan }));
         }
     };
 

src/modules/Public/Donation/assets/receipt/.svg

@@ -0,0 +1,9 @@
+<svg width="65" height="86" viewBox="0 0 65 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.6262 46.0467C63.0418 46.0467 65 48.005 65 50.4206V53.4579C65 57.4839 61.7363 60.7477 57.7103 60.7477C51.6355 60.7477 47.1402 58.7227 44.2243 54.6729C40.4174 59.8567 34.5452 62.4486 26.6075 62.4486C21.5492 62.4486 15.6729 66.1064 15.6729 71.1646V77.2103C15.6729 81.5382 12.1644 85.0467 7.83645 85.0467C3.5085 85.0467 0 81.5382 0 77.2103V7.83645C0 3.50851 3.5085 0 7.83645 0C12.1644 0 15.6729 3.5085 15.6729 7.83644V35.2336C15.6729 39.2835 16.7664 42.4019 18.9533 44.5888C21.1402 46.7757 24.0561 47.8692 27.7009 47.8692C31.7508 47.8692 34.9907 46.6137 37.4206 44.1028C39.8505 41.5919 41.0654 37.8255 41.0654 32.8037V7.83645C41.0654 3.5085 44.5739 0 48.9019 0C53.2298 0 56.7383 3.5085 56.7383 7.83644V42.1589C56.7383 44.7508 58.0343 46.0467 60.6262 46.0467Z" fill="url(#paint0_linear_1_38)"/>
+<defs>
+<linearGradient id="paint0_linear_1_38" x1="-6.47588" y1="-6.75146" x2="74.6105" y2="55.3206" gradientUnits="userSpaceOnUse">
+<stop offset="0.135417" stop-color="#2E85FE"/>
+<stop offset="1" stop-color="#D725FF"/>
+</linearGradient>
+</defs>
+</svg>

src/modules/Public/Donation/pages/DonationSuccess.tsx

@@ -1,12 +1,17 @@
 import { Link } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect,useState,useRef } from "react";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
 import styles from "./DonationSuccess.module.css";
 import NotFound from "../../../../components/NotFound";
+import Receipt from "./receipt/Receipt";
+
+import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
 
 const DonationSuccess = () => {
-    const pdfData = localStorage.getItem("pdfData");
+    const pdfElement = useRef(null!);
+    const pdfData = localStorage.getItem("pdfData") as string;
 
     const base64toBlob = (base64data: any) => {
         const byteString = atob(base64data.split(",")[1]);
@@ -20,26 +25,45 @@ const DonationSuccess = () => {
     };
 
     const downloadReceipt = () => {
-        const base64data = localStorage.getItem("pdfData");
+        // const base64data = localStorage.getItem("pdfData");
 
-        if (base64data) {
-            const pdfBlob = base64toBlob(base64data);
-            const pdfUrl = URL.createObjectURL(pdfBlob);
-            const link = document.createElement("a");
-            link.href = pdfUrl;
-            link.download = "downloaded-file.pdf";
+        // if (base64data) {
+        //     const pdfBlob = base64toBlob(base64data);
+        //     const pdfUrl = URL.createObjectURL(pdfBlob);
+        //     const link = document.createElement("a");
+        //     link.href = pdfUrl;
+        //     link.download = "downloaded-file.pdf";
 
-            document.body.appendChild(link);
-            link.click();
+        //     document.body.appendChild(link);
+        //     link.click();
 
-            document.body.removeChild(link);
-        } else {
-            console.error("No PDF data found in localStorage.");
-        }
+        //     document.body.removeChild(link);
+        // } else {
+        //     console.error("No PDF data found in localStorage.");
+        // }
+
+        //to handel the pdf data in the forndend
+        html2canvas(pdfElement.current).then((canvas) => {
+            const imgData = canvas.toDataURL("image/png");
+            const pdf = new jsPDF("p", "mm", "a4");
+            pdf.addImage(imgData, "PNG", 0, 0, 210, 297);
+            pdf.save("Receipt.pdf");
+
+            //to download the png
+            // const link = document.createElement('a');
+            // link.href = imgData; // Set the href to the PNG data URL
+            // link.download = 'Receipt.png'; // Set the desired filename for the download
+
+            // // Append the link to the document, click it to trigger the download, and then remove it
+            // document.body.appendChild(link);
+            // link.click();
+            // document.body.removeChild(link);
+        });
     };
 
     const handleUnload = () => {
         localStorage.removeItem("pdfData");
+        localStorage.removeItem('donationData');
     };
 
     useEffect(() => {
@@ -50,54 +74,62 @@ const DonationSuccess = () => {
     }, []);
 
     return pdfData ? (
-        <div className={styles.LClandingPage}>
-            <Navbar />
-
-            <div className={styles.LClandingPageHero}>
-                <div className={styles.backgroundImage}>
-                    <img
-                        src="https://i.ibb.co/cCvB4r6/Learning-BG.png"
-                        alt="textured background"
-                    ></img>
-                </div>
-                <div className={styles.dash}></div>
-                <div className={styles.heroTitle}>
-                    <span>
-                        <b>Thank You!</b>{" "}
-                    </span>
-                    <b>We appreciate your support</b>
-                </div>
-                <p>
-                    Your donation was successful. A confirmation email has been
-                    sent.
-                </p>
+        <>
+            <div ref={pdfElement} style={{
+                // position: "absolute",
+                // top: "-1000px",
+            }}>
+                <Receipt />
             </div>
+            <div className={styles.LClandingPage}>
+                <Navbar />
 
-            <div className={styles.DonationSection}>
-                <div className={styles.DonationFormElement}>
-                    <div className={styles.SuccessMessage}>
-                        <h1>Success!</h1>
-                        <p>
-                            Thank you for your donation. Your support means a
-                            lot to us.
-                        </p>
+                <div className={styles.LClandingPageHero}>
+                    <div className={styles.backgroundImage}>
+                        <img
+                            src="https://i.ibb.co/cCvB4r6/Learning-BG.png"
+                            alt="textured background"
+                        ></img>
                     </div>
-                    <div className={styles.ButtonContainer}>
-                        <Link to="/">
-                            <button className={styles.homeButton}>Home</button>
-                        </Link>
-                        <button
-                            className={styles.downloadButton}
-                            onClick={downloadReceipt}
-                        >
-                            Download Receipt
-                        </button>
+                    <div className={styles.dash}></div>
+                    <div className={styles.heroTitle}>
+                        <span>
+                            <b>Thank You!</b>{" "}
+                        </span>
+                        <b>We appreciate your support</b>
                     </div>
+                    <p>
+                        Your donation was successful. A confirmation email has been
+                        sent.
+                    </p>
                 </div>
-            </div>
 
-            <Footer />
-        </div>
+                <div className={styles.DonationSection}>
+                    <div className={styles.DonationFormElement}>
+                        <div className={styles.SuccessMessage}>
+                            <h1>Success!</h1>
+                            <p>
+                                Thank you for your donation. Your support means a
+                                lot to us.
+                            </p>
+                        </div>
+                        <div className={styles.ButtonContainer}>
+                            <Link to="/">
+                                <button className={styles.homeButton}>Home</button>
+                            </Link>
+                            <button
+                                className={styles.downloadButton}
+                                onClick={downloadReceipt}
+                            >
+                                Download Receipt
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer />
+            </div>
+        </>
     ) : (
         <div>
             <NotFound />