fix: UI bugs reported in e2e testing

Author: ZabeehUllah

app/auth/page.tsx

@@ -33,6 +33,10 @@ export default function AuthPage() {
 
   useEffect(() => {
     setStytchToken(localStorage.getItem("stytchToken"));
+    const editMode = localStorage.getItem('editMode')
+    if(editMode){
+      setActiveTab("login")
+    }
   }, []);
 
   const validateForm = () => {

app/dashboard/page.tsx

@@ -34,7 +34,7 @@ export default function DashboardPage() {
   const { app, setApp } = useAppStore();
 
 
-   const { hideDashboard } = useAuth()
+   const { hideDashboard, logout } = useAuth()
 
 
   const getClientApps = async () => {
@@ -85,20 +85,14 @@ export default function DashboardPage() {
 
           })
         );
-        // console.log("UPDATED APPS => ",updatedApps);
-        
-        // const stream_data=await selectProfileType("kjzl6kcym7w8y6hhihqpmq4ul15xjxpwgxgu3zgr02fce448rtqn1tmsyea3110")
-        // console.log("Stream Data=> ", stream_data)
-        // setClientApps(response.data.client.apps)
         setClientApps(updatedApps);
       } else {
         setError("Unexpected data format received from server")
       }
     } catch (err) {
       setError("You are not authorize please login again")
       console.error("Error fetching client apps:", err)
-      localStorage.clear();
-      router.push("/")
+      logout()
     } finally {
       setIsLoading(false)
     }

app/page.tsx

@@ -61,7 +61,7 @@ export default function DashboardPage() {
   const [error, setError] = useState<string | null>(null)
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [expandedSection, setExpandedSection] = useState("customize")
-  const [showRoulette, setShowRoulette] = useState(true)
+  const [showRoulette, setShowRoulette] = useState(false)
   const { app } = useAppStore() // use for edit flow
   const { addProject, project } = useProjects() // use for secrt flow
 
@@ -86,7 +86,7 @@ export default function DashboardPage() {
   // 2. PROFILE CONFIGURATION DATA
   const [selectedProfileType, setSelectedProfileType] = useState<ProfileType | null>(null)
   const [profileName, setProfileName] = useState("<profile_name>")
-  const [profileDescription, setProfileDescription] = useState("Your custom profile description here")
+  const [profileDescription, setProfileDescription] = useState("<Your_custom_profile_description_here>")
 
   // 3. DEPLOYMENT CONFIGURATIONS DATA
   const [urls, setUrls] = useState([])
@@ -138,13 +138,13 @@ export default function DashboardPage() {
           dark: customizationData.general.icon.dark,
         },
         authOptions: customizationData.authOptions,
-        showRoulette,
+        showRoulette: !showRoulette,
         clientId: localStorage.getItem("clientId"),
         domains: urls,
         appName,
         onboardingConfig,
         platformNeeded: selectedProfileType?.profileDetails?.id === "custom" ? selectedProfileType.platforms : [],
-        streamId: selectedProfileType?.profileDetails.streamId,
+        streamId: id && selectedProfileType?.profileDetails?.id === "custom"? app?.streamId : selectedProfileType?.profileDetails.streamId,
       }
 
       const dataForStorage = id ? { ...baseData, id } : baseData
@@ -202,7 +202,10 @@ export default function DashboardPage() {
   }
 
   useEffect(() => {
-    routeToDashboard()
+    const storedToken = localStorage.getItem("stytchToken")
+    if(storedToken){
+      routeToDashboard()
+    }
   }, [])
 
   useEffect(() => {
@@ -223,14 +226,13 @@ export default function DashboardPage() {
       setEnableOnboarding(parsedConfig.enableOnboarding || enableOnboarding)
       setQuestions(parsedConfig.questions || questions)
       setCurrentQuestionIndex(parsedConfig.currentQuestionIndex || currentQuestionIndex)
-      setShowRoulette(parsedConfig.showRoulette || true)
+      setShowRoulette(parsedConfig.showRoulette ?? true)
     }
   }, [id, app])
 
   useEffect(() => {
     if (id) {
       localStorage.setItem("editMode", 'true')
-      console.log("App", app)
       setCustomizationData({
         general: {
           theme: "light",
@@ -290,7 +292,7 @@ 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);
+      setShowRoulette(!app?.showRoulette);
     }else{
       localStorage.removeItem("editMode")
     }

components/WidgetCard.tsx

@@ -96,6 +96,7 @@ export default function WidgetCard({
   const [isLoading, setIsLoading] = useState(false)
   const [isReturningUser, setIsReturningUser] = useState(false)
   const [isWidget, setIsWidget] = useState<boolean>(false)
+  const [hasUploadedImage, setHasUploadedImage] = useState<boolean>(false)
 
   const { app, setApp } = useAppStore() // use for edit flow
   const searchParams = useSearchParams()
@@ -130,7 +131,7 @@ export default function WidgetCard({
       newQuestion = {
         id,
         type: "CATEGORY_QUESTION",
-        mainQuestion: "",
+        mainQuestion: "Pick topics that interest you",
         supportingText: "",
         categories: [
           {
@@ -380,6 +381,7 @@ export default function WidgetCard({
 
   const handleRemoveFile = (mode) => {
     setUploadedFile((prev) => ({ ...prev, [mode]: null }))
+    setHasUploadedImage(false)
     if (fileInputRef.current?.[mode]) {
       fileInputRef.current[mode].value = null
 
@@ -454,7 +456,9 @@ export default function WidgetCard({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault()
-      addUrl()
+      if(urls.length < 3) {
+        addUrl()
+      }
     }
   }
 
@@ -522,6 +526,9 @@ export default function WidgetCard({
     if (questions.length > 0 && currentQuestionIndex >= questions.length) {
       setCurrentQuestionIndex(Math.max(0, questions.length - 1))
     }
+    if (customizationData?.general?.icon?.light) {
+      setHasUploadedImage(true)
+    }
   }, [questions.length, currentQuestionIndex])
 
   const getCustomAppPlatforms = async (appStreamId: string) => {
@@ -550,6 +557,10 @@ export default function WidgetCard({
         setSelectedProfileType(customProfile)
         setDisable(false) // Enable only "custom"
       }
+
+      if (app.logos?.dark || app.logos?.light) {
+        setHasUploadedImage(true)
+      }
     }
   }, [id, profileTypes, app])
 
@@ -576,9 +587,9 @@ export default function WidgetCard({
                       accept="image/*"
                     />
 
-                    {uploadedFile?.light ? (
+                    {(uploadedFile?.light || hasUploadedImage) ? (
                       <div className="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-md text-xs text-gray-700">
-                        <span className="truncate max-w-[120px]">{uploadedFile.light.name}</span>
+                        <span className="truncate max-w-[120px]">{uploadedFile?.light?.name || "image"} </span>
                         <button onClick={() => handleRemoveFile("light")}>
                           <X className="w-4 h-4 text-red-500 hover:text-red-700" />
                         </button>
@@ -823,7 +834,13 @@ export default function WidgetCard({
         <div className="space-y-5">
           <div className="flex items-center justify-between bg-gray-100 p-3 rounded-md">
             <span className="text-sm font-medium">Enable custom onboarding flows</span>
-            <Switch checked={enableOnboarding} onCheckedChange={setEnableOnboarding} />
+            <Switch checked={enableOnboarding} onCheckedChange={() => {
+              setEnableOnboarding((prev) => !prev)
+              if (enableOnboarding) {
+                setQuestions([])
+                setCurrentQuestionIndex(0)
+              }
+            }} />
           </div>
 
           {enableOnboarding && (
@@ -998,12 +1015,12 @@ export default function WidgetCard({
         </div>
       ) : (
         <>
-          <div className="mb-5">
+          {!showRoulette && <div className="mb-5">
             <PlatformConnection
               setSelectedProfileType={setSelectedProfileType}
               selectedProfileType={selectedProfileType}
             />
-          </div>
+          </div>}
 
           <div className="flex items-center justify-between bg-gray-100 p-3 rounded-md">
             <span className="text-xs font-medium">
@@ -1012,7 +1029,7 @@ export default function WidgetCard({
             <Switch checked={showRoulette} onCheckedChange={setShowRoulette} />
           </div>
 
-          {!showRoulette && (
+          {showRoulette && (
             <p className="text-xs text-amber-600 mt-2">
               Platforms view disabled
             </p>
@@ -1100,6 +1117,7 @@ export default function WidgetCard({
 
     if (
       selectedProfileType?.profileDetails?.id == "custom" &&
+      !showRoulette &&
       (!profileName ||
         profileName == "<profile_name>" ||
         !profileDescription ||
@@ -1123,6 +1141,7 @@ export default function WidgetCard({
       enableOnboarding,
       questions,
       currentQuestionIndex,
+      showRoulette,
       savedAt: new Date().getTime(), // Add timestamp
     }
 
@@ -1154,6 +1173,7 @@ export default function WidgetCard({
     setAppName("<app_name_here>")
     setEnableOnboarding(false)
     setQuestions([])
+    setShowRoulette(false)
     setCurrentQuestionIndex(0)
     setIsReturningUser(false)
     setIsWidget(false)

components/clientInterface/oboardingQuestions.tsx

@@ -230,7 +230,7 @@ const OnboardingQuestions = ({ questions, currentQuestionIndex, setCurrentQuesti
 
             <h2 className="text-2xl font-bold text-gray-800 mb-3">
               {questions[currentQuestionIndex]?.type === 'CATEGORY_QUESTION' ? (
-                  <>{questions[currentQuestionIndex]?.mainQuestion || 'Pick topics that interest you'}</>
+                  <>{questions[currentQuestionIndex]?.mainQuestion}</>
               ) : (
                 <>
                  {questions[currentQuestionIndex]?.mainQuestion || `Question ${currentQuestionIndex + 1}`}