This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 23:15:47 +00:00
parent c30a081f49
commit 1bbf4698fb
5 changed files with 74 additions and 33 deletions
+2
View File
@@ -8,6 +8,7 @@ import NotFound from "./pages/NotFound";
import ResetPassword from "./pages/ResetPassword";
import Profile from "./pages/Profile";
import Account from "./pages/Account";
import AccountConfirmation from "./pages/AccountConfirmation";
import { useCartSync } from "./hooks/useCartSync";
const queryClient = new QueryClient();
@@ -22,6 +23,7 @@ function AppContent() {
<Route path="/reset-password" element={<ResetPassword />} />
<Route path="/profile" element={<Profile />} />
<Route path="/account" element={<Account />} />
<Route path="/account/confirmation" element={<AccountConfirmation />} />
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} />
</Routes>
+3
View File
@@ -17,6 +17,7 @@ export type Database = {
profiles: {
Row: {
address: string | null
company_name: string | null
created_at: string
display_name: string | null
id: string
@@ -26,6 +27,7 @@ export type Database = {
}
Insert: {
address?: string | null
company_name?: string | null
created_at?: string
display_name?: string | null
id?: string
@@ -35,6 +37,7 @@ export type Database = {
}
Update: {
address?: string | null
company_name?: string | null
created_at?: string
display_name?: string | null
id?: string
+16 -33
View File
@@ -12,21 +12,18 @@ 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(),
company_name: z.string().trim().max(100, { message: "Företagsnamn får max vara 100 tecken" }).optional(),
address: z.string().trim().max(500, { message: "Adress får max vara 500 tecken" }).optional(),
});
interface ProfileData {
display_name: string;
phone: string;
company_name: string;
address: string;
}
const Account = () => {
const [profile, setProfile] = useState<ProfileData>({
display_name: "",
phone: "",
company_name: "",
address: "",
});
const [isLoading, setIsLoading] = useState(true);
@@ -50,7 +47,7 @@ const Account = () => {
try {
const { data, error } = await supabase
.from("profiles")
.select("display_name, phone, address")
.select("company_name, address")
.eq("user_id", user!.id)
.maybeSingle();
@@ -63,8 +60,7 @@ const Account = () => {
});
} else if (data) {
setProfile({
display_name: data.display_name || "",
phone: data.phone || "",
company_name: data.company_name || "",
address: data.address || "",
});
}
@@ -92,8 +88,7 @@ const Account = () => {
const { error } = await supabase
.from("profiles")
.update({
display_name: profile.display_name || null,
phone: profile.phone || null,
company_name: profile.company_name || null,
address: profile.address || null,
})
.eq("user_id", user!.id);
@@ -105,10 +100,8 @@ const Account = () => {
variant: "destructive",
});
} else {
toast({
title: "Profil sparad!",
description: "Dina uppgifter har uppdaterats.",
});
// Navigate to confirmation page after successful save
navigate("/account/confirmation");
}
} finally {
setIsSaving(false);
@@ -150,29 +143,19 @@ const Account = () => {
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="display_name">Namn</Label>
<Label htmlFor="company_name">Företagsnamn / E-post</Label>
<Input
id="display_name"
id="company_name"
type="text"
value={profile.display_name}
value={profile.company_name}
onChange={(e) =>
setProfile({ ...profile, display_name: e.target.value })
setProfile({ ...profile, company_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"
placeholder="Ditt företag eller e-postadress"
/>
<p className="text-xs text-muted-foreground">
Inloggad som: {user?.email}
</p>
</div>
<div className="space-y-2">
+50
View File
@@ -0,0 +1,50 @@
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "lucide-react";
import Header from "@/components/Header";
const AccountConfirmation = () => {
const navigate = useNavigate();
return (
<div className="min-h-screen bg-background">
<Header />
<div className="pt-24 px-4 pb-12">
<div className="max-w-lg mx-auto text-center">
<div className="bg-card border border-border rounded-lg p-8 md:p-12 shadow-sm">
<div className="flex justify-center mb-6">
<CheckCircle className="h-16 w-16 text-primary" />
</div>
<h1 className="font-serif text-2xl md:text-3xl font-semibold mb-4">
Uppgifter sparade!
</h1>
<p className="text-muted-foreground mb-8">
Dina kontuppgifter har sparats. Du kan nu beställa abonnemang med dessa uppgifter.
</p>
<div className="space-y-3">
<Button
onClick={() => navigate("/")}
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
>
Tillbaka till startsidan
</Button>
<Button
variant="outline"
onClick={() => navigate("/account")}
className="w-full"
>
Redigera uppgifter
</Button>
</div>
</div>
</div>
</div>
</div>
);
};
export default AccountConfirmation;