From 99426529447b0a3c2f6fdd1b1428167da1be2d84 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Sun, 18 May 2025 00:12:08 -0400
Subject: [PATCH 01/15] updated websocket

---
 src/lib/socketUrl.ts                |  4 +--
 src/screens/ActiveOrdersScreen.tsx  |  6 ----
 src/screens/OrderTrackingScreen.tsx | 55 +++++++++++++++++------------
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/lib/socketUrl.ts b/src/lib/socketUrl.ts
index 65016c6..7788574 100644
--- a/src/lib/socketUrl.ts
+++ b/src/lib/socketUrl.ts
@@ -1,5 +1,5 @@
 const devModeFlag = process.env.PHARMATECH_DEV_MODE === 'true';
-const devUrl = 'ws://api-dev-8jfx.onrender.com';
-const prodUrl = 'ws://api-d8h5.onrender.com';
+const devUrl = 'https://api-dev-8jfx.onrender.com';
+const prodUrl = 'https://api-d8h5.onrender.com';
 
 export const SOCKET_URL = devModeFlag ? devUrl : prodUrl;
diff --git a/src/screens/ActiveOrdersScreen.tsx b/src/screens/ActiveOrdersScreen.tsx
index 51bd3eb..35f2918 100644
--- a/src/screens/ActiveOrdersScreen.tsx
+++ b/src/screens/ActiveOrdersScreen.tsx
@@ -4,7 +4,6 @@ import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useRouter } from 'expo-router';
 import Alert from '../components/Alerts';
-import Button from '../components/Button';
 import { OrderResponse } from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { truncateString } from '../utils/commons';
@@ -152,11 +151,6 @@ const ActiveOrdersScreen = () => {
                       Ver detalles
                     </PoppinsText>
                   </TouchableOpacity>
-                  <Button
-                    title="Re ordenar"
-                    size="small"
-                    style={{ paddingVertical: 0 }}
-                  />
                 </View>
               </View>
             </View>
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index 47333a6..fbaa3e2 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -18,7 +18,7 @@ import {
   BuildingStorefrontIcon,
   MapPinIcon,
 } from 'react-native-heroicons/solid';
-import io from 'socket.io-client';
+import { io } from 'socket.io-client';
 import { SOCKET_URL } from '../lib/socketUrl';
 
 const OrderTrackingScreen = () => {
@@ -31,7 +31,9 @@ const OrderTrackingScreen = () => {
   const [showErrorAlert, setShowErrorAlert] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+
   const [isConnected, setIsConnected] = useState(false);
+  const [transport, setTransport] = useState('N/A');
 
   useEffect(() => {
     const fetchOrder = async () => {
@@ -51,39 +53,50 @@ const OrderTrackingScreen = () => {
     };
     fetchOrder();
 
-    const socket = io(SOCKET_URL, {
-      transportOptions: {
-        polling: {
-          extraHeaders: {
-            authorization: `Bearer ${SecureStore.getItemAsync('auth_token')}`,
-          },
-        },
-      },
-    });
-
     if (id) {
       fetchOrder();
-      if (socket.connected) {
-        onConnect();
-      }
+
+      const socket = io(SOCKET_URL, {
+        transportOptions: {
+          polling: {
+            extraHeaders: {
+              authorization: `Bearer ${SecureStore.getItemAsync('auth_token')}`,
+            },
+          },
+        },
+        transports: ['websocket'],
+        reconnection: true,
+        reconnectionAttempts: Infinity,
+        reconnectionDelay: 1000,
+        reconnectionDelayMax: 5000,
+      });
 
       function onConnect() {
         setIsConnected(true);
+        console.log('[WS] Conectado con ID:', socket.id);
         console.log('Connected to socket: ', isConnected);
-        socket.on('order', (order: OrderDetailedResponse) => {
-          handleDeliveryStatus(order);
+        setTransport(socket.io.engine.transport.name);
+
+        socket.on('order', (order) => {
+          console.log(order);
         });
       }
 
       function onDisconnect() {
         setIsConnected(false);
+        console.log(transport);
+        setTransport('N/A');
       }
 
+      socket.on('connect_error', (err) =>
+        console.log('[WS] Error en handshake:', err.message),
+      );
+
       socket.on('connect', onConnect);
       socket.on('disconnect', onDisconnect);
       return () => {
-        socket.off('connect', onConnect);
-        socket.off('disconnect', onDisconnect);
+        //socket.off('connect', onConnect);
+        //socket.off('disconnect', onDisconnect);
       };
     }
   }, []);
@@ -96,10 +109,6 @@ const OrderTrackingScreen = () => {
     );
   }
 
-  const handleDeliveryStatus = (e: OrderDetailedResponse) => {
-    console.log('Received message: ', e);
-  };
-
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <View style={styles.alertContainer}>
@@ -318,7 +327,7 @@ const OrderTrackingScreen = () => {
                         Teléfono de Contacto:
                       </PoppinsText>
                       <PoppinsText>
-                        +{order?.orderDeliveries[0].employee?.phoneNumber}
+                        {'+' + order?.orderDeliveries[0].employee?.phoneNumber}
                       </PoppinsText>
                     </View>
                   </View>

From 96c0b3fc82c6063da5ec64812150fbb5f0814efe Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Sat, 24 May 2025 23:40:44 -0400
Subject: [PATCH 02/15] Update @pharmatech/sdk to version 0.4.19 and adjust
 styles in OrderTrackingScreen

---
 package-lock.json                   | 9 ++++-----
 package.json                        | 2 +-
 src/screens/OrderTrackingScreen.tsx | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95c5fb0..4b5246b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.2.0",
       "dependencies": {
         "@expo-google-fonts/poppins": "^0.2.3",
-        "@pharmatech/sdk": "^0.4.11",
+        "@pharmatech/sdk": "^0.4.19",
         "@ptomasroos/react-native-multi-slider": "^2.2.2",
         "@react-native-community/slider": "^4.5.6",
         "@reduxjs/toolkit": "^2.6.1",
@@ -3592,10 +3592,9 @@
       }
     },
     "node_modules/@pharmatech/sdk": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/@pharmatech/sdk/-/sdk-0.4.11.tgz",
-      "integrity": "sha512-iJChZa3uTsQrz6kLZJfnwrBTZOe2o6azPlwk/ByiMxA5V7UlPfVp8sDz4EIppYbBl2+uM4sLMGnQmiWatKEECA==",
-      "license": "MIT",
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/@pharmatech/sdk/-/sdk-0.4.19.tgz",
+      "integrity": "sha512-ZiYsoiVRtDjxs5eDqtUAZrEsUWMEZ9+q5XpSOSHt+gTcZLBzntIOO21ZyAm6ONXyRO6EORsOy2vlnnOv87Cs0g==",
       "dependencies": {
         "axios": "^1.8.1"
       }
diff --git a/package.json b/package.json
index 62c765a..6475559 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/poppins": "^0.2.3",
-    "@pharmatech/sdk": "^0.4.11",
+    "@pharmatech/sdk": "^0.4.19",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/slider": "^4.5.6",
     "@reduxjs/toolkit": "^2.6.1",
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index fbaa3e2..d5dfbf5 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -288,7 +288,7 @@ const OrderTrackingScreen = () => {
                     <View style={{ marginRight: 10 }}>
                       <MapPinIcon color={Colors.primary} />
                     </View>
-                    <View>
+                    <View style={{ padding: 1 }}>
                       <PoppinsText style={{ marginBottom: 10 }}>
                         Dirección de Entrega:
                       </PoppinsText>

From f52a55fca384a3b1dea6c533238e7147f00c4651 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Tue, 27 May 2025 20:52:35 -0400
Subject: [PATCH 03/15] Add VerticalStepper component and integrate it into
 OrderTrackingScreen

---
 src/components/VerticalStepper.tsx  | 134 ++++++++++++++++++++++
 src/screens/OrderTrackingScreen.tsx | 168 ++++++++++++----------------
 2 files changed, 205 insertions(+), 97 deletions(-)
 create mode 100644 src/components/VerticalStepper.tsx

diff --git a/src/components/VerticalStepper.tsx b/src/components/VerticalStepper.tsx
new file mode 100644
index 0000000..2c983ab
--- /dev/null
+++ b/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;
+        const isActive = index === currentStep;
+
+        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;
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index d5dfbf5..e219861 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -4,7 +4,7 @@ import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useLocalSearchParams } from 'expo-router';
 import Alert from '../components/Alerts';
-import { OrderDetailedResponse } from '@pharmatech/sdk';
+import { OrderDetailedResponse, OrderStatus } from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { formatDate, truncateString } from '../utils/commons';
 import * as SecureStore from 'expo-secure-store';
@@ -18,8 +18,9 @@ import {
   BuildingStorefrontIcon,
   MapPinIcon,
 } from 'react-native-heroicons/solid';
-import { io } from 'socket.io-client';
+import io from 'socket.io-client';
 import { SOCKET_URL } from '../lib/socketUrl';
+import VerticalStepper from '../components/VerticalStepper';
 
 const OrderTrackingScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -31,15 +32,13 @@ const OrderTrackingScreen = () => {
   const [showErrorAlert, setShowErrorAlert] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-
-  const [isConnected, setIsConnected] = useState(false);
-  const [transport, setTransport] = useState('N/A');
+  const [orderStatus, setOrderStatus] = useState('');
 
   useEffect(() => {
     const fetchOrder = async () => {
       try {
         const order = await UserService.getOrder(id);
-
+        console.log(order);
         if (order.success) {
           setOrder(order.data);
         }
@@ -57,6 +56,8 @@ const OrderTrackingScreen = () => {
       fetchOrder();
 
       const socket = io(SOCKET_URL, {
+        autoConnect: false,
+        transports: ['polling'],
         transportOptions: {
           polling: {
             extraHeaders: {
@@ -64,40 +65,39 @@ const OrderTrackingScreen = () => {
             },
           },
         },
-        transports: ['websocket'],
-        reconnection: true,
-        reconnectionAttempts: Infinity,
-        reconnectionDelay: 1000,
-        reconnectionDelayMax: 5000,
       });
 
-      function onConnect() {
-        setIsConnected(true);
-        console.log('[WS] Conectado con ID:', socket.id);
-        console.log('Connected to socket: ', isConnected);
-        setTransport(socket.io.engine.transport.name);
-
-        socket.on('order', (order) => {
-          console.log(order);
-        });
+      function onOrderUpdated(order: { orderId: string; status: OrderStatus }) {
+        setOrderStatus(order.status);
+        console.log('Estado de la orrrrdennnn: ', order.status);
       }
 
-      function onDisconnect() {
-        setIsConnected(false);
-        console.log(transport);
-        setTransport('N/A');
-      }
+      socket.connect();
+      socket.on('orderUpdated', onOrderUpdated);
 
       socket.on('connect_error', (err) =>
         console.log('[WS] Error en handshake:', err.message),
       );
 
+      socket.on('connect', () =>
+        console.log('[WS] Conectado con ID:', socket.id),
+      );
+      socket.on('disconnect', (reason) =>
+        console.log('[WS] Desconectado por:', reason),
+      );
+
+      return () => {
+        socket.off('orderUpdated', onOrderUpdated);
+        socket.disconnect();
+      };
+
+      /* sss
       socket.on('connect', onConnect);
       socket.on('disconnect', onDisconnect);
       return () => {
         //socket.off('connect', onConnect);
         //socket.off('disconnect', onDisconnect);
-      };
+      }; */
     }
   }, []);
 
@@ -109,6 +109,46 @@ const OrderTrackingScreen = () => {
     );
   }
 
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: '2-digit',
+    month: 'long',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  };
+
+  const steps = [
+    {
+      title: 'Orden Confirmada',
+      description: order?.orderDeliveries
+        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
+            'es-ES',
+            dateFormat,
+          )
+        : '',
+    },
+    {
+      title:
+        order?.type === 'delivery' ? 'Repartidor en camino' : 'En preparación',
+      description: order?.orderDeliveries
+        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
+            'es-ES',
+            dateFormat,
+          )
+        : '',
+    },
+    {
+      title:
+        order?.type === 'delivery' ? 'Pedido entregado' : 'Listo para recoger',
+      description: order?.orderDeliveries
+        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
+            'es-ES',
+            dateFormat,
+          )
+        : '',
+    },
+  ];
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <View style={styles.alertContainer}>
@@ -161,7 +201,7 @@ const OrderTrackingScreen = () => {
                 <PoppinsText style={{ color: Colors.semanticSuccess }}>
                   Entrega estimada:{' '}
                   {new Date(
-                    order?.orderDeliveries[0].estimatedTime,
+                    order?.orderDeliveries[0]?.estimatedTime,
                   ).toLocaleString('es-ES', {
                     day: '2-digit',
                     month: 'long',
@@ -177,7 +217,7 @@ const OrderTrackingScreen = () => {
                 <PoppinsText style={{ color: Colors.semanticSuccess }}>
                   Pickup:{' '}
                   {new Date(
-                    order?.orderDeliveries[0].estimatedTime,
+                    order?.orderDeliveries[0]?.estimatedTime,
                   ).toLocaleString('es-ES', {
                     day: '2-digit',
                     month: 'long',
@@ -189,75 +229,9 @@ const OrderTrackingScreen = () => {
               </>
             )}
           </View>
+          <PoppinsText>{orderStatus}</PoppinsText>
           <View style={{ marginVertical: 20 }}>
-            <View>
-              <PoppinsText>Orden Confirmada</PoppinsText>
-              <PoppinsText
-                style={{
-                  color: Colors.secondaryGray,
-                  fontSize: FontSizes.c3.size,
-                }}
-              >
-                {new Date(order.orderDeliveries[0].createdAt).toLocaleString(
-                  'es-ES',
-                  {
-                    day: '2-digit',
-                    month: 'long',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    hour12: true,
-                  },
-                )}
-              </PoppinsText>
-            </View>
-            <View style={{ marginVertical: 15 }}>
-              <PoppinsText>
-                {order.type === 'delivery'
-                  ? 'Repartidor en camino'
-                  : 'En preparación'}
-              </PoppinsText>
-              <PoppinsText
-                style={{
-                  color: Colors.secondaryGray,
-                  fontSize: FontSizes.c3.size,
-                }}
-              >
-                {new Date(order.orderDeliveries[0].createdAt).toLocaleString(
-                  'es-ES',
-                  {
-                    day: '2-digit',
-                    month: 'long',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    hour12: true,
-                  },
-                )}
-              </PoppinsText>
-            </View>
-            <View>
-              <PoppinsText>
-                {order.type === 'delivery'
-                  ? 'Pedido entregado'
-                  : 'Listo para recoger'}
-              </PoppinsText>
-              <PoppinsText
-                style={{
-                  color: Colors.secondaryGray,
-                  fontSize: FontSizes.c3.size,
-                }}
-              >
-                {new Date(order.orderDeliveries[0].createdAt).toLocaleString(
-                  'es-ES',
-                  {
-                    day: '2-digit',
-                    month: 'long',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    hour12: true,
-                  },
-                )}
-              </PoppinsText>
-            </View>
+            <VerticalStepper steps={steps} currentStep={0} />
           </View>
           <View>
             <View
@@ -327,7 +301,7 @@ const OrderTrackingScreen = () => {
                         Teléfono de Contacto:
                       </PoppinsText>
                       <PoppinsText>
-                        {'+' + order?.orderDeliveries[0].employee?.phoneNumber}
+                        {order?.orderDeliveries[0].employee?.phoneNumber}
                       </PoppinsText>
                     </View>
                   </View>

From 74740a61a194135aa7fa1d33f9708ba4c871e516 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 13:16:15 -0400
Subject: [PATCH 04/15] Update @pharmatech/sdk to version 0.4.21 and enhance
 OrderTrackingScreen with refresh functionality and step tracking

---
 package-lock.json                   |  8 +--
 package.json                        |  2 +-
 src/components/VerticalStepper.tsx  |  4 +-
 src/screens/OrderTrackingScreen.tsx | 98 ++++++++++++++++++++---------
 4 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b5246b..013f241 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.2.0",
       "dependencies": {
         "@expo-google-fonts/poppins": "^0.2.3",
-        "@pharmatech/sdk": "^0.4.19",
+        "@pharmatech/sdk": "^0.4.21",
         "@ptomasroos/react-native-multi-slider": "^2.2.2",
         "@react-native-community/slider": "^4.5.6",
         "@reduxjs/toolkit": "^2.6.1",
@@ -3592,9 +3592,9 @@
       }
     },
     "node_modules/@pharmatech/sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/@pharmatech/sdk/-/sdk-0.4.19.tgz",
-      "integrity": "sha512-ZiYsoiVRtDjxs5eDqtUAZrEsUWMEZ9+q5XpSOSHt+gTcZLBzntIOO21ZyAm6ONXyRO6EORsOy2vlnnOv87Cs0g==",
+      "version": "0.4.21",
+      "resolved": "https://registry.npmjs.org/@pharmatech/sdk/-/sdk-0.4.21.tgz",
+      "integrity": "sha512-fxyXlgKN3qLxuGVg6bmRS5DhqfLOLsCYazffax5x0iYFFBIQHQBVRLltm5h84jvOEM0oA7ipD08VVXWMyBj/vQ==",
       "dependencies": {
         "axios": "^1.8.1"
       }
diff --git a/package.json b/package.json
index 6475559..b61baa4 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/poppins": "^0.2.3",
-    "@pharmatech/sdk": "^0.4.19",
+    "@pharmatech/sdk": "^0.4.21",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/slider": "^4.5.6",
     "@reduxjs/toolkit": "^2.6.1",
diff --git a/src/components/VerticalStepper.tsx b/src/components/VerticalStepper.tsx
index 2c983ab..b770eb7 100644
--- a/src/components/VerticalStepper.tsx
+++ b/src/components/VerticalStepper.tsx
@@ -18,8 +18,8 @@ const VerticalStepper: React.FC<VerticalStepperProps> = ({
   return (
     <View style={styles.container}>
       {steps.map((step, index) => {
-        const isCompleted = index < currentStep;
-        const isActive = index === currentStep;
+        const isCompleted = index < currentStep - 1;
+        const isActive = index === currentStep - 1;
 
         return (
           <View key={index} style={styles.stepContainer}>
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index e219861..ace7010 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  ActivityIndicator,
+  RefreshControl,
+} from 'react-native';
 import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useLocalSearchParams } from 'expo-router';
@@ -32,26 +38,50 @@ const OrderTrackingScreen = () => {
   const [showErrorAlert, setShowErrorAlert] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [orderStatus, setOrderStatus] = useState('');
+  const [step, setStep] = useState(0);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  useEffect(() => {
-    const fetchOrder = async () => {
-      try {
-        const order = await UserService.getOrder(id);
-        console.log(order);
-        if (order.success) {
-          setOrder(order.data);
-        }
-      } catch (error) {
-        console.log(error);
-        setErrorMessage('Ocurrió un error');
-        setShowErrorAlert(true);
-      } finally {
-        setLoading(false);
+  const changeTrackingStatus = (status: OrderStatus) => {
+    switch (status) {
+      case OrderStatus.REQUESTED:
+      case OrderStatus.CANCELED:
+        setStep(0);
+        break;
+      case OrderStatus.APPROVED:
+        setStep(1);
+        break;
+      case OrderStatus.IN_PROGRESS:
+      case OrderStatus.READY_FOR_PICKUP:
+        setStep(2);
+        break;
+      case OrderStatus.COMPLETED:
+        setStep(3);
+        break;
+      default:
+        setStep(0);
+        break;
+    }
+  };
+
+  const fetchOrder = async () => {
+    try {
+      const order = await UserService.getOrder(id);
+      console.log(order);
+      if (order.success) {
+        setOrder(order.data);
+        changeTrackingStatus(order.data.status);
       }
-    };
-    fetchOrder();
+    } catch (error) {
+      console.log(error);
+      setErrorMessage('Ocurrió un error');
+      setShowErrorAlert(true);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
 
+  useEffect(() => {
     if (id) {
       fetchOrder();
 
@@ -68,8 +98,9 @@ const OrderTrackingScreen = () => {
       });
 
       function onOrderUpdated(order: { orderId: string; status: OrderStatus }) {
-        setOrderStatus(order.status);
-        console.log('Estado de la orrrrdennnn: ', order.status);
+        if (order.orderId === id) {
+          changeTrackingStatus(order.status);
+        }
       }
 
       socket.connect();
@@ -90,14 +121,6 @@ const OrderTrackingScreen = () => {
         socket.off('orderUpdated', onOrderUpdated);
         socket.disconnect();
       };
-
-      /* sss
-      socket.on('connect', onConnect);
-      socket.on('disconnect', onDisconnect);
-      return () => {
-        //socket.off('connect', onConnect);
-        //socket.off('disconnect', onDisconnect);
-      }; */
     }
   }, []);
 
@@ -109,6 +132,11 @@ const OrderTrackingScreen = () => {
     );
   }
 
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await fetchOrder();
+  };
+
   const dateFormat: Intl.DateTimeFormatOptions = {
     day: '2-digit',
     month: 'long',
@@ -150,7 +178,16 @@ const OrderTrackingScreen = () => {
   ];
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      contentContainerStyle={styles.container}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          colors={[Colors.primary]}
+        />
+      }
+    >
       <View style={styles.alertContainer}>
         {showErrorAlert && (
           <Alert
@@ -229,9 +266,8 @@ const OrderTrackingScreen = () => {
               </>
             )}
           </View>
-          <PoppinsText>{orderStatus}</PoppinsText>
           <View style={{ marginVertical: 20 }}>
-            <VerticalStepper steps={steps} currentStep={0} />
+            <VerticalStepper steps={steps} currentStep={step} />
           </View>
           <View>
             <View

From a2435fb2b540be2ae4ad4502e75f527ce1dde61e Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 15:28:10 -0400
Subject: [PATCH 05/15] Add refresh functionality to ActiveOrdersScreen and
 update OrderTrackingScreen to handle delivery status

---
 src/screens/ActiveOrdersScreen.tsx  | 69 +++++++++++++++++++----------
 src/screens/OrderTrackingScreen.tsx | 43 ++++++++++--------
 2 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/src/screens/ActiveOrdersScreen.tsx b/src/screens/ActiveOrdersScreen.tsx
index 35f2918..42c9e0e 100644
--- a/src/screens/ActiveOrdersScreen.tsx
+++ b/src/screens/ActiveOrdersScreen.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  RefreshControl,
+} from 'react-native';
 import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useRouter } from 'expo-router';
@@ -30,37 +36,52 @@ const ActiveOrdersScreen = () => {
   const [showInfoAlert, setShowInfoAlert] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const router = useRouter();
+  const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  useEffect(() => {
-    const fetchActiveOrders = async () => {
-      try {
-        const order = await UserService.getUserOrders();
-        if (order.success) {
-          const activeOrders = order.data.results.filter(
-            (o) =>
-              o.status === 'requested' ||
-              o.status === 'approved' ||
-              o.status === 'ready_for_pickup' ||
-              o.status === 'in_progress',
-          );
-          if (activeOrders.length > 0) {
-            setActiveOrdersList(activeOrders);
-          } else {
-            setShowInfoAlert(true);
-          }
+  const fetchActiveOrders = async () => {
+    try {
+      const order = await UserService.getUserOrders();
+      if (order.success) {
+        const activeOrders = order.data.results.filter(
+          (o) =>
+            o.status === 'requested' ||
+            o.status === 'approved' ||
+            o.status === 'ready_for_pickup' ||
+            o.status === 'in_progress',
+        );
+        if (activeOrders.length > 0) {
+          setActiveOrdersList(activeOrders);
+        } else {
+          setShowInfoAlert(true);
         }
-      } catch (error) {
-        console.log(error);
-        setErrorMessage('Ha ocurrido un error');
-        setShowErrorAlert(true);
       }
-    };
+    } catch (error) {
+      console.log(error);
+      setErrorMessage('Ha ocurrido un error');
+      setShowErrorAlert(true);
+    }
+  };
 
+  useEffect(() => {
     fetchActiveOrders();
   }, []);
 
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await fetchActiveOrders();
+  };
+
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      contentContainerStyle={styles.container}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          colors={[Colors.primary]}
+        />
+      }
+    >
       <View style={styles.alertContainer}>
         {showErrorAlert && (
           <Alert
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index ace7010..97b27af 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -10,7 +10,11 @@ import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useLocalSearchParams } from 'expo-router';
 import Alert from '../components/Alerts';
-import { OrderDetailedResponse, OrderStatus } from '@pharmatech/sdk';
+import {
+  OrderDeliveryStatus,
+  OrderDetailedResponse,
+  OrderStatus,
+} from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { formatDate, truncateString } from '../utils/commons';
 import * as SecureStore from 'expo-secure-store';
@@ -27,6 +31,7 @@ import {
 import io from 'socket.io-client';
 import { SOCKET_URL } from '../lib/socketUrl';
 import VerticalStepper from '../components/VerticalStepper';
+import { DeliveryService } from '../services/delivery';
 
 const OrderTrackingScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -40,6 +45,7 @@ const OrderTrackingScreen = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const [step, setStep] = useState(0);
   const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [userAddress, setUserAddress] = useState('');
 
   const changeTrackingStatus = (status: OrderStatus) => {
     switch (status) {
@@ -68,6 +74,19 @@ const OrderTrackingScreen = () => {
       const order = await UserService.getOrder(id);
       console.log(order);
       if (order.success) {
+        if (
+          order.data.orderDeliveries &&
+          order.data.orderDeliveries.length > 0 &&
+          order.data.orderDeliveries[0].deliveryStatus ===
+            OrderDeliveryStatus.ASSIGNED
+        ) {
+          const delivery = await DeliveryService.getOrderDetails(
+            order.data.orderDeliveries[0].id,
+          );
+          setUserAddress(
+            delivery.address.adress + '. \n' + delivery.address.referencePoint,
+          );
+        }
         setOrder(order.data);
         changeTrackingStatus(order.data.status);
       }
@@ -149,30 +168,21 @@ const OrderTrackingScreen = () => {
     {
       title: 'Orden Confirmada',
       description: order?.orderDeliveries
-        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
-            'es-ES',
-            dateFormat,
-          )
+        ? new Date(order?.updatedAt).toLocaleString('es-ES', dateFormat)
         : '',
     },
     {
       title:
         order?.type === 'delivery' ? 'Repartidor en camino' : 'En preparación',
       description: order?.orderDeliveries
-        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
-            'es-ES',
-            dateFormat,
-          )
+        ? new Date(order?.updatedAt).toLocaleString('es-ES', dateFormat)
         : '',
     },
     {
       title:
         order?.type === 'delivery' ? 'Pedido entregado' : 'Listo para recoger',
       description: order?.orderDeliveries
-        ? new Date(order?.orderDeliveries[0]?.createdAt).toLocaleString(
-            'es-ES',
-            dateFormat,
-          )
+        ? new Date(order?.updatedAt).toLocaleString('es-ES', dateFormat)
         : '',
     },
   ];
@@ -253,9 +263,7 @@ const OrderTrackingScreen = () => {
                 <CubeIcon color={Colors.semanticSuccess} />
                 <PoppinsText style={{ color: Colors.semanticSuccess }}>
                   Pickup:{' '}
-                  {new Date(
-                    order?.orderDeliveries[0]?.estimatedTime,
-                  ).toLocaleString('es-ES', {
+                  {new Date(order?.updatedAt).toLocaleString('es-ES', {
                     day: '2-digit',
                     month: 'long',
                     hour: '2-digit',
@@ -302,8 +310,7 @@ const OrderTrackingScreen = () => {
                       <PoppinsText style={{ marginBottom: 10 }}>
                         Dirección de Entrega:
                       </PoppinsText>
-                      <PoppinsText>{order?.branch?.address}.</PoppinsText>
-                      <PoppinsText>{order?.branch?.city.name}</PoppinsText>
+                      <PoppinsText>{userAddress}</PoppinsText>
                     </View>
                   </View>
                   <View

From 068e79807f67b7c79d0a5a889a0bf570dce0c1b0 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 15:50:08 -0400
Subject: [PATCH 06/15] Update delivery status check in OrderTrackingScreen
 from ASSIGNED to TO_ASSIGN

---
 src/screens/OrderTrackingScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index 97b27af..5dc9cef 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -78,7 +78,7 @@ const OrderTrackingScreen = () => {
           order.data.orderDeliveries &&
           order.data.orderDeliveries.length > 0 &&
           order.data.orderDeliveries[0].deliveryStatus ===
-            OrderDeliveryStatus.ASSIGNED
+            OrderDeliveryStatus.TO_ASSIGN
         ) {
           const delivery = await DeliveryService.getOrderDetails(
             order.data.orderDeliveries[0].id,

From d68e0bb474127fa10d69ee80dd16761508b4c011 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 16:16:33 -0400
Subject: [PATCH 07/15] Refactor delivery status check in OrderTrackingScreen
 to simplify condition

---
 src/screens/OrderTrackingScreen.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index 5dc9cef..c4f408f 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -10,11 +10,7 @@ import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useLocalSearchParams } from 'expo-router';
 import Alert from '../components/Alerts';
-import {
-  OrderDeliveryStatus,
-  OrderDetailedResponse,
-  OrderStatus,
-} from '@pharmatech/sdk';
+import { OrderDetailedResponse, OrderStatus } from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { formatDate, truncateString } from '../utils/commons';
 import * as SecureStore from 'expo-secure-store';
@@ -76,9 +72,7 @@ const OrderTrackingScreen = () => {
       if (order.success) {
         if (
           order.data.orderDeliveries &&
-          order.data.orderDeliveries.length > 0 &&
-          order.data.orderDeliveries[0].deliveryStatus ===
-            OrderDeliveryStatus.TO_ASSIGN
+          order.data.orderDeliveries.length > 0
         ) {
           const delivery = await DeliveryService.getOrderDetails(
             order.data.orderDeliveries[0].id,

From 2cfdd2046c1c2e9b819f7ce47737433b4784346b Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 18:40:26 -0400
Subject: [PATCH 08/15] Update OrderBadge labels and enhance OrderDetailScreen
 with subtotal and discount calculations

---
 src/components/OrderBadge.tsx     |  2 +-
 src/screens/OrderDetailScreen.tsx | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/OrderBadge.tsx b/src/components/OrderBadge.tsx
index 553eb94..e6caedc 100644
--- a/src/components/OrderBadge.tsx
+++ b/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',
diff --git a/src/screens/OrderDetailScreen.tsx b/src/screens/OrderDetailScreen.tsx
index 2a4d39b..d878c64 100644
--- a/src/screens/OrderDetailScreen.tsx
+++ b/src/screens/OrderDetailScreen.tsx
@@ -30,6 +30,8 @@ const OrderDetailScreen = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const { addToCart, getItemQuantity, updateCartQuantity } = useCart();
   const router = useRouter();
+  const [subTotal, setSubTotal] = useState(0);
+  const [discount, setDiscount] = useState(0);
 
   const handleReorder = () => {
     order?.details.forEach((detail) => {
@@ -60,6 +62,17 @@ const OrderDetailScreen = () => {
 
         if (order.success) {
           setOrder(order.data);
+
+          setSubTotal(
+            order.data.details.reduce(
+              (acc, t) => acc + t.price * t.quantity,
+              0,
+            ),
+          );
+          setDiscount(
+            order.data.details.reduce((acc, t) => acc + t.discount, 0),
+          );
+          console.log(order);
         }
       } catch (error) {
         console.log(error);
@@ -196,17 +209,17 @@ const OrderDetailScreen = () => {
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
             <PoppinsText>Subtotal</PoppinsText>
-            <PoppinsText>${order?.totalPrice}</PoppinsText>
+            <PoppinsText>${subTotal}</PoppinsText>
           </View>
           <View
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
-            {/*  <PoppinsText style={{ color: Colors.semanticSuccess }}>
+            <PoppinsText style={{ color: Colors.semanticSuccess }}>
               Descuentos
             </PoppinsText>
-            <PoppinsText style={{ color: Colors.semanticSuccess }}> // Comentado */}
-            {/*   -${order?.totalPrice} */}
-            {/* </PoppinsText> */}
+            <PoppinsText style={{ color: Colors.semanticSuccess }}>
+              -${discount}
+            </PoppinsText>
           </View>
           <View
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
@@ -218,7 +231,7 @@ const OrderDetailScreen = () => {
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
             <PoppinsText>Total</PoppinsText>
-            <PoppinsText>${order?.totalPrice}</PoppinsText>
+            <PoppinsText>${subTotal - discount}</PoppinsText>
           </View>
         </View>
         <View style={{ marginTop: 20 }}>

From 973998e5bfe09b8950fecaf28d51976df1ca055b Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 21:30:10 -0400
Subject: [PATCH 09/15] Calculate discount based on price and quantity in
 OrderDetailScreen

---
 src/screens/OrderDetailScreen.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/OrderDetailScreen.tsx b/src/screens/OrderDetailScreen.tsx
index 3e7c45b..b92d934 100644
--- a/src/screens/OrderDetailScreen.tsx
+++ b/src/screens/OrderDetailScreen.tsx
@@ -70,7 +70,10 @@ const OrderDetailScreen = () => {
             ),
           );
           setDiscount(
-            order.data.details.reduce((acc, t) => acc + t.discount, 0),
+            order.data.details.reduce(
+              (acc, t) => acc + ((t.price * t.discount) / 100) * t.quantity,
+              0,
+            ),
           );
           console.log(order);
         }

From d6a15666712960b30e6a6a23bcab2bb3a0010762 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 21:46:43 -0400
Subject: [PATCH 10/15] Update OrderDetailScreen to display full product
 details and correct navigation path

---
 src/screens/OrderDetailScreen.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/screens/OrderDetailScreen.tsx b/src/screens/OrderDetailScreen.tsx
index b92d934..cf8df62 100644
--- a/src/screens/OrderDetailScreen.tsx
+++ b/src/screens/OrderDetailScreen.tsx
@@ -174,7 +174,13 @@ const OrderDetailScreen = () => {
               </View>
               <View style={{ flex: 1 }}>
                 <PoppinsText>
-                  {detail.productPresentation.presentation.name}
+                  {detail.productPresentation.product.name +
+                    ' ' +
+                    detail.productPresentation.presentation.name +
+                    ' ' +
+                    detail.productPresentation.presentation.quantity +
+                    ' ' +
+                    detail.productPresentation.presentation.measurementUnit}
                 </PoppinsText>
                 <View
                   style={{
@@ -190,7 +196,9 @@ const OrderDetailScreen = () => {
                   <StarIcon color={Colors.gray_100} />
                   <TouchableOpacity
                     onPress={() =>
-                      router.push(`products/${detail.productPresentation.id}`)
+                      router.push(
+                        `products/${detail.productPresentation.product.id}/presentation/${detail.productPresentation.presentation.id}`,
+                      )
                     }
                   >
                     <PoppinsText>Ir al producto</PoppinsText>

From d71673578b134d7621e430f0212d30cd86df897c Mon Sep 17 00:00:00 2001
From: miglesiasDev <1001.28391672.ucla@gmail.com>
Date: Thu, 29 May 2025 22:11:23 -0400
Subject: [PATCH 11/15] Height styles

---
 src/screens/DirectionScreen.tsx | 4 ++++
 src/screens/MenuScreen.tsx      | 4 ++++
 src/screens/OrdersScreen.tsx    | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/src/screens/DirectionScreen.tsx b/src/screens/DirectionScreen.tsx
index 8649dc8..0a0f58a 100644
--- a/src/screens/DirectionScreen.tsx
+++ b/src/screens/DirectionScreen.tsx
@@ -189,6 +189,7 @@ const DirectionScreen = () => {
         }}
         onClose={() => setShowDeletePopup(false)}
       />
+      <View style={styles.height} />
     </ScrollView>
   );
 };
@@ -200,6 +201,9 @@ const styles = StyleSheet.create({
     padding: 20,
     paddingTop: -20,
   },
+  height: {
+    height: 64,
+  },
   alertContainer: {
     position: 'absolute',
     width: 326,
diff --git a/src/screens/MenuScreen.tsx b/src/screens/MenuScreen.tsx
index 78ba921..47df5a4 100644
--- a/src/screens/MenuScreen.tsx
+++ b/src/screens/MenuScreen.tsx
@@ -179,6 +179,7 @@ export default function MenuScreen() {
               </TouchableOpacity>
             </View>
           </View>
+          <View style={styles.height} />
         </SafeAreaView>
       </View>
 
@@ -209,6 +210,9 @@ const styles = StyleSheet.create({
     zIndex: 100,
     elevation: 10,
   },
+  height: {
+    height: 64,
+  },
   safeArea: {
     flex: 1,
   },
diff --git a/src/screens/OrdersScreen.tsx b/src/screens/OrdersScreen.tsx
index 5433cbf..d2865b8 100644
--- a/src/screens/OrdersScreen.tsx
+++ b/src/screens/OrdersScreen.tsx
@@ -188,6 +188,7 @@ const OrdersScreen = () => {
               </View>
             </View>
           ))}
+        <View style={styles.height} />
       </View>
     </ScrollView>
   );
@@ -200,6 +201,9 @@ const styles = StyleSheet.create({
     padding: 20,
     paddingTop: -20,
   },
+  height: {
+    height: 64,
+  },
   alertContainer: {
     position: 'absolute',
     width: 326,

From ed1b775bb43f07cc4f4f7800755fa9af7f5323b6 Mon Sep 17 00:00:00 2001
From: jsayago77 <jsayago.dev@gmail.com>
Date: Thu, 29 May 2025 22:41:10 -0400
Subject: [PATCH 12/15] Fix translation for 'ready_for_pickup' status and
 enhance OrderTrackingScreen with delivery details and map functionality

---
 src/screens/ActiveOrdersScreen.tsx  |  2 +-
 src/screens/OrderTrackingScreen.tsx | 51 +++++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/screens/ActiveOrdersScreen.tsx b/src/screens/ActiveOrdersScreen.tsx
index 9cbaf36..917b2a9 100644
--- a/src/screens/ActiveOrdersScreen.tsx
+++ b/src/screens/ActiveOrdersScreen.tsx
@@ -16,7 +16,7 @@ import { truncateString } from '../utils/commons';
 
 const STATUS_LABELS: Record<string, string> = {
   requested: 'Pendiente',
-  ready_for_pickup: 'A Enviar',
+  ready_for_pickup: 'A Retirar',
   in_progress: 'En Proceso',
   approved: 'Aprobado',
 };
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index c4f408f..4573e02 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -10,7 +10,12 @@ import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import { useLocalSearchParams } from 'expo-router';
 import Alert from '../components/Alerts';
-import { OrderDetailedResponse, OrderStatus } from '@pharmatech/sdk';
+import {
+  OrderDeliveryDetailedResponse,
+  OrderDeliveryStatus,
+  OrderDetailedResponse,
+  OrderStatus,
+} from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { formatDate, truncateString } from '../utils/commons';
 import * as SecureStore from 'expo-secure-store';
@@ -28,6 +33,10 @@ import io from 'socket.io-client';
 import { SOCKET_URL } from '../lib/socketUrl';
 import VerticalStepper from '../components/VerticalStepper';
 import { DeliveryService } from '../services/delivery';
+import Button from '../components/Button';
+import DeliveryMap from '../components/DeliveryMap';
+import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
 
 const OrderTrackingScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -42,6 +51,14 @@ const OrderTrackingScreen = () => {
   const [step, setStep] = useState(0);
   const [refreshing, setRefreshing] = useState<boolean>(false);
   const [userAddress, setUserAddress] = useState('');
+  const [delivery, setDelivery] = useState<
+    OrderDeliveryDetailedResponse | undefined
+  >();
+  const [showMap, setShowMap] = useState(false);
+
+  const deliveryState = useSelector(
+    (state: RootState) => state.delivery.deliveryState[id as string] || 0,
+  );
 
   const changeTrackingStatus = (status: OrderStatus) => {
     switch (status) {
@@ -77,6 +94,7 @@ const OrderTrackingScreen = () => {
           const delivery = await DeliveryService.getOrderDetails(
             order.data.orderDeliveries[0].id,
           );
+          setDelivery(delivery);
           setUserAddress(
             delivery.address.adress + '. \n' + delivery.address.referencePoint,
           );
@@ -268,9 +286,37 @@ const OrderTrackingScreen = () => {
               </>
             )}
           </View>
-          <View style={{ marginVertical: 20 }}>
+          <View style={{ marginVertical: 10 }}>
             <VerticalStepper steps={steps} currentStep={step} />
           </View>
+          {order?.type != 'pickup' &&
+            !showMap &&
+            order.status === OrderStatus.READY_FOR_PICKUP &&
+            order.orderDeliveries[0].deliveryStatus ===
+              OrderDeliveryStatus.ASSIGNED && (
+              <View style={{ marginVertical: 15 }}>
+                <Button
+                  title="Ver Mapa"
+                  onPress={() => setShowMap(true)}
+                  variant={'primary'}
+                />
+              </View>
+            )}
+          {showMap && (
+            <View style={{ flex: 1, height: 300 }}>
+              <DeliveryMap
+                deliveryState={deliveryState}
+                branchLocation={
+                  order?.branch as { latitude: number; longitude: number }
+                }
+                customerLocation={
+                  delivery?.address as { latitude: number; longitude: number }
+                }
+                deliveryLocation={null}
+                style={{ height: 300, marginBottom: 16 }}
+              />
+            </View>
+          )}
           <View>
             <View
               style={{
@@ -369,7 +415,6 @@ const styles = StyleSheet.create({
   },
   orderHeader: {
     alignItems: 'center',
-    marginTop: 30,
     marginBottom: 15,
   },
   orderInfo: {

From 57ed903e137c7357a27dbd04bc039d35fb92b6b4 Mon Sep 17 00:00:00 2001
From: miglesiasDev <1001.28391672.ucla@gmail.com>
Date: Thu, 29 May 2025 23:31:24 -0400
Subject: [PATCH 13/15] Showing delivery map to client

---
 src/components/DeliveryMap.tsx      |  43 +++++++-
 src/screens/OrderTrackingScreen.tsx | 163 ++++++++++++++++++----------
 2 files changed, 142 insertions(+), 64 deletions(-)

diff --git a/src/components/DeliveryMap.tsx b/src/components/DeliveryMap.tsx
index 5ba7b4d..cb68515 100644
--- a/src/components/DeliveryMap.tsx
+++ b/src/components/DeliveryMap.tsx
@@ -3,6 +3,7 @@ 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';
 
 interface DeliveryMapProps {
   deliveryState: number;
@@ -25,7 +26,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,8 +145,13 @@ 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} />
@@ -153,10 +159,11 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
     );
   }
 
+  // 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,
@@ -164,11 +171,11 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
           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"
+            title="Repartidor"
             pinColor="red"
           />
         )}
@@ -210,6 +217,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>
   );
 };
diff --git a/src/screens/OrderTrackingScreen.tsx b/src/screens/OrderTrackingScreen.tsx
index 4573e02..8470eb0 100644
--- a/src/screens/OrderTrackingScreen.tsx
+++ b/src/screens/OrderTrackingScreen.tsx
@@ -5,6 +5,8 @@ import {
   ScrollView,
   ActivityIndicator,
   RefreshControl,
+  Modal,
+  TouchableOpacity,
 } from 'react-native';
 import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
@@ -12,13 +14,11 @@ import { useLocalSearchParams } from 'expo-router';
 import Alert from '../components/Alerts';
 import {
   OrderDeliveryDetailedResponse,
-  OrderDeliveryStatus,
   OrderDetailedResponse,
   OrderStatus,
 } from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { formatDate, truncateString } from '../utils/commons';
-import * as SecureStore from 'expo-secure-store';
 import {
   CubeIcon,
   PhoneIcon,
@@ -28,15 +28,19 @@ import {
 import {
   BuildingStorefrontIcon,
   MapPinIcon,
+  XMarkIcon,
 } from 'react-native-heroicons/solid';
-import io from 'socket.io-client';
-import { SOCKET_URL } from '../lib/socketUrl';
 import VerticalStepper from '../components/VerticalStepper';
 import { DeliveryService } from '../services/delivery';
 import Button from '../components/Button';
 import DeliveryMap from '../components/DeliveryMap';
 import { useSelector } from 'react-redux';
 import { RootState } from '../redux/store';
+import {
+  initializeSocket,
+  disconnectSocket,
+} from '../lib/deliverySocket/deliverySocket';
+import { Socket } from 'socket.io-client';
 
 const OrderTrackingScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -54,7 +58,13 @@ const OrderTrackingScreen = () => {
   const [delivery, setDelivery] = useState<
     OrderDeliveryDetailedResponse | undefined
   >();
-  const [showMap, setShowMap] = useState(false);
+  const [isMapModalVisible, setIsMapModalVisible] = useState(false);
+
+  // Estado para la ubicación del repartidor
+  const [deliveryLocation, setDeliveryLocation] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(null);
 
   const deliveryState = useSelector(
     (state: RootState) => state.delivery.deliveryState[id as string] || 0,
@@ -85,7 +95,6 @@ const OrderTrackingScreen = () => {
   const fetchOrder = async () => {
     try {
       const order = await UserService.getOrder(id);
-      console.log(order);
       if (order.success) {
         if (
           order.data.orderDeliveries &&
@@ -103,7 +112,7 @@ const OrderTrackingScreen = () => {
         changeTrackingStatus(order.data.status);
       }
     } catch (error) {
-      console.log(error);
+      console.error('Error al obtener la orden:', error);
       setErrorMessage('Ocurrió un error');
       setShowErrorAlert(true);
     } finally {
@@ -113,47 +122,64 @@ const OrderTrackingScreen = () => {
   };
 
   useEffect(() => {
-    if (id) {
-      fetchOrder();
+    let socket: Socket;
+
+    const setupSocket = async () => {
+      try {
+        socket = await initializeSocket();
+        socket.connect();
 
-      const socket = io(SOCKET_URL, {
-        autoConnect: false,
-        transports: ['polling'],
-        transportOptions: {
-          polling: {
-            extraHeaders: {
-              authorization: `Bearer ${SecureStore.getItemAsync('auth_token')}`,
-            },
+        socket.on('connect', () => {
+          console.log('WebSocket conectado en OrderTrackingScreen');
+        });
+
+        socket.on(
+          'coordinatesUpdated',
+          (data: { latitude: number; longitude: number }) => {
+            setDeliveryLocation({
+              latitude: data.latitude,
+              longitude: data.longitude,
+            });
           },
-        },
-      });
+        );
 
-      function onOrderUpdated(order: { orderId: string; status: OrderStatus }) {
-        if (order.orderId === id) {
-          changeTrackingStatus(order.status);
-        }
-      }
+        socket.on('connect_error', (error) => {
+          console.error(
+            'Error de conexión al WebSocket en OrderTrackingScreen:',
+            error,
+          );
+        });
 
-      socket.connect();
-      socket.on('orderUpdated', onOrderUpdated);
+        socket.on('disconnect', (reason) => {
+          console.warn(
+            'WebSocket desconectado en OrderTrackingScreen. Razón:',
+            reason,
+          );
+        });
+      } catch (error) {
+        console.error(
+          'Error configurando el WebSocket en OrderTrackingScreen:',
+          error,
+        );
+      }
+    };
 
-      socket.on('connect_error', (err) =>
-        console.log('[WS] Error en handshake:', err.message),
-      );
+    setupSocket();
 
-      socket.on('connect', () =>
-        console.log('[WS] Conectado con ID:', socket.id),
-      );
-      socket.on('disconnect', (reason) =>
-        console.log('[WS] Desconectado por:', reason),
-      );
+    return () => {
+      if (socket) {
+        socket.off('coordinatesUpdated');
+        disconnectSocket();
+      }
+    };
+  }, [id]);
+  // --- FIN INTEGRACIÓN WEBSOCKET ---
 
-      return () => {
-        socket.off('orderUpdated', onOrderUpdated);
-        socket.disconnect();
-      };
+  useEffect(() => {
+    if (id) {
+      fetchOrder();
     }
-  }, []);
+  }, [id]);
 
   if (loading) {
     return (
@@ -289,21 +315,37 @@ const OrderTrackingScreen = () => {
           <View style={{ marginVertical: 10 }}>
             <VerticalStepper steps={steps} currentStep={step} />
           </View>
-          {order?.type != 'pickup' &&
-            !showMap &&
-            order.status === OrderStatus.READY_FOR_PICKUP &&
-            order.orderDeliveries[0].deliveryStatus ===
-              OrderDeliveryStatus.ASSIGNED && (
-              <View style={{ marginVertical: 15 }}>
-                <Button
-                  title="Ver Mapa"
-                  onPress={() => setShowMap(true)}
-                  variant={'primary'}
-                />
-              </View>
-            )}
-          {showMap && (
-            <View style={{ flex: 1, height: 300 }}>
+          {/* Botón para abrir el mapa ampliado */}
+          {order?.type !== 'pickup' && (
+            <Button
+              title="Ver mapa ampliado"
+              onPress={() => setIsMapModalVisible(true)}
+              variant={'primary'}
+              style={{ marginBottom: 12 }}
+            />
+          )}
+          {/* Modal para el mapa ampliado */}
+          <Modal
+            visible={isMapModalVisible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={() => setIsMapModalVisible(false)}
+          >
+            <View style={{ flex: 1, backgroundColor: Colors.bgColor }}>
+              <TouchableOpacity
+                style={{
+                  position: 'absolute',
+                  top: 16,
+                  right: 16,
+                  zIndex: 10,
+                  backgroundColor: Colors.textWhite,
+                  padding: 8,
+                  borderRadius: 16,
+                }}
+                onPress={() => setIsMapModalVisible(false)}
+              >
+                <XMarkIcon size={24} color={Colors.textMain} />
+              </TouchableOpacity>
               <DeliveryMap
                 deliveryState={deliveryState}
                 branchLocation={
@@ -312,11 +354,12 @@ const OrderTrackingScreen = () => {
                 customerLocation={
                   delivery?.address as { latitude: number; longitude: number }
                 }
-                deliveryLocation={null}
-                style={{ height: 300, marginBottom: 16 }}
+                deliveryLocation={deliveryLocation}
+                style={{ flex: 1 }}
               />
             </View>
-          )}
+          </Modal>
+          {/* Información de contacto y otros datos... */}
           <View>
             <View
               style={{
@@ -394,6 +437,7 @@ const OrderTrackingScreen = () => {
           </View>
         </View>
       )}
+      <View style={styles.height} />
     </ScrollView>
   );
 };
@@ -404,6 +448,9 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.bgColor,
     padding: 20,
   },
+  height: {
+    height: 64,
+  },
   alertContainer: {
     position: 'absolute',
     width: 326,

From 6f2bc67bf9cc61e64222d3c96560c022980f1218 Mon Sep 17 00:00:00 2001
From: miglesiasDev <1001.28391672.ucla@gmail.com>
Date: Thu, 29 May 2025 23:48:03 -0400
Subject: [PATCH 14/15] Adding more cent prices and eliminating stars rating

---
 src/screens/ActiveOrdersScreen.tsx  |  3 +-
 src/screens/OrderDetailScreen.tsx   | 12 ++---
 src/screens/ProductDetailScreen.tsx | 74 +++++++++++++----------------
 3 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/src/screens/ActiveOrdersScreen.tsx b/src/screens/ActiveOrdersScreen.tsx
index 917b2a9..8b14053 100644
--- a/src/screens/ActiveOrdersScreen.tsx
+++ b/src/screens/ActiveOrdersScreen.tsx
@@ -13,6 +13,7 @@ import Alert from '../components/Alerts';
 import { OrderResponse } from '@pharmatech/sdk';
 import { UserService } from '../services/user';
 import { truncateString } from '../utils/commons';
+import { formatPrice } from '../utils/formatPrice';
 
 const STATUS_LABELS: Record<string, string> = {
   requested: 'Pendiente',
@@ -141,7 +142,7 @@ const ActiveOrdersScreen = () => {
                       {new Date(order.createdAt).toLocaleDateString()}
                     </PoppinsText>
                   </View>
-                  <PoppinsText>${order.totalPrice.toFixed(2)}</PoppinsText>
+                  <PoppinsText>${formatPrice(order.totalPrice)}</PoppinsText>
                 </View>
                 <View
                   style={{
diff --git a/src/screens/OrderDetailScreen.tsx b/src/screens/OrderDetailScreen.tsx
index cf8df62..e8cd074 100644
--- a/src/screens/OrderDetailScreen.tsx
+++ b/src/screens/OrderDetailScreen.tsx
@@ -10,13 +10,13 @@ import {
 import { Colors, FontSizes } from '../styles/theme';
 import PoppinsText from '../components/PoppinsText';
 import Button from '../components/Button';
-import { StarIcon } from 'react-native-heroicons/solid';
 import Alert from '../components/Alerts';
 import { UserService } from '../services/user';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { OrderDetailedResponse } from '@pharmatech/sdk';
 import { truncateString } from '../utils/commons';
 import { useCart } from '../hooks/useCart';
+import { formatPrice } from '../utils/formatPrice';
 
 const OrderDetailScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -189,11 +189,11 @@ const OrderDetailScreen = () => {
                     margin: 10,
                   }}
                 >
-                  <PoppinsText>${detail.subtotal}</PoppinsText>
+                  <PoppinsText>${formatPrice(detail.subtotal)}</PoppinsText>
                   <PoppinsText>Cantidad: {detail.quantity}</PoppinsText>
                 </View>
                 <View style={{ flexDirection: 'row', alignContent: 'center' }}>
-                  <StarIcon color={Colors.gray_100} />
+                  {/* <StarIcon color={Colors.gray_100} /> */}
                   <TouchableOpacity
                     onPress={() =>
                       router.push(
@@ -220,7 +220,7 @@ const OrderDetailScreen = () => {
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
             <PoppinsText>Subtotal</PoppinsText>
-            <PoppinsText>${subTotal}</PoppinsText>
+            <PoppinsText>${formatPrice(subTotal)}</PoppinsText>
           </View>
           <View
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
@@ -229,7 +229,7 @@ const OrderDetailScreen = () => {
               Descuentos
             </PoppinsText>
             <PoppinsText style={{ color: Colors.semanticSuccess }}>
-              -${discount}
+              -${formatPrice(discount)}
             </PoppinsText>
           </View>
           <View
@@ -242,7 +242,7 @@ const OrderDetailScreen = () => {
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
             <PoppinsText>Total</PoppinsText>
-            <PoppinsText>${subTotal - discount}</PoppinsText>
+            <PoppinsText>${formatPrice(subTotal - discount)}</PoppinsText>
           </View>
         </View>
         <View style={{ marginTop: 20 }}>
diff --git a/src/screens/ProductDetailScreen.tsx b/src/screens/ProductDetailScreen.tsx
index 816fe4b..80c2f73 100644
--- a/src/screens/ProductDetailScreen.tsx
+++ b/src/screens/ProductDetailScreen.tsx
@@ -15,11 +15,7 @@ import { useRouter, useLocalSearchParams } from 'expo-router';
 import TopBar from '../components/TopBar';
 import { useCart } from '../hooks/useCart';
 import { Product as CardProduct } from '../types/Product';
-import {
-  CheckCircleIcon,
-  StarIcon,
-  ChevronLeftIcon,
-} from 'react-native-heroicons/solid';
+import { CheckCircleIcon, ChevronLeftIcon } from 'react-native-heroicons/solid';
 import { Colors, FontSizes } from '../styles/theme';
 import Dropdown from '../components/Dropdown';
 import CardButton from '../components/CardButton';
@@ -59,8 +55,6 @@ const ProductDetailScreen: React.FC = () => {
   const [presentations, setPresentations] =
     useState<ProductPresentationResponse[]>();
   const [products, setProducts] = useState<CardProduct[]>([]);
-  const [userRating, setUserRating] = useState<number>(0);
-  const [hoverRating, setHoverRating] = useState<number>(0);
   const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
   const [isLoadingInventory, setIsLoadingInventory] = useState(false);
   const [showNoStockAlert, setShowNoStockAlert] = useState(false);
@@ -262,37 +256,37 @@ const ProductDetailScreen: React.FC = () => {
     }
   };
 
-  const handleRating = (rating: number) => {
-    setUserRating(rating);
-    // Aquí podrías enviar la calificación a tu API
-    console.log('Calificación enviada:', rating);
-  };
-
-  const RatingStars = () => {
-    return (
-      <View style={styles.ratingStarsContainer}>
-        {[1, 2, 3, 4, 5].map((star) => (
-          <TouchableOpacity
-            key={star}
-            activeOpacity={0.7}
-            onPress={() => handleRating(star)}
-            onPressIn={() => setHoverRating(star)}
-            onPressOut={() => setHoverRating(0)}
-          >
-            <StarIcon
-              size={32}
-              color={
-                star <= (hoverRating || userRating)
-                  ? Colors.semanticWarning
-                  : Colors.gray_100
-              }
-              style={styles.starIcon}
-            />
-          </TouchableOpacity>
-        ))}
-      </View>
-    );
-  };
+  // const handleRating = (rating: number) => {
+  //   setUserRating(rating);
+  //   // Aquí podrías enviar la calificación a tu API
+  //   console.log('Calificación enviada:', rating);
+  // };
+
+  // const RatingStars = () => {
+  //   return (
+  //     <View style={styles.ratingStarsContainer}>
+  //       {[1, 2, 3, 4, 5].map((star) => (
+  //         <TouchableOpacity
+  //           key={star}
+  //           activeOpacity={0.7}
+  //           onPress={() => handleRating(star)}
+  //           onPressIn={() => setHoverRating(star)}
+  //           onPressOut={() => setHoverRating(0)}
+  //         >
+  //           <StarIcon
+  //             size={32}
+  //             color={
+  //               star <= (hoverRating || userRating)
+  //                 ? Colors.semanticWarning
+  //                 : Colors.gray_100
+  //             }
+  //             style={styles.starIcon}
+  //           />
+  //         </TouchableOpacity>
+  //       ))}
+  //     </View>
+  //   );
+  // };
 
   const getProductDiscount = () => {
     // Busca promo en product.promo
@@ -399,13 +393,13 @@ const ProductDetailScreen: React.FC = () => {
             )}
           </PoppinsText>
 
-          <RatingStars />
+          {/* <RatingStars />
           {userRating > 0 && (
             <PoppinsText style={styles.ratingFeedback}>
               ¡Gracias por tu calificación de {userRating} estrella
               {userRating !== 1 ? 's' : ''}!
             </PoppinsText>
-          )}
+          )} */}
 
           <PoppinsText style={styles.description}>
             {product?.presentation.description}

From 8cbdb10705d7f105af9d2348a28632f5631f935c Mon Sep 17 00:00:00 2001
From: miglesiasDev <1001.28391672.ucla@gmail.com>
Date: Fri, 30 May 2025 00:14:06 -0400
Subject: [PATCH 15/15] Using icons for delivery maps

---
 src/components/DeliveryMap.tsx | 26 +++++++++++---------------
 src/components/HistoryMap.tsx  | 28 +++++++++++++---------------
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/components/DeliveryMap.tsx b/src/components/DeliveryMap.tsx
index cb68515..2ce4eee 100644
--- a/src/components/DeliveryMap.tsx
+++ b/src/components/DeliveryMap.tsx
@@ -4,6 +4,8 @@ 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;
@@ -173,30 +175,24 @@ const DeliveryMap: React.FC<DeliveryMapProps> = ({
       >
         {/* Mostrar la ubicación del delivery si existe */}
         {deliveryLocation && (
-          <Marker
-            coordinate={deliveryLocation}
-            title="Repartidor"
-            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 */}
diff --git a/src/components/HistoryMap.tsx b/src/components/HistoryMap.tsx
index ba62402..0f0d229 100644
--- a/src/components/HistoryMap.tsx
+++ b/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 && (