Certificate btn on last

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,6 +113,11 @@ const EditorControls = ({
   outputResult: OutputResult;
 }) => {
   const router = useRouter();
+  const [isTheTourCompletedState, setIsTheTourCompletedState] =
+    useState(isTheTourCompleted());
+  useEffect(() => {
+    setIsTheTourCompletedState(isTheTourCompleted());
+  }, [isTheTourCompleted()]);
 
   return (
     <div className={styles.buttonsWrapper}>
@@ -127,25 +137,28 @@ 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 || isTheTourCompletedState ? (
+        <>
+          <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>
   );
 };