Merge branch 'main' into feat(api-integration)

ReactotronConfig.js

@@ -0,0 +1,5 @@
+import Reactotron from 'reactotron-react-native';
+
+Reactotron.configure() // controls connection & communication settings
+  .useReactNative() // add all built-in react native plugins
+  .connect(); // let's connect!

app/api/authApi.ts

@@ -1,20 +1,8 @@
 import { apiClient } from '../services/apiClient';
-import { User } from '../interfaces';
+import { LoginResponse, User, VerifyOtpResponse } from '../interfaces';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-export interface LoginResponse {
-  success: boolean;
-  message: string;
-}
-
-export interface VerifyOtpResponse {
-  success: boolean;
-  user: User;
-  accessToken: string;
-  refreshToken: string;
-}
-
 export interface UpdateProfileResponse {
   success: boolean;
   user: User;
@@ -26,11 +14,11 @@ export interface LogoutResponse {
 
 // ─── Endpoints ───────────────────────────────────────────────────────────────
 
-export const loginApi = (mobileNumber: string) =>
-  apiClient.post<LoginResponse>('/auth/login', { mobileNumber });
+export const loginApi = (phone: string) =>
+  apiClient.post<LoginResponse>('/auth/otp/request', { phone });
 
-export const verifyOtpApi = (mobileNumber: string, otp: string) =>
-  apiClient.post<VerifyOtpResponse>('/auth/verify-otp', { mobileNumber, otp });
+export const verifyOtpApi = (phone: string, code: string, role: string) =>
+  apiClient.post<VerifyOtpResponse>('/auth/otp/verify', { phone, code, role });
 
 export const updateProfileApi = (data: {
   name: string;

app/api/cartApi.ts

@@ -0,0 +1,16 @@
+import { AddToCartRequest, CartResponse } from '@interfaces/cart';
+import { apiClient } from '@services';
+
+export const addToCartApi = async (addToCartRequest: AddToCartRequest) => {
+  return apiClient.post<CartResponse>('/cart/items', addToCartRequest);
+};
+
+export const getCartApi = async () => {
+  return apiClient.get<CartResponse>('/cart');
+};
+
+export const updateCartItem = async (productId: string, quantity: number) => {
+  return apiClient.patch<CartResponse>(`/cart/items/${productId}`, {
+    quantity,
+  });
+};

app/api/customerDetailsApi.ts

@@ -0,0 +1,6 @@
+import { CustomerResponse } from '@interfaces';
+import { apiClient } from '@services';
+
+export const getCustomerDetails = async () => {
+  return await apiClient.get<CustomerResponse>('/customers/profile');
+};

app/api/deliveryApi.ts

@@ -1,5 +1,11 @@
 import { apiClient } from '../services/apiClient';
-import { Provider, CatalogItem, Order, DeliveryAgent, Location } from '../interfaces';
+import {
+  Provider,
+  CatalogItem,
+  Order,
+  DeliveryAgent,
+  Location,
+} from '../interfaces';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -10,8 +16,7 @@ export interface PlaceOrderResponse {
 
 // ─── Endpoints ───────────────────────────────────────────────────────────────
 
-export const getProvidersApi = () =>
-  apiClient.get<Provider[]>('/providers');
+export const getProvidersApi = () => apiClient.get<Provider[]>('/providers');
 
 export const getProviderCatalogApi = (providerId: string) =>
   apiClient.get<CatalogItem[]>(`/providers/${providerId}/catalog`);
@@ -19,8 +24,8 @@ export const getProviderCatalogApi = (providerId: string) =>
 export const searchProvidersApi = (query: string) =>
   apiClient.get<Provider[]>(`/search?q=${query}`);
 
-export const placeOrderApi = (orderData: Partial<Order>) =>
-  apiClient.post<PlaceOrderResponse>('/orders', orderData);
+// export const placeOrderApi = (orderData: Partial<Order>) =>
+//   apiClient.post<PlaceOrderResponse>('/orders', orderData);
 
 export const getDeliveryAgentApi = () =>
   apiClient.get<DeliveryAgent>('/delivery/agent');

app/api/index.ts

@@ -1,2 +1,8 @@
 export * from './authApi';
 export * from './deliveryApi';
+export * from './onboardApi';
+export * from './productApi';
+export * from './cartApi';
+export * from './paymentMethodsApi';
+export * from './customerDetailsApi';
+export * from './orderApi';

app/api/onboardApi.ts

@@ -0,0 +1,12 @@
+import { Category, onBoardPayload, UserProfile } from '@interfaces/onboard';
+import { apiClient } from '@services';
+
+export const getCatagories = async (): Promise<Category[]> => {
+  return await apiClient.get('/categories');
+};
+
+export const onBoardComplete = async (
+  payload: onBoardPayload,
+): Promise<UserProfile> => {
+  return await apiClient.post('/auth/onboard', payload);
+};

app/api/orderApi.ts

@@ -0,0 +1,14 @@
+import { apiClient } from '@services';
+import { Order, OrderRequest, PlaceOrderResponse } from '@interfaces';
+
+export const placeOrderApi = async (payload: OrderRequest) => {
+  return await apiClient.post<PlaceOrderResponse>('/orders', payload);
+};
+
+export const getOrderHistoryApi = async () => {
+  return await apiClient.get<Order[]>('/orders');
+};
+
+export const getOrderByIdApi = async (orderId: string) => {
+  return await apiClient.get<Order>(`/orders/${orderId}`);
+};

app/api/paymentMethodsApi.ts

@@ -0,0 +1,6 @@
+import { PaymentMethodsResponse } from '@interfaces';
+import { apiClient } from '@services';
+
+export const getAllPaymentMethodsApi = async () => {
+  return await apiClient.get<PaymentMethodsResponse>('/payments/options');
+};

app/api/productApi.ts

@@ -0,0 +1,17 @@
+import { Products, PaginationMeta, Product } from '@interfaces';
+import { apiClient } from '@services';
+
+export interface GetProductsResponse {
+  products: Products[];
+  meta: PaginationMeta;
+}
+
+export const getProductsApi = async (): Promise<GetProductsResponse> => {
+  return await apiClient.get<GetProductsResponse>(`/products`);
+};
+
+export const getProductDetailsApi = async (
+  productId: string,
+): Promise<Product> => {
+  return await apiClient.get<Product>(`/products/${productId}`);
+};

app/components/OrderStatusTimeline/OrderStatusTimeline.props.ts

@@ -0,0 +1,7 @@
+import { OrderStatus, TrackingEntry } from '@interfaces';
+
+export interface OrderStatusTimelineProps {
+  tracking?: TrackingEntry[];
+  currentStatus: OrderStatus;
+  styles?: any; // optional – component uses its own internal styles via useAppTheme
+}

app/components/OrderStatusTimeline/OrderStatusTimeline.styles.ts

@@ -0,0 +1,317 @@
+import { StyleSheet } from 'react-native';
+import { typography } from '@theme';
+
+export const getStyles = (colors: any) =>
+  StyleSheet.create({
+    // Status Card / Container
+    cardContainer: {
+      backgroundColor: colors.cardBg,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: colors.border,
+      overflow: 'hidden',
+    },
+    headerSection: {
+      padding: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+    },
+    headerIconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: '#E8F5E9',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 16,
+    },
+    headerIconText: {
+      fontSize: 24,
+    },
+    headerTextContainer: {
+      flex: 1,
+    },
+    statusHeaderTitle: {
+      fontSize: typography.fontSize.lg,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginBottom: 4,
+    },
+    statusHeaderDesc: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      lineHeight: 18,
+    },
+
+    // Horizontal Stepper
+    stepperWrapper: {
+      paddingVertical: 20,
+      paddingHorizontal: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+    },
+    stepperRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      position: 'relative',
+    },
+    stepLineBackground: {
+      position: 'absolute',
+      top: 14,
+      left: '12%',
+      right: '12%',
+      height: 3,
+      backgroundColor: colors.border,
+      zIndex: 1,
+    },
+    stepLineActive: {
+      position: 'absolute',
+      top: 14,
+      left: '12%',
+      height: 3,
+      backgroundColor: colors.primary,
+      zIndex: 2,
+    },
+    stepItem: {
+      alignItems: 'center',
+      flex: 1,
+      zIndex: 3,
+    },
+    stepDot: {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      backgroundColor: colors.cardBg,
+      borderWidth: 2,
+      borderColor: colors.border,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 6,
+    },
+    stepDotCompleted: {
+      borderColor: colors.primary,
+      backgroundColor: colors.primary,
+    },
+    stepDotActive: {
+      borderColor: colors.primary,
+      backgroundColor: colors.cardBg,
+      borderWidth: 3,
+    },
+    stepCheckmark: {
+      color: '#FFFFFF',
+      fontSize: 12,
+      fontWeight: 'bold',
+    },
+    stepInnerDotActive: {
+      width: 10,
+      height: 10,
+      borderRadius: 5,
+      backgroundColor: colors.primary,
+    },
+    stepLabel: {
+      fontSize: 11,
+      fontWeight: typography.fontWeight.medium,
+      color: colors.textSecondary,
+      textAlign: 'center',
+    },
+    stepLabelActive: {
+      color: colors.primary,
+      fontWeight: typography.fontWeight.bold,
+    },
+
+    // Driver Section
+    driverSection: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+      backgroundColor: colors.inputBg,
+    },
+    driverInfoRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    driverAvatarContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      backgroundColor: colors.primary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    driverAvatarText: {
+      color: '#FFFFFF',
+      fontSize: 16,
+      fontWeight: typography.fontWeight.bold,
+    },
+    driverMeta: {
+      flex: 1,
+    },
+    driverRoleText: {
+      fontSize: 10,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      color: colors.textSecondary,
+      fontWeight: typography.fontWeight.semibold,
+      marginBottom: 2,
+    },
+    driverNameText: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+    },
+    driverVehicleText: {
+      fontSize: typography.fontSize.xs,
+      color: colors.textSecondary,
+      marginTop: 2,
+    },
+    ratingBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#FFF9C4',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 12,
+    },
+    ratingText: {
+      fontSize: 12,
+      fontWeight: typography.fontWeight.bold,
+      color: '#F57F17',
+    },
+    driverActionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    actionButton: {
+      flex: 1,
+      flexDirection: 'row',
+      height: 40,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+    },
+    callButton: {
+      backgroundColor: colors.primary,
+      borderColor: colors.primary,
+      marginRight: 6,
+    },
+    messageButton: {
+      backgroundColor: colors.cardBg,
+      borderColor: colors.border,
+      marginLeft: 6,
+    },
+    actionIcon: {
+      marginRight: 6,
+      fontSize: 16,
+    },
+    callButtonText: {
+      color: '#FFFFFF',
+      fontWeight: typography.fontWeight.bold,
+      fontSize: typography.fontSize.sm,
+    },
+    messageButtonText: {
+      color: colors.text,
+      fontWeight: typography.fontWeight.semibold,
+      fontSize: typography.fontSize.sm,
+    },
+
+    // Collapsible Trigger / Detailed Logs
+    toggleSection: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 12,
+    },
+    toggleButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 4,
+    },
+    toggleButtonText: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.primary,
+      marginRight: 4,
+    },
+    toggleChevron: {
+      fontSize: 12,
+      color: colors.primary,
+    },
+    detailedTimelineWrapper: {
+      paddingHorizontal: 20,
+      paddingBottom: 16,
+    },
+
+    // Legacy vertical timeline classes (re-styled for premium feel)
+    timelineRow: {
+      flexDirection: 'row',
+    },
+    timelineDotColumn: {
+      alignItems: 'center',
+      width: 24,
+    },
+    timelineDot: {
+      width: 14,
+      height: 14,
+      borderRadius: 7,
+      borderWidth: 2,
+      borderColor: colors.border,
+      backgroundColor: colors.cardBg,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 4,
+    },
+    timelineDotCompleted: {
+      borderColor: colors.primary,
+      backgroundColor: colors.primary,
+    },
+    timelineDotCancelled: {
+      borderColor: colors.error,
+      backgroundColor: colors.error,
+    },
+    timelineCheck: {
+      color: '#FFFFFF',
+      fontSize: 8,
+      fontWeight: 'bold',
+    },
+    timelineLine: {
+      width: 2,
+      flex: 1,
+      minHeight: 36,
+      backgroundColor: colors.border,
+      marginVertical: 4,
+    },
+    timelineLineCompleted: {
+      backgroundColor: colors.primary,
+    },
+    timelineContent: {
+      flex: 1,
+      paddingBottom: 18,
+      paddingLeft: 16,
+    },
+    timelineLabelCompleted: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+    },
+    timelineLabelPending: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.regular,
+      color: colors.textSecondary,
+    },
+    timelineLabelCancelled: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.error,
+    },
+    timelineTime: {
+      fontSize: typography.fontSize.xs,
+      color: colors.textSecondary,
+      marginTop: 4,
+    },
+  });

app/components/OrderStatusTimeline/OrderStatusTimeline.tsx

@@ -0,0 +1,377 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Linking,
+  Platform,
+  LayoutAnimation,
+  UIManager,
+} from 'react-native';
+import { OrderStatus, TrackingEntry } from '@interfaces';
+import { formatDate, formatTime } from '@utils/helper';
+import { OrderStatusTimelineProps } from './OrderStatusTimeline.props';
+import { useAppTheme } from '@theme';
+import { getStyles } from './OrderStatusTimeline.styles';
+
+if (
+  Platform.OS === 'android' &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export const STATUS_FLOW: OrderStatus[] = [
+  'PENDING',
+  'CONFIRMED',
+  'PREPARING',
+  'READY_FOR_PICKUP',
+  'OUT_FOR_DELIVERY',
+  'DELIVERED',
+];
+
+export const STATUS_LABEL: Record<OrderStatus, string> = {
+  PENDING: 'Order Placed',
+  CONFIRMED: 'Confirmed',
+  PREPARING: 'Preparing',
+  READY_FOR_PICKUP: 'Ready for Pickup',
+  OUT_FOR_DELIVERY: 'Out for Delivery',
+  DELIVERED: 'Delivered',
+  CANCELLED: 'Cancelled',
+};
+
+const STATUS_DETAILS: Record<
+  OrderStatus,
+  { title: string; desc: string; icon: string }
+> = {
+  PENDING: {
+    title: 'Waiting for Confirmation',
+    desc: 'The merchant is reviewing your order. We will start preparing it soon.',
+    icon: '⏳',
+  },
+  CONFIRMED: {
+    title: 'Order Confirmed',
+    desc: 'Your order has been accepted. The chef will start preparing it shortly.',
+    icon: '✅',
+  },
+  PREPARING: {
+    title: 'Preparing Your Food',
+    desc: 'The kitchen is preparing your delicious order with fresh ingredients.',
+    icon: '🍳',
+  },
+  READY_FOR_PICKUP: {
+    title: 'Ready for Pickup',
+    desc: 'Your order is ready. The delivery partner is picking it up now.',
+    icon: '📦',
+  },
+  OUT_FOR_DELIVERY: {
+    title: 'Out for Delivery',
+    desc: 'Our delivery partner is on the way with your food. Keep your phone handy!',
+    icon: '🛵',
+  },
+  DELIVERED: {
+    title: 'Order Delivered',
+    desc: 'Your order has been successfully delivered. Enjoy your meal!',
+    icon: '🎉',
+  },
+  CANCELLED: {
+    title: 'Order Cancelled',
+    desc: 'This order was cancelled. Any refund will be processed shortly.',
+    icon: '❌',
+  },
+};
+
+const getStepIndex = (status: OrderStatus): number => {
+  switch (status) {
+    case 'PENDING':
+    case 'CONFIRMED':
+      return 0;
+    case 'PREPARING':
+      return 1;
+    case 'READY_FOR_PICKUP':
+    case 'OUT_FOR_DELIVERY':
+      return 2;
+    case 'DELIVERED':
+      return 3;
+    default:
+      return 0;
+  }
+};
+
+export const OrderStatusTimeline: React.FC<OrderStatusTimelineProps> = ({
+  tracking = [],
+  currentStatus,
+  styles: propStyles,
+}) => {
+  const { colors } = useAppTheme();
+  const localStyles = getStyles(colors);
+
+  // If the caller passes the screen styles, they won't have timelineRow etc, so we fallback to localStyles
+  const styles =
+    propStyles && propStyles.timelineRow ? propStyles : localStyles;
+
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded(!expanded);
+  };
+
+  const handleCall = () => {
+    Linking.openURL('tel:+919876543210');
+  };
+
+  const handleMessage = () => {
+    Linking.openURL('sms:+919876543210');
+  };
+
+  const trackingMap = tracking.reduce<Record<string, string>>((acc, t) => {
+    acc[t.status] = t.time;
+    return acc;
+  }, {});
+
+  const details = STATUS_DETAILS[currentStatus] || STATUS_DETAILS.PENDING;
+
+  if (currentStatus === 'CANCELLED') {
+    return (
+      <View style={localStyles.cardContainer}>
+        {/* Cancelled Status Banner */}
+        <View style={localStyles.headerSection}>
+          <View
+            style={[
+              localStyles.headerIconContainer,
+              { backgroundColor: '#FFEBEE' },
+            ]}
+          >
+            <Text style={localStyles.headerIconText}>❌</Text>
+          </View>
+          <View style={localStyles.headerTextContainer}>
+            <Text
+              style={[localStyles.statusHeaderTitle, { color: colors.error }]}
+            >
+              {details.title}
+            </Text>
+            <Text style={localStyles.statusHeaderDesc}>{details.desc}</Text>
+          </View>
+        </View>
+
+        {/* Collapsible detailed view */}
+        <View style={localStyles.toggleSection}>
+          <TouchableOpacity
+            onPress={toggleExpand}
+            style={localStyles.toggleButton}
+            activeOpacity={0.7}
+          >
+            <Text style={localStyles.toggleButtonText}>
+              {expanded ? 'Hide Details' : 'View Detailed History'}
+            </Text>
+            <Text style={localStyles.toggleChevron}>
+              {expanded ? '▲' : '▼'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {expanded && (
+          <View style={localStyles.detailedTimelineWrapper}>
+            <View style={styles.timelineRow}>
+              <View style={styles.timelineDotColumn}>
+                <View
+                  style={[styles.timelineDot, styles.timelineDotCancelled]}
+                />
+              </View>
+              <View style={styles.timelineContent}>
+                <Text style={styles.timelineLabelCancelled}>
+                  Order Cancelled
+                </Text>
+                {trackingMap['CANCELLED'] && (
+                  <Text style={styles.timelineTime}>
+                    {formatDate(trackingMap['CANCELLED'])} at{' '}
+                    {formatTime(trackingMap['CANCELLED'])}
+                  </Text>
+                )}
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  const activeStep = getStepIndex(currentStatus);
+  const steps = [
+    { label: 'Placed', status: 'PENDING' },
+    { label: 'Preparing', status: 'PREPARING' },
+    { label: 'On the Way', status: 'OUT_FOR_DELIVERY' },
+    { label: 'Delivered', status: 'DELIVERED' },
+  ];
+
+  const showDriver = [
+    'PREPARING',
+    'READY_FOR_PICKUP',
+    'OUT_FOR_DELIVERY',
+    'DELIVERED',
+  ].includes(currentStatus);
+  const currentIndex = STATUS_FLOW.indexOf(currentStatus);
+
+  return (
+    <View style={localStyles.cardContainer}>
+      {/* Current Status Header Banner */}
+      <View style={localStyles.headerSection}>
+        <View style={localStyles.headerIconContainer}>
+          <Text style={localStyles.headerIconText}>{details.icon}</Text>
+        </View>
+        <View style={localStyles.headerTextContainer}>
+          <Text style={localStyles.statusHeaderTitle}>{details.title}</Text>
+          <Text style={localStyles.statusHeaderDesc}>{details.desc}</Text>
+        </View>
+      </View>
+
+      {/* Horizontal Progress Stepper */}
+      <View style={localStyles.stepperWrapper}>
+        <View style={localStyles.stepperRow}>
+          <View style={localStyles.stepLineBackground} />
+          <View
+            style={[
+              localStyles.stepLineActive,
+              { width: `${(activeStep / (steps.length - 1)) * 76}%` },
+            ]}
+          />
+
+          {steps.map((step, idx) => {
+            const isCompleted = idx < activeStep;
+            const isActive = idx === activeStep;
+
+            return (
+              <View key={step.label} style={localStyles.stepItem}>
+                <View
+                  style={[
+                    localStyles.stepDot,
+                    isCompleted && localStyles.stepDotCompleted,
+                    isActive && localStyles.stepDotActive,
+                  ]}
+                >
+                  {isCompleted ? (
+                    <Text style={localStyles.stepCheckmark}>✓</Text>
+                  ) : isActive ? (
+                    <View style={localStyles.stepInnerDotActive} />
+                  ) : null}
+                </View>
+                <Text
+                  style={[
+                    localStyles.stepLabel,
+                    (isCompleted || isActive) && localStyles.stepLabelActive,
+                  ]}
+                >
+                  {step.label}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      </View>
+
+      {/* Delivery Partner Details (if driver assigned) */}
+      {showDriver && (
+        <View style={localStyles.driverSection}>
+          <View style={localStyles.driverInfoRow}>
+            <View style={localStyles.driverAvatarContainer}>
+              <Text style={localStyles.driverAvatarText}>RS</Text>
+            </View>
+            <View style={localStyles.driverMeta}>
+              <Text style={localStyles.driverRoleText}>Your Delivery Hero</Text>
+              <Text style={localStyles.driverNameText}>Rahul Sharma</Text>
+              <Text style={localStyles.driverVehicleText}>
+                KA-01-AB-1234 • Honda Activa
+              </Text>
+            </View>
+            <View style={localStyles.ratingBadge}>
+              <Text style={localStyles.ratingText}>⭐ 4.8</Text>
+            </View>
+          </View>
+          <View style={localStyles.driverActionsRow}>
+            <TouchableOpacity
+              style={[localStyles.actionButton, localStyles.callButton]}
+              onPress={handleCall}
+              activeOpacity={0.8}
+            >
+              <Text style={localStyles.actionIcon}>📞</Text>
+              <Text style={localStyles.callButtonText}>Call Partner</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[localStyles.actionButton, localStyles.messageButton]}
+              onPress={handleMessage}
+              activeOpacity={0.8}
+            >
+              <Text style={localStyles.actionIcon}>💬</Text>
+              <Text style={localStyles.messageButtonText}>Chat</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      {/* View Detailed History Toggle */}
+      <View style={localStyles.toggleSection}>
+        <TouchableOpacity
+          onPress={toggleExpand}
+          style={localStyles.toggleButton}
+          activeOpacity={0.7}
+        >
+          <Text style={localStyles.toggleButtonText}>
+            {expanded ? 'Hide Details' : 'View Detailed History'}
+          </Text>
+          <Text style={localStyles.toggleChevron}>{expanded ? '▲' : '▼'}</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Detailed Vertical Logs */}
+      {expanded && (
+        <View style={localStyles.detailedTimelineWrapper}>
+          {STATUS_FLOW.map((status, index) => {
+            const isCompleted = index <= currentIndex;
+            const isLast = index === STATUS_FLOW.length - 1;
+            const time = trackingMap[status];
+
+            return (
+              <View key={status} style={styles.timelineRow}>
+                <View style={styles.timelineDotColumn}>
+                  <View
+                    style={[
+                      styles.timelineDot,
+                      isCompleted && styles.timelineDotCompleted,
+                    ]}
+                  >
+                    {isCompleted && <Text style={styles.timelineCheck}>✓</Text>}
+                  </View>
+                  {!isLast && (
+                    <View
+                      style={[
+                        styles.timelineLine,
+                        index < currentIndex && styles.timelineLineCompleted,
+                      ]}
+                    />
+                  )}
+                </View>
+                <View style={styles.timelineContent}>
+                  <Text
+                    style={
+                      isCompleted
+                        ? styles.timelineLabelCompleted
+                        : styles.timelineLabelPending
+                    }
+                  >
+                    {STATUS_LABEL[status]}
+                  </Text>
+                  {time && (
+                    <Text style={styles.timelineTime}>
+                      {formatDate(time)} at {formatTime(time)}
+                    </Text>
+                  )}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+};

app/components/OrderStatusTimeline/index.ts

@@ -0,0 +1,2 @@
+export * from './OrderStatusTimeline';
+export type * from './OrderStatusTimeline.props';

app/components/index.ts

@@ -4,6 +4,7 @@ export * from './socialButton';
 export * from './header';
 export * from './searchBar';
 export * from './providerCard';
+export * from './productCard';
 export * from './catalogItemRow';
 export * from './stepProgress';
 export * from './badge';
@@ -12,3 +13,4 @@ export * from './categoryChip';
 export * from './ratingStars';
 export * from './orderHistoryCard';
 export * from './paymentOption';
+export * from './OrderStatusTimeline';

app/components/orderHistoryCard/orderHistoryCard.props.ts

@@ -1,3 +1,5 @@
+import { OrderItem } from '@interfaces';
+
 export interface OrderHistoryCardProps {
   providerName: string;
   providerImage: string;
@@ -6,4 +8,5 @@ export interface OrderHistoryCardProps {
   total: number;
   onReorder?: () => void;
   onDetails?: () => void;
+  items?: OrderItem[];
 }

app/components/orderHistoryCard/orderHistoryCard.styles.ts

@@ -53,12 +53,42 @@ export const getStyles = (colors: any) => StyleSheet.create({
     fontWeight: typography.fontWeight.medium,
     color: colors.primary,
   },
+  itemsContainer: {
+    paddingVertical: 12,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  itemRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  itemQuantityBadge: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginRight: 8,
+    marginTop: 2,
+  },
+  itemQuantityText: {
+    fontSize: typography.fontSize.xs,
+    color: colors.text,
+    fontWeight: typography.fontWeight.medium,
+  },
+  itemName: {
+    flex: 1,
+    fontSize: typography.fontSize.sm,
+    color: colors.text,
+    lineHeight: 20,
+  },
   footer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginTop: 10,
-    paddingTop: 10,
+    paddingTop: 12,
     borderTopWidth: 1,
     borderTopColor: colors.border,
   },

app/components/orderHistoryCard/orderHistoryCard.tsx

@@ -12,6 +12,7 @@ export const OrderHistoryCard: React.FC<OrderHistoryCardProps> = ({
   total,
   onReorder,
   onDetails,
+  items,
 }) => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
@@ -30,6 +31,20 @@ export const OrderHistoryCard: React.FC<OrderHistoryCardProps> = ({
           <Text style={styles.statusText}>{status}</Text>
         </View>
       </View>
+      {items && items.length > 0 && (
+        <View style={styles.itemsContainer}>
+          {items.map((item, index) => (
+            <View key={item.id || index} style={styles.itemRow}>
+              <View style={styles.itemQuantityBadge}>
+                <Text style={styles.itemQuantityText}>{item.quantity}x</Text>
+              </View>
+              <Text style={styles.itemName} numberOfLines={1}>
+                {item.name}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
       <View style={styles.footer}>
         <Text style={styles.total}>₹{total}</Text>
         <View style={styles.actions}>

app/components/paymentOption/paymentOption.props.ts

@@ -1,6 +1,6 @@
 export interface PaymentOptionProps {
-  type: string;
   label: string;
   isSelected: boolean;
+  icon?: string;
   onSelect: () => void;
 }

app/components/paymentOption/paymentOption.styles.ts

@@ -1,7 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { typography } from '@theme';
 
-export const getStyles = (colors: any) => StyleSheet.create({
+export const getStyles = (colors: any) =>
+  StyleSheet.create({
     container: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -18,7 +19,8 @@ export const getStyles = (colors: any) => StyleSheet.create({
       backgroundColor: '#E8F5E9',
     },
     icon: {
-    fontSize: 24,
+      width: 24,
+      height: 24,
       marginRight: 12,
     },
     label: {
@@ -45,4 +47,4 @@ export const getStyles = (colors: any) => StyleSheet.create({
       borderRadius: 6,
       backgroundColor: colors.primary,
     },
-});
+  });

app/components/paymentOption/paymentOption.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Image } from 'react-native';
 import { PaymentOptionProps } from './paymentOption.props';
 import { getStyles } from './paymentOption.styles';
 import { useAppTheme } from '@theme';
 
 export const PaymentOption: React.FC<PaymentOptionProps> = ({
-  type,
   label,
   isSelected,
+  icon,
   onSelect,
 }) => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
+  // console.log(icon);
 
   return (
     <TouchableOpacity
@@ -19,7 +20,7 @@ export const PaymentOption: React.FC<PaymentOptionProps> = ({
       onPress={onSelect}
       activeOpacity={0.7}
     >
-      <Text style={styles.icon}>{type === 'UPI' ? '📱' : type === 'Card' ? '💳' : type === 'Wallet' ? '👛' : '💵'}</Text>
+      <Image source={{ uri: icon }} style={styles.icon} />
       <Text style={styles.label}>{label}</Text>
       <View style={[styles.radio, isSelected && styles.radioSelected]}>
         {isSelected && <View style={styles.radioInner} />}

app/components/productCard/index.ts

@@ -0,0 +1 @@
+export * from './productCard';

app/components/productCard/productCard.styles.ts

@@ -0,0 +1,109 @@
+import { StyleSheet, Dimensions, Platform } from 'react-native';
+import { typography } from '@theme';
+
+const { width } = Dimensions.get('window');
+// Screen padding = 16 * 2 = 32
+// Gap between cards = 16
+// Total cards width = width - 32 - 16 = width - 48
+const CARD_WIDTH = (width - 48) / 2;
+
+export const getStyles = (colors: any) =>
+  StyleSheet.create({
+    cardContainer: {
+      width: CARD_WIDTH,
+      backgroundColor: colors.surface ?? '#FFFFFF',
+      borderRadius: 12,
+      marginBottom: 16,
+      overflow: 'hidden',
+      ...Platform.select({
+        ios: {
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.05,
+          shadowRadius: 8,
+        },
+        android: { elevation: 2 },
+      }),
+    },
+    imageContainer: {
+      width: '100%',
+      height: CARD_WIDTH, // Square image
+      backgroundColor: colors.background ?? '#F8F9FA',
+      position: 'relative',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover',
+    },
+    discountBadge: {
+      position: 'absolute',
+      top: 8,
+      left: 8,
+      backgroundColor: colors.error ?? '#E53935',
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 4,
+    },
+    discountText: {
+      color: '#FFFFFF',
+      fontSize: 10,
+      fontWeight: typography.fontWeight.bold,
+    },
+    favoriteButton: {
+      position: 'absolute',
+      top: 8,
+      right: 8,
+      backgroundColor: 'rgba(255,255,255,0.9)',
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    infoContainer: {
+      padding: 10,
+    },
+    brandText: {
+      fontSize: 10,
+      color: colors.textSecondary,
+      textTransform: 'uppercase',
+      marginBottom: 2,
+      fontWeight: typography.fontWeight.semibold,
+    },
+    titleText: {
+      fontSize: 13,
+      color: colors.text,
+      fontWeight: typography.fontWeight.medium,
+      marginBottom: 4,
+    },
+    priceRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    priceText: {
+      fontSize: 14,
+      color: colors.text,
+      fontWeight: typography.fontWeight.bold,
+      marginRight: 6,
+    },
+    comparePriceText: {
+      fontSize: 11,
+      color: colors.textSecondary,
+      textDecorationLine: 'line-through',
+    },
+    addButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    addButtonText: {
+      color: colors.primary ?? '#05824C',
+      fontSize: 12,
+      fontWeight: typography.fontWeight.bold,
+    },
+  });

app/components/productCard/productCard.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { getStyles } from './productCard.styles';
+import { useAppTheme } from '@theme';
+import { getFullUrl } from '@utils';
+
+export interface ProductCardProps {
+  id: string;
+  name: string;
+  imageUrl: string;
+  price: string;
+  compareAtPrice?: string;
+  brand?: string | null;
+  currency?: string;
+  onPress?: () => void;
+  onAddPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const getDiscountPercentage = (price: string, comparePrice?: string) => {
+  if (!comparePrice || !price) return null;
+  const p = parseFloat(price);
+  const c = parseFloat(comparePrice);
+  if (c <= p || c <= 0) return null;
+  const discount = Math.round(((c - p) / c) * 100);
+  return discount > 0 ? `${discount}% OFF` : null;
+};
+
+export const formatPrice = (price: string, currency: string = '₹') => {
+  const num = parseFloat(price);
+  return isNaN(num) ? price : `${currency}${num.toFixed(0)}`;
+};
+
+export const ProductCard: React.FC<ProductCardProps> = ({
+  id,
+  name,
+  imageUrl,
+  price,
+  compareAtPrice,
+  brand,
+  currency = '₹',
+  onPress,
+  onAddPress,
+  style,
+}) => {
+  const { colors } = useAppTheme();
+  const styles = getStyles(colors);
+
+  const discountText = getDiscountPercentage(price, compareAtPrice);
+
+  return (
+    <TouchableOpacity
+      style={[styles.cardContainer, style]}
+      activeOpacity={0.7}
+      onPress={onPress}
+    >
+      <View style={styles.imageContainer}>
+        <Image
+          source={{
+            uri: getFullUrl(imageUrl),
+          }}
+          style={styles.image}
+          // fallback source can be handled here if needed
+        />
+        {discountText && (
+          <View style={styles.discountBadge}>
+            <Text style={styles.discountText}>{discountText}</Text>
+          </View>
+        )}
+        <TouchableOpacity style={styles.favoriteButton}>
+          <Text style={{ fontSize: 14 }}>🤍</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.infoContainer}>
+        {brand && (
+          <Text style={styles.brandText} numberOfLines={1}>
+            {brand}
+          </Text>
+        )}
+        <Text style={styles.titleText} numberOfLines={2}>
+          {name}
+        </Text>
+
+        <View style={styles.priceRow}>
+          <Text style={styles.priceText}>{formatPrice(price, currency)}</Text>
+          {compareAtPrice && parseFloat(compareAtPrice) > parseFloat(price) && (
+            <Text style={styles.comparePriceText}>
+              {formatPrice(compareAtPrice, currency)}
+            </Text>
+          )}
+        </View>
+
+        {/* <TouchableOpacity
+          style={styles.addButton}
+          onPress={onAddPress || onPress}
+          activeOpacity={0.7}
+        >
+          <Text style={styles.addButtonText}>+ ADD</Text>
+        </TouchableOpacity> */}
+      </View>
+    </TouchableOpacity>
+  );
+};

app/features/screens/LoginScreen/LoginScreen.tsx

@@ -9,7 +9,8 @@ import {
 import { getStyles } from './loginScreen.styles';
 import { CustomInput, PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useLoginScreen } from '../../../hooks';
+import { useLoginScreen } from './hooks/useLoginScreen';
+import { RootState, useAppSelector } from '@store';
 
 export const LoginScreen: React.FC = () => {
   const { colors } = useAppTheme();
@@ -18,6 +19,8 @@ export const LoginScreen: React.FC = () => {
   const { mobileNumber, error, onChangeMobileNumber, handleLogin } =
     useLoginScreen();
 
+  const { isLoading } = useAppSelector((state: RootState) => state.auth);
+
   return (
     <KeyboardAvoidingView
       style={styles.container}
@@ -69,9 +72,10 @@ export const LoginScreen: React.FC = () => {
             )}
 
             <PrimaryButton
-              title="Get OTP"
+              title={isLoading ? 'Loading...' : 'Get OTP'}
               onPress={handleLogin}
               style={{ marginTop: 12 }}
+              disabled={isLoading}
             />
           </View>
 

app/features/screens/LoginScreen/hooks/useLoginScreen.ts

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { AuthStackParamList } from 'app/navigation/authStack';
-import { loginWithPhone, useAppDispatch } from '../store';
+import { loginWithPhone, useAppDispatch } from '@store';
 
 type LoginNavProp = StackNavigationProp<AuthStackParamList, 'LoginScreen'>;
 

app/features/screens/LoginScreen/index.ts

@@ -1,2 +1 @@
 export * from './loginScreen';
-export * from './loginScreen.styles';

app/features/screens/accountScreen/accountScreen.tsx

@@ -9,10 +9,10 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './accountScreen.styles';
 import { Header, PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch, useAppSelector } from '../../../store';
 import { logout } from '../../../store/commonreducers/auth';
 import { AppStackParamList } from '../../../navigation/appStack';
 import { MainTabParamList } from '../../../navigation/mainTabNavigator';
+import { useAppDispatch, useAppSelector } from '@store';
 
 type AccountNavProp = CompositeNavigationProp<
   BottomTabNavigationProp<MainTabParamList, 'AccountScreen'>,
@@ -121,7 +121,7 @@ export const AccountScreen: React.FC = () => {
           <View style={styles.profilePhoneRow}>
             <Text style={styles.profilePhoneIcon}>📞</Text>
             <Text style={styles.profilePhone}>
-              {user?.mobileNumber || '+91 98765 43210'}
+              {user?.phone || '+91 98765 43210'}
             </Text>
           </View>
 

app/features/screens/cartScreen/cartScreen.tsx

@@ -1,24 +1,19 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  TextInput,
-  TouchableOpacity,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './cartScreen.styles';
 import { Header, QuantitySelector, PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch, useAppSelector } from '../../../store';
 import {
-  removeItem,
-  applyCoupon,
-  removeCoupon,
   selectCartTotal,
+  getCartThunk,
+  updateCartItemThunk,
 } from '../../../store/commonreducers/cart';
 import { AppStackParamList } from '../../../navigation/appStack';
+import { useAppDispatch, useAppSelector } from '@store';
+import { getFullUrl } from '@utils';
+// import { getFullUrl } from '@utils/helperr';
 
 type CartScreenNavProp = StackNavigationProp<AppStackParamList, 'CartScreen'>;
 
@@ -27,20 +22,14 @@ export const CartScreen: React.FC = () => {
   const styles = getStyles(colors);
   const dispatch = useAppDispatch();
   const navigation = useNavigation<CartScreenNavProp>();
-  const { items, couponCode } = useAppSelector(state => state.cart);
+  const { items, isLoading } = useAppSelector(state => state.cart);
   const totals = useAppSelector(selectCartTotal);
-  const [couponInput, setCouponInput] = useState('');
 
-  const handleCouponPress = () => {
-    if (couponCode) {
-      dispatch(removeCoupon());
-      setCouponInput('');
-    } else if (couponInput) {
-      dispatch(applyCoupon(couponInput));
-    }
-  };
+  useEffect(() => {
+    dispatch(getCartThunk());
+  }, [dispatch]);
 
-  if (items.length === 0) {
+  if (!isLoading && items.length === 0) {
     return (
       <View style={styles.container}>
         <Header title="Cart" onBack={() => navigation.goBack()} />
@@ -85,19 +74,36 @@ export const CartScreen: React.FC = () => {
                 index < items.length - 1 && styles.cartItemDivider,
               ]}
             >
-              <View style={styles.itemThumb}>
-                <Text style={styles.itemThumbEmoji}>🍕</Text>
-              </View>
+              <Image
+                style={styles.itemThumb}
+                source={{ uri: getFullUrl(item.product.imageUrl) }}
+              />
               <View style={styles.itemInfo}>
                 <Text style={styles.itemTitle} numberOfLines={2}>
-                  {item.item.title}
+                  {item.product.name}
                 </Text>
-                <Text style={styles.itemPrice}>₹{item.item.price}</Text>
+                <Text style={styles.itemPrice}>₹{item.product.price}</Text>
               </View>
               <QuantitySelector
                 value={item.quantity}
-                onIncrement={() => {}}
-                onDecrement={() => dispatch(removeItem(item.item.id))}
+                onIncrement={() =>
+                  dispatch(
+                    updateCartItemThunk({
+                      productId: item.productId,
+                      quantity: item.quantity + 1,
+                    }),
+                  )
+                }
+                onDecrement={() => {
+                  if (item.quantity >= 1) {
+                    dispatch(
+                      updateCartItemThunk({
+                        productId: item.productId,
+                        quantity: item.quantity - 1,
+                      }),
+                    );
+                  }
+                }}
               />
             </View>
           ))}
@@ -113,48 +119,12 @@ export const CartScreen: React.FC = () => {
         </TouchableOpacity>
 
         <View style={styles.footer}>
+          {/* Coupon logic removed/commented out for now as requested
           <Text style={styles.sectionTitle}>Apply Coupon</Text>
           <View style={styles.couponCard}>
-            {couponCode ? (
-              <View style={styles.couponAppliedRow}>
-                <View style={styles.couponAppliedLeft}>
-                  <View style={styles.couponCheckBadge}>
-                    <Text style={styles.couponCheckIcon}>✓</Text>
-                  </View>
-                  <View>
-                    <Text style={styles.couponAppliedCode}>{couponCode}</Text>
-                    <Text style={styles.couponAppliedSub}>Coupon applied</Text>
-                  </View>
-                </View>
-                <TouchableOpacity
-                  onPress={handleCouponPress}
-                  activeOpacity={0.7}
-                >
-                  <Text style={styles.couponRemoveText}>Remove</Text>
-                </TouchableOpacity>
-              </View>
-            ) : (
-              <View style={styles.couponRow}>
-                <Text style={styles.couponIcon}>🏷️</Text>
-                <TextInput
-                  style={styles.couponInput}
-                  placeholder="Enter coupon code"
-                  placeholderTextColor={colors.placeholder}
-                  value={couponInput}
-                  onChangeText={setCouponInput}
-                  autoCapitalize="characters"
-                />
-                <TouchableOpacity
-                  style={styles.applyButton}
-                  onPress={handleCouponPress}
-                  activeOpacity={0.7}
-                  disabled={!couponInput}
-                >
-                  <Text style={styles.applyButtonText}>Apply</Text>
-                </TouchableOpacity>
-              </View>
-            )}
+            ...
           </View>
+          */}
 
           <Text style={styles.sectionTitle}>Bill Details</Text>
           <View style={styles.billCard}>

app/features/screens/checkoutAddressScreen/checkoutAddressScreen.styles.ts

@@ -1,37 +1,15 @@
 import { StyleSheet } from 'react-native';
 import { typography } from '@theme';
 
-export const getStyles = (colors: any) => StyleSheet.create({
+export const getStyles = (colors: any) =>
+  StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: colors.background,
     },
     content: {
       padding: 16,
-  },
-  addressCard: {
-    backgroundColor: colors.cardBg,
-    borderRadius: 12,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: colors.border,
-    marginBottom: 24,
-  },
-  addressLabel: {
-    fontSize: typography.fontSize.xs,
-    color: colors.textSecondary,
-    marginBottom: 4,
-  },
-  addressText: {
-    fontSize: typography.fontSize.md,
-    fontWeight: typography.fontWeight.semibold,
-    color: colors.text,
-    marginBottom: 4,
-  },
-  addressSubtext: {
-    fontSize: typography.fontSize.sm,
-    color: colors.primary,
-    fontWeight: typography.fontWeight.medium,
+      paddingBottom: 24,
     },
     sectionTitle: {
       fontSize: typography.fontSize.md,
@@ -39,32 +17,61 @@ export const getStyles = (colors: any) => StyleSheet.create({
       color: colors.text,
       marginBottom: 12,
     },
-  optionCard: {
-    flexDirection: 'row',
+    emptyState: {
+      padding: 24,
       alignItems: 'center',
-    padding: 16,
+      justifyContent: 'center',
+    },
+    emptyStateText: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+    },
+    addressCard: {
+      backgroundColor: colors.cardBg,
       borderRadius: 12,
+      padding: 16,
       borderWidth: 1.5,
       borderColor: colors.border,
-    marginBottom: 10,
-    backgroundColor: colors.background,
+      marginBottom: 12,
     },
-  optionCardSelected: {
+    addressCardSelected: {
       borderColor: colors.primary,
       backgroundColor: '#E8F5E9',
     },
-  optionInfo: {
-    flex: 1,
+    addressCardHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 8,
     },
-  optionTitle: {
-    fontSize: typography.fontSize.md,
-    fontWeight: typography.fontWeight.medium,
+    labelBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.background,
+      borderRadius: 20,
+      paddingVertical: 4,
+      paddingHorizontal: 10,
+      marginRight: 8,
+    },
+    labelBadgeIcon: {
+      fontSize: 12,
+      marginRight: 4,
+    },
+    labelBadgeText: {
+      fontSize: typography.fontSize.xs,
+      fontWeight: typography.fontWeight.semibold,
       color: colors.text,
-    marginBottom: 2,
     },
-  optionSubtext: {
-    fontSize: typography.fontSize.sm,
-    color: colors.textSecondary,
+    defaultBadge: {
+      backgroundColor: colors.primary,
+      borderRadius: 20,
+      paddingVertical: 3,
+      paddingHorizontal: 8,
+    },
+    defaultBadgeText: {
+      fontSize: 10,
+      fontWeight: typography.fontWeight.bold,
+      color: '#fff',
+      letterSpacing: 0.5,
     },
     radio: {
       width: 22,
@@ -74,6 +81,7 @@ export const getStyles = (colors: any) => StyleSheet.create({
       borderColor: colors.border,
       justifyContent: 'center',
       alignItems: 'center',
+      marginLeft: 'auto',
     },
     radioSelected: {
       borderColor: colors.primary,
@@ -84,9 +92,39 @@ export const getStyles = (colors: any) => StyleSheet.create({
       borderRadius: 6,
       backgroundColor: colors.primary,
     },
+    addressText: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.medium,
+      color: colors.text,
+      marginBottom: 4,
+    },
+    addressSubtext: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      marginBottom: 2,
+    },
+    addressPhone: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      marginTop: 4,
+    },
+    addAddressButton: {
+      borderWidth: 1.5,
+      borderColor: colors.primary,
+      borderStyle: 'dashed',
+      borderRadius: 12,
+      paddingVertical: 14,
+      alignItems: 'center',
+      marginTop: 4,
+    },
+    addAddressButtonText: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.primary,
+    },
     footer: {
       padding: 16,
       borderTopWidth: 1,
       borderTopColor: colors.border,
     },
-});
+  });

app/features/screens/checkoutAddressScreen/checkoutAddressScreen.tsx

@@ -1,18 +1,18 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
+import React, { useState, useMemo } from 'react';
+import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './checkoutAddressScreen.styles';
 import { Header, StepProgress, PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { AppStackParamList } from '../../../navigation/appStack';
+import { useAppSelector } from '@store';
+import { AddressLabel, CustomerAddress } from '@interfaces';
+import { AppStackParamList } from '@navigation/appStack';
 
-type CheckoutAddressNavProp = StackNavigationProp<AppStackParamList, 'CheckoutAddressScreen'>;
+type CheckoutAddressNavProp = StackNavigationProp<
+  AppStackParamList,
+  'CheckoutAddressScreen'
+>;
 
 const CHECKOUT_STEPS = [
   { key: 'address', label: 'Address' },
@@ -20,62 +20,118 @@ const CHECKOUT_STEPS = [
   { key: 'confirm', label: 'Confirm' },
 ];
 
+const LABEL_ICON: Record<AddressLabel, string> = {
+  Home: '🏠',
+  Work: '💼',
+  Other: '📍',
+};
+
 export const CheckoutAddressScreen: React.FC = () => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
   const navigation = useNavigation<CheckoutAddressNavProp>();
-  const [deliveryOption, setDeliveryOption] = useState<'standard' | 'express'>('standard');
+  const { customerDetails } = useAppSelector(state => state.customerProfile);
+
+  const addresses: CustomerAddress[] = customerDetails?.addresses ?? [];
+
+  const defaultAddressId = useMemo(() => {
+    const def = addresses.find(a => a.isDefault);
+    return def?.id ?? addresses[0]?.id ?? null;
+  }, [addresses]);
+
+  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(
+    defaultAddressId,
+  );
+
+  const handleContinue = () => {
+    if (!selectedAddressId) return;
+    navigation.navigate('CheckoutPaymentScreen', {
+      selectedAddressId,
+    });
+  };
 
   return (
     <View style={styles.container}>
       <Header title="Checkout" onBack={() => navigation.goBack()} />
       <StepProgress steps={CHECKOUT_STEPS} activeStep={0} />
       <ScrollView contentContainerStyle={styles.content}>
-        <View style={styles.addressCard}>
-          <Text style={styles.addressLabel}>Deliver to</Text>
-          <Text style={styles.addressText}>
-            Koramangala 4th Block, Bengaluru, 560034
+        <Text style={styles.sectionTitle}>Deliver to</Text>
+
+        {addresses.length === 0 && (
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyStateText}>No saved addresses yet.</Text>
+          </View>
+        )}
+
+        {addresses.map(address => {
+          const isSelected = selectedAddressId === address.id;
+          return (
+            <TouchableOpacity
+              key={address.id}
+              style={[
+                styles.addressCard,
+                isSelected && styles.addressCardSelected,
+              ]}
+              activeOpacity={0.7}
+              onPress={() => setSelectedAddressId(address.id)}
+            >
+              <View style={styles.addressCardHeader}>
+                <View style={styles.labelBadge}>
+                  <Text style={styles.labelBadgeIcon}>
+                    {LABEL_ICON[address.label] ?? '📍'}
                   </Text>
-          <Text style={styles.addressSubtext}>Home</Text>
+                  <Text style={styles.labelBadgeText}>{address.label}</Text>
                 </View>
 
-        <Text style={styles.sectionTitle}>Delivery Option</Text>
-        <TouchableOpacity
-          style={[
-            styles.optionCard,
-            deliveryOption === 'standard' && styles.optionCardSelected,
-          ]}
-          onPress={() => setDeliveryOption('standard')}
-          activeOpacity={0.7}
+                {address.isDefault && (
+                  <View style={styles.defaultBadge}>
+                    <Text style={styles.defaultBadgeText}>DEFAULT</Text>
+                  </View>
+                )}
+
+                <View
+                  style={[styles.radio, isSelected && styles.radioSelected]}
                 >
-          <View style={styles.optionInfo}>
-            <Text style={styles.optionTitle}>Standard Delivery</Text>
-            <Text style={styles.optionSubtext}>Free • 25-30 min</Text>
+                  {isSelected && <View style={styles.radioInner} />}
                 </View>
-          <View style={[styles.radio, deliveryOption === 'standard' && styles.radioSelected]}>
-            {deliveryOption === 'standard' && <View style={styles.radioInner} />}
               </View>
+
+              <Text style={styles.addressText} numberOfLines={2}>
+                {address.houseNumber ? `${address.houseNumber}, ` : ''}
+                {address.addressLine1}
+              </Text>
+
+              {!!address.landmark && (
+                <Text style={styles.addressSubtext} numberOfLines={1}>
+                  Landmark: {address.landmark}
+                </Text>
+              )}
+
+              <Text style={styles.addressSubtext} numberOfLines={1}>
+                {address.city}, {address.state} - {address.postalCode}
+              </Text>
+
+              <Text style={styles.addressPhone}>📞 {address.phone}</Text>
             </TouchableOpacity>
+          );
+        })}
 
         <TouchableOpacity
-          style={[
-            styles.optionCard,
-            deliveryOption === 'express' && styles.optionCardSelected,
-          ]}
-          onPress={() => setDeliveryOption('express')}
+          style={styles.addAddressButton}
           activeOpacity={0.7}
+          onPress={() => {
+            // navigation.navigate('AddAddressScreen');
+          }}
         >
-          <View style={styles.optionInfo}>
-            <Text style={styles.optionTitle}>Express Delivery</Text>
-            <Text style={styles.optionSubtext}>₹40 • 10-15 min</Text>
-          </View>
-          <View style={[styles.radio, deliveryOption === 'express' && styles.radioSelected]}>
-            {deliveryOption === 'express' && <View style={styles.radioInner} />}
-          </View>
+          <Text style={styles.addAddressButtonText}>+ Add New Address</Text>
         </TouchableOpacity>
       </ScrollView>
       <View style={styles.footer}>
-        <PrimaryButton title="Continue to Payment" onPress={() => navigation.navigate('CheckoutPaymentScreen')} />
+        <PrimaryButton
+          title="Continue to Payment"
+          onPress={handleContinue}
+          disabled={!selectedAddressId}
+        />
       </View>
     </View>
   );

app/features/screens/checkoutPaymentScreen/checkoutPaymentScreen.tsx

@@ -1,13 +1,30 @@
-import React, { useState } from 'react';
-import { View, Text, ScrollView } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, ScrollView, Alert } from 'react-native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './checkoutPaymentScreen.styles';
-import { Header, StepProgress, PaymentOption, PrimaryButton } from '@components';
+import {
+  Header,
+  StepProgress,
+  PaymentOption,
+  PrimaryButton,
+} from '@components';
 import { useAppTheme } from '@theme';
 import { AppStackParamList } from '../../../navigation/appStack';
+import { RootState, useAppDispatch, useAppSelector } from '@store';
+import { getAllPaymentMethodsThunk, placeOrderThunk } from './thunk';
+import { useSelector } from 'react-redux';
+import uuid from 'react-native-uuid';
+import { v4 } from 'react-native-uuid/dist/v4';
 
-type CheckoutPaymentNavProp = StackNavigationProp<AppStackParamList, 'CheckoutPaymentScreen'>;
+type CheckoutPaymentNavProp = StackNavigationProp<
+  AppStackParamList,
+  'CheckoutPaymentScreen'
+>;
+type CheckoutPaymentRouteProp = RouteProp<
+  AppStackParamList,
+  'CheckoutPaymentScreen'
+>;
 
 const CHECKOUT_STEPS = [
   { key: 'address', label: 'Address' },
@@ -25,8 +42,59 @@ const PAYMENT_METHODS = [
 export const CheckoutPaymentScreen: React.FC = () => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
+  const route = useRoute<CheckoutPaymentRouteProp>();
   const navigation = useNavigation<CheckoutPaymentNavProp>();
+  const dispatch = useAppDispatch();
   const [selectedMethod, setSelectedMethod] = useState('upi');
+  const selectedAddressId = route.params?.selectedAddressId;
+  // console.log(selectedAddressId);
+  const uuid = v4();
+  // console.log(uuid);
+  const {
+    paymentMethods,
+    placeOrderSuccess,
+    placeOrderLoading,
+    placeOrderError,
+  } = useAppSelector((state: RootState) => state.paymentMethods);
+
+  useEffect(() => {
+    dispatch(getAllPaymentMethodsThunk());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (placeOrderSuccess) {
+      navigation.navigate('OrderConfirmedScreen', {
+        orderId: 'ORD-' + Math.floor(Math.random() * 900000 + 100000),
+      });
+    } else if (placeOrderError) {
+      Alert.alert('Error', placeOrderError);
+    }
+  }, [placeOrderSuccess, placeOrderError]);
+
+  // console.log('paymentMethods', paymentMethods);
+
+  const selectedPaymentMethod = paymentMethods.find(
+    item => item.id === selectedMethod,
+  );
+
+  const methodName = selectedPaymentMethod?.code;
+  // console.log('methodName', methodName);
+
+  // useEffect(() => {
+
+  // },);
+
+  const handlePlaceOrder = () => {
+    dispatch(
+      placeOrderThunk({
+        addressId: selectedAddressId || '',
+        paymentMethodId: selectedMethod,
+        paymentMethod: methodName || '',
+        orderType: 'DELIVERY',
+        idempotencyKey: `idemp-key-${uuid}`,
+      }),
+    );
+  };
 
   return (
     <View style={styles.container}>
@@ -34,18 +102,22 @@ export const CheckoutPaymentScreen: React.FC = () => {
       <StepProgress steps={CHECKOUT_STEPS} activeStep={1} />
       <ScrollView contentContainerStyle={styles.content}>
         <Text style={styles.sectionTitle}>Select Payment Method</Text>
-        {PAYMENT_METHODS.map((method) => (
+        {paymentMethods?.map(method => (
           <PaymentOption
             key={method.id}
-            type={method.type}
-            label={method.label}
+            label={method.code}
+            icon={method.iconUrl}
             isSelected={selectedMethod === method.id}
             onSelect={() => setSelectedMethod(method.id)}
           />
         ))}
       </ScrollView>
       <View style={styles.footer}>
-        <PrimaryButton title="Place Order" onPress={() => navigation.navigate('OrderConfirmedScreen', { orderId: 'ORD-' + Math.floor(Math.random() * 900000 + 100000) })} />
+        <PrimaryButton
+          title={placeOrderLoading ? 'Placing...' : 'Place Order'}
+          onPress={handlePlaceOrder}
+          disabled={placeOrderLoading}
+        />
       </View>
     </View>
   );

app/features/screens/checkoutPaymentScreen/index.ts

@@ -1 +1,3 @@
 export * from './checkoutPaymentScreen';
+export * from './thunk';
+export * from './reducer';

app/features/screens/checkoutPaymentScreen/reducer.ts

@@ -0,0 +1,94 @@
+import { PaymentMethodsResponse, PlaceOrderResponse } from '@interfaces';
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  getAllPaymentMethodsThunk,
+  getOrderByIdThunk,
+  getOrderHistoryThunk,
+  placeOrderThunk,
+} from './thunk';
+import { Order } from '@interfaces/order';
+
+export interface PaymentMethodsState {
+  paymentMethods: PaymentMethodsResponse;
+  isLoading: boolean;
+  error: string | null;
+  placeOrderLoading: boolean;
+  placeOrderSuccess: boolean;
+  placeOrderError: string | null;
+  orderHistory: Order[] | null;
+  placeOrderResponse: PlaceOrderResponse | null;
+  orderDetails: Order | null;
+  orderDetailsLoading: boolean;
+  orderDetailsError: string | null;
+}
+
+const initialState: PaymentMethodsState = {
+  paymentMethods: [],
+  isLoading: false,
+  error: null,
+  placeOrderLoading: false,
+  placeOrderSuccess: false,
+  placeOrderError: null,
+  orderHistory: null,
+  placeOrderResponse: null,
+  orderDetails: null,
+  orderDetailsLoading: false,
+  orderDetailsError: null,
+};
+
+const paymentMethodsReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(getAllPaymentMethodsThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(getAllPaymentMethodsThunk.fulfilled, (state, action) => {
+      state.isLoading = false;
+      state.paymentMethods = action.payload;
+    })
+    .addCase(getAllPaymentMethodsThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload as string;
+    })
+    .addCase(placeOrderThunk.pending, state => {
+      state.placeOrderLoading = true;
+      state.placeOrderSuccess = false;
+      state.placeOrderError = null;
+    })
+    .addCase(placeOrderThunk.fulfilled, (state, action) => {
+      state.placeOrderLoading = false;
+      state.placeOrderSuccess = true;
+      state.placeOrderResponse = action.payload;
+    })
+    .addCase(placeOrderThunk.rejected, (state, action) => {
+      state.placeOrderLoading = false;
+      state.placeOrderSuccess = false;
+      state.placeOrderError = action.payload as string;
+    })
+    .addCase(getOrderHistoryThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(getOrderHistoryThunk.fulfilled, (state, action) => {
+      state.isLoading = false;
+      state.orderHistory = action.payload;
+    })
+    .addCase(getOrderHistoryThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload as string;
+    })
+    .addCase(getOrderByIdThunk.pending, state => {
+      state.orderDetailsLoading = true;
+      state.orderDetailsError = null;
+    })
+    .addCase(getOrderByIdThunk.fulfilled, (state, action) => {
+      state.orderDetailsLoading = false;
+      state.orderDetails = action.payload;
+    })
+    .addCase(getOrderByIdThunk.rejected, (state, action) => {
+      state.orderDetailsLoading = false;
+      state.orderDetailsError = action.payload as string;
+    });
+});
+
+export default paymentMethodsReducer;

app/features/screens/checkoutPaymentScreen/thunk.ts

@@ -0,0 +1,74 @@
+import {
+  OrderRequest,
+  PaymentMethodsResponse,
+  PlaceOrderResponse,
+  Order,
+} from '@interfaces';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import {
+  getAllPaymentMethodsApi,
+  getOrderByIdApi,
+  getOrderHistoryApi,
+  placeOrderApi,
+} from '@api';
+
+export const getAllPaymentMethodsThunk = createAsyncThunk<
+  PaymentMethodsResponse,
+  void,
+  { rejectValue: string }
+>('paymentMethods/getAll', async (_, { rejectWithValue }) => {
+  try {
+    const response = await getAllPaymentMethodsApi();
+    // console.log(response.data);
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.error || 'Failed to get payment methods',
+    );
+  }
+});
+
+export const placeOrderThunk = createAsyncThunk<
+  PlaceOrderResponse,
+  OrderRequest,
+  { rejectValue: string }
+>('orders/placeOrder', async (payload: OrderRequest, { rejectWithValue }) => {
+  try {
+    const response = await placeOrderApi(payload);
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.error || 'Failed to place order',
+    );
+  }
+});
+
+export const getOrderHistoryThunk = createAsyncThunk<
+  Order[],
+  void,
+  { rejectValue: string }
+>('orders/getOrderHistory', async (_, { rejectWithValue }) => {
+  try {
+    const response = await getOrderHistoryApi();
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.error || 'Failed to get order history',
+    );
+  }
+});
+
+export const getOrderByIdThunk = createAsyncThunk<
+  Order,
+  string,
+  { rejectValue: string }
+>('orders/getOrderById', async (orderId: string, { rejectWithValue }) => {
+  try {
+    const response = await getOrderByIdApi(orderId);
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.error || 'Failed to get order',
+    );
+  }
+});

app/features/screens/completeProfileScreen/completeProfileScreen.tsx

@@ -12,11 +12,15 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './completeProfileScreen.styles';
 import { CustomInput, PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch } from '../../../store';
-import { completeProfile } from '../../../store/commonreducers/auth';
 import { AuthStackParamList } from '../../../navigation/authStack';
+import { useAppDispatch } from '@store';
+import { saveProfileData } from './reducer';
+import { OnboardingStackParamList } from '@navigation/onboardingStack';
 
-type NavProp = StackNavigationProp<AuthStackParamList, 'CompleteProfileScreen'>;
+type NavProp = StackNavigationProp<
+  OnboardingStackParamList,
+  'CompleteProfileScreen'
+>;
 
 const LOCATION_LABELS = ['Home', 'Work', 'Other'];
 
@@ -28,10 +32,34 @@ export const CompleteProfileScreen: React.FC = () => {
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
+  const [gender, setGender] = useState<'MALE' | 'FEMALE' | 'OTHER'>('MALE');
+
+  const [addressLine1, setAddressLine1] = useState('');
+  const [houseNumber, setHouseNumber] = useState('');
+  const [landmark, setLandmark] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [postalCode, setPostalCode] = useState('');
+  const [addressPhone, setAddressPhone] = useState('');
+
   const [selectedLabel, setSelectedLabel] = useState('Home');
 
   const handleSave = () => {
-    dispatch(completeProfile({ name, email, locationLabels: [selectedLabel] }));
+    dispatch(
+      saveProfileData({
+        name,
+        email,
+        gender,
+        addressLine1,
+        houseNumber,
+        landmark,
+        city,
+        state,
+        postalCode,
+        addressPhone,
+        addressLabel: selectedLabel,
+      }),
+    );
     navigation.navigate('PreferencesScreen');
   };
 
@@ -40,28 +68,117 @@ export const CompleteProfileScreen: React.FC = () => {
       style={styles.container}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <ScrollView contentContainerStyle={styles.scrollContainer}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContainer}
+        showsVerticalScrollIndicator={false}
+      >
         <Text style={styles.title}>Complete Profile</Text>
         <Text style={styles.subtitle}>Tell us about yourself</Text>
 
         <View style={styles.form}>
+          {/* Personal Information */}
+
           <CustomInput
-            label="Name"
+            label="Full Name"
             placeholder="John Doe"
             value={name}
             onChangeText={setName}
           />
+
           <CustomInput
             label="Email"
             placeholder="john@example.com"
             keyboardType="email-address"
+            autoCapitalize="none"
             value={email}
             onChangeText={setEmail}
           />
 
-          <Text style={styles.labelText}>Location Label</Text>
+          {/* Gender */}
+
+          <Text style={styles.labelText}>Gender</Text>
+
           <View style={styles.labelRow}>
-            {LOCATION_LABELS.map((label) => (
+            {['MALE', 'FEMALE', 'OTHER'].map(item => (
+              <TouchableOpacity
+                key={item}
+                style={[
+                  styles.labelChip,
+                  gender === item && styles.labelChipSelected,
+                ]}
+                onPress={() => setGender(item as 'MALE' | 'FEMALE' | 'OTHER')}
+              >
+                <Text
+                  style={[
+                    styles.labelChipText,
+                    gender === item && styles.labelChipTextSelected,
+                  ]}
+                >
+                  {item.charAt(0) + item.slice(1).toLowerCase()}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+
+          {/* Address */}
+
+          <CustomInput
+            label="Address Line 1"
+            placeholder="123 Main Street"
+            value={addressLine1}
+            onChangeText={setAddressLine1}
+          />
+
+          <CustomInput
+            label="House / Flat Number"
+            placeholder="Apt 4B"
+            value={houseNumber}
+            onChangeText={setHouseNumber}
+          />
+
+          <CustomInput
+            label="Landmark"
+            placeholder="Near Central Park"
+            value={landmark}
+            onChangeText={setLandmark}
+          />
+
+          <CustomInput
+            label="City"
+            placeholder="New York"
+            value={city}
+            onChangeText={setCity}
+          />
+
+          <CustomInput
+            label="State"
+            placeholder="NY"
+            value={state}
+            onChangeText={setState}
+          />
+
+          <CustomInput
+            label="Postal Code"
+            placeholder="10001"
+            keyboardType="number-pad"
+            value={postalCode}
+            onChangeText={setPostalCode}
+          />
+
+          <CustomInput
+            label="Phone Number"
+            placeholder="+1 9999999999"
+            keyboardType="phone-pad"
+            value={addressPhone}
+            onChangeText={setAddressPhone}
+          />
+
+          {/* Location Label */}
+
+          <Text style={styles.labelText}>Location Label</Text>
+
+          <View style={styles.labelRow}>
+            {LOCATION_LABELS.map(label => (
               <TouchableOpacity
                 key={label}
                 style={[
@@ -69,7 +186,6 @@ export const CompleteProfileScreen: React.FC = () => {
                   selectedLabel === label && styles.labelChipSelected,
                 ]}
                 onPress={() => setSelectedLabel(label)}
-                activeOpacity={0.7}
               >
                 <Text
                   style={[

app/features/screens/completeProfileScreen/index.ts

@@ -1 +1,2 @@
 export * from './completeProfileScreen';
+export * from './reducer';

app/features/screens/completeProfileScreen/reducer.ts

@@ -0,0 +1,71 @@
+import { createReducer, createAction } from '@reduxjs/toolkit';
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+export const saveProfileData = createAction<{
+  name: string;
+  email: string;
+  gender: 'MALE' | 'FEMALE' | 'OTHER';
+  addressLine1: string;
+  houseNumber: string;
+  landmark: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  addressPhone: string;
+  addressLabel: string;
+}>('completeProfile/saveProfileData');
+
+export const clearProfileData = createAction('completeProfile/clearProfileData');
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+export interface CompleteProfileState {
+  name: string;
+  email: string;
+  gender: 'MALE' | 'FEMALE' | 'OTHER';
+  addressLine1: string;
+  houseNumber: string;
+  landmark: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  addressPhone: string;
+  addressLabel: string;
+}
+
+const initialState: CompleteProfileState = {
+  name: '',
+  email: '',
+  gender: 'MALE',
+  addressLine1: '',
+  houseNumber: '',
+  landmark: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  addressPhone: '',
+  addressLabel: 'Home',
+};
+
+// ─── Reducer ──────────────────────────────────────────────────────────────────
+
+const completeProfileReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(saveProfileData, (state, action) => {
+      state.name = action.payload.name;
+      state.email = action.payload.email;
+      state.gender = action.payload.gender;
+      state.addressLine1 = action.payload.addressLine1;
+      state.houseNumber = action.payload.houseNumber;
+      state.landmark = action.payload.landmark;
+      state.city = action.payload.city;
+      state.state = action.payload.state;
+      state.postalCode = action.payload.postalCode;
+      state.addressPhone = action.payload.addressPhone;
+      state.addressLabel = action.payload.addressLabel;
+    })
+    .addCase(clearProfileData, () => initialState);
+});
+
+export default completeProfileReducer;

app/features/screens/homeScreen/homeScreen.styles.ts

@@ -250,9 +250,12 @@ export const getStyles = (colors: any) =>
       color: colors.primary ?? '#05824C',
     },
 
-    // ---------- Provider cards ----------
+    // ---------- Product Grid ----------
     providerList: {
       paddingHorizontal: 16,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
     },
     providerCardWrap: {
       backgroundColor: colors.surface ?? '#FFFFFF',

app/features/screens/homeScreen/homeScreen.tsx

@@ -17,12 +17,13 @@ import {
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './homeScreen.styles';
-import { ProviderCard, SearchBar } from '@components';
+import { ProductCard, SearchBar } from '@components';
 import { useAppTheme } from '@theme';
-import { getProvidersApi } from '../../../api/deliveryApi';
-import { Provider } from '../../../interfaces';
+import { Product } from '../../../interfaces';
 import { AppStackParamList } from '../../../navigation/appStack';
 import { MainTabParamList } from '../../../navigation/mainTabNavigator';
+import { fetchCustomerDetails, useAppDispatch, useAppSelector } from '@store';
+import { getAllProductsThunk } from './thunk';
 
 type NavProp = CompositeNavigationProp<
   BottomTabNavigationProp<MainTabParamList, 'HomeScreen'>,
@@ -74,18 +75,21 @@ export const HomeScreen: React.FC = () => {
   const styles = getStyles(colors);
   const navigation = useNavigation<NavProp>();
 
-  const [providers, setProviders] = useState<Provider[]>([]);
+  const dispatch = useAppDispatch();
+  const { products, isLoading } = useAppSelector(state => state.home);
+
   const [selectedCategory, setSelectedCategory] = useState('all');
   const [activeBanner, setActiveBanner] = useState(0);
 
   useEffect(() => {
-    getProvidersApi().then(setProviders);
-  }, []);
+    dispatch(getAllProductsThunk());
+    dispatch(fetchCustomerDetails());
+  }, [dispatch]);
 
-  const filteredProviders =
+  const filteredProducts =
     selectedCategory === 'all'
-      ? providers
-      : providers.filter(p => p.tag === selectedCategory);
+      ? products
+      : products.filter(p => p.category?.name === selectedCategory);
 
   const handleSearchFocus = useCallback(() => {
     navigation.navigate('SearchScreen');
@@ -118,8 +122,12 @@ export const HomeScreen: React.FC = () => {
           </View>
         </TouchableOpacity>
 
-        <TouchableOpacity style={styles.avatarButton} activeOpacity={0.7}>
-          <Text style={styles.avatarEmoji}>🔔</Text>
+        <TouchableOpacity
+          style={styles.avatarButton}
+          activeOpacity={0.7}
+          onPress={() => navigation.navigate('CartScreen')}
+        >
+          <Text style={styles.avatarEmoji}>🧺</Text>
           <View style={styles.notifDot} />
         </TouchableOpacity>
       </View>
@@ -224,8 +232,8 @@ export const HomeScreen: React.FC = () => {
             {selectedCategory === 'all' ? 'Popular near you' : selectedCategory}
           </Text>
           <Text style={styles.sectionSubtitle}>
-            {filteredProviders.length} place
-            {filteredProviders.length === 1 ? '' : 's'} delivering to you
+            {filteredProducts.length} product
+            {filteredProducts.length === 1 ? '' : 's'} available
           </Text>
         </View>
         <TouchableOpacity activeOpacity={0.7}>
@@ -233,31 +241,31 @@ export const HomeScreen: React.FC = () => {
         </TouchableOpacity>
       </View>
 
-      {/* Provider list */}
+      {/* Product list */}
       <View style={styles.providerList}>
-        {filteredProviders.length === 0 && (
-          <View style={styles.emptyWrap}>
-            <Text style={styles.emptyEmoji}>🍽️</Text>
-            <Text style={styles.emptyText}>
-              No providers in this category yet
-            </Text>
+        {filteredProducts.length === 0 && (
+          <View style={[styles.emptyWrap, { width: '100%' }]}>
+            <Text style={styles.emptyEmoji}>🛍️</Text>
+            <Text style={styles.emptyText}>No products found</Text>
           </View>
         )}
 
-        {filteredProviders.map(provider => (
-          <ProviderCard
-            key={provider.id}
-            imageUrl={provider.imageUrl}
-            name={provider.name}
-            rating={provider.rating}
-            deliveryTime={provider.deliveryTime}
-            tag={provider.tag}
-            discountText={provider.discountText}
-            onPress={() =>
+        {filteredProducts.map(product => (
+          <ProductCard
+            key={product.id}
+            id={product.id}
+            imageUrl={product.imageUrl}
+            name={product.name}
+            price={product.price}
+            compareAtPrice={product.compareAtPrice}
+            brand={product.brand || product.merchant?.name}
+            currency={product.currency === 'INR' ? '₹' : product.currency}
+            onPress={() => {
               navigation.navigate('ProviderDetailsScreen', {
-                providerId: provider.id,
-              })
-            }
+                providerId: product.id,
+                providerName: product.name,
+              });
+            }}
           />
         ))}
       </View>

app/features/screens/homeScreen/index.ts

@@ -1 +1,3 @@
 export * from './homeScreen';
+export { default as homeReducer } from './reducer';
+export * from './thunk';

app/features/screens/homeScreen/reducer.ts

@@ -0,0 +1,36 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { Product, Products } from '@interfaces';
+import { getAllProductsThunk } from './thunk';
+
+export interface HomeState {
+  products: Products[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+const initialState: HomeState = {
+  products: [],
+  isLoading: false,
+  error: null,
+};
+
+const homeReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(getAllProductsThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(getAllProductsThunk.fulfilled, (state, action) => {
+      // Handle the API returning { products, meta }
+      state.products =
+        action.payload?.products ||
+        (Array.isArray(action.payload) ? action.payload : []);
+      state.isLoading = false;
+    })
+    .addCase(getAllProductsThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload || 'Failed to fetch products';
+    });
+});
+
+export default homeReducer;

app/features/screens/homeScreen/thunk.ts

@@ -0,0 +1,17 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getProductsApi, GetProductsResponse } from '@api';
+
+export const getAllProductsThunk = createAsyncThunk<
+  GetProductsResponse,
+  void,
+  { rejectValue: string }
+>('home/getAllProducts', async (_, { rejectWithValue }) => {
+  try {
+    const response = await getProductsApi();
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.message || 'Failed to fetch products',
+    );
+  }
+});

app/features/screens/index.ts

@@ -19,3 +19,5 @@ export * from './myOrdersScreen';
 export * from './offersScreen';
 export * from './helpSupportScreen';
 export * from './accountScreen';
+export * from './writeReviewScreen';
+export * from './orderDetailsScreen';

app/features/screens/myOrdersScreen/myOrdersScreen.tsx

@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
 import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-} from 'react-native';
-import { useNavigation, CompositeNavigationProp } from '@react-navigation/native';
+  useNavigation,
+  CompositeNavigationProp,
+} from '@react-navigation/native';
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './myOrdersScreen.styles';
@@ -13,6 +11,9 @@ import { Header, OrderHistoryCard } from '@components';
 import { useAppTheme } from '@theme';
 import { AppStackParamList } from '../../../navigation/appStack';
 import { MainTabParamList } from '../../../navigation/mainTabNavigator';
+import { RootState, useAppDispatch, useAppSelector } from '@store';
+import { getOrderHistoryThunk } from '../checkoutPaymentScreen';
+import { formatDate } from '@utils/helper';
 
 type MyOrdersNavProp = CompositeNavigationProp<
   BottomTabNavigationProp<MainTabParamList, 'MyOrdersScreen'>,
@@ -21,9 +22,30 @@ type MyOrdersNavProp = CompositeNavigationProp<
 
 const TABS = ['All', 'Ongoing', 'Completed'];
 const mockOrders = [
-  { id: 'ORD-591283', providerName: 'Pizza Planet', providerImage: '', orderDate: '29 Jun 2026', status: 'Delivered', total: 599 },
-  { id: 'ORD-771239', providerName: 'Fresh Mart', providerImage: '', orderDate: '28 Jun 2026', status: 'Ongoing', total: 349 },
-  { id: 'ORD-108239', providerName: 'Burger Barn', providerImage: '', orderDate: '27 Jun 2026', status: 'Delivered', total: 449 },
+  {
+    id: 'ORD-591283',
+    providerName: 'Pizza Planet',
+    providerImage: '',
+    orderDate: '29 Jun 2026',
+    status: 'Delivered',
+    total: 599,
+  },
+  {
+    id: 'ORD-771239',
+    providerName: 'Fresh Mart',
+    providerImage: '',
+    orderDate: '28 Jun 2026',
+    status: 'Ongoing',
+    total: 349,
+  },
+  {
+    id: 'ORD-108239',
+    providerName: 'Burger Barn',
+    providerImage: '',
+    orderDate: '27 Jun 2026',
+    status: 'Delivered',
+    total: 449,
+  },
 ];
 
 export const MyOrdersScreen: React.FC = () => {
@@ -31,24 +53,42 @@ export const MyOrdersScreen: React.FC = () => {
   const styles = getStyles(colors);
   const navigation = useNavigation<MyOrdersNavProp>();
   const [activeTab, setActiveTab] = useState('All');
+  const dispatch = useAppDispatch();
+  const { orderHistory } = useAppSelector(
+    (state: RootState) => state.paymentMethods,
+  );
+  console.log(orderHistory);
 
-  const filteredOrders = activeTab === 'All'
-    ? mockOrders
+  useEffect(() => {
+    dispatch(getOrderHistoryThunk());
+  }, []);
+
+  const ONGOING_STATUSES = [
+    'PENDING',
+    'CONFIRMED',
+    'PREPARING',
+    'READY_FOR_PICKUP',
+    'OUT_FOR_DELIVERY',
+  ];
+  const COMPLETED_STATUSES = ['DELIVERED', 'CANCELLED'];
+
+  const orders = Array.isArray(orderHistory) ? orderHistory : [];
+
+  const filteredOrders =
+    activeTab === 'All'
+      ? orders
       : activeTab === 'Ongoing'
-      ? mockOrders.filter((o) => o.status === 'Ongoing')
-      : mockOrders.filter((o) => o.status === 'Delivered');
+      ? orders.filter(o => ONGOING_STATUSES.includes(o.status))
+      : orders.filter(o => COMPLETED_STATUSES.includes(o.status));
 
   return (
     <View style={styles.container}>
       <Header title="My Orders" />
       <View style={styles.tabRow}>
-        {TABS.map((tab) => (
+        {TABS.map(tab => (
           <TouchableOpacity
             key={tab}
-            style={[
-              styles.tab,
-              activeTab === tab && styles.tabActive,
-            ]}
+            style={[styles.tab, activeTab === tab && styles.tabActive]}
             onPress={() => setActiveTab(tab)}
             activeOpacity={0.7}
           >
@@ -65,25 +105,36 @@ export const MyOrdersScreen: React.FC = () => {
       </View>
       <FlatList
         data={filteredOrders}
-        keyExtractor={(item) => item.id}
+        keyExtractor={item => item.id}
         renderItem={({ item }) => (
           <OrderHistoryCard
-            providerName={item.providerName}
-            providerImage={item.providerImage}
-            orderDate={item.orderDate}
+            providerName={item?.merchant?.name || ''}
+            providerImage={item?.merchant?.imageUrl || ''}
+            orderDate={formatDate(item?.createdAt)}
             status={item.status}
-            total={item.total}
+            total={Number(item?.totalAmount) || 0}
+            items={item.orderItems}
             onReorder={() => {
               navigation.navigate('ProviderDetailsScreen', {
                 providerId: 'p1',
-                providerName: item.providerName,
+                providerName: item?.merchant?.name || '',
               });
             }}
             onDetails={() => {
-              if (item.status === 'Ongoing') {
-                navigation.navigate('OrderTrackingScreen', { orderId: item.id });
+              if (
+                item?.status === 'PENDING' ||
+                item?.status === 'CONFIRMED' ||
+                item?.status === 'PREPARING' ||
+                item?.status === 'READY_FOR_PICKUP' ||
+                item?.status === 'OUT_FOR_DELIVERY'
+              ) {
+                navigation.navigate('OrderDetailsScreen', {
+                  orderId: item.id,
+                });
               } else {
-                navigation.navigate('OrderDeliveredScreen', { orderId: item.id });
+                navigation.navigate('OrderDeliveredScreen', {
+                  orderId: item.id,
+                });
               }
             }}
           />

app/features/screens/onboardingCompleteScreen/onboardingCompleteScreen.tsx

@@ -3,8 +3,9 @@ import { View, Text } from 'react-native';
 import { getStyles } from './onboardingCompleteScreen.styles';
 import { PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch } from '../../../store';
-import { completeOnboarding } from '../../../store/commonreducers/auth';
+
+import { useAppDispatch } from '@store';
+import { completeOnboarding } from '@store/commonreducers/auth';
 
 export const OnboardingCompleteScreen: React.FC = () => {
   const { colors } = useAppTheme();
@@ -12,6 +13,9 @@ export const OnboardingCompleteScreen: React.FC = () => {
   const dispatch = useAppDispatch();
 
   const handleExplore = () => {
+    // Dispatching completeOnboarding sets user.status = 'ACTIVE' in Redux.
+    // RootNavigator watches this value and automatically swaps OnboardingStack
+    // → AppStack. No direct navigation call needed or possible here.
     dispatch(completeOnboarding());
   };
 
@@ -25,10 +29,7 @@ export const OnboardingCompleteScreen: React.FC = () => {
         </Text>
       </View>
       <View style={styles.footer}>
-        <PrimaryButton
-          title="Explore Now"
-          onPress={handleExplore}
-        />
+        <PrimaryButton title="Explore Now" onPress={handleExplore} />
       </View>
     </View>
   );

app/features/screens/orderDetailsScreen/index.ts

@@ -0,0 +1 @@
+export * from './orderDetailsScreen';

app/features/screens/orderDetailsScreen/orderDetailsScreen.styles.ts

@@ -0,0 +1,194 @@
+import { StyleSheet } from 'react-native';
+import { typography } from '@theme';
+
+export const getStyles = (colors: any) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingText: {
+      marginTop: 12,
+      fontSize: typography.fontSize.md,
+      color: colors.textSecondary,
+    },
+    errorContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
+    },
+    errorText: {
+      fontSize: typography.fontSize.md,
+      color: colors.error,
+      textAlign: 'center',
+    },
+    content: {
+      padding: 16,
+      paddingBottom: 40,
+    },
+    section: {
+      backgroundColor: colors.cardBg,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    // Used for the OrderStatusTimeline section — no inner padding as the
+    // component renders its own self-contained card with rounded borders.
+    timelineSection: {
+      marginBottom: 16,
+    },
+    sectionTitle: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginBottom: 12,
+    },
+    headerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    orderNumber: {
+      fontSize: typography.fontSize.lg,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+    },
+    statusBadge: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      borderRadius: 12,
+      backgroundColor: '#E8F5E9',
+    },
+    statusText: {
+      fontSize: typography.fontSize.xs,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.primary,
+    },
+    dateText: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      marginBottom: 4,
+    },
+    merchantRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 8,
+      paddingTop: 12,
+      borderTopWidth: 1,
+      borderTopColor: colors.border,
+    },
+    merchantIcon: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: colors.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    merchantName: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+    },
+    itemRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      marginBottom: 12,
+    },
+    itemInfo: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      marginRight: 16,
+    },
+    itemQuantityBadge: {
+      backgroundColor: colors.surface,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 4,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      marginRight: 10,
+      marginTop: 2,
+    },
+    itemQuantityText: {
+      fontSize: typography.fontSize.xs,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+    },
+    itemName: {
+      fontSize: typography.fontSize.sm,
+      color: colors.text,
+      lineHeight: 20,
+    },
+    itemPrice: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+      marginTop: 2,
+    },
+    billRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 8,
+    },
+    billLabel: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+    },
+    billValue: {
+      fontSize: typography.fontSize.sm,
+      color: colors.text,
+      fontWeight: typography.fontWeight.medium,
+    },
+    billDivider: {
+      height: 1,
+      backgroundColor: colors.border,
+      marginVertical: 12,
+    },
+    billTotalLabel: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+    },
+    billTotalValue: {
+      fontSize: typography.fontSize.md,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.primary,
+    },
+    addressType: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+      marginBottom: 4,
+    },
+    addressText: {
+      fontSize: typography.fontSize.sm,
+      color: colors.textSecondary,
+      lineHeight: 20,
+    },
+    paymentRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    paymentIcon: {
+      marginRight: 8,
+      fontSize: 20,
+    },
+    paymentText: {
+      fontSize: typography.fontSize.sm,
+      color: colors.text,
+      fontWeight: typography.fontWeight.medium,
+    },
+  });

app/features/screens/orderDetailsScreen/orderDetailsScreen.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect } from 'react';
+import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
+import { Header, OrderStatusTimeline } from '@components';
+import { useAppTheme } from '@theme';
+import { getStyles } from './orderDetailsScreen.styles';
+import { RootState, useAppDispatch, useAppSelector } from '@store';
+import { getOrderByIdThunk } from '../checkoutPaymentScreen';
+import { formatDate, formatTime } from '@utils/helper';
+import { AppStackParamList } from '../../../navigation/appStack';
+
+type OrderDetailsRouteProp = RouteProp<AppStackParamList, 'OrderDetailsScreen'>;
+type OrderDetailsNavProp = StackNavigationProp<AppStackParamList>;
+
+export const OrderDetailsScreen: React.FC = () => {
+  const { colors } = useAppTheme();
+  const styles = getStyles(colors);
+  const route = useRoute<OrderDetailsRouteProp>();
+  const navigation = useNavigation<OrderDetailsNavProp>();
+  const dispatch = useAppDispatch();
+
+  const orderId = route.params?.orderId;
+
+  const { orderDetails, orderDetailsLoading, orderDetailsError } =
+    useAppSelector((state: RootState) => state.paymentMethods);
+
+  useEffect(() => {
+    if (orderId) {
+      dispatch(getOrderByIdThunk(orderId));
+    }
+  }, [dispatch, orderId]);
+
+  if (orderDetailsLoading) {
+    return (
+      <View style={styles.container}>
+        <Header title="Order Details" onBack={() => navigation.goBack()} />
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={colors.primary} />
+          <Text style={styles.loadingText}>Fetching order details...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (orderDetailsError || !orderDetails) {
+    return (
+      <View style={styles.container}>
+        <Header title="Order Details" onBack={() => navigation.goBack()} />
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>
+            {orderDetailsError || 'Could not load order details.'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  const orderDate = orderDetails.createdAt
+    ? `${formatDate(orderDetails.createdAt)} at ${formatTime(
+        orderDetails.createdAt,
+      )}`
+    : '';
+
+  return (
+    <View style={styles.container}>
+      <Header title="Order Details" onBack={() => navigation.goBack()} />
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Top Info Section */}
+        <View style={styles.section}>
+          <View style={styles.headerRow}>
+            <Text style={styles.orderNumber}>
+              Order {orderDetails.orderNumber?.split('-').pop() || ''}
+            </Text>
+            <View style={styles.statusBadge}>
+              <Text style={styles.statusText}>{orderDetails.status}</Text>
+            </View>
+          </View>
+          <Text style={styles.dateText}>Placed on {orderDate}</Text>
+          <Text style={styles.dateText}>
+            Payment: {orderDetails.paymentMethod}
+          </Text>
+
+          {/* Merchant Info */}
+          <View style={styles.merchantRow}>
+            <View style={styles.merchantIcon}>
+              <Text>🏪</Text>
+            </View>
+            <Text style={styles.merchantName}>
+              {orderDetails.merchant?.name || 'Store'}
+            </Text>
+          </View>
+        </View>
+
+        {/* Order Status Timeline Section */}
+        <View style={styles.timelineSection}>
+          <Text style={styles.sectionTitle}>Order Status</Text>
+          <OrderStatusTimeline
+            tracking={orderDetails.tracking}
+            currentStatus={orderDetails.status}
+          />
+        </View>
+
+        {/* Order Items Section */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Order Items</Text>
+          {orderDetails.orderItems?.map((item, index) => (
+            <View key={item.id || index} style={styles.itemRow}>
+              <View style={styles.itemInfo}>
+                <View style={styles.itemQuantityBadge}>
+                  <Text style={styles.itemQuantityText}>{item.quantity}x</Text>
+                </View>
+                <Text style={styles.itemName}>{item.name}</Text>
+              </View>
+              <Text style={styles.itemPrice}>₹{item.totalAmount}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Bill Summary Section */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Bill Summary</Text>
+          <View style={styles.billRow}>
+            <Text style={styles.billLabel}>Item Total</Text>
+            <Text style={styles.billValue}>₹{orderDetails.subtotal}</Text>
+          </View>
+          <View style={styles.billRow}>
+            <Text style={styles.billLabel}>Delivery Fee</Text>
+            <Text style={styles.billValue}>₹{orderDetails.deliveryFee}</Text>
+          </View>
+          <View style={styles.billRow}>
+            <Text style={styles.billLabel}>Platform Fee</Text>
+            <Text style={styles.billValue}>₹{orderDetails.platformFee}</Text>
+          </View>
+          <View style={styles.billRow}>
+            <Text style={styles.billLabel}>Taxes</Text>
+            <Text style={styles.billValue}>₹{orderDetails.taxAmount}</Text>
+          </View>
+
+          <View style={styles.billDivider} />
+
+          <View style={styles.billRow}>
+            <Text style={styles.billTotalLabel}>Grand Total</Text>
+            <Text style={styles.billTotalValue}>
+              ₹{orderDetails.totalAmount}
+            </Text>
+          </View>
+        </View>
+
+        {/* Delivery Address Section */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Delivery Details</Text>
+          <Text style={styles.addressType}>
+            {orderDetails.dropAddress?.label || 'Home'}
+          </Text>
+          <Text style={styles.addressText}>
+            {orderDetails.dropAddress?.houseNumber
+              ? `${orderDetails.dropAddress.houseNumber}, `
+              : ''}
+            {orderDetails.dropAddress?.addressLine1}
+          </Text>
+          <Text style={styles.addressText}>
+            {orderDetails.dropAddress?.landmark
+              ? `Landmark: ${orderDetails.dropAddress.landmark}`
+              : ''}
+          </Text>
+          <Text style={styles.addressText}>
+            Phone: {orderDetails.dropAddress?.phone}
+          </Text>
+        </View>
+
+        {/* Payment Info */}
+        {orderDetails.payments && orderDetails.payments.length > 0 && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Payment Details</Text>
+            <View style={styles.paymentRow}>
+              <Text style={styles.paymentIcon}>💳</Text>
+              <Text style={styles.paymentText}>
+                Paid via {orderDetails.payments[0].method} (
+                {orderDetails.payments[0].status})
+              </Text>
+            </View>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default OrderDetailsScreen;

app/features/screens/otpScreen/hooks/useOtpScreen.ts

@@ -0,0 +1,108 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Alert } from 'react-native';
+import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootState, useAppDispatch, useAppSelector, verifyOtp } from '@store';
+import { AuthStackParamList } from '@navigation/authStack';
+
+type OtpNavProp = StackNavigationProp<AuthStackParamList, 'OtpScreen'>;
+type OtpRouteProp = RouteProp<AuthStackParamList, 'OtpScreen'>;
+
+const OTP_LENGTH = 6;
+const RESEND_TIMER = 30;
+
+export const useOtpScreen = () => {
+  const navigation = useNavigation<OtpNavProp>();
+  const route = useRoute<OtpRouteProp>();
+  const dispatch = useAppDispatch();
+  const { mobileNumber } = route.params;
+
+  const { loginData, user } = useAppSelector((state: RootState) => state.auth);
+
+  const [otp, setOtp] = useState<string[]>(Array(OTP_LENGTH).fill(''));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [timer, setTimer] = useState(RESEND_TIMER);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (timer > 0) {
+      const interval = setInterval(() => setTimer(t => t - 1), 1000);
+      return () => clearInterval(interval);
+    }
+  }, [timer]);
+
+  const resetOtp = useCallback(() => {
+    setOtp(Array(OTP_LENGTH).fill(''));
+    setActiveIndex(0);
+  }, []);
+
+  const handleKeyPress = useCallback(
+    (key: string) => {
+      if (key === 'backspace') {
+        if (otp[activeIndex] || activeIndex > 0) {
+          const newOtp = [...otp];
+          if (otp[activeIndex]) {
+            newOtp[activeIndex] = '';
+          } else if (activeIndex > 0) {
+            newOtp[activeIndex - 1] = '';
+            setActiveIndex(activeIndex - 1);
+          }
+          setOtp(newOtp);
+        }
+      } else if (key >= '0' && key <= '9' && activeIndex < OTP_LENGTH) {
+        const newOtp = [...otp];
+        newOtp[activeIndex] = key;
+        setOtp(newOtp);
+        if (activeIndex < OTP_LENGTH - 1) {
+          setActiveIndex(activeIndex + 1);
+        }
+      }
+    },
+    [otp, activeIndex],
+  );
+
+  const handleResend = useCallback(() => {
+    setTimer(RESEND_TIMER);
+    resetOtp();
+    // TODO: dispatch resend/loginWithPhone thunk here if needed
+  }, [resetOtp]);
+
+  const handleVerify = useCallback(async () => {
+    const otpString = otp.join('');
+    if (otpString.length !== OTP_LENGTH) return;
+
+    setIsLoading(true);
+    try {
+      await dispatch(
+        verifyOtp({ phone: mobileNumber, code: otpString, role: 'CUSTOMER' }),
+      ).unwrap();
+
+      navigation.navigate('SetLocationScreen');
+    } catch (error) {
+      const message =
+        typeof error === 'string' ? error : 'Invalid OTP. Please try again.';
+      Alert.alert('Verification Failed', message);
+      resetOtp();
+    } finally {
+      setIsLoading(false);
+    }
+  }, [dispatch, mobileNumber, navigation, otp, resetOtp]);
+
+  return {
+    // data
+    mobileNumber,
+    loginData,
+    user,
+    otp,
+    activeIndex,
+    timer,
+    isLoading,
+    otpLength: OTP_LENGTH,
+    isOtpComplete: otp.join('').length === OTP_LENGTH,
+
+    // actions
+    handleKeyPress,
+    handleVerify,
+    handleResend,
+  };
+};

app/features/screens/otpScreen/otpScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import {
   View,
   Text,
@@ -6,71 +6,27 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './otpScreen.styles';
 import { PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch } from '../../../store';
-import { verifyOtp } from '../../../store/commonreducers/auth';
-import { AuthStackParamList } from '../../../navigation/authStack';
-
-type OtpNavProp = StackNavigationProp<AuthStackParamList, 'OtpScreen'>;
-type OtpRouteProp = RouteProp<AuthStackParamList, 'OtpScreen'>;
-
-const OTP_LENGTH = 6;
-const RESEND_TIMER = 30;
+import { useOtpScreen } from './hooks/useOtpScreen';
 
 export const OtpScreen: React.FC = () => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
-  const navigation = useNavigation<OtpNavProp>();
-  const route = useRoute<OtpRouteProp>();
-  const dispatch = useAppDispatch();
-  const { mobileNumber } = route.params;
 
-  const [otp, setOtp] = useState<string[]>(Array(OTP_LENGTH).fill(''));
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [timer, setTimer] = useState(RESEND_TIMER);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (timer > 0) {
-      const interval = setInterval(() => setTimer((t) => t - 1), 1000);
-      return () => clearInterval(interval);
-    }
-  }, [timer]);
-
-  const handleKeyPress = (key: string) => {
-    if (key === 'backspace') {
-      if (otp[activeIndex] || activeIndex > 0) {
-        const newOtp = [...otp];
-        if (otp[activeIndex]) {
-          newOtp[activeIndex] = '';
-        } else if (activeIndex > 0) {
-          newOtp[activeIndex - 1] = '';
-          setActiveIndex(activeIndex - 1);
-        }
-        setOtp(newOtp);
-      }
-    } else if (key >= '0' && key <= '9' && activeIndex < OTP_LENGTH) {
-      const newOtp = [...otp];
-      newOtp[activeIndex] = key;
-      setOtp(newOtp);
-      if (activeIndex < OTP_LENGTH - 1) {
-        setActiveIndex(activeIndex + 1);
-      }
-    }
-  };
-
-  const handleVerify = async () => {
-    const otpString = otp.join('');
-    if (otpString.length !== OTP_LENGTH) return;
-    setIsLoading(true);
-    await dispatch(verifyOtp({ mobileNumber, otp: otpString }));
-    setIsLoading(false);
-    navigation.navigate('SetLocationScreen');
-  };
+  const {
+    mobileNumber,
+    otp,
+    activeIndex,
+    timer,
+    isLoading,
+    otpLength,
+    isOtpComplete,
+    handleKeyPress,
+    handleVerify,
+    handleResend,
+  } = useOtpScreen();
 
   return (
     <KeyboardAvoidingView
@@ -79,12 +35,40 @@ export const OtpScreen: React.FC = () => {
     >
       <View style={styles.content}>
         <Text style={styles.title}>Verify OTP</Text>
-        <Text style={styles.subtitle}>
-          Code sent to {mobileNumber}
-        </Text>
+        <Text style={styles.subtitle}>Code sent to {mobileNumber}</Text>
 
         <View style={styles.otpContainer}>
-          {otp.map((digit, index) => (
+          {otp.map(
+            (
+              digit:
+                | string
+                | number
+                | bigint
+                | boolean
+                | React.ReactElement<
+                    unknown,
+                    string | React.JSXElementConstructor<any>
+                  >
+                | Iterable<React.ReactNode>
+                | React.ReactPortal
+                | Promise<
+                    | string
+                    | number
+                    | bigint
+                    | boolean
+                    | React.ReactPortal
+                    | React.ReactElement<
+                        unknown,
+                        string | React.JSXElementConstructor<any>
+                      >
+                    | Iterable<React.ReactNode>
+                    | null
+                    | undefined
+                  >
+                | null
+                | undefined,
+              index: React.Key | null | undefined,
+            ) => (
               <View
                 key={index}
                 style={[
@@ -95,11 +79,12 @@ export const OtpScreen: React.FC = () => {
               >
                 <Text style={styles.otpCellText}>{digit}</Text>
               </View>
-          ))}
+            ),
+          )}
         </View>
 
         <View style={styles.keypad}>
-          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => (
             <TouchableOpacity
               key={num}
               style={styles.key}
@@ -129,14 +114,7 @@ export const OtpScreen: React.FC = () => {
         {timer > 0 ? (
           <Text style={styles.timerText}>Resend code in {timer}s</Text>
         ) : (
-          <TouchableOpacity
-            onPress={() => {
-              setTimer(RESEND_TIMER);
-              setOtp(Array(OTP_LENGTH).fill(''));
-              setActiveIndex(0);
-            }}
-            activeOpacity={0.7}
-          >
+          <TouchableOpacity onPress={handleResend} activeOpacity={0.7}>
             <Text style={styles.resendText}>Resend OTP</Text>
           </TouchableOpacity>
         )}
@@ -145,7 +123,7 @@ export const OtpScreen: React.FC = () => {
           title="Verify"
           onPress={handleVerify}
           isLoading={isLoading}
-          disabled={otp.join('').length !== OTP_LENGTH}
+          disabled={!isOtpComplete}
           style={{ marginTop: 24 }}
         />
       </View>

app/features/screens/preferencesScreen/index.ts

@@ -1 +1,3 @@
 export * from './preferencesScreen';
+export * from './thunk';
+export * from './reducer';

app/features/screens/preferencesScreen/preferencesScreen.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   Switch,
   ScrollView,
+  ActivityIndicator,
+  Alert,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -12,60 +14,138 @@ import { getStyles } from './preferencesScreen.styles';
 import { PrimaryButton } from '@components';
 import { useAppTheme } from '@theme';
 import { AuthStackParamList } from '../../../navigation/authStack';
+import { useAppDispatch, useAppSelector } from '@store';
+import { fetchCategories, completeOnboard } from './thunk';
+import { OnboardingStackParamList } from '@navigation/onboardingStack';
 
-type NavProp = StackNavigationProp<AuthStackParamList, 'PreferencesScreen'>;
-
-const CATEGORIES = [
-  { key: 'food', icon: '🍔', label: 'Food' },
-  { key: 'groceries', icon: '🛒', label: 'Groceries' },
-  { key: 'pharmacy', icon: '💊', label: 'Pharmacy' },
-  { key: 'others', icon: '📦', label: 'Others' },
-];
+type NavProp = StackNavigationProp<
+  OnboardingStackParamList,
+  'PreferencesScreen'
+>;
 
 export const PreferencesScreen: React.FC = () => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
   const navigation = useNavigation<NavProp>();
+  const dispatch = useAppDispatch();
 
-  const [selectedCategories, setSelectedCategories] = useState<string[]>(['food']);
+  // ─── Redux state ──────────────────────────────────────────────────────────
+  const { categories, isLoading, error, isSubmitting, submitError } =
+    useAppSelector(state => state.preferences);
+
+  const locationData = useAppSelector(state => state.setLocation);
+  const profileData = useAppSelector(state => state.completeProfile);
+
+  // ─── Local state ──────────────────────────────────────────────────────────
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
-  const toggleCategory = (key: string) => {
-    setSelectedCategories((prev) =>
-      prev.includes(key)
-        ? prev.filter((c) => c !== key)
-        : [...prev, key],
+  // ─── Fetch categories on mount ────────────────────────────────────────────
+  useEffect(() => {
+    dispatch(fetchCategories());
+  }, [dispatch]);
+
+  const toggleCategory = (id: string) => {
+    setSelectedCategories(prev =>
+      prev.includes(id) ? prev.filter(c => c !== id) : [...prev, id],
     );
   };
 
+  // ─── Continue → call onboard API ─────────────────────────────────────────
+  const handleContinue = async () => {
+    if (!locationData.latitude || !locationData.longitude) {
+      Alert.alert('Location missing', 'Please set your location first.');
+      return;
+    }
+    if (!profileData.name || !profileData.email) {
+      Alert.alert('Profile incomplete', 'Please complete your profile first.');
+      return;
+    }
+
+    const payload = {
+      name: profileData.name,
+      email: profileData.email,
+      gender: profileData.gender,
+      latitude: locationData.latitude,
+      longitude: locationData.longitude,
+      addressLabel: profileData.addressLabel,
+      addressLine1: profileData.addressLine1,
+      mapAddress: locationData.mapAddress,
+      houseNumber: profileData.houseNumber,
+      landmark: profileData.landmark,
+      city: profileData.city,
+      state: profileData.state,
+      postalCode: profileData.postalCode,
+      addressPhone: profileData.addressPhone,
+      categoryPreferences: selectedCategories,
+    };
+
+    const result = await dispatch(completeOnboard(payload));
+
+    if (completeOnboard.fulfilled.match(result)) {
+      navigation.navigate('OnboardingCompleteScreen');
+    } else {
+      Alert.alert(
+        'Onboarding failed',
+        (result.payload as string) ?? 'Something went wrong. Please try again.',
+      );
+    }
+  };
+
   return (
     <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <Text style={styles.title}>Preferences</Text>
       <Text style={styles.subtitle}>Select your interests</Text>
 
+      {isLoading && (
+        <ActivityIndicator
+          size="large"
+          color={colors.primary}
+          style={{ marginVertical: 32 }}
+        />
+      )}
+
+      {!!error && (
+        <Text
+          style={{
+            color: colors.error ?? 'red',
+            textAlign: 'center',
+            marginBottom: 16,
+          }}
+        >
+          {error}
+        </Text>
+      )}
+
+      {!!submitError && (
+        <Text
+          style={{
+            color: colors.error ?? 'red',
+            textAlign: 'center',
+            marginBottom: 16,
+          }}
+        >
+          {submitError}
+        </Text>
+      )}
+
+      {!isLoading && (
         <View style={styles.grid}>
-        {CATEGORIES.map((cat) => (
+          {(categories || []).map(cat => (
             <TouchableOpacity
-            key={cat.key}
+              key={cat.id}
               style={[
                 styles.gridItem,
-              selectedCategories.includes(cat.key) && styles.gridItemSelected,
+                selectedCategories.includes(cat.id) && styles.gridItemSelected,
               ]}
-            onPress={() => toggleCategory(cat.key)}
+              onPress={() => toggleCategory(cat.id)}
               activeOpacity={0.7}
             >
-            <Text style={styles.gridIcon}>{cat.icon}</Text>
-            <Text
-              style={[
-                styles.gridLabel,
-                selectedCategories.includes(cat.key) && styles.gridLabelSelected,
-              ]}
-            >
-              {cat.label}
-            </Text>
+              <Text style={styles.gridLabel}>{cat.name}</Text>
             </TouchableOpacity>
           ))}
         </View>
+      )}
 
       <View style={styles.toggleRow}>
         <View>
@@ -81,8 +161,9 @@ export const PreferencesScreen: React.FC = () => {
       </View>
 
       <PrimaryButton
-        title="Continue"
-        onPress={() => navigation.navigate('OnboardingCompleteScreen')}
+        title={isSubmitting ? 'Please wait…' : 'Continue'}
+        onPress={handleContinue}
+        disabled={isSubmitting}
         style={{ marginTop: 32 }}
       />
     </ScrollView>

app/features/screens/preferencesScreen/reducer.ts

@@ -0,0 +1,59 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { Category } from '@interfaces';
+import { fetchCategories, completeOnboard } from './thunk';
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+export interface PreferencesState {
+  categories: Category[];
+  selectedCategories: string[];
+  isLoading: boolean;
+  isSubmitting: boolean;
+  error: string | null;
+  submitError: string | null;
+}
+
+const initialState: PreferencesState = {
+  categories: [],
+  selectedCategories: [],
+  isLoading: false,
+  isSubmitting: false,
+  error: null,
+  submitError: null,
+};
+
+// ─── Reducer ──────────────────────────────────────────────────────────────────
+
+const preferencesReducer = createReducer(initialState, builder => {
+  builder
+    // Fetch categories
+    .addCase(fetchCategories.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(fetchCategories.fulfilled, (state, action) => {
+      state.categories = action.payload;
+      state.isLoading = false;
+      state.error = null;
+    })
+    .addCase(fetchCategories.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload as string;
+    })
+
+    // Complete onboard
+    .addCase(completeOnboard.pending, state => {
+      state.isSubmitting = true;
+      state.submitError = null;
+    })
+    .addCase(completeOnboard.fulfilled, state => {
+      state.isSubmitting = false;
+      state.submitError = null;
+    })
+    .addCase(completeOnboard.rejected, (state, action) => {
+      state.isSubmitting = false;
+      state.submitError = action.payload as string;
+    });
+});
+
+export default preferencesReducer;

app/features/screens/preferencesScreen/thunk.ts

@@ -0,0 +1,33 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getCatagories, onBoardComplete } from '../../../api/onboardApi';
+import { onBoardPayload } from '@interfaces/onboard';
+
+// ─── Fetch Categories ─────────────────────────────────────────────────────────
+
+export const fetchCategories = createAsyncThunk(
+  'preferences/fetchCategories',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await getCatagories();
+      return response;
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to fetch categories';
+      return rejectWithValue(message);
+    }
+  },
+);
+
+export const completeOnboard = createAsyncThunk(
+  'preferences/completeOnboard',
+  async (payload: onBoardPayload, { rejectWithValue }) => {
+    try {
+      const response = await onBoardComplete(payload);
+      return response;
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to complete onboard';
+      return rejectWithValue(message);
+    }
+  },
+);

app/features/screens/providerDetailsScreen/index.ts

@@ -1 +1,3 @@
 export * from './providerDetailsScreen';
+export { default as providerDetailsReducer } from './reducer';
+export * from './thunk';

app/features/screens/providerDetailsScreen/providerDetailsScreen.styles.ts

@@ -1,8 +1,8 @@
 import { StyleSheet, Dimensions, Platform } from 'react-native';
 import { typography } from '@theme';
 
-const { width } = Dimensions.get('window');
-const HERO_HEIGHT = 220;
+const { width, height } = Dimensions.get('window');
+const HERO_HEIGHT = height * 0.45;
 
 export const getStyles = (colors: any) =>
   StyleSheet.create({
@@ -14,36 +14,49 @@ export const getStyles = (colors: any) =>
       flex: 1,
     },
     contentBody: {
-      paddingBottom: 32,
+      paddingBottom: 100, // Space for sticky bottom bar
     },
 
-    // ---------- Hero ----------
-    heroWrap: {
+    // ---------- Image Carousel ----------
+    carouselWrap: {
       width,
       height: HERO_HEIGHT,
-      backgroundColor: colors.inputBg,
+      backgroundColor: colors.background,
     },
-    heroImage: {
-      width: '100%',
-      height: '100%',
+    carouselImage: {
+      width,
+      height: HERO_HEIGHT,
+      resizeMode: 'contain',
     },
-    heroFallback: {
-      width: '100%',
-      height: '100%',
+    paginationDots: {
+      position: 'absolute',
+      bottom: 20,
+      alignSelf: 'center',
+      flexDirection: 'row',
+      backgroundColor: 'rgba(255,255,255,0.7)',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 12,
+    },
+    dot: {
+      width: 6,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: colors.border,
+      marginHorizontal: 3,
+    },
+    dotActive: {
+      width: 14,
+      backgroundColor: colors.primary,
+    },
+    fallbackIconWrap: {
+      flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: colors.inputBg,
+      backgroundColor: colors.surface,
     },
-    heroFallbackEmoji: {
-      fontSize: 56,
-    },
-    heroOverlay: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: 90,
-      backgroundColor: 'rgba(0,0,0,0.28)',
+    fallbackIcon: {
+      fontSize: 60,
     },
 
     // Floating top icon row (back / share / favorite)
@@ -55,40 +68,42 @@ export const getStyles = (colors: any) =>
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+      zIndex: 10,
     },
     iconButton: {
-      width: 38,
-      height: 38,
-      borderRadius: 19,
-      backgroundColor: 'rgba(255,255,255,0.92)',
+      width: 42,
+      height: 42,
+      borderRadius: 21,
+      backgroundColor: 'rgba(255,255,255,0.95)',
       alignItems: 'center',
       justifyContent: 'center',
       ...Platform.select({
         ios: {
           shadowColor: '#000',
-          shadowOffset: { width: 0, height: 2 },
+          shadowOffset: { width: 0, height: 3 },
           shadowOpacity: 0.15,
-          shadowRadius: 4,
+          shadowRadius: 5,
         },
-        android: { elevation: 3 },
+        android: { elevation: 4 },
       }),
     },
     iconButtonText: {
-      fontSize: 16,
+      fontSize: 18,
+      color: colors.text,
     },
     iconButtonGroup: {
       flexDirection: 'row',
     },
 
-    // ---------- Info card ----------
-    infoCard: {
+    // ---------- Product Info Box ----------
+    infoBox: {
       backgroundColor: colors.background,
       marginTop: -20,
       borderTopLeftRadius: 24,
       borderTopRightRadius: 24,
-      paddingTop: 20,
+      paddingTop: 24,
       paddingHorizontal: 20,
-      paddingBottom: 16,
+      paddingBottom: 20,
       ...Platform.select({
         ios: {
           shadowColor: '#000',
@@ -99,247 +114,389 @@ export const getStyles = (colors: any) =>
         android: { elevation: 4 },
       }),
     },
-    infoTopRow: {
+    brandRow: {
       flexDirection: 'row',
       justifyContent: 'space-between',
-      alignItems: 'flex-start',
+      alignItems: 'center',
+      marginBottom: 6,
     },
-    heroName: {
-      fontSize: typography.fontSize.xl,
+    brandText: {
+      fontSize: typography.fontSize.xs,
       fontWeight: typography.fontWeight.bold,
-      color: colors.text,
-      flex: 1,
-      marginRight: 12,
+      color: colors.textSecondary,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
     },
     ratingBadge: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: colors.primary,
-      borderRadius: 8,
-      paddingHorizontal: 8,
-      paddingVertical: 5,
+      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
+      borderRadius: 6,
+      paddingHorizontal: 6,
+      paddingVertical: 3,
     },
     ratingBadgeText: {
-      fontSize: typography.fontSize.sm,
+      fontSize: typography.fontSize.xs,
       fontWeight: typography.fontWeight.bold,
-      color: '#FFFFFF',
-      marginLeft: 3,
+      color: colors.primary,
+      marginLeft: 4,
     },
-    cuisineText: {
+    titleText: {
+      fontSize: 24,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginBottom: 12,
+      lineHeight: 32,
+    },
+    priceRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      marginBottom: 8,
+    },
+    priceText: {
+      fontSize: 28,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginRight: 10,
+    },
+    comparePriceText: {
+      fontSize: 16,
+      color: colors.textSecondary,
+      textDecorationLine: 'line-through',
+      marginBottom: 4,
+    },
+    discountBadgeWrap: {
+      marginLeft: 10,
+      marginBottom: 6,
+      backgroundColor: colors.error ?? '#E53935',
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      borderRadius: 6,
+    },
+    discountBadgeText: {
+      color: '#FFFFFF',
+      fontSize: typography.fontSize.xs,
+      fontWeight: typography.fontWeight.bold,
+    },
+    taxText: {
       fontSize: typography.fontSize.sm,
       color: colors.textSecondary,
-      marginTop: 4,
     },
 
-    metaRow: {
+    // ---------- Section Divider ----------
+    sectionDivider: {
+      height: 8,
+      backgroundColor: colors.surface ?? '#F5F6F8',
+    },
+
+    // ---------- Details Section ----------
+    detailsSection: {
+      padding: 20,
+      backgroundColor: colors.background,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginBottom: 12,
+    },
+    descriptionText: {
+      fontSize: 15,
+      lineHeight: 24,
+      color: colors.textSecondary,
+      marginBottom: 20,
+    },
+    metaGrid: {
       flexDirection: 'row',
-      alignItems: 'center',
-      marginTop: 12,
+      flexWrap: 'wrap',
+      backgroundColor: colors.surface ?? '#F5F6F8',
+      borderRadius: 12,
+      padding: 16,
     },
     metaItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      width: '50%',
+      marginBottom: 12,
     },
-    metaIcon: {
-      fontSize: 13,
-      marginRight: 4,
-    },
-    metaText: {
-      fontSize: typography.fontSize.sm,
-      color: colors.text,
-      fontWeight: typography.fontWeight.medium,
-    },
-    metaDivider: {
-      width: 3,
-      height: 3,
-      borderRadius: 1.5,
-      backgroundColor: colors.textSecondary,
-      marginHorizontal: 10,
-      opacity: 0.5,
-    },
-
-    statusRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginTop: 10,
-    },
-    statusDot: {
-      width: 7,
-      height: 7,
-      borderRadius: 3.5,
-      backgroundColor: colors.primary,
-      marginRight: 6,
-    },
-    statusText: {
-      fontSize: typography.fontSize.xs,
-      color: colors.primary,
-      fontWeight: typography.fontWeight.semibold,
-    },
-    statusTextMuted: {
-      fontSize: typography.fontSize.xs,
+    metaLabel: {
+      fontSize: 12,
       color: colors.textSecondary,
+      marginBottom: 2,
+    },
+    metaValue: {
+      fontSize: 14,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
     },
 
-    // ---------- Offers ----------
-    offersSection: {
-      marginTop: 18,
-    },
-    offersScrollContent: {
+    // ---------- Sticky Bottom Bar ----------
+    bottomBarWrap: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: colors.background,
       paddingHorizontal: 20,
+      paddingTop: 16,
+      paddingBottom: Platform.OS === 'ios' ? 34 : 20,
+      borderTopWidth: 1,
+      borderTopColor: colors.border ?? '#ECECEC',
+      flexDirection: 'row',
+      alignItems: 'center',
     },
-    offerChip: {
+    qtySelector: {
       flexDirection: 'row',
       alignItems: 'center',
       borderWidth: 1,
-      borderStyle: 'dashed',
-      borderColor: colors.primary,
-      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
-      borderRadius: 10,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      marginRight: 10,
-    },
-    offerIcon: {
-      fontSize: 15,
-      marginRight: 6,
-    },
-    offerText: {
-      fontSize: typography.fontSize.xs,
-      fontWeight: typography.fontWeight.semibold,
-      color: colors.text,
-    },
-
-    // ---------- Divider ----------
-    sectionDivider: {
-      height: 8,
-      backgroundColor: colors.inputBg,
-      marginTop: 18,
-    },
-
-    // ---------- Menu search ----------
-    menuHeaderRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 20,
-      paddingTop: 18,
-      paddingBottom: 4,
-    },
-    menuTitle: {
-      fontSize: typography.fontSize.lg,
-      fontWeight: typography.fontWeight.bold,
-      color: colors.text,
-    },
-    menuCount: {
-      fontSize: typography.fontSize.sm,
-      color: colors.textSecondary,
-    },
-
-    // ---------- Category tabs ----------
-    categoryRow: {
-      paddingVertical: 14,
-      paddingHorizontal: 20,
-      flexGrow: 0,
-    },
-    categoryTab: {
-      paddingHorizontal: 18,
-      paddingVertical: 9,
-      borderRadius: 22,
-      borderWidth: 1.5,
       borderColor: colors.border,
-      marginRight: 10,
-      backgroundColor: colors.background,
+      borderRadius: 12,
+      marginRight: 16,
     },
-    categoryTabActive: {
-      borderColor: colors.primary,
-      backgroundColor: colors.primary,
+    qtyBtn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    categoryTabText: {
-      fontSize: typography.fontSize.sm,
-      color: colors.textSecondary,
+    qtyBtnText: {
+      fontSize: 20,
+      color: colors.primary,
       fontWeight: typography.fontWeight.medium,
     },
-    categoryTabTextActive: {
-      color: '#FFFFFF',
+    qtyValue: {
+      fontSize: 16,
       fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      width: 30,
+      textAlign: 'center',
+    },
+    addBtn: {
+      flex: 1,
+      backgroundColor: colors.primary,
+      height: 48,
+      borderRadius: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...Platform.select({
+        ios: {
+          shadowColor: colors.primary,
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+        },
+        android: { elevation: 6 },
+      }),
+    },
+    addBtnText: {
+      fontSize: 16,
+      fontWeight: typography.fontWeight.bold,
+      color: '#FFFFFF',
     },
 
-    // ---------- Menu list ----------
-    menuList: {
-      paddingHorizontal: 20,
+    // Skeleton loaders
+    skeletonTitle: {
+      width: '80%',
+      height: 32,
+      backgroundColor: colors.surface ?? '#EEEEEE',
+      borderRadius: 8,
+      marginBottom: 12,
     },
-    emptyMenuWrap: {
-      alignItems: 'center',
-      paddingVertical: 40,
+    skeletonPrice: {
+      width: '40%',
+      height: 28,
+      backgroundColor: colors.surface ?? '#EEEEEE',
+      borderRadius: 6,
+      marginBottom: 10,
     },
-    emptyMenuEmoji: {
-      fontSize: 34,
+    skeletonText: {
+      width: '100%',
+      height: 16,
+      backgroundColor: colors.surface ?? '#EEEEEE',
+      borderRadius: 4,
       marginBottom: 8,
     },
-    emptyMenuText: {
-      color: colors.textSecondary,
+
+    // ================= Ratings & Reviews =================
+    ratingsSection: {
+      paddingHorizontal: 20,
+      paddingTop: 20,
+      paddingBottom: 24,
+      backgroundColor: colors.background,
+    },
+    ratingsHeaderRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    seeAllText: {
       fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.primary,
     },
 
-    // ---------- Cart strip ----------
-    cartStripWrap: {
-      position: 'absolute',
-      left: 16,
-      right: 16,
-      bottom: Platform.OS === 'ios' ? 28 : 16,
-    },
-    cartStrip: {
+    // Summary card (big number + stars + optional breakdown bars)
+    ratingsSummaryCard: {
       flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      backgroundColor: colors.primary,
-      paddingHorizontal: 18,
-      paddingVertical: 14,
+      backgroundColor: colors.surface ?? '#F5F6F8',
       borderRadius: 16,
+      padding: 18,
+      marginBottom: 16,
       ...Platform.select({
         ios: {
           shadowColor: '#000',
-          shadowOffset: { width: 0, height: 6 },
-          shadowOpacity: 0.25,
-          shadowRadius: 12,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.04,
+          shadowRadius: 6,
         },
-        android: { elevation: 8 },
+        android: { elevation: 1 },
       }),
     },
-    cartStripLeft: {
+    ratingsSummaryLeft: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: 76,
+    },
+    ratingsSummaryLeftWithDivider: {
+      marginRight: 20,
+      paddingRight: 20,
+      borderRightWidth: StyleSheet.hairlineWidth,
+      borderRightColor: colors.border ?? '#E0E0E0',
+    },
+    avgRatingNumber: {
+      fontSize: 34,
+      fontWeight: typography.fontWeight.bold,
+      color: colors.text,
+      marginBottom: 4,
+    },
+    starsRow: {
+      flexDirection: 'row',
+      marginBottom: 6,
+    },
+    starIcon: {
+      marginRight: 1,
+    },
+    totalRatingsText: {
+      fontSize: typography.fontSize.xs,
+      color: colors.textSecondary,
+    },
+    ratingsBarsWrap: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+    barRow: {
       flexDirection: 'row',
       alignItems: 'center',
+      marginBottom: 6,
     },
-    cartBagIcon: {
-      fontSize: 18,
+    barLabel: {
+      width: 26,
+      fontSize: typography.fontSize.xs,
+      color: colors.textSecondary,
+      textAlign: 'right',
       marginRight: 8,
     },
-    cartStripTextWrap: {},
-    cartStripCount: {
-      fontSize: typography.fontSize.xs,
-      color: 'rgba(255,255,255,0.85)',
+    barTrack: {
+      flex: 1,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: colors.border ?? '#E5E5EA',
+      overflow: 'hidden',
     },
-    cartStripPrice: {
-      fontSize: typography.fontSize.md,
-      fontWeight: typography.fontWeight.bold,
-      color: '#FFFFFF',
+    barFill: {
+      height: '100%',
+      borderRadius: 3,
+      backgroundColor: colors.warning ?? '#F5A623',
     },
-    viewCartButton: {
+
+    // Empty state — styled as a card with a CTA, not bare text
+    emptyRatingsCard: {
+      backgroundColor: colors.surface ?? '#F5F6F8',
+      borderRadius: 16,
+      paddingVertical: 28,
+      paddingHorizontal: 20,
+      alignItems: 'center',
+    },
+    emptyRatingsIcon: {
+      fontSize: 30,
+      marginBottom: 10,
+    },
+    emptyRatingsTitle: {
+      fontSize: 15,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+      marginBottom: 4,
+    },
+    emptyRatingsSubtitle: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 16,
+    },
+    rateProductBtn: {
+      borderWidth: 1.5,
+      borderColor: colors.primary,
+      borderRadius: 10,
+      paddingVertical: 10,
+      paddingHorizontal: 24,
+    },
+    rateProductBtnText: {
+      fontSize: 14,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.primary,
+    },
+
+    // Recent reviews list
+    reviewsList: {
+      marginTop: 4,
+    },
+    reviewCard: {
+      backgroundColor: colors.background,
+      borderWidth: 1,
+      borderColor: colors.border ?? '#ECECEC',
+      borderRadius: 14,
+      padding: 14,
+      marginBottom: 12,
+    },
+    reviewCardHeader: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: '#FFFFFF',
-      paddingHorizontal: 16,
-      paddingVertical: 9,
-      borderRadius: 10,
+      marginBottom: 10,
     },
-    viewCartText: {
-      fontSize: typography.fontSize.sm,
+    reviewerAvatar: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 10,
+    },
+    reviewerAvatarText: {
+      color: colors.primary,
+      fontSize: 15,
       fontWeight: typography.fontWeight.bold,
-      color: colors.primary,
-      marginRight: 4,
     },
-    viewCartArrow: {
+    reviewerName: {
       fontSize: 13,
-      color: colors.primary,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.text,
+      marginBottom: 3,
+    },
+    reviewDate: {
+      fontSize: 11,
+      color: colors.textSecondary,
+    },
+    reviewComment: {
+      fontSize: 13,
+      lineHeight: 19,
+      color: colors.textSecondary,
+    },
+
+    skeletonBlock: {
+      height: 90,
+      borderRadius: 16,
+      backgroundColor: colors.surface ?? '#EEEEEE',
+      marginBottom: 12,
     },
   });

app/features/screens/providerDetailsScreen/providerDetailsScreen.tsx

@@ -1,22 +1,27 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   ScrollView,
   Image,
-  ImageBackground,
+  Dimensions,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
 } from 'react-native';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { getStyles } from './providerDetailsScreen.styles';
-import { CatalogItemRow } from '@components';
 import { useAppTheme } from '@theme';
-import { useAppDispatch, useAppSelector } from '../../../store';
-import { addItem } from '../../../store/commonreducers/cart';
-import { getProviderCatalogApi, getProvidersApi } from '../../../api/deliveryApi';
-import { CatalogItem, Provider } from '../../../interfaces';
+import {
+  addToCartThunk,
+  updateCartItemThunk,
+} from '../../../store/commonreducers/cart';
 import { AppStackParamList } from '../../../navigation/appStack';
+import { useAppDispatch, useAppSelector } from '@store';
+import { getProductDetailsThunk } from './thunk';
+import { getDiscountPercentage, formatPrice } from '@components';
+import { getFullUrl } from '@utils';
 
 type ProviderDetailsNavProp = StackNavigationProp<
   AppStackParamList,
@@ -27,215 +32,19 @@ type ProviderDetailsRouteProp = RouteProp<
   'ProviderDetailsScreen'
 >;
 
-const FALLBACK_CATEGORIES = ['Pizza', 'Sides', 'Beverages'];
+const { width } = Dimensions.get('window');
 
-const OFFERS = [
-  { key: 'o1', icon: '🏷️', label: '50% OFF up to ₹100' },
-  { key: 'o2', icon: '🚚', label: 'Free delivery above ₹299' },
-  { key: 'o3', icon: '🎁', label: 'Buy 1 Get 1 on combos' },
-];
-
-// ---------------------------------------------------------------------------
-// Presentational subcomponents
-// Kept local to this screen since none are reused elsewhere yet. Promote to
-// @components if a second screen needs them.
-// ---------------------------------------------------------------------------
-
-interface HeroSectionProps {
-  styles: ReturnType<typeof getStyles>;
-  imageUrl?: string;
-  onBack: () => void;
-}
-
-const HeroSection: React.FC<HeroSectionProps> = ({
-  styles,
-  imageUrl,
-  onBack,
-}) => (
-  <View style={styles.heroWrap}>
-    {imageUrl ? (
-      <ImageBackground source={{ uri: imageUrl }} style={styles.heroImage}>
-        <View style={styles.heroOverlay} />
-      </ImageBackground>
-    ) : (
-      <View style={styles.heroFallback}>
-        <Text style={styles.heroFallbackEmoji}>🍽️</Text>
-        <View style={styles.heroOverlay} />
-      </View>
-    )}
-
-    <View style={styles.topIconRow}>
-      <TouchableOpacity
-        style={styles.iconButton}
-        activeOpacity={0.75}
-        onPress={onBack}
-      >
-        <Text style={styles.iconButtonText}>←</Text>
-      </TouchableOpacity>
-      <View style={styles.iconButtonGroup}>
-        <TouchableOpacity
-          style={[styles.iconButton, { marginRight: 10 }]}
-          activeOpacity={0.75}
-        >
-          <Text style={styles.iconButtonText}>🔗</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.iconButton} activeOpacity={0.75}>
-          <Text style={styles.iconButtonText}>🤍</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  </View>
-);
-
-interface InfoCardProps {
-  styles: ReturnType<typeof getStyles>;
-  name: string;
+// TODO: move these into your shared Product type once the backend
+// response includes them.
+interface ProductReview {
+  id: string;
+  userName?: string;
   rating: number;
-  deliveryTime: string;
-  tag: string;
+  comment?: string;
+  createdAt?: string;
 }
 
-const InfoCard: React.FC<InfoCardProps> = ({
-  styles,
-  name,
-  rating,
-  deliveryTime,
-  tag,
-}) => (
-  <View style={styles.infoCard}>
-    <View style={styles.infoTopRow}>
-      <Text style={styles.heroName} numberOfLines={1}>
-        {name}
-      </Text>
-      <View style={styles.ratingBadge}>
-        <Text style={{ fontSize: 11 }}>⭐</Text>
-        <Text style={styles.ratingBadgeText}>{rating.toFixed(1)}</Text>
-      </View>
-    </View>
-
-    <Text style={styles.cuisineText}>{tag} • Multi-cuisine</Text>
-
-    <View style={styles.metaRow}>
-      <View style={styles.metaItem}>
-        <Text style={styles.metaIcon}>🕐</Text>
-        <Text style={styles.metaText}>{deliveryTime}</Text>
-      </View>
-      <View style={styles.metaDivider} />
-      <View style={styles.metaItem}>
-        <Text style={styles.metaIcon}>📍</Text>
-        <Text style={styles.metaText}>2.4 km away</Text>
-      </View>
-    </View>
-
-    <View style={styles.statusRow}>
-      <View style={styles.statusDot} />
-      <Text style={styles.statusText}>Open now</Text>
-      <Text style={styles.statusTextMuted}> • Closes 11:30 PM</Text>
-    </View>
-  </View>
-);
-
-interface OffersRowProps {
-  styles: ReturnType<typeof getStyles>;
-}
-
-const OffersRow: React.FC<OffersRowProps> = ({ styles }) => (
-  <View style={styles.offersSection}>
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={styles.offersScrollContent}
-    >
-      {OFFERS.map(offer => (
-        <View key={offer.key} style={styles.offerChip}>
-          <Text style={styles.offerIcon}>{offer.icon}</Text>
-          <Text style={styles.offerText}>{offer.label}</Text>
-        </View>
-      ))}
-    </ScrollView>
-  </View>
-);
-
-interface CategoryTabsProps {
-  styles: ReturnType<typeof getStyles>;
-  categories: string[];
-  activeCategory: string;
-  onSelect: (category: string) => void;
-}
-
-const CategoryTabs: React.FC<CategoryTabsProps> = ({
-  styles,
-  categories,
-  activeCategory,
-  onSelect,
-}) => (
-  <ScrollView
-    horizontal
-    showsHorizontalScrollIndicator={false}
-    contentContainerStyle={styles.categoryRow}
-  >
-    {categories.map(cat => {
-      const isActive = activeCategory === cat;
-      return (
-        <TouchableOpacity
-          key={cat}
-          style={[styles.categoryTab, isActive && styles.categoryTabActive]}
-          onPress={() => onSelect(cat)}
-          activeOpacity={0.75}
-        >
-          <Text
-            style={[
-              styles.categoryTabText,
-              isActive && styles.categoryTabTextActive,
-            ]}
-          >
-            {cat}
-          </Text>
-        </TouchableOpacity>
-      );
-    })}
-  </ScrollView>
-);
-
-interface CartStripProps {
-  styles: ReturnType<typeof getStyles>;
-  totalItems: number;
-  totalPrice: number;
-  onPress: () => void;
-}
-
-const CartStrip: React.FC<CartStripProps> = ({
-  styles,
-  totalItems,
-  totalPrice,
-  onPress,
-}) => (
-  <View style={styles.cartStripWrap}>
-    <TouchableOpacity
-      style={styles.cartStrip}
-      activeOpacity={0.85}
-      onPress={onPress}
-    >
-      <View style={styles.cartStripLeft}>
-        <Text style={styles.cartBagIcon}>🛍️</Text>
-        <View style={styles.cartStripTextWrap}>
-          <Text style={styles.cartStripCount}>
-            {totalItems} item{totalItems === 1 ? '' : 's'}
-          </Text>
-          <Text style={styles.cartStripPrice}>₹{totalPrice}</Text>
-        </View>
-      </View>
-      <View style={styles.viewCartButton}>
-        <Text style={styles.viewCartText}>View Cart</Text>
-        <Text style={styles.viewCartArrow}>→</Text>
-      </View>
-    </TouchableOpacity>
-  </View>
-);
-
-// ---------------------------------------------------------------------------
-// Screen
-// ---------------------------------------------------------------------------
+type RatingBreakdown = Partial<Record<1 | 2 | 3 | 4 | 5, number>>;
 
 export const ProviderDetailsScreen: React.FC = () => {
   const { colors } = useAppTheme();
@@ -243,65 +52,314 @@ export const ProviderDetailsScreen: React.FC = () => {
   const dispatch = useAppDispatch();
   const navigation = useNavigation<ProviderDetailsNavProp>();
   const route = useRoute<ProviderDetailsRouteProp>();
-  const { providerId, providerName } = route.params;
+
+  // Notice we still use providerId param name to avoid breaking routing everywhere
+  const { providerId } = route.params;
 
   const cartItems = useAppSelector(state => state.cart.items);
+  const { product, isLoading } = useAppSelector(state => state.providerDetails);
 
-  const [provider, setProvider] = useState<Provider | null>(null);
-  const [catalog, setCatalog] = useState<CatalogItem[]>([]);
-  const [activeCategory, setActiveCategory] = useState(FALLBACK_CATEGORIES[0]);
+  // Find this product in the cart (if already added)
+  const cartItem = product
+    ? cartItems.find(i => i.productId === product.id)
+    : undefined;
+  const isInCart = !!cartItem;
 
-  const resolvedProviderId = providerId || 'p1';
-  const resolvedProviderName = providerName || 'Pizza Planet';
+  const [activeImageIndex, setActiveImageIndex] = useState(0);
+  const [localQty, setLocalQty] = useState(0);
 
   useEffect(() => {
-    getProviderCatalogApi(resolvedProviderId).then(setCatalog);
-  }, [resolvedProviderId]);
-
-  useEffect(() => {
-    getProvidersApi().then(providers => {
-      const match = providers.find(p => p.id === resolvedProviderId);
-      if (match) setProvider(match);
-    });
-  }, [resolvedProviderId]);
-
-  const categories = useMemo(() => {
-    const fromCatalog = Array.from(new Set(catalog.map(item => item.category)));
-    return fromCatalog.length > 0 ? fromCatalog : FALLBACK_CATEGORIES;
-  }, [catalog]);
-
-  useEffect(() => {
-    if (!categories.includes(activeCategory)) {
-      setActiveCategory(categories[0]);
+    if (providerId) {
+      dispatch(getProductDetailsThunk(providerId));
     }
-  }, [categories, activeCategory]);
+  }, [providerId, dispatch]);
 
-  const filteredItems = useMemo(
-    () => catalog.filter(item => item.category === activeCategory),
-    [catalog, activeCategory],
-  );
+  // Sync localQty with cart quantity when cart loads or product changes
+  useEffect(() => {
+    if (cartItem) {
+      setLocalQty(cartItem.quantity);
+    } else {
+      setLocalQty(0);
+    }
+  }, [cartItem?.quantity, cartItem?.productId]);
 
-  const getItemQuantity = (itemId: string) => {
-    const match = cartItems.find(i => i.item.id === itemId);
-    return match ? match.quantity : 0;
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const slide = Math.round(e.nativeEvent.contentOffset.x / width);
+    setActiveImageIndex(slide);
   };
 
-  const totalItems = cartItems.reduce((sum, i) => sum + i.quantity, 0);
-  const totalPrice = cartItems.reduce(
-    (sum, i) => sum + i.item.price * i.quantity,
-    0,
-  );
-
-  const handleAddItem = (item: CatalogItem) => {
+  const handleAddToCart = () => {
+    if (!product) return;
     dispatch(
-      addItem({
-        providerId: resolvedProviderId,
-        providerName: resolvedProviderName,
-        item,
+      addToCartThunk({
+        productId: product.id,
+        quantity: Math.max(1, localQty), // always add at least 1
       }),
     );
   };
 
+  const handleIncrement = () => {
+    if (!product) return;
+    const newQty = localQty + 1;
+    setLocalQty(newQty);
+    dispatch(updateCartItemThunk({ productId: product.id, quantity: newQty }));
+  };
+
+  const handleDecrement = () => {
+    if (!product || localQty <= 1) return;
+    const newQty = localQty - 1;
+    setLocalQty(newQty);
+    dispatch(updateCartItemThunk({ productId: product.id, quantity: newQty }));
+  };
+
+  const handleRateProduct = () => {
+    navigation.navigate('WriteReviewScreen', { productId: product?.id ?? '' });
+  };
+
+  const renderStars = (value: number, size = 14) => {
+    const rounded = Math.round(value);
+    const starColor = (colors as any).warning ?? '#F5A623';
+    return (
+      <View style={styles.starsRow}>
+        {[1, 2, 3, 4, 5].map(i => (
+          <Text
+            key={i}
+            style={[styles.starIcon, { fontSize: size, color: starColor }]}
+          >
+            {i <= rounded ? '★' : '☆'}
+          </Text>
+        ))}
+      </View>
+    );
+  };
+
+  const renderImages = () => {
+    if (isLoading) {
+      return (
+        <View style={styles.carouselWrap}>
+          <View
+            style={[
+              styles.fallbackIconWrap,
+              { backgroundColor: (colors as any).surface ?? colors.cardBg },
+            ]}
+          />
+        </View>
+      );
+    }
+
+    const images = product?.media?.length
+      ? product.media
+      : [
+          {
+            id: 'fallback',
+            url: product?.imageUrl || '',
+            mediaType: 'IMAGE',
+            sortOrder: 0,
+            productId: '',
+            createdAt: '',
+          },
+        ];
+
+    return (
+      <View style={styles.carouselWrap}>
+        <ScrollView
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={handleScroll}
+        >
+          {images.map(img => (
+            <Image
+              key={img.id}
+              source={{ uri: getFullUrl(img.url) }}
+              style={styles.carouselImage}
+            />
+          ))}
+        </ScrollView>
+        {images.length > 1 && (
+          <View style={styles.paginationDots}>
+            {images.map((_, i) => (
+              <View
+                key={i}
+                style={[styles.dot, i === activeImageIndex && styles.dotActive]}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const renderProductInfo = () => {
+    if (isLoading || !product) {
+      return (
+        <View style={styles.infoBox}>
+          <View style={styles.skeletonTitle} />
+          <View style={styles.skeletonPrice} />
+          <View style={styles.skeletonText} />
+          <View style={styles.skeletonText} />
+        </View>
+      );
+    }
+
+    const discount = getDiscountPercentage(
+      product.price,
+      product.compareAtPrice,
+    );
+    const currency = product.currency === 'INR' ? '₹' : product.currency;
+
+    return (
+      <View style={styles.infoBox}>
+        <View style={styles.brandRow}>
+          <Text style={styles.brandText}>
+            {product.brand || product.merchant?.name || 'BRAND'}
+          </Text>
+          <View style={styles.ratingBadge}>
+            <Text style={{ fontSize: 11 }}>⭐</Text>
+            <Text style={styles.ratingBadgeText}>
+              {parseFloat(product.avgRating).toFixed(1)}
+            </Text>
+          </View>
+        </View>
+
+        <Text style={styles.titleText}>{product.name}</Text>
+
+        <View style={styles.priceRow}>
+          <Text style={styles.priceText}>
+            {formatPrice(product.price, currency)}
+          </Text>
+          {product.compareAtPrice &&
+            parseFloat(product.compareAtPrice) > parseFloat(product.price) && (
+              <Text style={styles.comparePriceText}>
+                {formatPrice(product.compareAtPrice, currency)}
+              </Text>
+            )}
+          {discount && (
+            <View style={styles.discountBadgeWrap}>
+              <Text style={styles.discountBadgeText}>{discount}</Text>
+            </View>
+          )}
+        </View>
+        <Text style={styles.taxText}>Inclusive of all taxes</Text>
+      </View>
+    );
+  };
+
+  const renderRatingsSection = () => {
+    if (isLoading) {
+      return (
+        <View style={styles.ratingsSection}>
+          <View style={styles.skeletonBlock} />
+          <View style={[styles.skeletonBlock, { height: 80 }]} />
+        </View>
+      );
+    }
+
+    const avgRating = product?.avgRating ? parseFloat(product.avgRating) : 0;
+    const reviews: ProductReview[] = (product as any)?.reviews ?? [];
+    const totalRatings: number =
+      (product as any)?.ratingsCount ?? reviews.length ?? 0;
+    const breakdown: RatingBreakdown | undefined = (product as any)
+      ?.ratingBreakdown;
+    const hasRatings = totalRatings > 0;
+
+    return (
+      <View style={styles.ratingsSection}>
+        <View style={styles.ratingsHeaderRow}>
+          <Text style={styles.sectionTitle}>Ratings & Reviews</Text>
+          {reviews.length > 3 && (
+            <TouchableOpacity activeOpacity={0.7}>
+              <Text style={styles.seeAllText}>See all</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {hasRatings ? (
+          <View style={styles.ratingsSummaryCard}>
+            <View
+              style={[
+                styles.ratingsSummaryLeft,
+                breakdown && styles.ratingsSummaryLeftWithDivider,
+              ]}
+            >
+              <Text style={styles.avgRatingNumber}>{avgRating.toFixed(1)}</Text>
+              {renderStars(avgRating, 16)}
+              <Text style={styles.totalRatingsText}>
+                {totalRatings} {totalRatings === 1 ? 'rating' : 'ratings'}
+              </Text>
+            </View>
+
+            {breakdown && (
+              <View style={styles.ratingsBarsWrap}>
+                {[5, 4, 3, 2, 1].map(star => {
+                  const count = breakdown[star as 1 | 2 | 3 | 4 | 5] ?? 0;
+                  const pct =
+                    totalRatings > 0 ? (count / totalRatings) * 100 : 0;
+                  return (
+                    <View key={star} style={styles.barRow}>
+                      <Text style={styles.barLabel}>{star}★</Text>
+                      <View style={styles.barTrack}>
+                        <View style={[styles.barFill, { width: `${pct}%` }]} />
+                      </View>
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+          </View>
+        ) : (
+          <View style={styles.emptyRatingsCard}>
+            <Text style={styles.emptyRatingsIcon}>⭐</Text>
+            <Text style={styles.emptyRatingsTitle}>No ratings yet</Text>
+            <Text style={styles.emptyRatingsSubtitle}>
+              Be the first to share what you think of this product.
+            </Text>
+            <TouchableOpacity
+              style={styles.rateProductBtn}
+              activeOpacity={0.8}
+              onPress={handleRateProduct}
+            >
+              <Text style={styles.rateProductBtnText}>Rate this product</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {reviews.length > 0 && (
+          <View style={styles.reviewsList}>
+            {reviews.slice(0, 3).map(review => (
+              <View key={review.id} style={styles.reviewCard}>
+                <View style={styles.reviewCardHeader}>
+                  <View style={styles.reviewerAvatar}>
+                    <Text style={styles.reviewerAvatarText}>
+                      {(review.userName || 'U').charAt(0).toUpperCase()}
+                    </Text>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.reviewerName}>
+                      {review.userName || 'Anonymous'}
+                    </Text>
+                    {renderStars(review.rating, 12)}
+                  </View>
+                  <Text style={styles.reviewDate}>
+                    {review.createdAt
+                      ? new Date(review.createdAt).toLocaleDateString('en-IN', {
+                          day: 'numeric',
+                          month: 'short',
+                        })
+                      : ''}
+                  </Text>
+                </View>
+                {!!review.comment && (
+                  <Text style={styles.reviewComment}>{review.comment}</Text>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
   return (
     <View style={styles.container}>
       <ScrollView
@@ -309,69 +367,147 @@ export const ProviderDetailsScreen: React.FC = () => {
         contentContainerStyle={styles.contentBody}
         showsVerticalScrollIndicator={false}
       >
-        <HeroSection
-          styles={styles}
-          imageUrl={provider?.imageUrl}
-          onBack={() => navigation.goBack()}
-        />
+        <View style={{ position: 'relative' }}>
+          {renderImages()}
 
-        <InfoCard
-          styles={styles}
-          name={resolvedProviderName}
-          rating={provider?.rating ?? 4.5}
-          deliveryTime={provider?.deliveryTime ?? '25 min'}
-          tag={provider?.tag ?? 'Italian'}
-        />
+          <View style={styles.topIconRow}>
+            <TouchableOpacity
+              style={styles.iconButton}
+              activeOpacity={0.8}
+              onPress={() => navigation.goBack()}
+            >
+              <Text style={styles.iconButtonText}>←</Text>
+            </TouchableOpacity>
+            <View style={styles.iconButtonGroup}>
+              <TouchableOpacity
+                style={[styles.iconButton, { marginRight: 12 }]}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.iconButtonText}>🔗</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.iconButton} activeOpacity={0.8}>
+                <Text style={{ fontSize: 17 }}>🤍</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
 
-        <OffersRow styles={styles} />
+        {renderProductInfo()}
 
         <View style={styles.sectionDivider} />
 
-        <View style={styles.menuHeaderRow}>
-          <Text style={styles.menuTitle}>Menu</Text>
-          <Text style={styles.menuCount}>{catalog.length} items</Text>
-        </View>
+        <View style={styles.detailsSection}>
+          <Text style={styles.sectionTitle}>Product Details</Text>
+          <Text style={styles.descriptionText}>
+            {product?.description ||
+              'No description available for this product.'}
+          </Text>
 
-        <CategoryTabs
-          styles={styles}
-          categories={categories}
-          activeCategory={activeCategory}
-          onSelect={setActiveCategory}
-        />
-
-        <View style={styles.menuList}>
-          {filteredItems.length === 0 && (
-            <View style={styles.emptyMenuWrap}>
-              <Text style={styles.emptyMenuEmoji}>🍽️</Text>
-              <Text style={styles.emptyMenuText}>
-                No items in this category yet
+          <View style={styles.metaGrid}>
+            <View style={styles.metaItem}>
+              <Text style={styles.metaLabel}>Category</Text>
+              <Text style={styles.metaValue}>
+                {product?.category?.name || 'N/A'}
               </Text>
             </View>
-          )}
-
-          {filteredItems.map(item => (
-            <CatalogItemRow
-              key={item.id}
-              imageUrl={item.imageUrl}
-              title={item.title}
-              description={item.description}
-              price={item.price}
-              quantity={getItemQuantity(item.id)}
-              onAdd={() => handleAddItem(item)}
-              onRemove={() => {}}
-            />
-          ))}
+            <View style={styles.metaItem}>
+              <Text style={styles.metaLabel}>SKU</Text>
+              <Text style={styles.metaValue}>{product?.sku || 'N/A'}</Text>
             </View>
+            <View style={styles.metaItem}>
+              <Text style={styles.metaLabel}>Stock</Text>
+              <Text style={styles.metaValue}>
+                {product?.stockQuantity ? 'In Stock' : 'Out of Stock'}
+              </Text>
+            </View>
+            <View style={styles.metaItem}>
+              <Text style={styles.metaLabel}>Merchant</Text>
+              <Text style={styles.metaValue}>
+                {product?.merchant?.name || 'N/A'}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.sectionDivider} />
+
+        {renderRatingsSection()}
       </ScrollView>
 
-      {totalItems > 0 && (
-        <CartStrip
-          styles={styles}
-          totalItems={totalItems}
-          totalPrice={totalPrice}
+      {/* Sticky Bottom Bar */}
+      <View style={styles.bottomBarWrap}>
+        {isInCart ? (
+          // ── Already in cart: show inline qty stepper + Go to Cart ──
+          <>
+            <View style={styles.qtySelector}>
+              <TouchableOpacity
+                style={styles.qtyBtn}
+                onPress={handleDecrement}
+                activeOpacity={0.7}
+                disabled={localQty <= 1}
+              >
+                <Text style={styles.qtyBtnText}>-</Text>
+              </TouchableOpacity>
+              <Text style={styles.qtyValue}>{localQty}</Text>
+              <TouchableOpacity
+                style={styles.qtyBtn}
+                onPress={handleIncrement}
+                activeOpacity={0.7}
+              >
+                <Text style={styles.qtyBtnText}>+</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TouchableOpacity
+              style={styles.addBtn}
+              activeOpacity={0.8}
               onPress={() => navigation.navigate('CartScreen')}
-        />
+            >
+              <Text style={styles.addBtnText}>Go to Cart</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          // ── Not in cart: qty picker + Add to Cart ──
+          <>
+            <View style={styles.qtySelector}>
+              <TouchableOpacity
+                style={styles.qtyBtn}
+                onPress={() => setLocalQty(q => Math.max(0, q - 1))}
+                activeOpacity={0.7}
+                disabled={localQty <= 0}
+              >
+                <Text style={styles.qtyBtnText}>-</Text>
+              </TouchableOpacity>
+              <Text style={styles.qtyValue}>{localQty}</Text>
+              <TouchableOpacity
+                style={styles.qtyBtn}
+                onPress={() => setLocalQty(q => q + 1)}
+                activeOpacity={0.7}
+              >
+                <Text style={styles.qtyBtnText}>+</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TouchableOpacity
+              style={styles.addBtn}
+              activeOpacity={0.8}
+              onPress={handleAddToCart}
+              disabled={
+                !product ||
+                (product.isTrackStock && product.stockQuantity === 0)
+              }
+            >
+              <Text style={styles.addBtnText}>
+                {!product
+                  ? 'Loading...'
+                  : product.isTrackStock && product.stockQuantity === 0
+                  ? 'Out of Stock'
+                  : 'Add to Cart'}
+              </Text>
+            </TouchableOpacity>
+          </>
         )}
       </View>
+    </View>
   );
 };

app/features/screens/providerDetailsScreen/reducer.ts

@@ -0,0 +1,33 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { Product } from '@interfaces';
+import { getProductDetailsThunk } from './thunk';
+
+export interface ProviderDetailsState {
+  product: Product | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+const initialState: ProviderDetailsState = {
+  product: null,
+  isLoading: false,
+  error: null,
+};
+
+const providerDetailsReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(getProductDetailsThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(getProductDetailsThunk.fulfilled, (state, action) => {
+      state.product = action.payload;
+      state.isLoading = false;
+    })
+    .addCase(getProductDetailsThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload || 'Failed to fetch product details';
+    });
+});
+
+export default providerDetailsReducer;

app/features/screens/providerDetailsScreen/thunk.ts

@@ -0,0 +1,18 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { getProductDetailsApi } from '@api';
+import { Product } from '@interfaces';
+
+export const getProductDetailsThunk = createAsyncThunk<
+  Product,
+  string,
+  { rejectValue: string }
+>('providerDetails/getProductDetails', async (productId, { rejectWithValue }) => {
+  try {
+    const response = await getProductDetailsApi(productId);
+    return response;
+  } catch (error: any) {
+    return rejectWithValue(
+      error.response?.data?.message || 'Failed to fetch product details',
+    );
+  }
+});

app/features/screens/setLocationScreen/index.ts

@@ -1 +1,2 @@
 export * from './setLocationScreen';
+export * from './reducer';

app/features/screens/setLocationScreen/reducer.ts

@@ -0,0 +1,43 @@
+import { createReducer, createAction } from '@reduxjs/toolkit';
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+export const setLocationData = createAction<{
+  latitude: number;
+  longitude: number;
+  mapAddress: string;
+}>('setLocation/setLocationData');
+
+export const clearLocationData = createAction('setLocation/clearLocationData');
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+export interface SetLocationState {
+  latitude: number | null;
+  longitude: number | null;
+  mapAddress: string;
+}
+
+const initialState: SetLocationState = {
+  latitude: null,
+  longitude: null,
+  mapAddress: '',
+};
+
+// ─── Reducer ──────────────────────────────────────────────────────────────────
+
+const setLocationReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(setLocationData, (state, action) => {
+      state.latitude = action.payload.latitude;
+      state.longitude = action.payload.longitude;
+      state.mapAddress = action.payload.mapAddress;
+    })
+    .addCase(clearLocationData, state => {
+      state.latitude = null;
+      state.longitude = null;
+      state.mapAddress = '';
+    });
+});
+
+export default setLocationReducer;

app/features/screens/setLocationScreen/setLocationScreen.tsx

@@ -20,8 +20,14 @@ import {
   showPermissionDeniedAlert,
   LatLng,
 } from '../../../services/locationServices';
+import { useAppDispatch } from '@store';
+import { setLocationData } from './reducer';
+import { OnboardingStackParamList } from '@navigation/onboardingStack';
 
-type NavProp = StackNavigationProp<AuthStackParamList, 'SetLocationScreen'>;
+type NavProp = StackNavigationProp<
+  OnboardingStackParamList,
+  'SetLocationScreen'
+>;
 
 const DELTA = { latitudeDelta: 0.006, longitudeDelta: 0.006 };
 
@@ -29,6 +35,7 @@ export const SetLocationScreen: React.FC = () => {
   const { colors } = useAppTheme();
   const styles = getStyles(colors);
   const navigation = useNavigation<NavProp>();
+  const dispatch = useAppDispatch();
   const mapRef = useRef<MapView>(null);
   // Guard: never call setState after the component has unmounted
   const isMounted = useRef(true);
@@ -149,7 +156,16 @@ export const SetLocationScreen: React.FC = () => {
 
         <PrimaryButton
           title="Confirm Location"
-          onPress={() => navigation.navigate('CompleteProfileScreen')}
+          onPress={() => {
+            dispatch(
+              setLocationData({
+                latitude: coords.latitude,
+                longitude: coords.longitude,
+                mapAddress: address,
+              }),
+            );
+            navigation.navigate('CompleteProfileScreen');
+          }}
           style={styles.confirmButton}
         />
 

app/features/screens/writeReviewScreen/index.ts

@@ -0,0 +1 @@
+export * from './writeReviewScreen';

app/features/screens/writeReviewScreen/writeReviewScreen.styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { typography } from '@theme';
+
+export const getStyles = (colors: any) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+  },
+  icon: {
+    fontSize: 64,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: typography.fontSize.xl,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: typography.fontSize.md,
+    color: colors.textSecondary,
+    marginBottom: 32,
+  },
+});

app/features/screens/writeReviewScreen/writeReviewScreen.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { getStyles } from './writeReviewScreen.styles';
+import { Header, RatingStars, PrimaryButton } from '@components';
+import { useAppTheme } from '@theme';
+import { AppStackParamList } from '../../../navigation/appStack';
+
+type WriteReviewNavProp = StackNavigationProp<
+  AppStackParamList,
+  'WriteReviewScreen'
+>;
+
+export const WriteReviewScreen: React.FC = () => {
+  const { colors } = useAppTheme();
+  const styles = getStyles(colors);
+  const navigation = useNavigation<WriteReviewNavProp>();
+  const [rating, setRating] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Header
+        title="Order Delivered"
+        onBack={() => navigation.navigate('MainTabs')}
+      />
+      <View style={styles.content}>
+        <Text style={styles.icon}>🎉</Text>
+        <Text style={styles.title}>Your order has been delivered!</Text>
+        <Text style={styles.subtitle}>How was your experience?</Text>
+
+        <RatingStars rating={rating} onRate={setRating} size={40} />
+
+        <PrimaryButton
+          title="Rate & Tip"
+          onPress={() => navigation.navigate('MainTabs')}
+          disabled={rating === 0}
+          style={{ marginTop: 32 }}
+        />
+      </View>
+    </View>
+  );
+};

app/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useLoginScreen';

app/interfaces/auth.ts

@@ -0,0 +1,61 @@
+export interface LoginResponse {
+  message: string;
+  phone: string;
+  code: string;
+}
+
+export interface VerifyOtpResponse {
+  message: string;
+  isNewUser: boolean;
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+}
+
+export interface User {
+  id: string;
+  roleId: string;
+  roleEnum: RoleEnum;
+  name: string | null;
+  email: string | null;
+  phone: string;
+  profileImage: string | null;
+  status: UserStatus;
+  mfaEnabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  isDeleted: boolean;
+  lastLogoutAt: string | null;
+  loginAt: string;
+  refreshTokenId: string;
+  refreshTokenHash: string;
+  refreshTokenExpiresAt: string;
+  categoryPreferences: CategoryPreference[];
+  gender: Gender | null;
+  dateOfBirth: string | null;
+  role: Role;
+  // merchants: Merchant[];
+}
+
+export interface Role {
+  id: string;
+  code: string;
+  scope: string;
+  isSystem: boolean;
+}
+
+export interface CategoryPreference {
+  // Extend when backend starts returning data
+}
+
+export interface Merchant {
+  name: string;
+  imageUrl: string | null;
+}
+
+export type RoleEnum = 'CUSTOMER';
+
+export type UserStatus = 'ONBOARDING' | 'ACTIVE' | 'INACTIVE' | 'BLOCKED';
+
+export type Gender = 'MALE' | 'FEMALE' | 'OTHER';

app/interfaces/cart.ts

@@ -0,0 +1,51 @@
+export interface AddToCartRequest {
+  productId: string;
+  quantity: number;
+  attributes?: CartItemAttributes;
+}
+
+export interface CartItemAttributes {
+  size?: string;
+  extraToppings?: string[];
+}
+
+export interface CartProduct {
+  id: string;
+  name: string;
+  price: number;
+  compareAtPrice: number;
+  imageUrl: string;
+  stockQuantity: number;
+  isTrackStock: boolean;
+  merchantId: string;
+  merchantName: string;
+}
+
+export interface CartItem {
+  id: string;
+  productId: string;
+  quantity: number;
+  attributes: Record<string, any>;
+  createdAt: string;
+  updatedAt: string;
+  product: CartProduct;
+}
+
+export interface MerchantCartGroup {
+  merchantId: string;
+  merchantName: string;
+  items: CartItem[];
+  subtotal: number;
+}
+
+export interface CartResponse {
+  [x: string]: any;
+  id: string;
+  customerId: string;
+  items: CartItem[];
+  groupedByMerchant: MerchantCartGroup[];
+  subtotal: number;
+  totalItems: number;
+  createdAt: string;
+  updatedAt: string;
+}

app/interfaces/customerProfile.ts

@@ -0,0 +1,49 @@
+import { Gender, UserStatus } from './auth';
+
+export interface CustomerResponse {
+  id: string;
+  userId: string;
+  customerCode: string;
+  createdAt: string;
+  deletedAt: string | null;
+  user: CustomerUser;
+  addresses: CustomerAddress[];
+}
+
+export interface CustomerUser {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  profileImage: string | null;
+  status: UserStatus;
+  gender: Gender;
+  dateOfBirth: string | null;
+  categoryPreferences: string[];
+}
+
+export interface CustomerAddress {
+  id: string;
+  customerId: string;
+  merchantId: string | null;
+  deliveryPartnerId: string | null;
+  latitude: string;
+  longitude: string;
+  mapAddress: string;
+  houseNumber: string;
+  landmark: string;
+  addressLine1: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  phone: string;
+  label: AddressLabel;
+  isDefault: boolean;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+// export type UserStatus = 'ACTIVE' | 'INACTIVE' | 'SUSPENDED';
+
+export type AddressLabel = 'Home' | 'Work' | 'Other';

app/interfaces/index.ts

@@ -43,32 +43,37 @@ export interface CartItem {
   quantity: number;
 }
 
-export type OrderStatus = 'placed' | 'confirmed' | 'dispatched' | 'delivered' | 'cancelled';
+// export type OrderStatus =
+//   | 'placed'
+//   | 'confirmed'
+//   | 'dispatched'
+//   | 'delivered'
+//   | 'cancelled';
 
-export interface Order {
-  id: string;
-  providerId: string;
-  providerName: string;
-  providerImage: string;
-  items: CartItem[];
-  status: OrderStatus;
-  total: number;
-  deliveryFee: number;
-  platformFee: number;
-  discount: number;
-  couponCode?: string;
-  createdAt: string;
-  estimatedDelivery: string;
-  deliveryAddress: Location;
-}
+// export interface Order {
+//   id: string;
+//   providerId: string;
+//   providerName: string;
+//   providerImage: string;
+//   items: CartItem[];
+//   status: OrderStatus;
+//   total: number;
+//   deliveryFee: number;
+//   platformFee: number;
+//   discount: number;
+//   couponCode?: string;
+//   createdAt: string;
+//   estimatedDelivery: string;
+//   deliveryAddress: Location;
+// }
 
-export interface TrackingStep {
-  key: OrderStatus;
-  label: string;
-  timestamp?: string;
-  isCompleted: boolean;
-  isActive: boolean;
-}
+// export interface TrackingStep {
+//   key: OrderStatus;
+//   label: string;
+//   timestamp?: string;
+//   isCompleted: boolean;
+//   isActive: boolean;
+// }
 
 export interface DeliveryAgent {
   name: string;
@@ -83,3 +88,11 @@ export interface PaymentMethod {
   label: string;
   icon?: string;
 }
+
+export * from './auth';
+export * from './onboard';
+export * from './product';
+export * from './cart';
+export * from './paymentMethods';
+export * from './customerProfile';
+export * from './order';

app/interfaces/onboard.ts

@@ -0,0 +1,55 @@
+import { Role } from './auth';
+
+export interface Category {
+  id: string;
+  parentId: string | null;
+  name: string;
+  slug: string;
+  imageUrl: string | null;
+  isActive: boolean;
+  children: Category[];
+}
+
+export interface onBoardPayload {
+  name: string;
+  email: string;
+  latitude: number;
+  longitude: number;
+  addressLabel: string;
+  addressLine1: string;
+  mapAddress: string;
+  houseNumber: string;
+  landmark: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  addressPhone: string;
+  categoryPreferences: string[];
+  gender: string;
+}
+
+
+export interface UserProfile {
+  id: string;
+  roleId: string;
+  roleEnum: 'CUSTOMER' | 'MERCHANT' | 'BUSINESS_ADMIN' | 'SUPER_ADMIN';
+  name: string;
+  email: string;
+  phone: string;
+  profileImage: string | null;
+  status: 'ACTIVE' | 'INACTIVE' | 'SUSPENDED';
+  mfaEnabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  isDeleted: boolean;
+  lastLogoutAt: string | null;
+  loginAt: string;
+  refreshTokenId: string;
+  refreshTokenHash: string;
+  refreshTokenExpiresAt: string;
+  categoryPreferences: string[];
+  gender: 'MALE' | 'FEMALE' | 'OTHER';
+  dateOfBirth: string;
+  role: Role;
+}

app/interfaces/order.ts

@@ -0,0 +1,187 @@
+import { Merchant } from './auth';
+
+export interface OrderRequest {
+  addressId: string;
+  paymentMethodId: string;
+  paymentMethod: string;
+  orderType: string;
+  idempotencyKey: string;
+}
+
+export interface PlaceOrderResponse {
+  success: boolean;
+  message: string;
+  orders: Order[];
+}
+
+export interface Order {
+  id: string;
+  orderNumber: string;
+  customerId: string;
+  merchantId: string;
+  couponCode: string | null;
+  appliedPromotionId: string | null;
+  status: OrderStatus;
+  orderType: OrderType;
+  paymentMethodId: string;
+  paymentMethod: PaymentMethod;
+  currency: string;
+  subtotal: string;
+  deliveryFee: string;
+  platformFee: string;
+  serviceFee: string;
+  taxAmount: string;
+  discountAmount: string;
+  totalAmount: string;
+  pickupAddress: PickupAddress;
+  dropAddress: DropAddress;
+  metadata: OrderMetadata;
+  version: number;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+
+  orderItems?: OrderItem[];
+  payments?: Payment[];
+  delivery?: Delivery;
+  merchant?: Merchant;
+
+  customer?: OrderCustomer;
+  tracking?: TrackingEntry[];
+}
+
+// Add these new interfaces
+
+export interface OrderCustomerUser {
+  name: string;
+  phone: string;
+}
+
+export interface OrderCustomer {
+  id: string;
+  userId: string;
+  customerCode: string;
+  createdAt: string;
+  deletedAt: string | null;
+  user: OrderCustomerUser;
+}
+
+export interface TrackingEntry {
+  status: OrderStatus;
+  time: string;
+}
+
+export interface PickupAddress {
+  city: string;
+  label: string | null;
+  phone: string;
+  state: string;
+  landmark: string;
+  postalCode: string;
+  houseNumber: string;
+  addressLine1: string;
+}
+
+export interface DropAddress {
+  city: string;
+  label: string;
+  phone: string;
+  state: string;
+  landmark: string;
+  latitude: number;
+  longitude: number;
+  postalCode: string;
+  houseNumber: string;
+  addressLine1: string;
+}
+
+export interface OrderMetadata {
+  idempotencyKey: string;
+  trackingHistory: TrackingHistory;
+}
+
+export interface TrackingHistory {
+  PLACED: string;
+  CONFIRMED: string;
+  // Future statuses can be added here:
+  // PREPARING?: string;
+  // OUT_FOR_DELIVERY?: string;
+  // DELIVERED?: string;
+  // CANCELLED?: string;
+}
+
+export interface OrderItem {
+  id: string;
+  orderId: string;
+  productId: string;
+  itemType: 'PRODUCT' | 'SERVICE';
+  name: string;
+  quantity: string;
+  unitPrice: string;
+  totalAmount: string;
+  attributes: Record<string, any>;
+}
+
+export interface Payment {
+  id: string;
+  orderId: string;
+  paymentReference: string;
+  paymentMethodId: string;
+  method: PaymentMethod;
+  provider: PaymentMethod;
+  providerPaymentId: string | null;
+  status: PaymentStatus;
+  amount: string;
+  currency: string;
+  idempotencyKey: string;
+  metadata: Record<string, any>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Delivery {
+  id: string;
+  orderId: string;
+  deliveryPartnerId: string | null;
+  deliveryNumber: string;
+  status: DeliveryStatus;
+  estimatedDistanceKm: number | null;
+  actualDistanceKm: number | null;
+  proofOfPickupKey: string | null;
+  proofOfDeliveryKey: string | null;
+  pickedUpAt: string | null;
+  deliveredAt: string | null;
+}
+
+// export interface Merchant {
+//   name: string;
+//   imageUrl: string | null;
+// }
+
+export type PaymentStatus =
+  | 'PENDING'
+  | 'PROCESSING'
+  | 'COMPLETED'
+  | 'FAILED'
+  | 'REFUNDED';
+
+export type DeliveryStatus =
+  | 'PENDING_ASSIGNMENT'
+  | 'ASSIGNED'
+  | 'PICKED_UP'
+  | 'IN_TRANSIT'
+  | 'DELIVERED'
+  | 'CANCELLED';
+
+export type OrderStatus =
+  | 'PENDING'
+  | 'CONFIRMED'
+  | 'PREPARING'
+  | 'READY_FOR_PICKUP'
+  | 'OUT_FOR_DELIVERY'
+  | 'DELIVERED'
+  | 'CANCELLED';
+
+export type OrderType = 'DELIVERY' | 'PICKUP';
+
+export type PaymentMethod = 'CARD' | 'CASH' | 'UPI' | 'WALLET' | 'NET_BANKING';

app/interfaces/paymentMethods.ts

@@ -0,0 +1,12 @@
+export interface PaymentMethod {
+  id: string;
+  code: 'CARD' | 'COD' | 'UPI' | 'WALLET';
+  displayName: string;
+  iconUrl: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+}
+
+export type PaymentMethodsResponse = PaymentMethod[];

app/interfaces/product.ts

@@ -0,0 +1,143 @@
+export interface ProductMedia {
+  id: string;
+  productId: string;
+  url: string;
+  mediaType: 'IMAGE' | 'VIDEO';
+  sortOrder: number;
+  createdAt: string;
+}
+
+export interface ProductCategory {
+  name: string;
+}
+
+export interface ProductMerchant {
+  name: string;
+}
+
+export interface ProductAttributes {
+  featured?: boolean;
+  [key: string]: any;
+}
+
+export interface ProductDimensions {
+  [key: string]: any;
+}
+
+export interface Products {
+  id: string;
+  merchantId: string;
+  categoryId: string;
+  sku: string;
+  barcode: string | null;
+  name: string;
+  brand: string | null;
+  description: string;
+  imageUrl: string;
+  productType: string;
+  price: string;
+  compareAtPrice: string;
+  currency: string;
+  weightKg: string | null;
+  weightGm: string | null;
+  dimensions: ProductDimensions;
+  attributes: ProductAttributes;
+  stockQuantity: number;
+  isTrackStock: boolean;
+  isActive: boolean;
+  createdAt: string;
+  deletedAt: string | null;
+  category: ProductCategory;
+  merchant: ProductMerchant;
+  media: ProductMedia[];
+  avgRating: string;
+  totalRatings: number;
+}
+
+export interface PaginationMeta {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface Product {
+  id: string;
+  merchantId: string;
+  categoryId: string;
+  sku: string;
+  barcode: string | null;
+  name: string;
+  brand: string | null;
+  description: string;
+  imageUrl: string;
+  productType: ProductType;
+  price: string;
+  compareAtPrice: string;
+  currency: string;
+  weightKg: string | null;
+  weightGm: string | null;
+  dimensions: ProductDimensions;
+  attributes: ProductAttributes;
+  stockQuantity: number;
+  isTrackStock: boolean;
+  isActive: boolean;
+  createdAt: string;
+  deletedAt: string | null;
+  category: ProductCategory;
+  merchant: ProductMerchant;
+  media: ProductMedia[];
+  avgRating: string;
+  totalRatings: number;
+  recentRatings: ProductRating[];
+}
+
+export interface ProductCategory {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface ProductMerchant {
+  id: string;
+  name: string;
+  merchantCode: string;
+  rating: string;
+}
+
+// export interface ProductMedia {
+//   id: string;
+//   productId: string;
+//   url: string;
+//   mediaType: MediaType;
+//   sortOrder: number;
+//   createdAt: string;
+// }
+
+// export interface ProductAttributes {
+//   featured: boolean;
+// }
+
+// export interface ProductDimensions {
+//   [key: string]: unknown;
+// }
+
+export interface ProductRating {
+  id: string;
+  userId: string;
+  rating: number;
+  review: string;
+  createdAt: string;
+}
+
+export enum ProductType {
+  FOOD = 'FOOD',
+  GROCERIES = 'GROCERIES',
+  PHARMACY = 'PHARMACY',
+  ELECTRONICS = 'ELECTRONICS',
+}
+
+export enum MediaType {
+  IMAGE = 'IMAGE',
+  VIDEO = 'VIDEO',
+}

app/navigation/appStack.tsx

@@ -13,6 +13,8 @@ import {
   LiveTrackingScreen,
   OrderDeliveredScreen,
   HelpSupportScreen,
+  WriteReviewScreen,
+  OrderDetailsScreen,
 } from '@features/screens';
 
 export type AppStackParamList = {
@@ -21,12 +23,14 @@ export type AppStackParamList = {
   ProviderDetailsScreen: { providerId: string; providerName?: string };
   CartScreen: undefined;
   CheckoutAddressScreen: undefined;
-  CheckoutPaymentScreen: undefined;
+  CheckoutPaymentScreen: { selectedAddressId?: string } | undefined;
   OrderConfirmedScreen: { orderId?: string } | undefined;
   OrderTrackingScreen: { orderId?: string } | undefined;
   LiveTrackingScreen: { orderId?: string } | undefined;
   OrderDeliveredScreen: { orderId?: string } | undefined;
   HelpSupportScreen: undefined;
+  WriteReviewScreen: { productId: string } | undefined;
+  OrderDetailsScreen: { orderId: string } | undefined;
 };
 
 const Stack = createStackNavigator<AppStackParamList>();
@@ -36,15 +40,38 @@ export const AppStack: React.FC = () => {
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="MainTabs" component={MainTabNavigator} />
       <Stack.Screen name="ProviderListScreen" component={ProviderListScreen} />
-      <Stack.Screen name="ProviderDetailsScreen" component={ProviderDetailsScreen} />
+      <Stack.Screen
+        name="ProviderDetailsScreen"
+        component={ProviderDetailsScreen}
+      />
       <Stack.Screen name="CartScreen" component={CartScreen} />
-      <Stack.Screen name="CheckoutAddressScreen" component={CheckoutAddressScreen} />
-      <Stack.Screen name="CheckoutPaymentScreen" component={CheckoutPaymentScreen} />
-      <Stack.Screen name="OrderConfirmedScreen" component={OrderConfirmedScreen} />
-      <Stack.Screen name="OrderTrackingScreen" component={OrderTrackingScreen} />
+      <Stack.Screen
+        name="CheckoutAddressScreen"
+        component={CheckoutAddressScreen}
+      />
+      <Stack.Screen
+        name="CheckoutPaymentScreen"
+        component={CheckoutPaymentScreen}
+      />
+      <Stack.Screen
+        name="OrderConfirmedScreen"
+        component={OrderConfirmedScreen}
+      />
+      <Stack.Screen
+        name="OrderTrackingScreen"
+        component={OrderTrackingScreen}
+      />
       <Stack.Screen name="LiveTrackingScreen" component={LiveTrackingScreen} />
-      <Stack.Screen name="OrderDeliveredScreen" component={OrderDeliveredScreen} />
+      <Stack.Screen
+        name="OrderDeliveredScreen"
+        component={OrderDeliveredScreen}
+      />
       <Stack.Screen name="HelpSupportScreen" component={HelpSupportScreen} />
+      <Stack.Screen name="WriteReviewScreen" component={WriteReviewScreen} />
+      <Stack.Screen
+        name="OrderDetailsScreen"
+        component={OrderDetailsScreen}
+      />
     </Stack.Navigator>
   );
 };

app/navigation/authStack.tsx

@@ -12,10 +12,10 @@ import {
 export type AuthStackParamList = {
   LoginScreen: undefined;
   OtpScreen: { mobileNumber: string };
-  SetLocationScreen: undefined;
-  CompleteProfileScreen: undefined;
-  PreferencesScreen: undefined;
-  OnboardingCompleteScreen: undefined;
+  // SetLocationScreen: undefined;
+  // CompleteProfileScreen: undefined;
+  // PreferencesScreen: undefined;
+  // OnboardingCompleteScreen: undefined;
 };
 
 const Stack = createStackNavigator<AuthStackParamList>();
@@ -25,10 +25,6 @@ export const AuthStack: React.FC = () => {
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="LoginScreen" component={LoginScreen} />
       <Stack.Screen name="OtpScreen" component={OtpScreen} />
-      <Stack.Screen name="SetLocationScreen" component={SetLocationScreen} />
-      <Stack.Screen name="CompleteProfileScreen" component={CompleteProfileScreen} />
-      <Stack.Screen name="PreferencesScreen" component={PreferencesScreen} />
-      <Stack.Screen name="OnboardingCompleteScreen" component={OnboardingCompleteScreen} />
     </Stack.Navigator>
   );
 };

app/navigation/onboardingStack.tsx

@@ -0,0 +1,33 @@
+import {
+  CompleteProfileScreen,
+  OnboardingCompleteScreen,
+  PreferencesScreen,
+  SetLocationScreen,
+} from '@features/screens';
+import { createStackNavigator } from '@react-navigation/stack';
+
+export type OnboardingStackParamList = {
+  SetLocationScreen: undefined;
+  CompleteProfileScreen: undefined;
+  PreferencesScreen: undefined;
+  OnboardingCompleteScreen: undefined;
+};
+
+const Stack = createStackNavigator<OnboardingStackParamList>();
+
+export const OnboardingStack: React.FC = () => {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="SetLocationScreen" component={SetLocationScreen} />
+      <Stack.Screen
+        name="CompleteProfileScreen"
+        component={CompleteProfileScreen}
+      />
+      <Stack.Screen name="PreferencesScreen" component={PreferencesScreen} />
+      <Stack.Screen
+        name="OnboardingCompleteScreen"
+        component={OnboardingCompleteScreen}
+      />
+    </Stack.Navigator>
+  );
+};

app/navigation/rootNavigator.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { RootState } from '../store';
+import { RootState, useAppSelector } from '../store';
 import { AuthStack } from './authStack';
 import { AppStack } from './appStack';
+import { OnboardingStack } from './onboardingStack';
 
 export const RootNavigator: React.FC = () => {
-  const { isAuthenticated, onboardingComplete } = useSelector(
-    (state: RootState) => state.auth,
+  const accessToken = useSelector((state: RootState) => state.auth.accessToken);
+  const isOnboarding = useAppSelector(
+    state => state.auth.user?.status === 'ONBOARDING',
   );
 
-  if (!isAuthenticated || !onboardingComplete) {
+  if (!accessToken) {
     return <AuthStack />;
   }
 
+  if (isOnboarding) {
+    return <OnboardingStack />;
+  }
+
   return <AppStack />;
 };

app/services/apiClient.ts

@@ -15,7 +15,7 @@ const STORAGE_KEYS = {
 } as const;
 
 // ─── Config ──────────────────────────────────────────────────────────────────
-const BASE_URL = 'https://api.example.com/v1'; // TODO: replace with your actual base URL
+const BASE_URL = 'https://db1d-202-8-116-13.ngrok-free.app'; // TODO: replace with your actual base URL
 
 // ─── Token Helpers ───────────────────────────────────────────────────────────
 export const tokenManager = {
@@ -53,8 +53,8 @@ axiosInstance.interceptors.request.use(
   async (config: InternalAxiosRequestConfig) => {
     // Skip attaching token for auth endpoints (login, register, refresh)
     const publicPaths = [
-      '/auth/login',
-      '/auth/register',
+      '/auth/otp/request',
+      '/auth/otp/verify',
       '/auth/refresh-token',
     ];
     const isPublic = publicPaths.some(path => config.url?.includes(path));
@@ -68,7 +68,7 @@ axiosInstance.interceptors.request.use(
 
     // Debug logging (remove in production)
     if (__DEV__) {
-      console.log(`🚀 [API] ${config.method?.toUpperCase()} ${config.url}`);
+      // console.log(`🚀 [API] ${config.method?.toUpperCase()} ${config.url}`);s
     }
 
     return config;

app/store/commonreducers/auth/index.ts

@@ -1,16 +1,2 @@
-export { default as authReducer } from './reducer';
-export {
-  setUser,
-  setLocation,
-  completeProfile,
-  completeOnboarding,
-  logout,
-  clearError,
-} from './reducer';
-export type { AuthState } from './reducer';
-export {
-  loginWithPhone,
-  verifyOtp,
-  updateProfile,
-  logoutUser,
-} from './thunk';
+export * from './reducer';
+export * from './thunk';

app/store/commonreducers/auth/reducer.ts

@@ -1,129 +1,106 @@
 import { createAction, createReducer } from '@reduxjs/toolkit';
-import { User, Location } from '../../../interfaces';
-import { loginWithPhone, verifyOtp, updateProfile, logoutUser } from './thunk';
+import { VerifyOtpResponse } from '../../../interfaces';
+import { loginWithPhone, verifyOtp, logoutUser, updateProfile } from './thunk';
+import { LoginResponse, User } from '@interfaces/auth';
+
+// ─── Sync Actions ─────────────────────────────────────────────────────────────
+
+export const completeOnboarding = createAction('auth/completeOnboarding');
 
 // ─── State ───────────────────────────────────────────────────────────────────
 
 export interface AuthState {
+  loginData: LoginResponse | null;
   user: User | null;
-  isAuthenticated: boolean;
-  isLoading: boolean;
-  onboardingComplete: boolean;
+  accessToken: string | null;
+  refreshToken: string | null;
+  isNewUser: boolean | null;
   error: string | null;
+  isLoading: boolean;
 }
 
 const initialState: AuthState = {
+  loginData: null,
   user: null,
-  isAuthenticated: false,
+  accessToken: null,
+  refreshToken: null,
+  isNewUser: null,
   isLoading: false,
-  onboardingComplete: false,
   error: null,
 };
 
-// ─── Sync Actions ────────────────────────────────────────────────────────────
-
-export const setUser = createAction<User>('auth/setUser');
-export const setLocation = createAction<Location>('auth/setLocation');
-export const completeProfile = createAction<{
-  name: string;
-  email: string;
-  locationLabels: string[];
-}>('auth/completeProfile');
-export const completeOnboarding = createAction('auth/completeOnboarding');
-export const logout = createAction('auth/logout');
-export const clearError = createAction('auth/clearError');
-
 // ─── Reducer ─────────────────────────────────────────────────────────────────
 
 const authReducer = createReducer(initialState, builder => {
   builder
-    // ── Sync Actions ───────────────────────────────────────────────────────
-    .addCase(setUser, (state, action) => {
-      state.user = action.payload;
-    })
-    .addCase(setLocation, (state, _action) => {
-      if (state.user) {
-        state.user = { ...state.user };
-      }
-    })
-    .addCase(completeProfile, (state, action) => {
-      if (state.user) {
-        state.user = {
-          ...state.user,
-          name: action.payload.name,
-          email: action.payload.email,
-          locationLabels: action.payload.locationLabels,
-        };
-      }
-    })
-    .addCase(completeOnboarding, state => {
-      state.onboardingComplete = true;
-    })
-    .addCase(logout, state => {
-      state.user = null;
-      state.isAuthenticated = false;
-      state.onboardingComplete = false;
-      state.error = null;
-    })
-    .addCase(clearError, state => {
-      state.error = null;
-    })
-
-    // ── loginWithPhone ─────────────────────────────────────────────────────
+    // Login
     .addCase(loginWithPhone.pending, state => {
       state.isLoading = true;
       state.error = null;
     })
-    .addCase(loginWithPhone.fulfilled, state => {
+    .addCase(loginWithPhone.fulfilled, (state, action) => {
+      state.loginData = action.payload;
       state.isLoading = false;
+      state.error = null;
     })
     .addCase(loginWithPhone.rejected, (state, action) => {
       state.isLoading = false;
-      state.error = (action.payload as string) || 'Login failed';
+      state.error = action.payload as string;
     })
 
-    // ── verifyOtp ──────────────────────────────────────────────────────────
+    // Verify OTP
     .addCase(verifyOtp.pending, state => {
       state.isLoading = true;
       state.error = null;
     })
     .addCase(verifyOtp.fulfilled, (state, action) => {
+      const { user, accessToken, refreshToken, isNewUser } = action.payload;
+      state.user = user;
+      state.accessToken = accessToken;
+      state.refreshToken = refreshToken;
+      state.isNewUser = isNewUser;
       state.isLoading = false;
-      state.isAuthenticated = true;
-      state.user = action.payload.user;
+      state.error = null;
     })
     .addCase(verifyOtp.rejected, (state, action) => {
       state.isLoading = false;
-      state.error = (action.payload as string) || 'OTP verification failed';
+      state.error = action.payload as string;
     })
 
-    // ── updateProfile ──────────────────────────────────────────────────────
-    .addCase(updateProfile.pending, state => {
-      state.isLoading = true;
+    // Complete Onboarding — flips user.status so RootNavigator swaps to AppStack
+    .addCase(completeOnboarding, state => {
+      if (state.user) {
+        state.user = { ...state.user, status: 'ACTIVE' };
+      }
+    })
+
+    // Update Profile
+    .addCase(updateProfile.fulfilled, (state, action) => {
+      if (state.user && action.payload?.status) {
+        state.user = { ...state.user, status: action.payload.status };
+      }
+      state.isLoading = false;
       state.error = null;
     })
-    .addCase(updateProfile.fulfilled, (state, action) => {
-      state.isLoading = false;
-      state.user = action.payload.user;
-    })
-    .addCase(updateProfile.rejected, (state, action) => {
-      state.isLoading = false;
-      state.error = (action.payload as string) || 'Profile update failed';
-    })
 
-    // ── logoutUser ─────────────────────────────────────────────────────────
+    // Logout — clear all auth state
     .addCase(logoutUser.fulfilled, state => {
       state.user = null;
-      state.isAuthenticated = false;
-      state.onboardingComplete = false;
+      state.accessToken = null;
+      state.refreshToken = null;
+      state.loginData = null;
+      state.isNewUser = null;
+      state.isLoading = false;
       state.error = null;
     })
     .addCase(logoutUser.rejected, state => {
-      // Still clear state even if API fails (tokens already cleared in thunk)
+      // Even on failure, clear local auth state (tokens already cleared by thunk)
       state.user = null;
-      state.isAuthenticated = false;
-      state.onboardingComplete = false;
-      state.error = null;
+      state.accessToken = null;
+      state.refreshToken = null;
+      state.loginData = null;
+      state.isNewUser = null;
+      state.isLoading = false;
     });
 });
 

app/store/commonreducers/auth/thunk.ts

@@ -1,18 +1,23 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { loginApi, verifyOtpApi, updateProfileApi, logoutApi } from '../../../api/authApi';
+import {
+  loginApi,
+  verifyOtpApi,
+  updateProfileApi,
+  logoutApi,
+} from '../../../api/authApi';
 import { tokenManager } from '../../../services/apiClient';
 
 // ─── Login ───────────────────────────────────────────────────────────────────
 
 export const loginWithPhone = createAsyncThunk(
   'auth/loginWithPhone',
-  async (mobileNumber: string, { rejectWithValue }) => {
+  async (phone: string, { rejectWithValue }) => {
     try {
-      const response = await loginApi(mobileNumber);
+      const response = await loginApi(phone);
+      console.log(response);
       return response;
     } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : 'Login failed';
+      const message = error instanceof Error ? error.message : 'Login failed';
       return rejectWithValue(message);
     }
   },
@@ -23,11 +28,11 @@ export const loginWithPhone = createAsyncThunk(
 export const verifyOtp = createAsyncThunk(
   'auth/verifyOtp',
   async (
-    { mobileNumber, otp }: { mobileNumber: string; otp: string },
+    { phone, code, role }: { phone: string; code: string; role: string },
     { rejectWithValue },
   ) => {
     try {
-      const response = await verifyOtpApi(mobileNumber, otp);
+      const response = await verifyOtpApi(phone, code, role);
 
       // Persist tokens on successful verification
       if (response.accessToken && response.refreshToken) {
@@ -77,8 +82,7 @@ export const logoutUser = createAsyncThunk(
     } catch (error: unknown) {
       // Clear tokens even if API call fails
       await tokenManager.clearTokens();
-      const message =
-        error instanceof Error ? error.message : 'Logout failed';
+      const message = error instanceof Error ? error.message : 'Logout failed';
       return rejectWithValue(message);
     }
   },

app/store/commonreducers/cart/index.ts

@@ -1,10 +1,10 @@
 export { default as cartReducer } from './reducer';
 export {
-  addItem,
-  removeItem,
-  clearCart,
-  applyCoupon,
-  removeCoupon,
   selectCartTotal,
 } from './reducer';
+export {
+  addToCartThunk,
+  getCartThunk,
+  updateCartItemThunk,
+} from './thunk';
 export type { CartState } from './reducer';

app/store/commonreducers/cart/reducer.ts

@@ -1,54 +1,45 @@
-import { createAction, createReducer } from '@reduxjs/toolkit';
-import { CartItem, CatalogItem } from '../../../interfaces';
+import { createReducer } from '@reduxjs/toolkit';
+import { CartItem, MerchantCartGroup } from '@interfaces/cart';
+import { addToCartThunk, getCartThunk, updateCartItemThunk } from './thunk';
 
 // ─── State ───────────────────────────────────────────────────────────────────
 
 export interface CartState {
+  id: string | null;
+  customerId: string | null;
   items: CartItem[];
-  couponCode: string | null;
-  discount: number;
-  providerId: string | null;
-  providerName: string | null;
+  groupedByMerchant: MerchantCartGroup[];
+  subtotal: number;
+  totalItems: number;
+  isLoading: boolean;
+  error: string | null;
 }
 
 const initialState: CartState = {
+  id: null,
+  customerId: null,
   items: [],
-  couponCode: null,
-  discount: 0,
-  providerId: null,
-  providerName: null,
+  groupedByMerchant: [],
+  subtotal: 0,
+  totalItems: 0,
+  isLoading: false,
+  error: null,
 };
 
-// ─── Actions ─────────────────────────────────────────────────────────────────
-
-export const addItem = createAction<{
-  providerId: string;
-  providerName: string;
-  item: CatalogItem;
-}>('cart/addItem');
-
-export const removeItem = createAction<string>('cart/removeItem');
-export const clearCart = createAction('cart/clearCart');
-export const applyCoupon = createAction<string>('cart/applyCoupon');
-export const removeCoupon = createAction('cart/removeCoupon');
-
 // ─── Selector ────────────────────────────────────────────────────────────────
 
 export const selectCartTotal = (state: { cart: CartState }) => {
-  const subtotal = state.cart.items.reduce(
-    (sum, item) => sum + item.item.price * item.quantity,
-    0,
-  );
-  const deliveryFee = 40;
-  const platformFee = 10;
-  const discount = state.cart.discount;
+  const subtotal = state.cart.subtotal || 0;
+  const deliveryFee = 40; // Flat fee for now
+  const platformFee = 10; // Flat fee for now
+  const discount = 0; // Removing discount logic for now as requested
   return {
     subtotal,
     deliveryFee,
     platformFee,
     discount,
     total: Math.max(0, subtotal + deliveryFee + platformFee - discount),
-    itemCount: state.cart.items.reduce((sum, item) => sum + item.quantity, 0),
+    itemCount: state.cart.totalItems || 0,
   };
 };
 
@@ -56,58 +47,64 @@ export const selectCartTotal = (state: { cart: CartState }) => {
 
 const cartReducer = createReducer(initialState, builder => {
   builder
-    .addCase(addItem, (state, action) => {
-      const { providerId, providerName, item } = action.payload;
+    // getCartThunk
+    .addCase(getCartThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(getCartThunk.fulfilled, (state, action) => {
+      state.isLoading = false;
+      const cart = action.payload;
+      state.id = cart.id;
+      state.customerId = cart.customerId;
+      state.items = cart.items || [];
+      state.groupedByMerchant = cart.groupedByMerchant || [];
+      state.subtotal = cart.subtotal || 0;
+      state.totalItems = cart.totalItems || 0;
+    })
+    .addCase(getCartThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = (action.payload as string) || 'Failed to get cart';
+    })
 
-      // Clear cart if switching providers
-      if (state.providerId && state.providerId !== providerId) {
-        state.items = [];
-      }
+    // addToCartThunk
+    .addCase(addToCartThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(addToCartThunk.fulfilled, (state, action) => {
+      state.isLoading = false;
+      const cart = action.payload;
+      state.id = cart.id;
+      state.customerId = cart.customerId;
+      state.items = cart.items || [];
+      state.groupedByMerchant = cart.groupedByMerchant || [];
+      state.subtotal = cart.subtotal || 0;
+      state.totalItems = cart.totalItems || 0;
+    })
+    .addCase(addToCartThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = (action.payload as string) || 'Failed to add to cart';
+    })
 
-      state.providerId = providerId;
-      state.providerName = providerName;
-
-      const existing = state.items.find(i => i.item.id === item.id);
-      if (existing) {
-        existing.quantity += 1;
-      } else {
-        state.items.push({
-          id: `${providerId}-${item.id}`,
-          providerId,
-          providerName,
-          item,
-          quantity: 1,
-        });
-      }
+    // updateCartItemThunk
+    .addCase(updateCartItemThunk.pending, state => {
+      state.isLoading = true;
+      state.error = null;
     })
-    .addCase(removeItem, (state, action) => {
-      const existing = state.items.find(i => i.item.id === action.payload);
-      if (existing) {
-        if (existing.quantity > 1) {
-          existing.quantity -= 1;
-        } else {
-          state.items = state.items.filter(i => i.item.id !== action.payload);
-        }
-      }
-      if (state.items.length === 0) {
-        state.providerId = null;
-        state.providerName = null;
-      }
+    .addCase(updateCartItemThunk.fulfilled, (state, action) => {
+      state.isLoading = false;
+      const cart = action.payload;
+      state.id = cart.id;
+      state.customerId = cart.customerId;
+      state.items = cart.items || [];
+      state.groupedByMerchant = cart.groupedByMerchant || [];
+      state.subtotal = cart.subtotal || 0;
+      state.totalItems = cart.totalItems || 0;
     })
-    .addCase(clearCart, state => {
-      state.items = [];
-      state.couponCode = null;
-      state.discount = 0;
-      state.providerId = null;
-      state.providerName = null;
-    })
-    .addCase(applyCoupon, (state, action) => {
-      state.couponCode = action.payload;
-      state.discount = 50;
-    })
-    .addCase(removeCoupon, state => {
-      state.couponCode = null;
-      state.discount = 0;
+    .addCase(updateCartItemThunk.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = (action.payload as string) || 'Failed to update cart item';
     });
 });
 

app/store/commonreducers/cart/thunk.ts

@@ -1,2 +1,48 @@
-// Cart thunks — placeholder for future async cart operations
-// (e.g., syncing cart with backend, applying server-side coupons)
+import { addToCartApi, getCartApi, updateCartItem } from '@api';
+import { AddToCartRequest, CartResponse } from '@interfaces/cart';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+export const addToCartThunk = createAsyncThunk<CartResponse, AddToCartRequest>(
+  'cart/addToCart',
+  async (addToCartRequest, { rejectWithValue }) => {
+    try {
+      const response = await addToCartApi(addToCartRequest);
+      return response;
+    } catch (error: any) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to add to cart';
+      return rejectWithValue(message);
+    }
+  },
+);
+
+export const getCartThunk = createAsyncThunk<CartResponse>(
+  'cart/getCart',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await getCartApi();
+      return response;
+    } catch (error: any) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to get cart';
+      return rejectWithValue(message);
+    }
+  },
+);
+
+export const updateCartItemThunk = createAsyncThunk<
+  CartResponse,
+  { productId: string; quantity: number }
+>(
+  'cart/updateCartItem',
+  async ({ productId, quantity }, { rejectWithValue }) => {
+    try {
+      const response = await updateCartItem(productId, quantity);
+      return response;
+    } catch (error: any) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to update cart item';
+      return rejectWithValue(message);
+    }
+  },
+);

app/store/commonreducers/customerProfile/index.ts

@@ -0,0 +1,2 @@
+export * from './thunk';
+export * from './reducer';

app/store/commonreducers/customerProfile/reducer.ts

@@ -0,0 +1,32 @@
+import { CustomerResponse } from '@interfaces';
+import { createReducer } from '@reduxjs/toolkit';
+import { fetchCustomerDetails } from './thunk';
+
+export interface CustomerProfileState {
+  customerDetails: CustomerResponse | null;
+  error: string | null;
+  isLoading: boolean;
+}
+
+const initialState: CustomerProfileState = {
+  customerDetails: null,
+  error: null,
+  isLoading: false,
+};
+
+const customerProfileReducer = createReducer(initialState, builder => {
+  builder
+    .addCase(fetchCustomerDetails.pending, state => {
+      state.isLoading = true;
+      state.error = null;
+    })
+    .addCase(fetchCustomerDetails.fulfilled, (state, action) => {
+      state.isLoading = false;
+      state.customerDetails = action.payload;
+    })
+    .addCase(fetchCustomerDetails.rejected, (state, action) => {
+      state.isLoading = false;
+      state.error = action.payload as string;
+    });
+});
+export default customerProfileReducer;

app/store/commonreducers/customerProfile/thunk.ts

@@ -0,0 +1,17 @@
+import { getCustomerDetails } from '@api';
+import { CustomerResponse } from '@interfaces';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+export const fetchCustomerDetails = createAsyncThunk<CustomerResponse>(
+  'customer/fetchCustomerDetails',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await getCustomerDetails();
+      console.log(response);
+      return response;
+    } catch (error: any) {
+      console.log(error);
+      return rejectWithValue(error?.message);
+    }
+  },
+);

app/store/commonreducers/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './cart';
 export * from './order';
+export * from './customerProfile';

app/store/rootReducer.ts

@@ -1,12 +1,27 @@
 import { combineReducers } from '@reduxjs/toolkit';
-import { authReducer } from './commonreducers/auth';
+
 import { cartReducer } from './commonreducers/cart';
 import { orderReducer } from './commonreducers/order';
+import preferencesReducer from '@features/screens/preferencesScreen/reducer';
+import setLocationReducer from '@features/screens/setLocationScreen/reducer';
+import completeProfileReducer from '@features/screens/completeProfileScreen/reducer';
+import authReducer from './commonreducers/auth/reducer';
+import homeReducer from '@features/screens/homeScreen/reducer';
+import providerDetailsReducer from '@features/screens/providerDetailsScreen/reducer';
+import paymentMethodsReducer from '@features/screens/checkoutPaymentScreen/reducer';
+import customerProfileReducer from './commonreducers/customerProfile/reducer';
 
 const rootReducer = combineReducers({
   auth: authReducer,
   cart: cartReducer,
   order: orderReducer,
+  preferences: preferencesReducer,
+  setLocation: setLocationReducer,
+  completeProfile: completeProfileReducer,
+  home: homeReducer,
+  providerDetails: providerDetailsReducer,
+  paymentMethods: paymentMethodsReducer,
+  customerProfile: customerProfileReducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

app/utils/helper.ts

@@ -0,0 +1,31 @@
+export const getFullUrl = (url?: string) => {
+  const BASE_URL = 'https://db1d-202-8-116-13.ngrok-free.app';
+  if (!url) return '';
+  return url.startsWith('/') ? `${BASE_URL}${url}` : url;
+};
+
+export const formatTime = (dateString?: string) => {
+  if (!dateString) return '';
+
+  const dateObj = new Date(dateString);
+
+  // Example output: 11:57 AM
+  return dateObj.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  });
+};
+
+export const formatDate = (dateString?: string) => {
+  if (!dateString) return '';
+
+  const dateObj = new Date(dateString);
+
+  // Example output: July 8, 2026
+  return dateObj.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+};

app/utils/index.ts

@@ -0,0 +1 @@
+export * from './helper';

babel.config.js

@@ -9,6 +9,12 @@ module.exports = {
           '@components': './app/components',
           '@features/screens': './app/features/screens',
           '@theme': './app/theme',
+          '@hooks': './app/hooks',
+          '@navigation': './app/navigation',
+          '@services': './app/services',
+          '@store': './app/store',
+          '@api': './app/api',
+          '@utils': './app/utils',
         },
       },
     ],

index.js

@@ -2,4 +2,8 @@ import { AppRegistry } from 'react-native';
 import App from './app/App';
 import { name as appName } from './app.json';
 
+if (__DEV__) {
+  require('./ReactotronConfig');
+}
+
 AppRegistry.registerComponent(appName, () => App);

package.json

@@ -27,8 +27,10 @@
     "react-native-safe-area-context": "^5.8.0",
     "react-native-screens": "^4.25.2",
     "react-native-svg": "^15.15.5",
+    "react-native-uuid": "^2.0.4",
     "react-native-worklets": "^0.10.0",
     "react-redux": "^9.3.0",
+    "reactotron-react-native": "^5.2.0",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0"
   },

tsconfig.json

@@ -9,7 +9,21 @@
       "@features/screens": ["./app/features/screens"],
       "@features/screens/*": ["./app/features/screens/*"],
       "@theme": ["./app/theme"],
-      "@theme/*": ["./app/theme/*"]
+      "@theme/*": ["./app/theme/*"],
+      "@api": ["./app/api"],
+      "@api/*": ["./app/api/*"],
+      "@store": ["./app/store"],
+      "@store/*": ["./app/store/*"],
+      "@interfaces": ["./app/interfaces"],
+      "@interfaces/*": ["./app/interfaces/*"],
+      "@navigation": ["./app/navigation"],
+      "@navigation/*": ["./app/navigation/*"],
+      "@hooks": ["./app/hooks"],
+      "@hooks/*": ["./app/hooks/*"],
+      "@utils": ["./app/utils"],
+      "@utils/*": ["./app/utils/*"],
+      "@services": ["./app/services"],
+      "@services/*": ["./app/services/*"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx"],