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

src/pages/Account.tsx

@@ -105,7 +105,7 @@ const Account = () => {
         });
       } else {
         // Navigate to confirmation page after successful save
-        navigate("/account/confirmation");
+        navigate("/account/confirmation", { state: { justSaved: true } });
       }
     } finally {
       setIsSaving(false);

src/pages/AccountConfirmation.tsx

@@ -1,7 +1,7 @@
 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 { CheckCircle, Package } from "lucide-react";
+import { CheckCircle, Package, User } from "lucide-react";
 import Header from "@/components/Header";
 import { useAuth } from "@/hooks/useAuth";
 import { supabase } from "@/integrations/supabase/client";
@@ -14,10 +14,14 @@ interface ProfileData {
 
 const AccountConfirmation = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const { user, loading: authLoading } = useAuth();
   const [profile, setProfile] = useState<ProfileData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Check if user just saved their profile
+  const justSaved = location.state?.justSaved === true;
+
   useEffect(() => {
     if (!authLoading && !user) {
       navigate("/");
@@ -60,6 +64,8 @@ const AccountConfirmation = () => {
     );
   }
 
+  const hasAddress = profile && (profile.street_address || profile.postal_code || profile.city);
+
   return (
     <div className="min-h-screen bg-background">
       <Header />
@@ -68,29 +74,40 @@ const AccountConfirmation = () => {
         <div className="mb-6">
           <button
             type="button"
-            onClick={() => navigate("/account")}
+            onClick={() => navigate("/")}
             className="text-sm text-muted-foreground hover:underline"
           >
-            ← Tillbaka till mitt konto
+            ← Tillbaka till startsidan
           </button>
         </div>
 
         <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="flex items-center gap-4 mb-4">
-              <CheckCircle className="h-8 w-8 text-primary flex-shrink-0" />
+              {justSaved ? (
+                <CheckCircle className="h-8 w-8 text-primary flex-shrink-0" />
+              ) : (
+                <User className="h-8 w-8 text-primary flex-shrink-0" />
+              )}
               <div>
                 <h1 className="font-serif text-2xl font-semibold">
-                  Uppgifter sparade!
+                  {justSaved ? "Uppgifter sparade!" : "Mitt konto"}
                 </h1>
-                <p className="text-muted-foreground text-sm">
+                {justSaved && (
-                  Dina kontuppgifter har uppdaterats.
+                  <p className="text-muted-foreground text-sm">
-                </p>
+                    Dina kontuppgifter har uppdaterats.
+                  </p>
+                )}
+                {!justSaved && user?.email && (
+                  <p className="text-muted-foreground text-sm">
+                    {user.email}
+                  </p>
+                )}
               </div>
             </div>
 
-            {profile && (profile.street_address || profile.postal_code || profile.city) && (
+            {hasAddress && (
               <div className="mt-4 pt-4 border-t border-border">
                 <p className="text-sm font-medium mb-2">Leveransadress:</p>
                 <p className="text-muted-foreground text-sm">
@@ -101,6 +118,16 @@ const AccountConfirmation = () => {
                 </p>
               </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>
 
           {/* Subscription status */}
@@ -131,24 +158,6 @@ const AccountConfirmation = () => {
               Beställ abonnemang
             </Button>
           </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>