bugfix - fixed modal

Frontend/components/Header.tsx

@@ -17,13 +17,16 @@ interface HeaderProps {
 }
 
 export default function Header({ isUserLoggedIn }: HeaderProps) {
+  //Advice: Remove this and replace it with proper state management like Redux, Recoil or Zustand
   const [user, setUser] = useState<User | undefined>();
+  const [statefulUser, setStatefulUser] = useState<User | undefined>();
   useEffect(() => {
     (async () => {
       const user = await getUser();
       setUser(user as User);
     })();
-  }, []);
+  }, [statefulUser]);
+  //End Advice
   const { theme, setTheme } = useTheme();
   return (
     <header className="absolute w-full z-30">
@@ -98,6 +101,8 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
                   </button>
                   <button
                     onClick={() => {
+                      localStorage.getItem("price") &&
+                        localStorage.removeItem("price");
                       document.getElementById("sign-up-modal")?.click();
                     }}
                     className={`btn btn-primary btn-sm text-primary-content`}
@@ -143,7 +148,7 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
         </div>
       </div>
       <ModalSignIn />
-      <ModalSignUp />
+      <ModalSignUp setUser={setStatefulUser} />
     </header>
   );
 }

Frontend/components/Modals/ModalSignUp.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import Icon from "@/components/Icon/Icon";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -9,10 +9,14 @@ import { companySizeList } from "@/constants";
 import pb from "@/lib/pocketbase";
 import { createCheckoutSession, login } from "@/app/(auth)/actions";
 import { toast } from "react-toastify";
-import { Price } from "@/types";
+import { Price, User } from "@/types";
 import { useRouter } from "next/navigation";
 
-function ModalSignUp() {
+function ModalSignUp({
+  setUser,
+}: {
+  setUser: Dispatch<SetStateAction<User | undefined>>;
+}) {
   const {
     register,
     handleSubmit,
@@ -60,7 +64,7 @@ function ModalSignUp() {
         organisationSize: data.organisationSize,
       });
       //create user
-      await pb
+      const user = await pb
         .collection("user")
         .create({ ...data, organisation: organisation.id });
       //login user
@@ -71,6 +75,7 @@ function ModalSignUp() {
         document.getElementById("sign-up-modal")?.click();
         const price = localStorage.getItem("price");
         const type = localStorage.getItem("type");
+        setUser(user as User);
         console.log("price", price);
         console.log("type", type);
         price && generateCheckoutPage(JSON.parse(price), type ?? "");

Frontend/components/PriceCard.tsx

@@ -17,7 +17,7 @@ export default function PriceCard({
 }) {
   const router = useRouter();
   const openSignUpModalOnPriceClick = (price: Price, type: string) => {
-    const signUpModal = document.getElementById("sign-up-modal-button");
+    const signUpModal = document.getElementById("sign-up-modal");
     if (!signUpModal) return;
     signUpModal.click();
   };