253 lines
9.9 KiB
Markdown
253 lines
9.9 KiB
Markdown
Multi-Delivery Mobile App – Reusable Screen Flow Implementation Plan
|
||
Overview
|
||
This plan details the implementation of a generic Multi-Delivery Customer Mobile App screen flow (supporting Food, Groceries, Pharmacy, and other delivery services).
|
||
|
||
To ensure the codebase is easily portable and reusable in other projects:
|
||
|
||
Clean Architecture & Separation of Concerns: All components are presentation-only, fully driven by props, and decoupled from state.
|
||
Pluggable API Service Layer: The API and store layers are modular, allowing simple swapping of mock data with real APIs later.
|
||
Generic Terminology: Uses general naming (e.g., provider instead of restaurant, catalogItem instead of food/menu item) to support any delivery vertical.
|
||
camelCase Convention: All directory, file, and variable names use camelCase.
|
||
Decisions (Updated)
|
||
Design Element Updated Requirement
|
||
Login Flow 🚫 No password, Forgot Password?, or Sign Up links required. Simply request Mobile Number and navigate to OTP.
|
||
API Integration 🔌 Structure with pluggable service clients. Currently returns mock data, easily swappable with real endpoints later.
|
||
Naming & Portability 📦 Modular, highly generic component names (e.g., providerCard, catalogItemRow). Built to be highly reusable in other projects.
|
||
User Review Required
|
||
WARNING
|
||
|
||
Native libraries (react-native-maps, React Navigation, etc.) require building native binaries (yarn android / yarn ios) after installation.
|
||
|
||
Naming & Folder Structure Conventions
|
||
camelCase for all file and folder names (e.g. otpScreen/, providerCard/).
|
||
Avoid domain-specific terminology:
|
||
Use provider instead of restaurant / shop.
|
||
Use catalogItem or product instead of menu / foodItem.
|
||
Use serviceType instead of cuisine.
|
||
Proposed Changes
|
||
Phase 1 – Foundation, Navigation & Dependencies
|
||
Install core dependencies:
|
||
|
||
@react-navigation/native, @react-navigation/stack, @react-navigation/bottom-tabs
|
||
react-native-screens, react-native-safe-area-context
|
||
react-native-gesture-handler, react-native-reanimated
|
||
react-native-maps
|
||
@reduxjs/toolkit, react-redux
|
||
react-native-push-notification, @react-native-community/push-notification-ios
|
||
[NEW] app/navigation/rootNavigator.tsx
|
||
Root navigator that directs to either authStack or appStack based on Redux authentication state.
|
||
|
||
[NEW] app/navigation/authStack.tsx
|
||
Stack navigator for the onboarding flow (screens 1.1–1.6):
|
||
|
||
|
||
loginScreen → otpScreen → setLocationScreen → completeProfileScreen → preferencesScreen → onboardingCompleteScreen
|
||
[NEW] app/navigation/appStack.tsx
|
||
Bottom Tab Navigator with 5 tabs:
|
||
|
||
Tab Icon Screen / Navigator
|
||
Home 🏠 homeScreen
|
||
Search 🔍 searchScreen
|
||
Orders 📦 myOrdersScreen
|
||
Offers 🏷️ offersScreen
|
||
Account 👤 accountScreen
|
||
Phase 2 – Reusable & Generic Components (app/components/)
|
||
All components are strictly presentation-only, driven by typed props, and decoupled from state.
|
||
|
||
[NEW] app/components/header/
|
||
Generic top action bar with back navigation, center title, and optional right component (e.g., Change link, edit icon).
|
||
|
||
[NEW] app/components/searchBar/
|
||
Clean search text input with icon prefix.
|
||
|
||
[NEW] app/components/providerCard/
|
||
(was RestaurantCard) — Represents any merchant/store/delivery provider.
|
||
|
||
Props: imageUrl, name, rating, deliveryTime, tag (e.g. "Food", "Groceries"), discountText.
|
||
[NEW] app/components/catalogItemRow/
|
||
(was MenuItem) — Individual product/item detail row.
|
||
|
||
Props: imageUrl, title, description, price, quantity, onAdd(), onRemove().
|
||
[NEW] app/components/stepProgress/
|
||
Progress tracker indicator for checkout steps: Address → Payment → Confirm.
|
||
|
||
[NEW] app/components/badge/
|
||
Status/offer pills (e.g. 50% OFF, Express, Popular).
|
||
|
||
[NEW] app/components/quantitySelector/
|
||
A modular stepper button (− / +) to increment/decrement item counts.
|
||
|
||
[NEW] app/components/categoryChip/
|
||
Tappable icon/text pill selector for vertical categories (e.g., Food, Groceries, Pharmacy).
|
||
|
||
[NEW] app/components/ratingStars/
|
||
1-to-5 star rating component for post-delivery reviews.
|
||
|
||
[NEW] app/components/orderHistoryCard/
|
||
General item list card for order history: provider name, order date, order status, total price, reorder and detail actions.
|
||
|
||
[NEW] app/components/paymentOption/
|
||
Selectable list item row representing payment methods.
|
||
|
||
[MODIFY] app/components/index.ts
|
||
Export all new components.
|
||
|
||
Phase 3 – Auth & Onboarding (1.1 → 1.6)
|
||
[MODIFY] app/features/screens/loginScreen/
|
||
1.1 Login
|
||
|
||
Modify existing login layout to remove Password input, "Forgot Password?", and "Sign Up" links.
|
||
Only show Mobile Number input field and a "Login" CTA.
|
||
Clicking "Login" navigates directly to otpScreen.
|
||
[NEW] app/features/screens/otpScreen/
|
||
1.2 OTP Verification
|
||
|
||
Displays code delivery status text.
|
||
6-cell OTP input box grid (custom numeric keypad: 1–9, 0, ⌫).
|
||
Resend OTP counter.
|
||
Navigates to setLocationScreen upon verification.
|
||
[NEW] app/features/screens/setLocationScreen/
|
||
1.3 Set Delivery Location
|
||
|
||
Interactive Map View pinning current location.
|
||
Card displaying details: Koramangala 4th Block, Bengaluru, 560034.
|
||
"Use this location" primary button & "Enter address manually" secondary button.
|
||
[NEW] app/features/screens/completeProfileScreen/
|
||
1.4 Complete Profile
|
||
|
||
Form requesting Name and Email.
|
||
Location label tags selector (Home, Work, Other).
|
||
"Save & Continue" action.
|
||
[NEW] app/features/screens/preferencesScreen/
|
||
1.5 Preferences
|
||
|
||
Selection grid for category interests: Food, Groceries, Pharmacy, Others.
|
||
Notifications toggle control.
|
||
"Continue" button.
|
||
[NEW] app/features/screens/onboardingCompleteScreen/
|
||
1.6 Onboarding Complete
|
||
|
||
Welcome success illustration.
|
||
"Explore Now" primary action button to dismiss stack and launch appStack tabs.
|
||
Phase 4 – Discover, Cart & Checkout (2.1 → 2.6)
|
||
[NEW] app/features/screens/homeScreen/
|
||
2.1 Home
|
||
|
||
Address bar header with quick selector dropdown.
|
||
Integrated search bar (tapping redirects focus to Search tab).
|
||
General promotional banner card (e.g., 50% OFF banner).
|
||
Category chip row: Food, Grocery, Pharmacy, More.
|
||
"Popular Providers" vertical list feed using generic providerCard components.
|
||
[NEW] app/features/screens/searchScreen/
|
||
Search Tab
|
||
|
||
Search field.
|
||
List of matching search results (providers or items).
|
||
[NEW] app/features/screens/providerListScreen/
|
||
2.2 Provider List (was RestaurantListScreen)
|
||
|
||
Shows categorized list of stores/merchants.
|
||
Filter chips: Filters, Rating 4.0+, Fast Delivery.
|
||
Dynamic list of providerCard components.
|
||
[NEW] app/features/screens/providerDetailsScreen/
|
||
2.3 Provider Details & Catalog (was RestaurantDetailScreen)
|
||
|
||
Large merchant image, name, rating, tag, and delivery statistics.
|
||
Category catalog tab selection.
|
||
List of products/items via catalogItemRow.
|
||
Bottom active cart action strip ("X Items | ₹Y View Cart").
|
||
[NEW] app/features/screens/cartScreen/
|
||
2.4 Cart
|
||
|
||
List of current cart selections with quantity adjustments.
|
||
Fee line breakdown: Delivery Fee, Platform Fee, discounts.
|
||
Coupon input box.
|
||
Bottom action panel ("Total: ₹Y View Bill").
|
||
[NEW] app/features/screens/checkoutAddressScreen/
|
||
2.5 Checkout – Address
|
||
|
||
Checkout progress steps indicator (Step 1).
|
||
Deliver-to details block.
|
||
Delivery options switcher: Standard (Free) vs. Express (Charge).
|
||
Action button.
|
||
[NEW] app/features/screens/checkoutPaymentScreen/
|
||
2.6 Checkout – Payment
|
||
|
||
Checkout progress steps indicator (Step 2).
|
||
Payment method list component: UPI, Card, Wallet, COD.
|
||
Primary Checkout action.
|
||
Phase 5 – Order & Tracking (3.1 → 3.4)
|
||
[NEW] app/features/screens/orderConfirmedScreen/
|
||
3.1 Order Confirmed
|
||
|
||
Success confirmation banner.
|
||
Order details header (Order ID, time estimate).
|
||
"View Tracking" action routing to orderTrackingScreen.
|
||
[NEW] app/features/screens/orderTrackingScreen/
|
||
3.2 Order Tracking
|
||
|
||
General milestones tracking layout: Order Placed → Confirmed → Dispatched → Delivered.
|
||
Active status highlighting.
|
||
Customer support entry point.
|
||
[NEW] app/features/screens/liveTrackingScreen/
|
||
3.3 Live Tracking
|
||
|
||
Real-time map displaying mock delivery partner marker coordinates (react-native-maps).
|
||
Blinking active tracking indicator badge.
|
||
Delivery agent detail sheet (Name, rating, vehicle details, contact shortcuts).
|
||
[NEW] app/features/screens/orderDeliveredScreen/
|
||
3.4 Order Delivered
|
||
|
||
Post-delivery review modal with ratingStars.
|
||
"Rate & Tip" action button.
|
||
Phase 6 – Orders, Support & Account (4.1 → 4.3)
|
||
[NEW] app/features/screens/myOrdersScreen/
|
||
4.1 My Orders
|
||
|
||
Order tabs: All, Ongoing, Completed.
|
||
List of order cards using orderHistoryCard.
|
||
[NEW] app/features/screens/offersScreen/
|
||
Offers Tab
|
||
|
||
Available coupons list with copy/apply action triggers.
|
||
[NEW] app/features/screens/helpSupportScreen/
|
||
4.2 Help & Support
|
||
|
||
General FAQ directory categories.
|
||
Support hotlines call action block.
|
||
[NEW] app/features/screens/accountScreen/
|
||
4.3 Account
|
||
|
||
Profile details card.
|
||
User management panel options (Addresses, Payments, Notifications, Logout).
|
||
Phase 7 – Store, Clean Services & API Client Layer
|
||
To support real backend replacement easily, we decouple state and actions from components:
|
||
|
||
[NEW] app/services/apiClient.ts
|
||
Base API config. Currently calls local mock delay functions, easily swapped for fetch or axios instances later.
|
||
|
||
[NEW] app/services/authService.ts
|
||
Handles logic for authentication (e.g. login, verifyOtp, logout).
|
||
|
||
[NEW] app/services/deliveryService.ts
|
||
API integration service for fetching providers, items, cart management, and active deliveries.
|
||
|
||
[NEW] app/store/authSlice.ts
|
||
Redux slice managing session states.
|
||
|
||
[NEW] app/store/cartSlice.ts
|
||
Redux slice managing cart items state, totals, and active coupon.
|
||
|
||
[NEW] app/store/orderSlice.ts
|
||
Redux slice managing active order statuses, tracking steps, and live coordinates.
|
||
|
||
[NEW] app/store/index.ts
|
||
Main Redux store entry point.
|
||
|
||
Verification Plan
|
||
Automated Tests
|
||
Run npx tsc --noEmit validation compile.
|
||
Manual Verification
|
||
Login & Onboarding: Input phone → OTP screen keypad input → Map location → User profile details.
|
||
Provider & Cart Flow: Home category select → providerListScreen -> providerDetailsScreen -> Catalog item quantity add -> Cart page.
|
||
Order Tracking Map: Confirm simulated marker movement maps correctly on Android & iOS. |