# Slide-Out Cart Drawer & Single-Page Checkout Flow Design Plan

**Project:** Bangladesh Saree E-Commerce Website  
**Routes & Components:**  
1. Global Right Slide-Out Cart Drawer  
2. `/checkout` — Single-Page Guest Cash on Delivery (COD) Checkout  
3. `/order-received/[orderId]` — Order Received ("Thank You") Confirmation View  
**Design System Reference:** Strictly uses the 12 global variables from `global_color_typography_design_plan.md` (`--bg-main`, `--bg-surface`, `--brand-primary`, `--brand-accent`, `--text-primary`, `--text-muted`, `--text-light`, `--border-subtle`, `--state-success`, `--state-error`, `--font-heading`, `--font-body`) and shared standards from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.**

---

## 1. AI Agent Implementation Rules (Strict Directives)

1. **100% Variable-Driven Styling:** Reference only the 12 global variables. Never hardcode hex values or font names.
2. **Contrast & Hover Rule:** `--brand-accent` buttons and badges always use `--text-primary` text; on hover/tap, `--brand-accent` buttons flip to `--brand-primary` background with `--text-light` text.
3. **100% Guest Checkout (No Account Creation):** Never require login, registration, or password creation.
4. **Optional Email Field for Confirmation & Tracking:** Include `Email Address (Optional)` inside the Shipping & Contact Details block. If filled, the customer receives an immediate Order Confirmation Receipt email and a Courier Tracking Link email once the order is marked `Shipped`.
5. **Express Buy (`ORDER NOW`) vs. Cart Checkout (`PROCEED TO CHECKOUT →`):** Follow Section 8 of `global_ui_components_and_content_standards.md` so clicking `ORDER NOW` checks out **only that saree** without overwriting existing bag items, while offering a 1-tap `"+ Add my other bag items"` option.
6. **Hide Floating Chat on Checkout:** The floating WhatsApp/Messenger widget stays hidden on `/checkout` and `/order-received/[orderId]` so nothing distracts or overlaps the `CONFIRM ORDER` button.

---

## 2. Two Seamless Entry Paths to Purchase

1. **Path A — Clicking `ADD TO CART` (Opens Slide-Out Cart Drawer):**
   * Adds the saree to the shopping bag and slides open the **Right Cart Drawer** over the current screen. Clicking **`PROCEED TO CHECKOUT →`** inside the drawer opens `/checkout` with **all bag items**.
2. **Path B — Clicking `ORDER NOW` ("Express Buy" to `/checkout`):**
   * Routes immediately to `/checkout` with **only that saree** (selected quantity) ready for 1-step COD confirmation.
   * **Existing Bag Preservation Rule:** Any items already sitting in the shopping bag remain untouched. If the bag has other items, the Order Summary on `/checkout` displays a compact helper strip:
     * *"You also have [2] other sarees in your bag."* + **`+ Add them to this order`** button (`--brand-primary` text link). Tapping it merges the bag items into the current checkout in 1 tap.

---

## 3. Component #1: Slide-Out Cart Drawer (Shopping Bag Overlay)

Triggered whenever a shopper clicks **`ADD TO CART`** or clicks the **Shopping Bag Icon (`🛍`)** in the header.

### A. Drawer Container & Backdrop
* **Backdrop:** Dimmed overlay (`--text-primary` at `60%` opacity). Clicking outside or pressing `ESC` closes the drawer.
* **Drawer Dimensions:** Right-side panel (`width: 420px` on Desktop/Tablet; `width: 100vw` or `92vw`, `height: 100dvh` on Mobile).
* **Surface & Border:** `--bg-main` background with a `1px` solid `--border-subtle` left border.

### B. Drawer Header (Pinned Top)
* **Left Title (H3):** `"Your Shopping Bag (2)"` in `--font-heading` (Semi-Bold `600`, `22px` Desktop / `20px` Mobile, `--brand-primary`).
* **Right Close Button (`✕`):** Circular button (`36px` Desktop / `44px` Mobile) in `--bg-surface` with `--text-primary` icon; flips to `--brand-primary` background with `--text-light` icon on hover/tap.

### C. Scrollable Cart Item Cards (Middle Section)
Each added saree renders inside a horizontal card (`--bg-surface` background, `1px` `--border-subtle` border, `12px` padding):
* **Left Thumbnail:** `3:4` portrait photo (`68px × 90px`, `1px` `--border-subtle` border).
* **Right Details:**
  * **Saree Title:** 1–2 lines in `--font-body` (Medium `500`, `14px`, `--text-primary`).
  * **Spec Meta:** e.g., `Blouse Piece: Included` in `--font-body` (`12px`, `--text-muted`).
  * **Price:** `BDT 4,500` in `--font-body` (Bold `700`, `15px`, `--text-primary`).
  * **Controls Row:** Stepper `[ −   1   + ]` (`96px × 36px`, `--bg-main` background, `1px` `--border-subtle` border, `--text-primary` symbols) on the left + `"Remove"` text button (`12px`, `--text-muted`, hover `--state-error` / `--brand-primary`) on the right.
* **Empty Bag State:** Centered `"Your shopping bag is empty"` (`--text-muted`) + Primary button **`EXPLORE SAREES →`** (`--brand-accent` fill with `--text-primary` text).

### D. Sticky Drawer Footer (Pinned Bottom)
* **Container:** `--bg-main` background with top `1px` `--border-subtle` border (`16px 20px` padding).
* **Subtotal Row:** `"Subtotal"` (`--text-muted`) on left + **`BDT 9,000`** (`--font-body` Bold `700`, `18px`, `--text-primary`) on right.
* **Delivery Note:** *"Delivery charge calculated at checkout • Cash on Delivery available"* (`12px`, `--text-muted`).
* **Primary Button — `PROCEED TO CHECKOUT →`:**
  * Full width (`100%`), height `48px`, solid `--brand-accent` background with `--text-primary` Semi-Bold (`600`, `14px` uppercase) text; flips to `--brand-primary` background with `--text-light` text on hover/tap.
* **Secondary Link:** Centered `"Continue Shopping"` link (`13px`, `--text-muted`) below the button.

---

## 4. Component #2: Single-Page Guest Checkout (`/checkout`)

### A. Distraction-Free Checkout Header
* **Background:** Solid `--brand-primary` (`height: 68px` Desktop / `58px` Mobile).
* **Left:** Brand Logo in `--text-light` (`--font-heading`, Bold `700`, `28px` Desktop / `22px` Mobile).
* **Right:** `"← Back to Shopping"` link in `--font-body` (`14px`, `--text-light`, hover `--brand-accent`).

### B. Responsive Checkout Grid (`max-width: 1140px` Centered on `--bg-main`)
* **Desktop (`1025px+`):** 2-Column Asymmetric Split (`58%` Left Shipping & COD Form / `42%` Right Sticky Order Summary & `CONFIRM ORDER` Button).
* **Tablet (`768px – 1024px`):** `55% / 45%` 2-Column Split.
* **Mobile (`320px – 767px`):** Single-Column Vertical Flow:
  1. **Top Collapsible Order Summary Bar** (`"🛍 Show Order Summary (1 Saree) ▾"` on left + **`BDT 4,570`** on right inside a `48px` `--bg-surface` bar with `1px` `--border-subtle` border).
  2. **Block 1: Shipping & Contact Details (with Optional Email)**
  3. **Block 2: Select Delivery Area (Inside vs. Outside Dhaka)**
  4. **Block 3: Payment Method (Cash on Delivery)**
  5. **Bottom Cost Breakdown & `CONFIRM ORDER` Button**

---

## 5. Left Column: 3-Block Guest Shipping & COD Form

Each block sits inside a `--bg-surface` container with a `1px` solid `--border-subtle` border (`24px` Desktop / `16px` Mobile padding).

### Form Input & Validation Styling (`global_ui_components_and_content_standards.md` Section 9)
* **Default Input:** `--bg-main` background, `1px` `--border-subtle` border, height `48px`, `--text-primary` text (`15px` Desktop / `16px` Mobile to prevent iOS auto-zoom), placeholder in `--text-muted`.
* **Focus State:** `1.5px` solid `--brand-primary` border.
* **Error State:** `1.5px` solid `--state-error` border + helper message below in `--state-error` (`13px`).
* **Valid State:** Subtle `✓` icon in `--state-success` inside the right edge of validated fields.

---

### Block 1: Shipping & Contact Details (`No Account Required`)
* **Section Heading (H3):** `"1. Shipping & Contact Details"` in `--font-heading` (Semi-Bold `600`, `22px` Desktop / `20px` Mobile, `--brand-primary`).
* **Subtitle:** *"Order directly as a guest — no account or password required."* (`13px`, `--text-muted`).

#### Form Fields (Top to Bottom):
1. **Full Name (`*` Required):**
   * `type="text"`, `autocomplete="name"`, Placeholder: `"Enter receiver's full name"`.
   * Error message if blank: *"Please enter the receiver's full name"* (`--state-error`).
2. **Mobile Number (`*` Required — Bangladesh 11-Digit Validation):**
   * `type="tel"` (numeric keypad on mobile), `autocomplete="tel"`, Placeholder: `"01XXXXXXXXX (e.g., 01712345678)"`.
   * **Validation Rule:** Auto-strips `+88` or spaces/hyphens and validates 11 digits starting with `013, 014, 015, 016, 017, 018, 019`.
   * Error message if invalid: *"Please enter a valid 11-digit Bangladesh mobile number (01XXXXXXXXX)"* (`--state-error`).
   * Helper text: *"Our delivery team will call this number before delivering your saree."* (`12px`, `--text-muted`).
3. **Email Address (`Optional` — For Order Confirmation & Tracking Email):**
   * **Label:** `Email Address (Optional)` (`--text-primary` with `(Optional)` in `--text-muted`).
   * `type="email"` (opens `@` email keyboard on mobile), `autocomplete="email"`, Placeholder: `"yourname@example.com (Optional)"`.
   * **Helper Text:** *"Enter your email if you would like to receive an order confirmation receipt now and a courier tracking link when your saree ships."* (`12px`, `--text-muted`).
   * **Validation Rule:** Never blocks checkout if left blank; validates standard `name@domain.com` format only if text is entered.
4. **District / City & Area Row (`*` Required):**
   * **District Dropdown (`*` Required):** Searchable dropdown of all 64 Bangladesh Districts, with **Dhaka** pinned first for 1-tap selection, followed by *Chattogram, Gazipur, Narayanganj, Sylhet, Rajshahi, Khulna, Cumilla, etc.*
   * **Area / Thana (`*` Required):** Text input (*Placeholder: "e.g., Dhanmondi, Uttara, Mirpur, Gulshan"*).
5. **Detailed Delivery Address (`*` Required):**
   * Textarea (`2 rows`, `min-height: 76px`), Placeholder: `"House #, Flat/Floor #, Road #, Block/Sector, Landmark"`.
6. **Order / Delivery Note (`Optional`):**
   * Single-line input, Placeholder: `"Any special instruction for the delivery rider (optional)"`.

---

### Block 2: Select Delivery Area
* **Section Heading (H3):** `"2. Select Delivery Area"` in `--font-heading` (`22px` Desktop / `20px` Mobile, `--brand-primary`).
* **2 Interactive Radio Cards** (Auto-selects **Inside Dhaka City** when District is `Dhaka`, or **Outside Dhaka** for other districts; also manually tappable in 1 tap):
  1. **Radio Card A — Inside Dhaka City:**
     * Left: Radio Circle (`●`) + **`Inside Dhaka City`** (`--font-body` Semi-Bold `600`, `15px`, `--text-primary`) + `"Estimated Delivery: 2 – 3 Business Days"` (`13px`, `--text-muted`).
     * Right: **`BDT 70`** (`--font-body` Bold `700`, `16px`, `--text-primary` — linked to `storeConfig`).
  2. **Radio Card B — Outside Dhaka (All Bangladesh):**
     * Left: Radio Circle (`○`) + **`Outside Dhaka (Nationwide)`** (`--font-body` Semi-Bold `600`, `15px`, `--text-primary`) + `"Estimated Delivery: 3 – 5 Business Days"` (`13px`, `--text-muted`).
     * Right: **`BDT 130`** (`--font-body` Bold `700`, `16px`, `--text-primary` — linked to `storeConfig`).
* **Card Styling:** Active card uses `--bg-main` background, `2px` solid `--brand-primary` border, and `--brand-primary` radio dot. Inactive card uses `--bg-main` background with `1px` `--border-subtle` border.

---

### Block 3: Payment Method (Cash on Delivery Only)
* **Section Heading (H3):** `"3. Payment Method"` in `--font-heading` (`22px` Desktop / `20px` Mobile, `--brand-primary`).
* **Locked Active COD Card (`--bg-main` background, `2px` `--brand-primary` border, `16px` padding):**
  * **Top Row:** Filled radio dot (`●` in `--brand-primary`) + **`Cash on Delivery (COD)`** (`--font-body` Bold `700`, `16px`, `--text-primary`) + right badge **`PAY ON DELIVERY`** (`--brand-accent` fill with `--text-primary` Semi-Bold `11px` uppercase text).
  * **Description:** *"No advance payment needed. Pay the total amount in cash directly to the delivery rider when you receive and check your saree at your doorstep."* (`14px`, `--text-muted`).

---

## 6. Right Column: Order Summary, Coupon & Confirm Button (`42%` Sticky on Desktop)

Framed inside a `--bg-surface` card with a `1px` `--border-subtle` border (`24px` Desktop / `16px` Mobile padding):

1. **Header Row:**
   * Left (H3): `"Order Summary"` in `--font-heading` (`22px`, `--brand-primary`).
   * Right: `"Edit Bag"` link (`13px`, `--brand-primary`) — opens the Slide-Out Cart Drawer without clearing any typed form fields.
2. **Express Buy Other-Bag-Items Strip (Conditional):**
   * Shown only if the shopper arrived via `ORDER NOW` (Express Buy) AND has other items sitting in their shopping bag:
   * `--bg-main` box (`1px` `--border-subtle` border, `10px 12px` padding): *"You also have [2] other sarees in your bag."* + **`+ Add them to this order`** (`--brand-primary` Semi-Bold link).
3. **Itemized Saree List:**
   * Each row shows `3:4` thumbnail (`52px × 68px`) with circular quantity badge (`1` in `--brand-primary` fill, `--text-light` text), Saree Title (`14px`, `--text-primary`), Blouse Piece note (`12px`, `--text-muted`), and line subtotal (`BDT 4,500`, `--text-primary`).
4. **Promo / Coupon Code Row:**
   * Input (`"Promo / Coupon Code"` in `--bg-main`, `1px` `--border-subtle` border, `44px` height) + outlined **`APPLY`** button (`44px` height, `1.5px` `--brand-primary` border/text).
   * **Feedback States:**
     * Valid code (matched against `storeConfig.mockCoupons` on frontend, e.g., `EID10`): Shows `"Coupon EID10 applied (10% off) ✓"` in `--state-success` (`12px`) and adds the discount row below.
     * Invalid code: Shows `"Invalid or expired promo code"` in `--state-error` (`12px`).
5. **Cost Breakdown Table (`1px` `--border-subtle` Dividers):**
   * **Subtotal:** `BDT 4,500` (`--text-primary`)
   * **Promo Discount (If Applied):** `− BDT 450` (`--state-success` Semi-Bold)
   * **Delivery Charge (Inside/Outside Dhaka):** `BDT 70` (`--text-primary`)
   * **Total Payable on Delivery (COD):** **`BDT 4,570`** (`--font-body` Bold `700`, `22px` Desktop / `20px` Mobile, `--text-primary`).
6. **Primary Large Button — `CONFIRM ORDER — BDT 4,570`:**
   * Full width (`100%`), height `52px`, solid `--brand-accent` background with `--text-primary` Semi-Bold (`600`, `14px` uppercase) text; flips to `--brand-primary` background with `--text-light` text on hover/tap.
   * **Processing State:** On click/tap, switches to disabled `"Confirming Order..."` for `800ms` to prevent double submissions, then navigates to `/order-received/[orderId]`.
7. **Support & Assurance Micro-Copy Below Button:**
   * `"✓ Cash on Delivery  •  ✓ Check Parcel Before Paying"` (`12px`, `--text-muted`, centered)
   * `"Need help ordering? Call +880 1XXX-XXXXXX"` (`12px`, `--text-muted`, centered).

---

## 7. Component #3: Order Received ("Thank You") View (`/order-received/[orderId]`)

* **Centered Card (`max-width: 660px`) on `--bg-main` Canvas:**
  * Framed in `--bg-surface` with a `1px` `--border-subtle` border (`32px` Desktop / `20px` Mobile padding):
  1. **Success Icon & Heading:**
     * Circular icon (`56px × 56px`) with `--state-success` border/checkmark on `--bg-main` surface (or `--brand-primary` circle with `--text-light` `✓`).
     * **H1 Heading:** `"Thank You! Your Order Has Been Received"` in `--font-heading` (Bold `700`, `36px` Desktop / `26px` Mobile, `--brand-primary`).
     * **Order ID Pill:** **`Order ID: #ANG-1048`** in `--brand-accent` fill with `--text-primary` Semi-Bold (`600`, `13px`) text.
  2. **Accurate Email & Phone Confirmation Note:**
     * **If Optional Email Was Provided:** *"We have sent your order confirmation receipt to **[customer@email.com]**. As soon as your saree is handed over to the courier, we will email your live delivery tracking link. Our team may also call **[017XXXXXXXX]** prior to dispatch."* (`14px`, `--text-muted`).
     * **If Optional Email Was Left Blank:** *"Your order is registered under mobile number **[017XXXXXXXX]**. Our team will call you to confirm dispatch and before doorstep delivery."* (`14px`, `--text-muted`).
  3. **Order & COD Summary Box (`--bg-main` Inner Card, `1px` `--border-subtle` Border):**
     * **Receiver Name & Mobile:** *Nusrat Jahan — 01712345678*
     * **Email (If Provided):** *nusrat@example.com*
     * **Delivery Address & Area:** *House 14, Road 5, Dhanmondi, Dhaka (Inside Dhaka: 2–3 Business Days)*
     * **Ordered Sarees:** Itemized list with thumbnails and quantities
     * **Payment Method:** *Cash on Delivery (COD)*
     * **Total Cash to Keep Ready on Delivery:** **`BDT 4,570`** (`--font-body` Bold `700`, `18px`, `--brand-primary`).
  4. **Bottom CTA Button:**
     * **`CONTINUE SHOPPING →`** (`48px` height, `--brand-accent` fill with `--text-primary` text; flips to `--brand-primary` with `--text-light` on hover/tap) routing to `/`.