Add account page and save address

Implement dedicated /account page for logged-in users, wire address from subscription into profile on order, and update account menu to navigate to account when logged in. Also extend AbonnemangForm to prefill/save address to profile and update App routing accordingly. Refactor AccountMenu to direct to account and simplify logic. X-Lovable-Edit-ID: edt-998f3ddd-0243-4847-bad7-27b351f58fc3
2026-01-27 23:08:46 +00:00
parent 58b6ebb21c 6a4a1f9b96
commit c30a081f49
4 changed files with 336 additions and 45 deletions
@@ -7,6 +7,7 @@ import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 import ResetPassword from "./pages/ResetPassword";
 import Profile from "./pages/Profile";
+import Account from "./pages/Account";
 import { useCartSync } from "./hooks/useCartSync";

 const queryClient = new QueryClient();
@@ -20,6 +21,7 @@ function AppContent() {
        <Route path="/" element={<Index />} />
        <Route path="/reset-password" element={<ResetPassword />} />
        <Route path="/profile" element={<Profile />} />
+        <Route path="/account" element={<Account />} />
        {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
        <Route path="*" element={<NotFound />} />
      </Routes>
@@ -1,5 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { z } from "zod";
+import { useAuth } from "@/hooks/useAuth";
+import { supabase } from "@/integrations/supabase/client";

 const formSchema = z.object({
  företag: z.string().trim().min(1, "Fyll i företagsnamn").max(100),
@@ -19,6 +21,7 @@ interface AbonnemangFormProps {
 }

 const AbonnemangForm = ({ selectedPlan, onClose }: AbonnemangFormProps) => {
+  const { user } = useAuth();
  const [formData, setFormData] = useState({
    företag: "",
    kontaktperson: "",
@@ -34,6 +37,37 @@ const AbonnemangForm = ({ selectedPlan, onClose }: AbonnemangFormProps) => {
  const [submitted, setSubmitted] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

+  // Pre-fill form with user's profile data if logged in
+  useEffect(() => {
+    const fetchProfileData = async () => {
+      if (user) {
+        const { data } = await supabase
+          .from("profiles")
+          .select("display_name, phone, address")
+          .eq("user_id", user.id)
+          .maybeSingle();
+
+        if (data) {
+          setFormData((prev) => ({
+            ...prev,
+            kontaktperson: data.display_name || prev.kontaktperson,
+            telefon: data.phone || prev.telefon,
+            epost: user.email || prev.epost,
+            // Parse address if it exists (format: "gatuadress, postnummer ort")
+            adress: data.address?.split(",")[0]?.trim() || prev.adress,
+          }));
+        } else {
+          // At least fill in email
+          setFormData((prev) => ({
+            ...prev,
+            epost: user.email || prev.epost,
+          }));
+        }
+      }
+    };
+    fetchProfileData();
+  }, [user]);
+
  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
@@ -45,6 +79,31 @@ const AbonnemangForm = ({ selectedPlan, onClose }: AbonnemangFormProps) => {
    }
  };

+  const saveAddressToProfile = async () => {
+    if (!user) return;
+
+    // Combine address fields into one string
+    const fullAddress = [
+      formData.adress,
+      formData.postnummer && formData.stad
+        ? `${formData.postnummer} ${formData.stad}`
+        : formData.postnummer || formData.stad,
+    ]
+      .filter(Boolean)
+      .join(", ");
+
+    if (fullAddress) {
+      await supabase
+        .from("profiles")
+        .update({
+          address: fullAddress,
+          phone: formData.telefon || null,
+          display_name: formData.kontaktperson || null,
+        })
+        .eq("user_id", user.id);
+    }
+  };
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});
@@ -61,6 +120,9 @@ const AbonnemangForm = ({ selectedPlan, onClose }: AbonnemangFormProps) => {
      return;
    }

+    // Save address to profile if user is logged in
+    await saveAddressToProfile();
+
    // For now, just show success - backend integration can be added later
    setSubmitted(true);
  };
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { LogOut, User } from "lucide-react";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -12,7 +11,7 @@ import { useAuth } from "@/hooks/useAuth";
 import AuthDialog from "./AuthDialog";

 const AccountMenu = () => {
-  const { user, loading, signOut } = useAuth();
+  const { user, loading } = useAuth();
  const [authDialogOpen, setAuthDialogOpen] = useState(false);
  const [authMode, setAuthMode] = useState<"login" | "signup">("login");
  const navigate = useNavigate();
@@ -22,14 +21,25 @@ const AccountMenu = () => {
    setAuthDialogOpen(true);
  };

-  const handleSignOut = async () => {
-    await signOut();
-  };
-
  if (loading) {
    return null;
  }

+  // If user is logged in, navigate directly to account page
+  if (user) {
+    return (
+      <Button
+        variant="ghost"
+        onClick={() => navigate("/account")}
+        className="text-primary hover:text-primary/80 font-serif text-base font-bold border-2 hover:bg-[rgba(220,38,38,0.3)]"
+        style={{ borderColor: '#dc2626' }}
+      >
+        Mitt konto
+      </Button>
+    );
+  }
+
+  // If not logged in, show dropdown with login/signup options
  return (
    <>
      <DropdownMenu>
@@ -46,44 +56,20 @@ const AccountMenu = () => {
          align="end"
          className="bg-background border border-border shadow-lg z-50 min-w-[160px]"
        >
-          {user ? (
-            <>
-              <DropdownMenuItem className="text-muted-foreground text-sm cursor-default">
-                {user.email}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => navigate("/profile")}
-                className="cursor-pointer flex items-center gap-2 hover:!bg-[rgba(220,38,38,0.3)] focus:!bg-[rgba(220,38,38,0.3)] hover:!text-black focus:!text-black"
-              >
-                <User className="h-4 w-4" />
-                Min profil
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={handleSignOut}
-                className="cursor-pointer flex items-center gap-2 hover:!bg-[rgba(220,38,38,0.3)] focus:!bg-[rgba(220,38,38,0.3)] hover:!text-black focus:!text-black"
-              >
-                <LogOut className="h-4 w-4" />
-                Logga ut
-              </DropdownMenuItem>
-            </>
-          ) : (
-            <>
-              <div className="px-2 py-1.5">
-                <button
-                  onClick={() => handleOpenAuth("signup")}
-                  className="w-full px-2 py-1.5 text-left text-sm rounded-sm hover:bg-[rgba(220,38,38,0.3)] focus:bg-[rgba(220,38,38,0.3)] transition-colors"
-                >
-                  Skapa konto
-                </button>
-              </div>
-              <DropdownMenuItem
-                onClick={() => handleOpenAuth("login")}
-                className="cursor-pointer hover:!bg-[rgba(220,38,38,0.3)] focus:!bg-[rgba(220,38,38,0.3)] hover:!text-black focus:!text-black"
-              >
-                Logga in
-              </DropdownMenuItem>
-            </>
-          )}
+          <div className="px-2 py-1.5">
+            <button
+              onClick={() => handleOpenAuth("signup")}
+              className="w-full px-2 py-1.5 text-left text-sm rounded-sm hover:bg-[rgba(220,38,38,0.3)] focus:bg-[rgba(220,38,38,0.3)] transition-colors"
+            >
+              Skapa konto
+            </button>
+          </div>
+          <DropdownMenuItem
+            onClick={() => handleOpenAuth("login")}
+            className="cursor-pointer hover:!bg-[rgba(220,38,38,0.3)] focus:!bg-[rgba(220,38,38,0.3)] hover:!text-black focus:!text-black"
+          >
+            Logga in
+          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

@@ -0,0 +1,241 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useAuth } from "@/hooks/useAuth";
+import { useToast } from "@/hooks/use-toast";
+import { supabase } from "@/integrations/supabase/client";
+import Header from "@/components/Header";
+import { LogOut, Save } from "lucide-react";
+
+const profileSchema = z.object({
+  display_name: z.string().trim().max(100, { message: "Namn får max vara 100 tecken" }).optional(),
+  phone: z.string().trim().max(20, { message: "Telefonnummer får max vara 20 tecken" }).optional(),
+  address: z.string().trim().max(500, { message: "Adress får max vara 500 tecken" }).optional(),
+});
+
+interface ProfileData {
+  display_name: string;
+  phone: string;
+  address: string;
+}
+
+const Account = () => {
+  const [profile, setProfile] = useState<ProfileData>({
+    display_name: "",
+    phone: "",
+    address: "",
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const { user, loading: authLoading, signOut } = useAuth();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      navigate("/");
+      return;
+    }
+
+    if (user) {
+      fetchProfile();
+    }
+  }, [user, authLoading, navigate]);
+
+  const fetchProfile = async () => {
+    try {
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("display_name, phone, address")
+        .eq("user_id", user!.id)
+        .maybeSingle();
+
+      if (error) {
+        console.error("Error fetching profile:", error);
+        toast({
+          title: "Kunde inte hämta profil",
+          description: error.message,
+          variant: "destructive",
+        });
+      } else if (data) {
+        setProfile({
+          display_name: data.display_name || "",
+          phone: data.phone || "",
+          address: data.address || "",
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validation = profileSchema.safeParse(profile);
+    if (!validation.success) {
+      toast({
+        title: "Fel",
+        description: validation.error.errors[0].message,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const { error } = await supabase
+        .from("profiles")
+        .update({
+          display_name: profile.display_name || null,
+          phone: profile.phone || null,
+          address: profile.address || null,
+        })
+        .eq("user_id", user!.id);
+
+      if (error) {
+        toast({
+          title: "Kunde inte spara profil",
+          description: error.message,
+          variant: "destructive",
+        });
+      } else {
+        toast({
+          title: "Profil sparad!",
+          description: "Dina uppgifter har uppdaterats.",
+        });
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate("/");
+  };
+
+  if (authLoading || isLoading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="pt-24 flex items-center justify-center">
+          <p className="text-muted-foreground">Laddar...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <div className="pt-24 px-4 pb-12">
+        <div className="max-w-2xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <h1 className="font-serif text-3xl md:text-4xl font-semibold mb-2">
+              Mitt konto
+            </h1>
+            <p className="text-muted-foreground">{user?.email}</p>
+          </div>
+
+          {/* Profile Card */}
+          <div className="bg-card border border-border rounded-lg p-6 md:p-8 shadow-sm mb-6">
+            <h2 className="font-serif text-xl mb-6">Mina uppgifter</h2>
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="space-y-2">
+                <Label htmlFor="display_name">Namn</Label>
+                <Input
+                  id="display_name"
+                  type="text"
+                  value={profile.display_name}
+                  onChange={(e) =>
+                    setProfile({ ...profile, display_name: e.target.value })
+                  }
+                  placeholder="Ditt namn"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="phone">Telefon</Label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  value={profile.phone}
+                  onChange={(e) =>
+                    setProfile({ ...profile, phone: e.target.value })
+                  }
+                  placeholder="070-123 45 67"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="address">Leveransadress</Label>
+                <Textarea
+                  id="address"
+                  value={profile.address}
+                  onChange={(e) =>
+                    setProfile({ ...profile, address: e.target.value })
+                  }
+                  placeholder="Gatuadress, postnummer, ort"
+                  rows={3}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Denna adress används vid beställning av abonnemang.
+                </p>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+                disabled={isSaving}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                {isSaving ? "Sparar..." : "Spara ändringar"}
+              </Button>
+            </form>
+          </div>
+
+          {/* Sign Out */}
+          <div className="bg-card border border-border rounded-lg p-6 shadow-sm">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium">Logga ut</h3>
+                <p className="text-sm text-muted-foreground">
+                  Logga ut från ditt konto
+                </p>
+              </div>
+              <Button
+                variant="outline"
+                onClick={handleSignOut}
+                className="border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground"
+              >
+                <LogOut className="h-4 w-4 mr-2" />
+                Logga ut
+              </Button>
+            </div>
+          </div>
+
+          {/* Back link */}
+          <div className="text-center mt-8">
+            <button
+              type="button"
+              onClick={() => navigate("/")}
+              className="text-sm text-primary hover:underline"
+            >
+              ← Tillbaka till startsidan
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;