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;