Merge pull request #1121 from navgurukul/certificate-popup

Revise certificate design.

src/components/PathwayCourse/index.js

@@ -33,6 +33,8 @@ import {
  CardActions,
  Skeleton,
  LinearProgress,
+ FormControlLabel,
+ Checkbox,
 } from "@mui/material";
 import CircularProgress from "@mui/material/CircularProgress";
 import PathwayCourseBatchEnroll1 from "../BatchClassComponents/PathwayCourseBatchEnroll1";
@@ -103,6 +105,26 @@ function PathwayCourse() {
  const [pathwayCode, setPathwayCode] = useState(false);
  const [certificateCode, setCertificateCode] = useState("");
 
+ const [isChecked, setIsChecked] = useState(false); // State for checkbox
+
+ const [userName, setUserName] = useState(""); // State for storing user name
+
+ useEffect(() => {
+ const authData = JSON.parse(localStorage.getItem("__AUTH__"));
+ if (
+ authData &&
+ authData.data &&
+ authData.data.user &&
+ authData.data.user.name
+ ) {
+ setUserName(authData.data.user.name); // Set user name from local storage
+ }
+ }, []);
+
+ const handleToggleCheckbox = () => {
+ setIsChecked(!isChecked); // Toggle checkbox state
+ };
+
  const handleCloseModal = () => {
  setOpenModal(false);
  };
@@ -145,7 +167,6 @@ function PathwayCourse() {
 
  const handleModal = () => {
  setLoader(true);
-
  axios({
  method: METHODS.GET,
  url: `${process.env.REACT_APP_MERAKI_URL}/certificate?pathway_code=${certificateCode}`,
@@ -401,34 +422,56 @@ function PathwayCourse() {
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
+ marginBottom: 4,
  }}
  >
  <Typography
+ variant="h6"
  sx={{
- fontSize: "32px",
+ fontSize: "28px",
  fontWeight: "600",
  }}
- >{`${pathwayCourse?.data?.name} Certificate`}</Typography>
+ >
+ {" "}
+ {`${pathwayCourse?.data?.name
+ ?.split(" ")
+ .pop()} Certificate`}
+ </Typography>
  <CloseIcon
  sx={{ cursor: "pointer" }}
  onClick={handleCloseModal}
  />
  </Box>
- <div className={classes.pdfWrapper}>
- <iframe
- allowtransparency="true"
- border="0"
- className={classes.pdfFrame}
- src={`${certificate}#toolbar=0`}
- ></iframe>
- {/* <ReactPDF/> */}
- </div>
- <Typography>{`Meraki certifies that you have diligently attended all classes and taken the practice questions. You have a good grasp of ${pathwayCourse?.data?.name} fundamentals.`}</Typography>
+ <Typography variant="h6" fontSize="18px">
+ Your name on the certificate as per our records
+ </Typography>
+ <Typography variant="h5" mt={2}>
+ {userName}
+ </Typography>
+ <Typography variant="body1" mt={2}>
+ Please ensure that your name is correct. In case, there is a
+ mistake, please change your name in the
+ <span style={{ fontWeight: "bolder" }}> “Profile” </span>
+ section
+ </Typography>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={isChecked}
+ onChange={handleToggleCheckbox}
+ />
+ }
+ label="I confirm that my name displayed above is correct"
+ sx={{ mt: 4 }}
+ />
  <Box className={classes.certButtons}>
  {/* <Button onClick={shareCertificate}>Share to Friends</Button> */}
  <Button
  onClick={downloadCert}
- className={classes.greenButton}
+ disabled={!isChecked}
+ className={
+ !isChecked ? classes.disableButton : classes.greenButton
+ }
  >
  Get Certificate
  </Button>

src/components/PathwayCourse/styles.js

@@ -106,28 +106,35 @@ const useStyles = makeStyles((theme) => ({
  },
  certButtons: {
  display: "flex",
- justifyContent: "space-around",
+ // justifyContent: "space-around",
+ justifyContent: "flex-end",
  marginTop: "32px",
  },
  greenButton: {
  padding: "8px 16px !important",
  borderRadius: "8px !important",
  backgroundColor: "#48A145 !important",
  color: "#FFFFFF !important",
- width: "295px !important",
+ // width: "180px !important",
  },
-
- pdfFrame: {
- height: "100%",
- width: "100%",
- border: "none",
- outline: "none",
- brackgroundColor: "transparent !important",
+ disableButton: {
+ padding: "8px 16px !important",
+ borderRadius: "8px !important",
+ backgroundColor: "#E0E0E0 !important",
+ color: "gray !important",
  },
 
- pdfWrapper: {
- height: (props) => (props.isActive ? "200px" : "390px"),
- },
+ // pdfFrame: {
+ // height: "100%",
+ // width: "100%",
+ // border: "none",
+ // outline: "none",
+ // brackgroundColor: "transparent !important",
+ // },
+
+ // pdfWrapper: {
+ // height: (props) => (props.isActive ? "202px" : "372px"),
+ // },
  spanfont: {
  fontWeight: "bold",
  },
@@ -157,16 +164,15 @@ const useStyles = makeStyles((theme) => ({
  },
  },
  alertBox: {
- width: "100% !important" ,
+ width: "100% !important",
  backgroundColor: "#48A145 !important",
  },
 
-  cardComponent:{
+ cardComponent: {
  display: "flex",
  gap: "15px",
  flexDirection: "column",
- }
-
+ },
 }));
 
 export default useStyles;