feat: get certification

Author: JeelRajodiya

app/components/CertificateButton/CertificateButton.module.css

@@ -0,0 +1,12 @@
+.certificateButton {
+  font-size: small;
+  margin-right: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+}

app/components/CertificateButton/CertificateButton.tsx

@@ -0,0 +1,112 @@
+import { isTheTourCompleted } from "@/lib/client-functions";
+import React, { useEffect, useState } from "react";
+import styles from "./CertificateButton.module.css";
+import { LockIcon } from "@chakra-ui/icons";
+import {
+  Box,
+  Button,
+  Flex,
+  Input,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import { googleSheetAPIRoute } from "@/lib/contentVariables";
+const submitCertificateReq = async (name: string, email: string) => {
+  await fetch(googleSheetAPIRoute, {
+    method: "POST",
+    body: JSON.stringify({
+      name,
+      email,
+      certificateReq: true,
+    }),
+  });
+};
+
+export default function CertificateButton() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isTheTourCompletedState, setIsTheTourCompletedState] =
+    useState(isTheTourCompleted());
+  useEffect(() => {
+    setIsTheTourCompletedState(isTheTourCompleted());
+  }, [isTheTourCompleted()]);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const toast = useToast();
+
+  return (
+    <>
+      <Tooltip
+        label={
+          isTheTourCompletedState
+            ? ""
+            : "Complete the tour to get your certificate"
+        }
+        aria-label="A tooltip"
+      >
+        <Button
+          size={"sm"}
+          variant={"default"}
+          className={styles.certificateButton}
+          onClick={isTheTourCompletedState ? onOpen : () => {}}
+        >
+          {isTheTourCompletedState ? "" : <LockIcon />} Get Your Certificate
+        </Button>
+      </Tooltip>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Get Your Certificate</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Box mb={4}>We will email you your certificate</Box>
+            <Flex direction="column" gap={4}>
+              <Input
+                placeholder="Name"
+                onChange={(e) => setName(e.target.value)}
+                value={name}
+              />
+              <Input
+                placeholder="Email"
+                onChange={(e) => setEmail(e.target.value)}
+                value={email}
+              />
+            </Flex>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant="ghost" onClick={onClose}>
+              Close
+            </Button>
+            <Button
+              variant="default"
+              mr={3}
+              onClick={() => {
+                submitCertificateReq(name, email);
+                onClose();
+                toast({
+                  title: "Certificate Requested",
+                  description: "We will email you your certificate",
+                  status: "success",
+                  duration: 9000,
+                  isClosable: true,
+                });
+              }}
+            >
+              Submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

app/components/CertificateButton/index.tsx

@@ -0,0 +1 @@
+export {default as default} from './CertificateButton';

app/components/Feedback/Feedback.tsx

@@ -6,14 +6,13 @@ import Dislike from "@/app/styles/icons/BiDislike";
 import { Flex } from "@chakra-ui/react";
 import { usePathname } from "next/navigation";
 import styles from "./Feedback.module.css";
+import { googleSheetAPIRoute } from "@/lib/contentVariables";
 
 export default function Feedback() {
-  const APIRoute =
-    "https://script.google.com/macros/s/AKfycbz0f87eDgEghSelILb3RSdHe-Rr7HKAdMxx8tvTq4fNAfJt0fZ7t-G-p1BrVEQM2Mws/exec";
   const [isSubmitted, setIsSubmitted] = useState(false);
   const pathname = usePathname();
   const submitFeedback = async (feedback: string) => {
-    await fetch(APIRoute, {
+    await fetch(googleSheetAPIRoute, {
       method: "POST",
       body: JSON.stringify({
         feedback: feedback,

app/components/OutlineDrawer/OutlineDrawer.tsx

@@ -6,11 +6,14 @@ import {
   DrawerHeader,
   DrawerCloseButton,
   DrawerBody,
+  Button,
 } from "@chakra-ui/react";
 import styles from "./OutlineDrawer.module.css";
 import { ContentOutline } from "@/lib/types";
 import ChapterItem from "../ChapterItem";
 import { isChapterCompleted } from "@/lib/client-functions";
+import Link from "next/link";
+import CertificateButton from "../CertificateButton/CertificateButton";
 
 export default function OutlineDrawer({
   isOpen,
@@ -39,7 +42,11 @@ export default function OutlineDrawer({
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton />
-          <DrawerHeader>Outline</DrawerHeader>
+          <DrawerHeader display={"flex"} justifyContent={"space-between"}>
+            
+            Outline
+            <CertificateButton  />
+            </DrawerHeader>
 
           <DrawerBody>
             <nav>

app/styles/theme.ts

@@ -136,6 +136,16 @@ const Popover = {
   },
 };
 
+const Modal = {
+  baseStyle: {
+    dialog: {
+      bg: "hsl(var(--background))",
+      color: "hsl(var(--text))",
+      borderRadius: "16px"
+    }
+  }
+}
+
 export const theme = extendTheme({
   config: {
     initialColorMode: "light",
@@ -149,6 +159,6 @@ export const theme = extendTheme({
       },
     },
   },
-  components: { Button, Menu, Switch, Drawer, Tooltip, Popover },
+  components: { Button, Menu, Switch, Drawer, Tooltip, Popover, Modal },
   fonts: {},
 });

lib/client-functions.ts

@@ -7,6 +7,7 @@ import { OutputReducerAction } from "./reducers";
 import { CodeFile, TestCaseResult } from "./types";
 import { hyperjumpCheckAnnotations, hyperjumpValidate } from "./validators";
 import { sendGAEvent } from "@next/third-parties/google";
+import { contentManager } from "./contentManager";
 
 export async function validateCode(
   codeString: string,
@@ -136,6 +137,13 @@ export function isChapterCompleted(chapterIndex: number, totalSteps: number) {
   return true;
 }
 
+
+export function isTheTourCompleted() {
+  const totalStepsForAllChapters = contentManager.getNumberOfStepsFromAllChapters();
+  const completedSteps = Object.keys(JSON.parse(localStorage.getItem("progress")!)).length;
+  return totalStepsForAllChapters === completedSteps;
+}
+
 export function hasNestedProperty(obj: any, path: string) {
   console.log(obj, path);
   const keys = path.split(".");

lib/contentManager.ts

@@ -101,6 +101,16 @@ export default class ContentManager {
   public getTotalSteps(chapterIndex: number) {
     return this.getOutline()[chapterIndex].steps.length;
   }
+
+  public getNumberOfStepsFromAllChapters() {
+    let totalSteps = 0;
+    let totalChapters = this.getTotalChapters();
+    for (let i = 0; i < totalChapters; i++) {
+      totalSteps += this.getTotalSteps(i);
+    }
+    return totalSteps;
+  }
+
   public getInstructionsFilePath(urlPath: string) {
     return `${contentFolderName}/${urlPath}/${instructionsFileName}`;
   }

lib/contentVariables.ts

@@ -4,3 +4,4 @@ export const contentFolderPath: string = "./content";
 export const contentFolderName: string = contentFolderPath.replace("./", "");
 export const indexFileName = "index.mdx";
 export const instructionsFileName = "instructions.mdx";
+export const googleSheetAPIRoute = "https://script.google.com/macros/s/AKfycbxjH778iyBlZ8_oY946fTLW6H0HcfByaNk0collEgIwERwnpeErkaYEuKjWxAQ2qg/exec"