Certificate btn on last (#146)

* add loader to the validate button

* add the types again and create handleValidateFunction

* add the get certificate button

* resolve the mergre conficts

* refactor the code

* add aditional check to validate that current lesson is last lesson

* refactor the code

* remove the fragmments

* resolved the edge case

* remove margin from certificate button and simplify tour completion state logic

---------

Co-authored-by: JeelRajodiya <[email protected]>

Author: AQIB-NAWAB

app/components/CertificateButton/CertificateButton.module.css

@@ -1,6 +1,5 @@
 .certificateButton {
   font-size: small;
-  margin-right: 32px;
   display: flex;
   align-items: center;
   justify-content: center;

app/components/CodeEditor/CodeEditor.tsx

@@ -7,13 +7,18 @@ import Editor, { Monaco } from "@monaco-editor/react";
 import { Flex, useColorMode } from "@chakra-ui/react";
 import { useEffect, useState, useRef } from "react";
 import MyBtn from "../MyBtn";
-import { tryFormattingCode, validateCode } from "@/lib/client-functions";
+import {
+  isTheTourCompleted,
+  tryFormattingCode,
+  validateCode,
+} from "@/lib/client-functions";
 import FiChevronRight from "@/app/styles/icons/HiChevronRightGreen";
 import { useRouter } from "next/navigation";
 import { useUserSolutionStore, useEditorStore } from "@/lib/stores";
 import { sendGAEvent } from "@next/third-parties/google";
 import { CodeFile, OutputResult } from "@/lib/types";
 import { OutputReducerAction } from "@/lib/reducers";
+import CertificateButton from "../CertificateButton/CertificateButton";
 
 // Custom hook for editor theme setup
 const useEditorTheme = (monaco: Monaco, colorMode: "dark" | "light") => {
@@ -108,7 +113,6 @@ const EditorControls = ({
   outputResult: OutputResult;
 }) => {
   const router = useRouter();
-
   return (
     <div className={styles.buttonsWrapper}>
       <Flex dir="row" gap="8px" alignItems="end">
@@ -127,25 +131,26 @@ const EditorControls = ({
           Reset
         </MyBtn>
       </Flex>
-      <MyBtn
-        onClick={() => {
-          if (nextStepPath) router.push("/" + nextStepPath);
-        }}
-        variant={
-          outputResult.validityStatus === "valid" ? "default" : "success"
-        }
-        isDisabled={!nextStepPath}
-        size={outputResult.validityStatus === "valid" ? "sm" : "xs"}
-      >
-        Next <span style={{ marginLeft: "4px" }}></span>
-        <FiChevronRight
-          color={
-            outputResult.validityStatus === "valid"
-              ? "white"
-              : "hsl(var(--success))"
+      {!nextStepPath ? (
+        <CertificateButton />
+      ) : (
+        <MyBtn
+          onClick={() => router.push("/" + nextStepPath)}
+          variant={
+            outputResult.validityStatus === "valid" ? "default" : "success"
           }
-        />
-      </MyBtn>
+          size={outputResult.validityStatus === "valid" ? "sm" : "xs"}
+        >
+          Next <span style={{ marginLeft: "4px" }}></span>
+          <FiChevronRight
+            color={
+              outputResult.validityStatus === "valid"
+                ? "white"
+                : "hsl(var(--success))"
+            }
+          />
+        </MyBtn>
+      )}
     </div>
   );
 };

app/components/OutlineDrawer/OutlineDrawer.tsx

@@ -42,7 +42,7 @@ export default function OutlineDrawer({
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton />
-          <DrawerHeader display={"flex"} justifyContent={"space-between"}>
+          <DrawerHeader display={"flex"} justifyContent={"space-between"} paddingRight={12}>
             Outline
             <CertificateButton />
           </DrawerHeader>