Enhance account confirmation flow

Redirect after save now passes justSaved flag; AccountConfirmation adapts heading and content based on whether user just saved or viewing existing data, and uses location state to show appropriate messages. Also adjust back link text and icon usage to reflect new behavior.

X-Lovable-Edit-ID: edt-b7c82fa3-77f1-43a5-b01f-b5e1fafcdb35
This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 23:24:05 +00:00
2 changed files with 39 additions and 30 deletions
+1 -1
View File
@@ -105,7 +105,7 @@ const Account = () => {
}); });
} else { } else {
// Navigate to confirmation page after successful save // Navigate to confirmation page after successful save
navigate("/account/confirmation"); navigate("/account/confirmation", { state: { justSaved: true } });
} }
} finally { } finally {
setIsSaving(false); setIsSaving(false);
+34 -25
View File
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { CheckCircle, Package } from "lucide-react"; import { CheckCircle, Package, User } from "lucide-react";
import Header from "@/components/Header"; import Header from "@/components/Header";
import { useAuth } from "@/hooks/useAuth"; import { useAuth } from "@/hooks/useAuth";
import { supabase } from "@/integrations/supabase/client"; import { supabase } from "@/integrations/supabase/client";
@@ -14,10 +14,14 @@ interface ProfileData {
const AccountConfirmation = () => { const AccountConfirmation = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const { user, loading: authLoading } = useAuth(); const { user, loading: authLoading } = useAuth();
const [profile, setProfile] = useState<ProfileData | null>(null); const [profile, setProfile] = useState<ProfileData | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
// Check if user just saved their profile
const justSaved = location.state?.justSaved === true;
useEffect(() => { useEffect(() => {
if (!authLoading && !user) { if (!authLoading && !user) {
navigate("/"); navigate("/");
@@ -60,6 +64,8 @@ const AccountConfirmation = () => {
); );
} }
const hasAddress = profile && (profile.street_address || profile.postal_code || profile.city);
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
@@ -68,29 +74,40 @@ const AccountConfirmation = () => {
<div className="mb-6"> <div className="mb-6">
<button <button
type="button" type="button"
onClick={() => navigate("/account")} onClick={() => navigate("/")}
className="text-sm text-muted-foreground hover:underline" className="text-sm text-muted-foreground hover:underline"
> >
Tillbaka till mitt konto Tillbaka till startsidan
</button> </button>
</div> </div>
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
{/* Success message */} {/* Header section */}
<div className="bg-card border border-border rounded-lg p-6 md:p-8 shadow-sm mb-6"> <div className="bg-card border border-border rounded-lg p-6 md:p-8 shadow-sm mb-6">
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
{justSaved ? (
<CheckCircle className="h-8 w-8 text-primary flex-shrink-0" /> <CheckCircle className="h-8 w-8 text-primary flex-shrink-0" />
) : (
<User className="h-8 w-8 text-primary flex-shrink-0" />
)}
<div> <div>
<h1 className="font-serif text-2xl font-semibold"> <h1 className="font-serif text-2xl font-semibold">
Uppgifter sparade! {justSaved ? "Uppgifter sparade!" : "Mitt konto"}
</h1> </h1>
{justSaved && (
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
Dina kontuppgifter har uppdaterats. Dina kontuppgifter har uppdaterats.
</p> </p>
)}
{!justSaved && user?.email && (
<p className="text-muted-foreground text-sm">
{user.email}
</p>
)}
</div> </div>
</div> </div>
{profile && (profile.street_address || profile.postal_code || profile.city) && ( {hasAddress && (
<div className="mt-4 pt-4 border-t border-border"> <div className="mt-4 pt-4 border-t border-border">
<p className="text-sm font-medium mb-2">Leveransadress:</p> <p className="text-sm font-medium mb-2">Leveransadress:</p>
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
@@ -101,6 +118,16 @@ const AccountConfirmation = () => {
</p> </p>
</div> </div>
)} )}
<div className="mt-4 pt-4 border-t border-border">
<Button
variant="outline"
onClick={() => navigate("/account")}
className="w-full"
>
Redigera uppgifter
</Button>
</div>
</div> </div>
{/* Subscription status */} {/* Subscription status */}
@@ -131,24 +158,6 @@ const AccountConfirmation = () => {
Beställ abonnemang Beställ abonnemang
</Button> </Button>
</div> </div>
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-3">
<Button
variant="outline"
onClick={() => navigate("/account")}
className="flex-1"
>
Redigera uppgifter
</Button>
<Button
variant="outline"
onClick={() => navigate("/")}
className="flex-1"
>
Till startsidan
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>