# Web Menu React Application

A comprehensive restaurant ordering system built with React, TypeScript, and Ant Design. This application enables customers to browse menus, place orders, manage carts, split bills, and track orders across multiple restaurant services including dine-in, delivery, pickup, room service, office delivery, and gift orders.

## 🚀 Tech Stack

- **Framework**: React 18.3.1 with TypeScript
- **UI Library**: Ant Design 6.1.1
- **State Management**: Redux Toolkit 2.2.6
- **Routing**: React Router DOM 6.24.1 (Hash Router)
- **Internationalization**: i18next & react-i18next (English/Arabic with RTL support)
- **Date/Time**: dayjs
- **Build Tool**: Vite 5.3.1
- **Maps**: Google Maps API (@googlemaps/react-wrapper)

## 📁 Project Structure

```
src/
├── pages/              # Application pages
├── components/         # Reusable components
├── layouts/            # Layout components
├── routes/             # Routing configuration
├── redux/              # Redux store, slices, and API
├── contexts/           # React contexts
├── hooks/              # Custom React hooks
├── utils/              # Utility functions and constants
├── assets/             # Static assets (images, locales)
├── i18n/               # Internationalization setup
└── ThemeConstants.ts   # Theme configuration
```

## 📄 Main Pages

### 1. **Restaurant Page** (`/pages/restaurant/page.tsx`)
- **Route**: `/:subdomain`
- **Purpose**: Landing page for each restaurant
- **Features**:
  - Displays restaurant information and services
  - Shows available order types (dine-in, delivery, pickup, etc.)
  - Restaurant branding and promotions

### 2. **Menu Page** (`/pages/menu/page.tsx`)
- **Route**: `/:subdomain/menu`
- **Purpose**: Browse restaurant menu with categories and products
- **Features**:
  - Category-based navigation
  - Product cards with images and prices
  - Search functionality
  - Add to cart integration
  - Order type selection (dine-in, delivery, pickup, etc.)
  - Responsive design (mobile/desktop)

### 3. **Product Detail Page** (`/pages/product/page.tsx`)
- **Route**: `/:subdomain/product/:productId`
- **Purpose**: Detailed view of individual products
- **Features**:
  - Product information and images
  - Variant selection (sizes, options)
  - Extra items and add-ons
  - Quantity selection
  - Add to cart functionality
  - Customization options

### 4. **Cart Page** (`/pages/cart/page.tsx`)
- **Route**: `/:subdomain/cart`
- **Purpose**: Shopping cart management
- **Features**:
  - View cart items with quantities
  - Modify quantities or remove items
  - Special requests input
  - Table number selection (dine-in)
  - Car plate input (pickup)
  - Date/time selection for scheduled orders
  - Coupon application
  - Loyalty points usage
  - Order summary with totals

### 5. **Checkout Page** (`/pages/checkout/page.tsx`)
- **Route**: `/:subdomain/checkout`
- **Purpose**: Order review and customer information
- **Features**:
  - Customer information form
  - Address selection/input
  - Room/Office details (for room service/office delivery)
  - Gift details (for gift orders)
  - Payment method selection
  - Order summary
  - Place order functionality

### 6. **Pay Page** (`/pages/pay/page.tsx`)
- **Route**: `/:subdomain/pay`
- **Purpose**: Payment and bill splitting
- **Features**:
  - Payment processing
  - Split bill options:
    - Custom amount
    - Equal split
    - Pay for specific items
  - QR code generation for split payments
  - Payment summary

### 7. **Split Bill Page** (`/pages/split-bill/page.tsx`)
- **Route**: `/:subdomain/split-bill`
- **Purpose**: Manage split bill payments
- **Features**:
  - Total people count
  - Individual payment tracking
  - Payment summary per person
  - QR code sharing

### 8. **Order Page** (`/pages/order/page.tsx`)
- **Route**: `/:subdomain/order/:orderId`
- **Purpose**: Active order tracking
- **Features**:
  - Order status stepper
  - Real-time order updates
  - Countdown timer for preparation time (when in progress)
  - Circular progress indicator
  - Order details and items
  - Cancel order option

### 9. **Orders List Page** (`/pages/orders/page.tsx`)
- **Route**: `/:subdomain/orders/:orderId?`
- **Purpose**: View order history
- **Features**:
  - List of past orders
  - Order status badges (completed, closed, preparing)
  - Order details view
  - Re-order functionality
  - Rate order functionality
  - Protected route (requires authentication)

### 10. **Order Details Page** (`/pages/orders/OrderDetails.tsx`)
- **Purpose**: Detailed view of a specific order
- **Features**:
  - Order information (ID, date, restaurant)
  - Status badge with color coding:
    - **Closed**: Red background (`#EA1F221F`)
    - **Completed**: Green background (`#28A7451F`)
    - **Preparing**: Yellow background (`#FFB7001F`)
  - Order items list
  - Payment details
  - Rate order button
  - Re-order button

### 11. **Search Page** (`/pages/search/page.tsx`)
- **Route**: `/:subdomain/search`
- **Purpose**: Search products across the menu
- **Features**:
  - Product search functionality
  - Search results display
  - Filter options

### 12. **Address Page** (`/pages/address/page.tsx`)
- **Route**: `/:subdomain/address`
- **Purpose**: Manage delivery addresses
- **Features**:
  - Address input/selection
  - Google Maps integration
  - Address validation

### 13. **Login Page** (`/pages/login/page.tsx`)
- **Route**: `/:subdomain/login`
- **Purpose**: User authentication
- **Features**:
  - Phone number input
  - OTP verification flow

### 14. **OTP Page** (`/pages/otp/page.tsx`)
- **Route**: `/:subdomain/otp`
- **Purpose**: OTP verification
- **Features**:
  - OTP input component
  - Resend OTP functionality
  - Verification handling

### 15. **Redeem Page** (`/pages/redeem/page.tsx`)
- **Route**: `/:subdomain/gift/redeem/:voucherId`
- **Purpose**: Redeem gift vouchers
- **Features**:
  - Gift voucher redemption
  - Voucher validation

### 16. **Error Pages** (`/pages/errors/`)
- **Routes**: Various error routes
- **Purpose**: Handle application errors
- **Pages**:
  - `Error400.tsx` - Bad Request
  - `Error403.tsx` - Forbidden
  - `Error404.tsx` - Not Found
  - `Error500.tsx` - Server Error
  - `Error503.tsx` - Service Unavailable

## 🧩 Main Components

### Layout Components

#### **AppLayout** (`/layouts/app/AppLayout.tsx`)
- Main application layout wrapper
- Provides consistent structure across pages

#### **HeaderMenuDrawer** (`/layouts/app/HeaderMenuDrawer.tsx`)
- Responsive header navigation
- Mobile drawer menu
- Language and theme switchers

#### **FooterNav** (`/layouts/app/FooterNav.tsx`)
- Bottom navigation bar
- Quick access to main sections

### UI Components

#### **ProBottomSheet** (`/components/ProBottomSheet/ProBottomSheet.tsx`)
- Custom bottom sheet component
- Draggable and dismissible
- Prevents body scroll when open
- Snap points support
- Used throughout the app for modals and forms

#### **ProText** (`/components/ProText.tsx`)
- Custom text component with theme support
- Typography consistency

#### **ProTitle** (`/components/ProTitle.tsx`)
- Custom title component
- Consistent heading styles

#### **ProInputCard** (`/components/ProInputCard/ProInputCard.tsx`)
- Card wrapper for input sections
- Consistent styling for form sections

#### **ArabicPrice** (`/components/ArabicPrice/ArabicPrice.tsx`)
- Price display component
- Supports RTL formatting
- Currency formatting

#### **PaymentDetails** (`/components/PaymentDetails/PaymentDetails.tsx`)
- Displays order payment breakdown
- Shows subtotal, taxes, fees, discounts
- Final total calculation

#### **PaymentMethods** (`/components/PaymentMethods/PaymentMethods.tsx`)
- Payment method selection
- Multiple payment options

#### **OrderSummary** (`/components/OrderSummary/OrderSummary.tsx`)
- Order items summary
- Quantity and price display

### Bottom Sheet Components

#### **OrderTypesBottomSheet** (`/components/CustomBottomSheet/OrderTypesBottomSheet.tsx`)
- Select order type (dine-in, delivery, pickup, etc.)
- Dynamic height based on available services
- Service availability handling

#### **TipBottomSheet** (`/components/CustomBottomSheet/TipBottomSheet.tsx`)
- Add tip to order
- Percentage or custom amount

#### **CouponBottomSheet** (`/components/CustomBottomSheet/CouponBottomSheet.tsx`)
- Apply coupon codes
- Discount application

#### **DatePickerBottomSheet** (`/components/CustomBottomSheet/DatePickerBottomSheet.tsx`)
- Date selection for scheduled orders
- Time picker integration

#### **RateBottomSheet** (`/components/CustomBottomSheet/RateBottomSheet.tsx`)
- Rate completed orders
- Star rating system
- Feedback submission

#### **CancelOrderBottomSheet** (`/components/CustomBottomSheet/CancelOrderBottomSheet.tsx`)
- Cancel active orders
- Confirmation dialog

#### **MapBottomSheet** (`/components/CustomBottomSheet/MapBottomSheet.tsx`)
- Google Maps integration
- Location selection
- Address input

#### **OpeningTimesBottomSheet** (`/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx`)
- Display restaurant opening hours
- Operating schedule

### Split Bill Components

#### **CustomAmountChoiceBottomSheet** (`/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx`)
- Custom amount input for split bills
- Real-time preview of totals
- Debounced input (300ms)
- Service fee display

#### **EqualltyChoiceBottomSheet** (`/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx`)
- Equal split calculation
- Interactive spinner wheel (donut chart)
- Total amount display in center

#### **PayForYourItemsChoiceBottomSheet** (`/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx`)
- Select specific items to pay for
- Circular checkbox selection
- Item-based payment calculation

#### **QRBottomSheet** (`/pages/pay/components/splitBill/QRBottomSheet.tsx`)
- QR code generation for split payments
- Share payment link

### Menu Components

#### **CategoriesList** (`/pages/menu/components/CategoriesList/CategoriesList.tsx`)
- Category navigation
- Sticky header on scroll
- Active category highlighting

#### **MenuList** (`/pages/menu/components/MenuList/MenuList.tsx`)
- Product list display
- Category filtering
- Infinite scroll support

#### **ProductCard** (`/pages/menu/components/MenuList/ProductCard.tsx`)
- Individual product card
- Image, name, price display
- "Customizable" label
- RTL support

#### **AddToCartButton** (`/pages/menu/components/AddToCartButton/AddToCartButton.tsx`)
- Add product to cart
- Quantity selection
- Multi-layer box shadow styling

#### **MenuFooter** (`/pages/menu/components/MenuFooter/MenuFooter.tsx`)
- Fixed footer with cart summary
- Navigate to cart/pay
- Disabled state when cart is empty
- Warning message for empty cart

#### **ProductPreviewDialog** (`/pages/menu/components/ProductPreviewDialog/ProductPreviewDialog.tsx`)
- Quick product preview
- Modal dialog display

### Cart Components

#### **CartFooter** (`/pages/cart/components/cartFooter/CartFooter.tsx`)
- Cart summary footer
- Proceed to checkout button

#### **SpecialRequestCard** (`/pages/cart/components/specialRequest/SpecialRequestCard.tsx`)
- Special instructions input
- Bottom sheet for detailed input

#### **TimeEstimateCard** (`/pages/cart/components/timeEstimate/TimeEstimateCard.tsx`)
- Estimated preparation time
- Date/time picker

#### **CouponCard** (`/pages/cart/components/CouponCard.tsx`)
- Coupon code input
- Discount display

#### **TableNumberCard** (`/pages/cart/components/TableNumberCard.tsx`)
- Table number selection (dine-in)

#### **CarPlateCard** (`/pages/cart/components/CarPlateCard.tsx`)
- Car plate input (pickup)

### Form Components

#### **ProInputNumber** (`/components/Inputs/ProInputNumber.tsx`)
- Custom number input
- Consistent styling

#### **ProPhoneInput** (`/components/ProPhoneInput.tsx`)
- Phone number input with country code
- Validation

#### **ProDatePicker** (`/components/ProDatePicker/ProDatePicker.tsx`)
- Date selection component
- Time picker integration

#### **ProCheckboxGroups** (`/components/ProCheckboxGroups/ProCheckboxGroups.tsx`)
- Checkbox group component
- Multiple selection handling

#### **ProRatioGroups** (`/components/ProRatioGroups/ProRatioGroups.tsx`)
- Radio button group
- Single selection handling

#### **OtpInput** (`/components/OtpInput/OtpInput.tsx`)
- OTP code input
- Multi-digit input fields

### Icon Components (`/components/Icons/`)
- Comprehensive icon library
- Custom SVG icons for:
  - Order types (dine-in, delivery, pickup, etc.)
  - Cart, payment, location
  - Social media
  - Navigation (back, next, etc.)

### Utility Components

#### **ImageWithFallback** (`/components/ImageWithFallback/ImageWithFallback.tsx`)
- Image component with fallback
- Error handling

#### **ImagePreloader** (`/components/ImagePreloader/ImagePreloader.tsx`)
- Preload images for better performance

#### **Loader** (`/components/Loader/Loader.tsx`)
- Loading spinner
- Full-page loading state

#### **LoadingSpinner** (`/components/LoadingSpinner/LoadingSpinner.tsx`)
- Reusable spinner component

#### **ErrorBoundaries** (`/components/ErrorBoundaries/ErrorBoundaries.tsx`)
- Error boundary wrapper
- Error handling

#### **AccessDenied** (`/components/AccessDenied/AccessDenied.tsx`)
- Access denied page
- Permission handling

#### **LanguageSwitch** (`/components/LanguageSwitch/LanguageSwitch.tsx`)
- Language switcher
- English/Arabic toggle

#### **ThemeSwitch** (`/components/ThemeSwitch/ThemeSwitch.tsx`)
- Theme switcher
- Light/Dark mode toggle

#### **FloatingButton** (`/components/FloatingButton/FloatingButton.tsx`)
- Floating action button
- Scroll to top functionality

#### **WheelPicker** (`/components/WheelPicker/`)
- Custom wheel picker component
- Used for time/date selection

## 🎨 Key Features

### 1. **Multi-Service Ordering**
- Dine-in orders
- Delivery orders
- Pickup orders
- Room service
- Office delivery
- Gift orders
- Scheduled orders
- Table booking

### 2. **Bill Splitting**
- Custom amount splitting
- Equal split among multiple people
- Pay for specific items
- QR code sharing for split payments

### 3. **Real-Time Order Tracking**
- Order status stepper
- Countdown timer for preparation
- Circular progress indicator
- Status updates

### 4. **Internationalization**
- English and Arabic support
- RTL (Right-to-Left) layout support
- Dynamic language switching

### 5. **Theme Support**
- Light and Dark themes
- Theme persistence
- CSS custom properties

### 6. **Responsive Design**
- Mobile-first approach
- Tablet and desktop support
- Adaptive layouts
- Touch-friendly interactions

### 7. **Cart Management**
- Add/remove items
- Quantity modification
- Special requests
- Coupon application
- Loyalty points integration

### 8. **Payment Integration**
- Multiple payment methods
- Payment summary
- Split bill support

### 9. **User Authentication**
- Phone number login
- OTP verification
- Protected routes

### 10. **Order History**
- View past orders
- Order details
- Re-order functionality
- Rate orders

## 🔧 Development

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation
```bash
npm install
```

### Development Server
```bash
npm run dev
```

### Build
```bash
npm run build
```

### Preview Production Build
```bash
npm run preview
```

### Linting
```bash
npm run lint
```

## 📱 Routes Overview

- `/` - Restaurant landing page
- `/:subdomain` - Restaurant home
- `/:subdomain/menu` - Menu browsing
- `/:subdomain/product/:productId` - Product details
- `/:subdomain/cart` - Shopping cart
- `/:subdomain/checkout` - Checkout
- `/:subdomain/pay` - Payment
- `/:subdomain/split-bill` - Split bill management
- `/:subdomain/order/:orderId` - Active order tracking
- `/:subdomain/orders/:orderId?` - Order history
- `/:subdomain/search` - Product search
- `/:subdomain/address` - Address management
- `/:subdomain/login` - Login
- `/:subdomain/otp` - OTP verification
- `/:subdomain/gift/redeem/:voucherId` - Gift redemption

## 🎯 State Management

The application uses Redux Toolkit for state management with the following main slices:

- **Cart/Order State**: Manages cart items, order type, special requests, etc.
- **Theme State**: Manages light/dark theme
- **Locale State**: Manages language and RTL direction
- **API State**: RTK Query for API calls

## 🌐 API Integration

The application uses RTK Query for API integration:
- Restaurant details
- Menu data
- Order creation and tracking
- User authentication
- Payment processing

## 📝 Notes

- All footer buttons across bottom sheets and pages have a standardized height of **48px**
- The application uses hash routing for better compatibility
- Custom bottom sheets prevent body scrolling when open
- Debounced inputs are used for better performance (e.g., 300ms for custom amount input)
- The app supports both mobile and desktop views with responsive breakpoints

## 🔐 Authentication

Some routes are protected using the `PrivateRoute` component:
- Order history (`/orders`)
- Error pages requiring authentication

## 🎨 Styling

- CSS Modules for component-specific styles
- Global CSS for theme variables
- Ant Design theme customization
- Custom CSS properties for theming
- RTL support with dynamic direction switching

---

**Built with ❤️ using React, TypeScript, and Ant Design**
