From c730f21c237dcec00fdfae09eeb41cacac3ad9e6 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 6 Jun 2026 20:19:19 +0700
Subject: [PATCH] feat(spa): show total amount when order summary is collapsed
 and default to collapsed

---
 apps/spa/src/pages/CheckoutPage.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/spa/src/pages/CheckoutPage.tsx b/apps/spa/src/pages/CheckoutPage.tsx
index 5aab588..0bfbb0d 100644
--- a/apps/spa/src/pages/CheckoutPage.tsx
+++ b/apps/spa/src/pages/CheckoutPage.tsx
@@ -23,7 +23,7 @@ export default function CheckoutPage() {
   const [isFreeShipping, setIsFreeShipping] = useState<boolean>(false)
   const [couponLoading, setCouponLoading] = useState(false)
   const [couponError, setCouponError] = useState('')
-  const [isSummaryExpanded, setIsSummaryExpanded] = useState(true)
+  const [isSummaryExpanded, setIsSummaryExpanded] = useState(false)
 
   const [activePromos, setActivePromos] = useState<any[]>([])
   const [customerPoints, setCustomerPoints] = useState(0)
@@ -371,10 +371,17 @@ export default function CheckoutPage() {
               <button 
                 type="button" 
                 onClick={() => setIsSummaryExpanded(!isSummaryExpanded)}
-                className="w-full flex items-center justify-between text-xl font-bold uppercase tracking-widest text-spa-forest pb-4 border-b border-spa-stone/10 mb-6 lg:pointer-events-none"
+                className={`w-full flex items-center justify-between text-xl font-bold uppercase tracking-widest text-spa-forest pb-4 ${isSummaryExpanded ? 'border-b border-spa-stone/10 mb-6' : ''} lg:pointer-events-none lg:border-b lg:border-spa-stone/10 lg:mb-6 transition-all`}
               >
-                <span>Order Summary</span>
-                <span className="lg:hidden">
+                <div className="flex flex-col items-start gap-1">
+                  <span>Order Summary</span>
+                  {!isSummaryExpanded && (
+                    <span className="text-rose-500 normal-case text-sm lg:hidden font-bold flex items-center gap-2">
+                      Total: {formatPrice(total)}
+                    </span>
+                  )}
+                </div>
+                <span className="lg:hidden text-spa-stone">
                   <svg className={`w-5 h-5 transform transition-transform ${isSummaryExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                 </span>
               </button>