9.9 KiB
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.