# GIFT MARKETPLACE WEB
## User Manual and Procedures Guide
### Customer & Operations Edition

**Web Application**  
**Product Version:** 3.7  
**Draft for Team Review**  
**Prepared Date:** 29 July 2026  

---

## Document Purpose & Scope

This comprehensive manual serves as the authoritative operational and end-user guide for the **GIFT Marketplace Web Application (v3.7)**. It maps every UI element, header button, navigation link, search tool, module, parcel delivery form, rider registration workflow, order tracking system, and support desk with exact embedded visual screenshots captured from the live application.

---

## 📌 Complete Table of Contents

1. [Top Navigation Bar & UI Layout Mapping](#1-top-navigation-bar--ui-layout-mapping)
2. [Location Selection Procedure](#2-location-selection-procedure)
3. [Homepage Modules & Category Navigation](#3-homepage-modules--category-navigation)
4. [Search Bar & Store Browsing](#4-search-bar--store-browsing)
5. [Cart, Checkout & Payment Workflow](#5-cart-checkout--payment-workflow)
6. [Parcel Delivery Booking Procedure](#6-parcel-delivery-booking-procedure)
7. [Marketplace Rider Registration Procedure](#7-marketplace-rider-registration-procedure)
8. [Real-Time Order Tracking Procedure](#8-real-time-order-tracking-procedure)
9. [Help & Support Center](#9-help--support-center)

---

## 1. Top Navigation Bar & UI Layout Mapping

The web interface is structured into two main top navigation bars for seamless access across all devices:

```
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ [📍 Select location]                       [Help & Support] [About Us] [Track Order] [Become a Seller] │
│                                            [Become a Rider] [📱 App QR] [🇺🇸 EN/USD ▾]                    │
├────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ [🛍️ GIFT Marketplace Logo] [Home] [Categories ▾] [Stores ▾]  [🔍 Search...]  [🚚]  [🛒 Cart]  [🔑 Sign In]│
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
```

### Exact Button & Control Descriptions

#### A. Top Utility Bar (Top Strip)
* **📍 Select location** (Top-Left): Opens the location popup to detect or set your delivery address.
* **Help & Support**: Navigates to `/help-and-support` page with contact hotline, email, and campus address.
* **About Us**: Navigates to `/about-us` company information.
* **Track Order**: Navigates to `/track-order` for real-time delivery status lookups.
* **Become a Seller**: Navigates to `/store-registration` for vendor application.
* **Become a Rider**: Navigates to `/deliveryman-registration` for delivery partner onboarding.
* **📱 App QR Code Icon**: Opens a popup displaying QR code to download the Mobile App.
* **🇺🇸 Language & Currency Selector**: Dropdown to switch languages (English, Urdu, Arabic, Bengali) and currencies.

#### B. Main Brand Bar (Secondary Strip)
* **GIFT Marketplace Logo**: Returns user to the homepage (`/`).
* **Home**: Main landing page view.
* **Categories ▾**: Dropdown menu showing product categories across all active modules.
* **Stores ▾**: Dropdown listing registered merchants and partner stores.
* **🔍 Search Input**: Real-time product, grocery, restaurant, and brand search bar.
* **🚚 Parcel Delivery Shortcut**: Direct button to start a parcel booking.
* **🛒 Shopping Cart Icon**: Opens the slide-over cart drawer with total items and pricing.
* **🔑 Sign In Button**: Opens login and user account modal.

---

## 2. Location Selection Procedure

Before placing an order or searching products, users must set their active delivery location so the platform can load stores that deliver to their exact address.

### Step-by-Step Procedure:
1. Click **"📍 Select location"** at the top-left of the screen.
2. The **Location Dialog** will pop up with two options:
   * **➕ Use Current Location**: Detects your GPS coordinates automatically (requires browser permission).
   * **🗺️ Pick from map**: Opens an interactive map where you can drag and drop a pin on your building/street.
3. *Note for Signed-In Users*: Registered users can choose directly from their saved addresses (e.g., *Home*, *Office*).
4. Click **Confirm Location** to update your session.

---

## 3. Homepage Modules & Category Navigation

The homepage displays promotional hero banners followed by the **Marketplace Services & Modules** grid.

### Module Cards & Descriptions:

1. **🛒 Grocery Module**:
   * *Description*: Convenient online grocery store for daily household essentials, fresh fruits, vegetables, dairy, and food staples.
   * *Action*: Hover and click **"Explore Grocery"**.

2. **🍔 Food Module**:
   * *Description*: Fast and easy food delivery from favorite local restaurants, cafes, fast food chains, and bakeries.
   * *Action*: Hover and click **"Order Food"**.

3. **💊 Pharmacy Module**:
   * *Description*: Smart pharmacy offering OTC medicines, prescription drugs, vitamins, baby supplies, and wellness items.
   * *Action*: Hover and click **"Get Medicines"**.

4. **🛍️ Ecommerce Module**:
   * *Description*: Powerful e-commerce platform offering electronics, fashion apparel, accessories, kitchenware, and cosmetics.
   * *Action*: Hover and click **"Shop Ecommerce"**.

---

## 4. Search Bar & Store Browsing

Located right in the main brand header, the **Search Bar** provides instant multi-module lookup.

```
[ 🔍 Search for grocery or store... ]
```

### Search Features:
* **Item Search**: Type specific product names (e.g., *"Panadol"*, *"Pizza"*, *"Rice"*, *"Shirt"*).
* **Store Search**: Type store names to view their dedicated store storefront page.
* **Instant Filtering**: Filter search results by **Price**, **Customer Rating (1 to 5 Stars)**, **Distance**, and **Popularity**.

---

## 5. Cart, Checkout & Payment Workflow

```
[Add Items to Cart] ➔ [Click Cart Icon 🛒] ➔ [Click Checkout] ➔ [Select Address] ➔ [Apply Coupon] ➔ [Select Payment Method] ➔ [Place Order]
```

### Payment Options Available:
* 💵 **Cash on Delivery (COD)**: Pay cash directly to the delivery rider upon delivery.
* 💳 **Credit / Debit Card**: Online payment processing.
* 👛 **Marketplace Wallet**: Deduct funds instantly from user's account wallet balance.

---

## 6. Parcel Delivery Booking Procedure

The **Parcel Delivery Information** page (`/parcel-delivery-info`) allows users to send packages, documents, or gifts anywhere within the city.

### Step-by-Step Procedure:

#### Section 1: Sender Information (Left Column)
1. **Sender Name**: Enter full name of the sender.
2. **Email**: Sender email address.
3. **Phone**: Select country flag (+92) and enter mobile number.
4. **Address Lookup**: Click **"Set from map"** OR type address in **"Search location here..."**.
5. **Detailed Location**: Enter **Street number**, **House no.**, and **Floor no.**.

#### Section 2: Receiver Information (Middle Column)
1. **Receiver Name**: Enter full name of recipient.
2. **Email**: Recipient email address.
3. **Phone**: Select country flag (+92) and enter recipient mobile number.
4. **Address Lookup**: Click **"Set from map"** OR type address in **"Search location here..."**.
5. **Detailed Location**: Enter **Street number**, **House no.**, and **Floor no.**.

#### Section 3: Parcel Summary & Checkout (Right Column)
1. Review package category and estimated weight.
2. Click **"Proceed to Checkout"** to confirm payment and dispatch a parcel delivery rider.

---

## 7. Marketplace Rider Registration Procedure

Riders can register directly via the web portal at `/deliveryman-registration`.

### Registration Form Field Breakdown:

#### 1. User Info Section
* **First Name & Last Name**: Official name matching identity document.
* **Email**: Email address for account verification.
* **Deliveryman Type**: Select **Commission** or **Salary** based contract.
* **Delivery Zone**: Select primary operating city/zone.
* **Select Vehicle Type**: Select Motorbike, Bicycle, Scooter, Car, or Van.
* **Profile Image Upload**: Upload clear headshot photo (JPG/PNG < 1MB, Ratio 2:1).

#### 2. Account Info Section
* **Phone Number**: Active phone number with country code (+92).
* **Password & Confirm Password**: Secure password (minimum 8 characters).

#### 3. Identity Info Section
* **Identity Type Dropdown**: Select **CNIC**, **Passport**, or **Driving License**.
* **Identity Number Field**: Auto-formats input:
  * *CNIC Format*: `xxxxx - xxxxxxx - x` (13 digits)
  * *Passport Format*: `XX - 1234567`
  * *License Format*: `XX - 12 - 12345`
* **Document Image Uploads**: Upload **Front Side** image and **Back Side** image (JPG/PNG < 2MB).

#### 4. Submission
Check **"I agree to the Terms and Conditions"** and click **Submit Information**.

---

## 8. Real-Time Order Tracking Procedure

Users can track the status of any active or past order without signing in by visiting `/track-order`.

### How to Track:
1. Click **"Track Order"** in the top navigation bar.
2. Enter your **Order ID** (e.g., `151515615616516`).
3. Enter your registered **Phone Number** (with country code +92).
4. Click **🔍 Search Order**.
5. The screen will display live order progress, courier details, and estimated delivery arrival time.

---

## 9. Help & Support Center

For customer assistance, visit `/help-and-support` by clicking **"Help & Support"** in the top header.

### Support Contact Information:

* 🏢 **VISIT US**:  
  *GIFT University, Lohian Wala, Gujranwala, Pakistan*

* ✉️ **EMAIL US**:  
  *admin@admin.com*

* 📞 **CALL US**:  
  *3207120953*

---

*GIFT MARKETPLACE WEB User Manual & Procedures Guide - Version 3.7 (Draft for Team Review)*