This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 23:08:46 +00:00
parent 58b6ebb21c
commit 6a4a1f9b96
4 changed files with 336 additions and 45 deletions
+63 -1
View File
@@ -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);
};
+30 -44
View File
@@ -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>