From 9519337030d01992fa2b8e130233f616f2a96fbc Mon Sep 17 00:00:00 2001
From: Ashwin Kumar Sivakumar <ashwin@traceworks.in>
Date: Fri, 3 Jul 2026 17:40:14 +0530
Subject: [PATCH] fix(signup): show role badge for professional/customer
 intents, fix role assignment

- Hide role selector tabs when intent is provided via URL
- Show role badge for professional/customer roles
- Add profession field to API call for backend role assignment
- Fixes issue where roles weren't properly assigned after signup
---
 src/routes/signup.tsx | 134 ++++++++++++++++++++++++------------------
 1 file changed, 76 insertions(+), 58 deletions(-)

diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx
index befce3c..5a18224 100644
--- a/src/routes/signup.tsx
+++ b/src/routes/signup.tsx
@@ -230,6 +230,7 @@ export default function SignupRoute() {
           phone: "",
           intent: role(),
           role_key: selectedProfessionalRole() || undefined,
+          profession: selectedProfessionalRole() || undefined,
           ...(role() === "company" ? { company_name: companyName().trim() } : {}),
           ...(isTestMode ? { test_mode: true } : {}),
         }),
@@ -492,64 +493,81 @@ export default function SignupRoute() {
               Sign up first, then go directly to dashboard after email verification.
             </p>
 
-            {/* Role Selector */}
-            <div class="role-selector" style={{ display: "flex", gap: "8px", marginBottom: "24px" }}>
-              <button
-                type="button"
-                class={`role-tab ${role() === "job_seeker" ? "active" : ""}`}
-                onClick={() => setSelectedRole("job_seeker")}
-                style={{
-                  flex: 1,
-                  padding: "14px 16px",
-                  border: role() === "job_seeker" ? "2px solid #fd6116" : "2px solid #e5e7eb",
-                  "border-radius": "8px",
-                  background: role() === "job_seeker" ? "#fff5f0" : "#fff",
-                  cursor: "pointer",
-                  display: "flex",
-                  "align-items": "center",
-                  "justify-content": "center",
-                  gap: "10px",
-                  "font-size": "15px",
-                  "font-weight": role() === "job_seeker" ? "600" : "500",
-                  color: role() === "job_seeker" ? "#fd6116" : "#4b5563",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                  <circle cx="12" cy="7" r="4"/>
-                </svg>
-                Job Seeker
-              </button>
-              <button
-                type="button"
-                class={`role-tab ${role() === "company" ? "active" : ""}`}
-                onClick={() => setSelectedRole("company")}
-                style={{
-                  flex: 1,
-                  padding: "14px 16px",
-                  border: role() === "company" ? "2px solid #fd6116" : "2px solid #e5e7eb",
-                  "border-radius": "8px",
-                  background: role() === "company" ? "#fff5f0" : "#fff",
-                  cursor: "pointer",
-                  display: "flex",
-                  "align-items": "center",
-                  "justify-content": "center",
-                  gap: "10px",
-                  "font-size": "15px",
-                  "font-weight": role() === "company" ? "600" : "500",
-                  color: role() === "company" ? "#fd6116" : "#4b5563",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M3 21h18"/>
-                  <path d="M9 21V8l-6 4 6 9h6v-9l-6-4 6-3"/>
-                  <path d="M9 3h6v5H9z"/>
-                </svg>
-                Company
-              </button>
-            </div>
+            {/* Role Selector - Only show tabs for job_seeker and company when no intent is provided */}
+            <Show when={!search.intent && !search.role}>
+              <div class="role-selector" style={{ display: "flex", gap: "8px", marginBottom: "24px" }}>
+                <button
+                  type="button"
+                  class={`role-tab ${role() === "job_seeker" ? "active" : ""}`}
+                  onClick={() => setSelectedRole("job_seeker")}
+                  style={{
+                    flex: 1,
+                    padding: "14px 16px",
+                    border: role() === "job_seeker" ? "2px solid #fd6116" : "2px solid #e5e7eb",
+                    "border-radius": "8px",
+                    background: role() === "job_seeker" ? "#fff5f0" : "#fff",
+                    cursor: "pointer",
+                    display: "flex",
+                    "align-items": "center",
+                    "justify-content": "center",
+                    gap: "10px",
+                    "font-size": "15px",
+                    "font-weight": role() === "job_seeker" ? "600" : "500",
+                    color: role() === "job_seeker" ? "#fd6116" : "#4b5563",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+                    <circle cx="12" cy="7" r="4"/>
+                  </svg>
+                  Job Seeker
+                </button>
+                <button
+                  type="button"
+                  class={`role-tab ${role() === "company" ? "active" : ""}`}
+                  onClick={() => setSelectedRole("company")}
+                  style={{
+                    flex: 1,
+                    padding: "14px 16px",
+                    border: role() === "company" ? "2px solid #fd6116" : "2px solid #e5e7eb",
+                    "border-radius": "8px",
+                    background: role() === "company" ? "#fff5f0" : "#fff",
+                    cursor: "pointer",
+                    display: "flex",
+                    "align-items": "center",
+                    "justify-content": "center",
+                    gap: "10px",
+                    "font-size": "15px",
+                    "font-weight": role() === "company" ? "600" : "500",
+                    color: role() === "company" ? "#fd6116" : "#4b5563",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 21h18"/>
+                    <path d="M9 21V8l-6 4 6 9h6v-9l-6-4 6-3"/>
+                    <path d="M9 3h6v5H9z"/>
+                  </svg>
+                  Company
+                </button>
+              </div>
+            </Show>
+            
+            {/* Show role badge for professional/customer when coming via direct link */}
+            <Show when={search.intent === "professional" || search.intent === "customer" || search.role === "professional" || search.role === "customer"}>
+              <div style={{ 
+                "margin-bottom": "24px", 
+                padding: "12px 16px", 
+                "background-color": "#fff5f0", 
+                "border-radius": "8px",
+                "border-left": "4px solid #fd6116"
+              }}>
+                <p style={{ margin: 0, "font-weight": "600", color: "#fd6116" }}>
+                  Registering as: {role() === "professional" ? "Professional" : role() === "customer" ? "Customer" : role()}
+                </p>
+              </div>
+            </Show>
 
             <div class="grid" style={{ "grid-template-columns": "1fr 1fr", margin: 0 }}>
               <div class="field">