Fix active orders

src/components/DeliveryMap.tsx

@@ -3,6 +3,9 @@ import MapView, { Marker, Polyline } from 'react-native-maps';
 import { StyleSheet, View, ActivityIndicator, ViewStyle } from 'react-native';
 import { Config } from '../config';
 import { Colors } from '../styles/theme';
+import PoppinsText from '../components/PoppinsText';
+import { MapPinIcon, UserIcon } from 'react-native-heroicons/solid';
+import { FontAwesome5 } from '@expo/vector-icons';
 
 interface DeliveryMapProps {
   deliveryState: number;
@@ -25,7 +28,7 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
   const [customerRouteCoordinates, setCustomerRouteCoordinates] = useState<
     { latitude: number; longitude: number }[]
   >([]);
-  const [isLoading, setIsLoading] = useState(true); // Estado de carga
+  const [, setIsLoading] = useState(true); // Estado de carga
 
   // Obtener la ruta desde Google Maps Directions API
   const fetchRoute = async (
@@ -144,52 +147,52 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
     return points;
   };
 
-  if (isLoading) {
-    // Mostrar un indicador de carga mientras se obtienen los datos
+  if (
+    // Solo espera si faltan datos críticos
+    branchLocation.latitude === 0 ||
+    branchLocation.longitude === 0 ||
+    customerLocation.latitude === 0 ||
+    customerLocation.longitude === 0
+  ) {
     return (
       <View style={[styles.loadingContainer, style]}>
         <ActivityIndicator size="large" color={Colors.primary} />
       </View>
     );
   }
 
+  // Mostrar el mapa aunque deliveryLocation sea null
   return (
     <View style={[styles.container, style]}>
       <MapView
-        style={StyleSheet.absoluteFillObject} // Asegura que el mapa ocupe todo el contenedor
+        style={StyleSheet.absoluteFillObject}
         initialRegion={{
           latitude: branchLocation.latitude || 0,
           longitude: branchLocation.longitude || 0,
           latitudeDelta: 0.05,
           longitudeDelta: 0.05,
         }}
       >
-        {/* Mostrar la ubicación del delivery */}
+        {/* Mostrar la ubicación del delivery si existe */}
         {deliveryLocation && (
-          <Marker
-            coordinate={deliveryLocation}
-            title="Tu ubicación"
-            pinColor="red"
-          />
+          <Marker coordinate={deliveryLocation} title="Repartidor">
+            <FontAwesome5 name="motorcycle" size={26} color={Colors.primary} />
+          </Marker>
         )}
 
         {/* Mostrar la ubicación de la sucursal */}
         {branchLocation.latitude !== 0 && branchLocation.longitude !== 0 && (
-          <Marker
-            coordinate={branchLocation}
-            title="Sucursal de origen"
-            pinColor="blue"
-          />
+          <Marker coordinate={branchLocation} title="Sucursal de origen">
+            <MapPinIcon size={32} color={Colors.primary} />
+          </Marker>
         )}
 
         {/* Mostrar la ubicación del cliente */}
         {customerLocation.latitude !== 0 &&
           customerLocation.longitude !== 0 && (
-            <Marker
-              coordinate={customerLocation}
-              title="Ubicación del cliente"
-              pinColor="green"
-            />
+            <Marker coordinate={customerLocation} title="Ubicación del cliente">
+              <UserIcon size={32} color={Colors.primary} />
+            </Marker>
           )}
 
         {/* Mostrar la ruta hacia la sucursal */}
@@ -210,6 +213,30 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
           />
         )}
       </MapView>
+      {!deliveryLocation && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 32,
+            left: 16,
+            right: 16,
+            alignItems: 'center',
+            backgroundColor: Colors.textWhite,
+            borderRadius: 16,
+            paddingVertical: 12,
+            paddingHorizontal: 20,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.15,
+            shadowRadius: 6,
+            elevation: 4,
+          }}
+        >
+          <PoppinsText style={{ color: Colors.primary }}>
+            Esperando ubicación del repartidor...
+          </PoppinsText>
+        </View>
+      )}
     </View>
   );
 };

src/components/HistoryMap.tsx

@@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react';
 import MapView, { Marker, Polyline } from 'react-native-maps';
 import { StyleSheet, View, Alert, ViewStyle } from 'react-native';
 import { Config } from '../config';
+import { Colors } from '../styles/theme';
+
+import { MapPinIcon, UserIcon } from 'react-native-heroicons/solid';
+import { FontAwesome5 } from '@expo/vector-icons';
 
 interface HistoryMapProps {
   deliveryLocation: { latitude: number; longitude: number };
@@ -131,25 +135,19 @@ const HistoryMap: React.FC<HistoryMapProps> = ({
         }}
       >
         {/* Mostrar la ubicación del delivery */}
-        <Marker
-          coordinate={deliveryLocation}
-          title="Ubicación inicial del delivery"
-          pinColor="red"
-        />
+        <Marker coordinate={deliveryLocation} title="Repartidor">
+          <FontAwesome5 name="motorcycle" size={26} color={Colors.primary} />
+        </Marker>
 
         {/* Mostrar la ubicación de la sucursal */}
-        <Marker
-          coordinate={branchLocation}
-          title="Sucursal de origen"
-          pinColor="blue"
-        />
+        <Marker coordinate={branchLocation} title="Sucursal de origen">
+          <MapPinIcon size={32} color={Colors.primary} />
+        </Marker>
 
         {/* Mostrar la ubicación del cliente */}
-        <Marker
-          coordinate={customerLocation}
-          title="Ubicación del cliente"
-          pinColor="green"
-        />
+        <Marker coordinate={customerLocation} title="Ubicación del cliente">
+          <UserIcon size={32} color={Colors.primary} />
+        </Marker>
 
         {/* Mostrar la ruta hacia la sucursal */}
         {routeToBranch.length > 0 && (

src/components/OrderBadge.tsx

@@ -20,7 +20,7 @@ const STATUS_COLORS: Record<string, string> = {
 
 const STATUS_LABELS: Record<string, string> = {
   requested: 'Pendiente',
-  ready_for_pickup: 'A Enviar',
+  ready_for_pickup: 'A Retirar',
   completed: 'Entregado',
   canceled: 'Cancelado',
   in_progress: 'En Proceso',

src/components/VerticalStepper.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors, FontSizes } from '../styles/theme';
+import PoppinsText from './PoppinsText';
+
+interface VerticalStepperProps {
+  steps: {
+    title: string;
+    description: string;
+  }[];
+  currentStep: number;
+}
+
+const VerticalStepper: React.FC<VerticalStepperProps> = ({
+  steps,
+  currentStep,
+}) => {
+  return (
+    <View style={styles.container}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep - 1;
+        const isActive = index === currentStep - 1;
+
+        return (
+          <View key={index} style={styles.stepContainer}>
+            <View style={styles.stepIndicatorContainer}>
+              {/* Línea superior (excepto para el primer paso) */}
+              {index > 0 && (
+                <View
+                  style={[
+                    styles.connector,
+                    isCompleted || isActive
+                      ? styles.completedConnector
+                      : styles.pendingConnector,
+                  ]}
+                />
+              )}
+
+              {/* Círculo del paso */}
+              <View
+                style={[
+                  styles.stepIndicator,
+                  isCompleted && styles.completedStep,
+                  isActive && styles.activeStep,
+                ]}
+              ></View>
+
+              {/* Línea inferior (excepto para el último paso) */}
+              {index < steps.length - 1 && (
+                <View
+                  style={[
+                    styles.connector,
+                    isCompleted
+                      ? styles.completedConnector
+                      : styles.pendingConnector,
+                    { top: 0, bottom: 0 },
+                  ]}
+                />
+              )}
+            </View>
+            <View style={styles.stepContent}>
+              <PoppinsText
+                style={[
+                  isActive && styles.activeStepTitle,
+                  isCompleted && styles.activeStepTitle,
+                ]}
+              >
+                {step.title}
+              </PoppinsText>
+              {step.description && (
+                <PoppinsText style={styles.stepDescription}>
+                  {step.description}
+                </PoppinsText>
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 0,
+  },
+  stepContainer: {
+    flexDirection: 'row',
+  },
+  stepIndicatorContainer: {
+    width: 24,
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  stepIndicator: {
+    width: 13,
+    height: 13,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.gray_500,
+    zIndex: 1,
+  },
+  completedStep: {
+    backgroundColor: Colors.semanticSuccess,
+    borderColor: Colors.semanticSuccess,
+  },
+  activeStep: {
+    backgroundColor: Colors.semanticSuccess,
+  },
+  connector: {
+    position: 'absolute',
+    width: 2,
+  },
+  completedConnector: {
+    backgroundColor: Colors.semanticSuccess,
+  },
+  pendingConnector: {
+    backgroundColor: Colors.gray_100,
+  },
+  stepContent: {
+    flex: 1,
+    marginBottom: 13,
+  },
+  activeStepTitle: {
+    color: Colors.semanticSuccess,
+  },
+  stepDescription: {
+    color: Colors.secondaryGray,
+    fontSize: FontSizes.c3.size,
+  },
+});
+
+export default VerticalStepper;

src/lib/socketUrl.ts

@@ -1,5 +1,4 @@
 const devModeFlag = process.env.PHARMATECH_DEV_MODE === 'true';
-
 const devUrl = 'https://api-dev-8jfx.onrender.com';
 const prodUrl = 'https://api-d8h5.onrender.com';