admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(spa): add cart coupon input and checkout mobile accordion

Browse Source
This commit is contained in:
Your Name committed 2026-06-06 20:12:43 +07:00
1 parent 769afa37fd
commit fd3abcf487
2 files changed
+59 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/pages/CheckoutPage.tsx
+20 -7
View File
@@ -23,6 +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 [activePromos, setActivePromos] = useState<any[]>([])
const [customerPoints, setCustomerPoints] = useState(0)
@@ -293,9 +294,9 @@ export default function CheckoutPage() {
<main className="max-w-6xl mx-auto px-6 pt-32 pb-24 text-pop-black">
<h1 className="text-4xl font-bold mb-12">Checkout</h1>
<div className="flex flex-col lg:flex-row gap-12">
<div className="flex flex-col lg:flex-row gap-12 relative">
{/* Form Section */}
<div className="flex-1 space-y-8">
<div className="flex-1 space-y-8 order-2 lg:order-1">
<form id="checkout-form" onSubmit={handleSubmit} className="space-y-6">
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 space-y-6 shadow-sm">
<h2 className="text-xl font-bold uppercase tracking-widest text-spa-forest border-b border-spa-stone/10 pb-4">Shipping Information</h2>
@@ -357,12 +358,22 @@ export default function CheckoutPage() {
</div>
{/* Summary Section */}
<div className="lg:w-96 space-y-6">
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 shadow-sm sticky top-32">
<h2 className="text-xl font-bold uppercase tracking-widest text-spa-forest border-b border-spa-stone/10 pb-4 mb-6">Order Summary</h2>
<div className="lg:w-96 space-y-6 order-1 lg:order-2">
<div className="bg-white p-6 lg:p-8 rounded-2xl border border-spa-stone/10 shadow-sm sticky top-32 transition-all">
<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"
>
<span>Order Summary</span>
<span className="lg:hidden">
<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>
{/* Coupon Section */}
<div className="mb-6 pb-6 border-b border-spa-stone/10">
<div className={`overflow-hidden transition-all duration-300 ${isSummaryExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 lg:max-h-[2000px] lg:opacity-100'}`}>
{/* Coupon Section */}
<div className="mb-6 pb-6 border-b border-spa-stone/10">
{!appliedCoupon ? (
<div className="space-y-2">
<label className="text-[10px] uppercase font-bold tracking-widest text-spa-stone/80">Discount Code</label>
@@ -495,6 +506,8 @@ export default function CheckoutPage() {
</div>
</div>
</div> {/* End Accordion Content */}
<button
form="checkout-form"
type="submit"