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.