fix: UI bugs in edit flow

Author: ZabeehUllah

app/auth/page.tsx

@@ -16,7 +16,7 @@ export default function AuthPage() {
   const [website, setWebsite] = useState("")
   const [email, setEmail] = useState("")
   const [errors, setErrors] = useState<{ [key: string]: string }>({})
-  const [isLoading, setIsLoading] = useState(true) // Added loading state
+  const [isLoading, setIsLoading] = useState(false) // Added loading state
   const [stytchToken, setStytchToken] = useState<string | null>(null);
   const router = useRouter()
 

app/dashboard/page.tsx

@@ -107,14 +107,13 @@ export default function DashboardPage() {
   useEffect(() => {
     getClientApps()
     hideDashboard()
+    localStorage.removeItem("editMode")
   }, [])
 
   const onEdit = (app: ClientApp) => {
     setApp(app)
     router.push(`/?id=${app.id}`)
   }
-
-
 
   if (isLoading) {
     return (

app/otp/page.tsx

@@ -70,25 +70,47 @@ export default function OTPPage() {
         }  
 
         const data = localStorage.getItem("configData");
+        const isEditMode = localStorage.getItem("editMode");
+
         const onboardingConfig = data ? JSON.parse(data) : null;
+        const editMode = isEditMode ? JSON.parse(isEditMode) : null;
+
+        const { id, ...payload } = onboardingConfig;
 
         const newData = {
-          ...onboardingConfig,
+          ...payload,
           clientId: client.id
         }
 
+        let response1;
+        
         // Create client app
-        const response1 = await axios.post(
-          `${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app`,
-          newData,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "Authorization": `Bearer ${response.data.stytchToken}`,
-            },
-            validateStatus: () => true,
-          }
-        );
+        if(!editMode){
+           response1 = await axios.post(
+            `${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app`,
+            newData,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${response.data.stytchToken}`,
+              },
+              validateStatus: () => true,
+            }
+          );
+        }else{
+          response1 = await axios.put(
+            `${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app/${id}`,
+            newData,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${response.data.stytchToken}`,
+              },
+              validateStatus: () => true,
+            }
+          );
+        }
+
 
         if (response1.status === 200) {
           // Save credentials to context
@@ -111,9 +133,8 @@ export default function OTPPage() {
     } catch (error) {
       console.error("Error during OTP verification:", error);
       setError("An error occurred. Please try again.");
-    } finally {
-      setIsLoading(false); // Set loading to false after request completes
-    }
+      setIsLoading(false)
+    } 
 
   }
 

app/page.tsx

@@ -130,7 +130,7 @@ export default function DashboardPage() {
         })),
       }
 
-      const data = {
+      const baseData = {
         profileName,
         profileDescription,
         logos: {
@@ -147,26 +147,28 @@ export default function DashboardPage() {
         streamId: selectedProfileType?.profileDetails.streamId,
       }
 
+      const dataForStorage = id ? { ...baseData, id } : baseData
+
       const token = localStorage.getItem("stytchToken")
 
       if (!token) {
-        localStorage.setItem("configData", JSON.stringify(data))
+        localStorage.setItem("configData", JSON.stringify(dataForStorage))
         router.push("/auth")
         return
       }
 
-      let response
+      let response;
 
       if (!id) {
-        response = await axios.post(`${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app`, data, {
+        response = await axios.post(`${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app`, baseData, {
           headers: {
             "Content-Type": "application/json",
             Authorization: `Bearer ${token}`,
           },
           validateStatus: () => true,
         })
       } else {
-        response = await axios.put(`${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app/${id}`, data, {
+        response = await axios.put(`${process.env.NEXT_PUBLIC_DASHBOARD_API}/crm/client-app/${id}`, baseData, {
           headers: {
             "Content-Type": "application/json",
             Authorization: `Bearer ${token}`,
@@ -183,7 +185,10 @@ export default function DashboardPage() {
         router.push("/dashboard")
       } else if (response.status === 401) {
         localStorage.clear()
-        localStorage.setItem("configData", JSON.stringify(data))
+        localStorage.setItem("configData", JSON.stringify(dataForStorage))
+        if(id){
+          localStorage.setItem("editMode", 'true')
+        }
         router.push("/auth")
       } else {
         alert("Failed to create client app.")
@@ -224,6 +229,8 @@ export default function DashboardPage() {
 
   useEffect(() => {
     if (id) {
+      localStorage.setItem("editMode", 'true')
+      console.log("App", app)
       setCustomizationData({
         general: {
           theme: "light",
@@ -233,8 +240,8 @@ export default function DashboardPage() {
           },
         },
         authOptions: {
-          email: app?.authentication.email ?? true,
-          gmail: app?.authentication.gmail ?? true,
+          email: app?.authentication?.email ?? true,
+          gmail: app?.authentication?.gmail ?? true,
           metamask: app?.authentication.wallet ?? true,
         },
       });
@@ -284,6 +291,8 @@ export default function DashboardPage() {
       setAppName(app?.appName || "<app_name_here>");
       setUrls(Array.isArray(app?.domains) ? app.domains : JSON.parse(app?.domains || "[]"));
       setShowRoulette(app?.showRoulette || true);
+    }else{
+      localStorage.removeItem("editMode")
     }
   }, [id, app]);
 

components/WidgetCard.tsx

@@ -365,13 +365,6 @@ export default function WidgetCard({
       // Convert file to base64
       const base64String = await convertToBase64(file)
       setUploadedFile((prev) => ({ ...prev, [mode]: file }))
-      setApp((prev) => ({
-        ...prev,
-        logos: {
-          ...prev.logos,
-          [mode]: base64String,
-        },
-      }))
       setCustomizationData((prev) => ({
         ...prev,
         general: {
@@ -1270,20 +1263,20 @@ export default function WidgetCard({
 
         {/* Footer always at the bottom */}
         <div className="mt-auto pt-10 flex justify-end gap-2">
-          <Button
+          {!id && <Button
             variant="outline"
             className="text-gray-700 border-gray-300 hover:bg-gray-100"
             onClick={saveConfigForLater}
             disabled={!hasUserEnteredData()}
           >
             Save config for later
-          </Button>
+          </Button>}
           <Button
             className="bg-emerald-500 hover:bg-emerald-600 text-white flex items-center gap-1"
             onClick={handleFinishSetupProp}
             disabled={isButtonDisabled()}
           >
-            Finish Setup <ArrowRight className="h-4 w-4" />
+            {id ? 'Update Config' : 'Finish Setup'} <ArrowRight className="h-4 w-4" />
           </Button>
         </div>
       </div>