Merge pull request #1591 from gtech-mulearn/dev

dev

src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.module.css

@@ -0,0 +1,29 @@
+.certificate_container {
+    display: flex;
+    align-items: center; /* Centers horizontally */
+    justify-content: center; /* Centers vertically */
+    margin-top: 20px;
+}
+
+.certificate {
+    padding: 20px;
+    border: 2px solid #000;
+    border-radius: 10px;
+    width: 80%;
+    text-align: center;
+    background-color: #20151d;
+}
+
+.certificate h1 {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.certificate p {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.certificate strong {
+    font-weight: bold;
+}

src/modules/Dashboard/modules/Profile/components/Certificate/Certificate.tsx

@@ -0,0 +1,121 @@
+import React, { useRef, useEffect } from "react";
+import html2canvas from "html2canvas";
+import MulearnBrand from "../../assets/svg/MulearnBrand";
+
+type CertificateProps = {
+    name: string;
+    muid: string;
+    level: number;
+    karma: number;
+    interestGroups: string[];
+};
+
+const Certificate: React.FC<CertificateProps> = ({
+    name,
+    muid,
+    level,
+    karma,
+    interestGroups
+}) => {
+    const pdfElement = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        handleDownloadPDF();
+    }, []);
+
+    const handleDownloadPDF = () => {
+        html2canvas(pdfElement.current!).then(canvas => {
+            const imgData = canvas.toDataURL("image/png");
+            // Create a link element
+            const link = document.createElement("a");
+            // Set the download attribute with a filename
+            link.download = "Certificate.png";
+            // Set the href attribute to the image data URL
+            link.href = imgData;
+            // Append the link to the document body (this is necessary for Firefox)
+            document.body.appendChild(link);
+            // Trigger the download
+            link.click();
+            // Remove the link from the document
+            document.body.removeChild(link);
+        });
+    };
+// MODIFY THIS RETURN TO STYLE THE CERTIFICATE
+    return (
+        <>
+            <div
+                style={{
+                    display: "flex",
+                    alignItems: "center", // Centers horizontally
+                    justifyContent: "center", // Centers vertically
+                    margin: "50px"
+                }}
+                ref={pdfElement}
+            >
+                <div
+                    style={{
+                        padding: "20px",
+                        border: "2px solid #000",
+                        borderRadius: "10px",
+                        width: "80%",
+                        textAlign: "center",
+                        backgroundColor: "#20151d",
+                        color: "#fff"
+                    }}
+                    id="certificate"
+                >
+                    <div
+                        style={{
+                            display: "flex",
+                            alignContent: "end",
+                            justifyContent: "end"
+                        }}
+                    >
+                        <MulearnBrand />
+                    </div>
+                    <h1
+                        style={{
+                            fontSize: "32px",
+                            fontWeight: "bold",
+                            textDecoration: "underline"
+                        }}
+                    >
+                        Certificate of Achievement
+                    </h1>
+                    <div
+                        style={{
+                            display: "flex",
+                            alignContent: "center",
+                            justifyContent: "center",
+                            paddingTop: "50px"
+                        }}
+                    >
+                        This is to certify that {name + " "}
+                        has successfully achieved Level: {level + " "}
+                        with a total of {karma} Karma points
+                        <br />
+                        and is actively participating in the following interest
+                        groups:
+                        {" " + interestGroups.join(", ") + " "}
+                    </div>
+                    muID: {muid}
+                    <div
+                        style={{
+                            display: "flex",
+                            paddingTop: "50px"
+                        }}
+                    >
+                        <br />
+                        Signature: __________________________
+                        <br />
+                        muLearn Team
+                        <br />
+                        Dated: {new Date().toLocaleDateString()}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Certificate;

src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.module.css

@@ -16,7 +16,7 @@
     .share_pop_up {
         margin: 15dvh auto auto;
         height: auto;
-        width: 400px;
+        width: 450px;
         background: white;
         border-radius: 10px;
         box-shadow: 1px 1px 20px 1px #8c8c8c47;
@@ -39,10 +39,12 @@
             }
 
             & button {
+
                 width: 100%;
                 padding: 16px;
-                background: #f3f3f4;
+                background: red;
                 border-radius: 10px;
+                color: white
             }
 
             .profile_state {
@@ -64,6 +66,7 @@
                 gap: 10px;
                 width: 100%;
 
+
                 .embed_copy_btn {
                     background: #456ff6;
                     color: #fff;
@@ -188,4 +191,4 @@
     .share_pop_up_container .share_pop_up {
         width: 90vw;
     }
-}
+}

src/modules/Dashboard/modules/Profile/components/ShareProfilePopUp/pages/ShareProfilePopUp.tsx

@@ -1,9 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
+import ReactDOM from "react-dom";
 import styles from "./ShareProfilePopUp.module.css";
 import { Switch } from "@chakra-ui/react";
 import { MuButton } from "@/MuLearnComponents/MuButtons/MuButton";
 import { saveAs } from "file-saver";
 import { fetchQRCode } from "../services/api";
+import Certificate from "../../Certificate/Certificate";
+
+import html2canvas from "html2canvas";
 
 type Props = {
     popUP: boolean;
@@ -14,32 +18,63 @@ type Props = {
     putIsPublic: (isPublic: boolean) => void;
 };
 
-const ShareProfilePopUp = (props: Props) => {
+const ShareProfilePopUp: React.FC<Props> = props => {
     const [copy, setCopy] = useState(false);
     const [blob, setBlob] = useState<any>();
     const [embedSize, setEmbedSize] = useState("100px");
+    const certificateRef = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
         fetchQRCode(setBlob);
     }, []);
+
     useEffect(() => {
         window.history.pushState(null, "", window.location.href);
         window.addEventListener("popstate", () => {
             props.setPopUP(false);
         });
     }, [props.popUP]);
+
     const downloadQR = () => {
         saveAs(blob, `${props.userProfile.muid}.png`);
     };
+
+    const downloadPNG = () => {
+        if (certificateRef.current) {
+            html2canvas(certificateRef.current).then((canvas) => {
+                const imgData = canvas.toDataURL('image/png');
+                const link = document.createElement('a');
+                link.href = imgData;
+                link.download = 'certificate.png';
+                link.click();
+            });
+        }
+    };
+
+    const openCertificateInNewTab = () => {
+        const newTab = window.open('', '_blank');
+        if (newTab) {
+            const certificateComponent = (
+                <Certificate
+                    name={props.userProfile.full_name}
+                    muid={props.userProfile.muid}
+                    level={props.userProfile.level}
+                    karma={props.userProfile.karma}
+                    interestGroups={props.userProfile.interest_groups}
+                />
+            );
+            newTab.document.body.innerHTML = '<div id="certificate-root"></div>';
+            ReactDOM.render(certificateComponent, newTab.document.getElementById('certificate-root'));
+        }
+    };
+
     return (
         <>
             <div
                 style={
                     props.popUP
                         ? { transform: "scale(1)" }
-                        : {
-                              transform: "scale(0)"
-                              // opacity: "0",
-                          }
+                        : { transform: "scale(0)" }
                 }
                 className={styles.share_pop_up_container}
                 onKeyDown={e => {
@@ -70,19 +105,16 @@ const ShareProfilePopUp = (props: Props) => {
                         {props.profileStatus && (
                             <div className={styles.share_profile_container}>
                                 <div className={styles.qr_code}>
-                                    <img src={blob} alt="" />
+                                    <img src={blob} alt="QR Code" />
                                 </div>
-                                {/* Todo: Reusable copy link component */}
                                 <div className={styles.link}>
                                     <p>
                                         {
                                             import.meta.env
                                                 .VITE_FRONTEND_URL as string
                                         }
-                                        /profile/
-                                        {props.userProfile.muid}
+                                        /profile/{props.userProfile.muid}
                                     </p>
-
                                     <i
                                         onClick={() => {
                                             navigator.clipboard.writeText(
@@ -100,11 +132,9 @@ const ShareProfilePopUp = (props: Props) => {
                                         }}
                                         className="fi fi-sr-link"
                                     >
-                                        {/* Todo: Create as left Side Tooltip Component for below component */}
                                         <div className={styles.toast}>
                                             <p>{!copy ? "Copy" : "Copied!"}</p>
                                         </div>
-                                        {/* Todo: Create as left Side Tooltip Component for above component*/}
                                     </i>
                                 </div>
                             </div>
@@ -141,30 +171,43 @@ const ShareProfilePopUp = (props: Props) => {
                                     </select>
                                 </button>
                                 <MuButton
+                                    className={styles.embed_copy_btn}
                                     style={{
-                                        border: "1px solid #456FF6",
-                                        color: "#000",
-                                        margin: "0px 0px -8px 0px",
                                         display: "flex",
-                                        justifyContent: "center",
-                                        padding: "26px 16px",
-                                        minWidth: "auto"
+                                        justifyContent: "center"
                                     }}
                                     text={"Download QR"}
-                                    onClick={() => {
-                                        downloadQR();
-                                    }}
+                                    onClick={downloadQR}
                                 />
                             </div>
                         )}
-                        <button onClick={() => props.setPopUP(false)}>
-                            {!props.profileStatus ? "Cancel" : "Close"}
-                        </button>
+                        <div
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                width: "100%"
+                            }}
+                        >
+                            <MuButton
+                                style={{
+                                    background: "#456ff6",
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    color: "#fff"
+                                }}
+                                text={"Download Certificate"}
+                                onClick={openCertificateInNewTab}
+                            />
+                            <button onClick={() => props.setPopUP(false)}>
+                                {!props.profileStatus ? "Cancel" : "Close"}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
         </>
     );
 };
 
-export default ShareProfilePopUp;
+export default ShareProfilePopUp;