Fix/general fixes

src/app/(delivery-tabs)/_layout.tsx

@@ -3,30 +3,22 @@
 import { View, StyleSheet } from 'react-native';
 import { Colors } from '../../styles/theme';
 import PoppinsText from '../../components/PoppinsText';
-import {
-  HomeIcon,
-  ClockIcon,
-  LifebuoyIcon,
-} from 'react-native-heroicons/outline';
+import { HomeIcon, ClockIcon } from 'react-native-heroicons/outline';
 import TopBarDelivery from '../../components/TopBarDelivery';
 import { AlertProvider } from '../../components/AlertProvider'; // Importar el AlertProvider
+import { TabBar } from '../../components/TabBar';
 
 export default function DeliveryTabLayout() {
   return (
     <AlertProvider>
       <View style={styles.container}>
         <TopBarDelivery />
-        <Tabs
-          screenOptions={{
-            tabBarActiveTintColor: Colors.primary,
-            tabBarStyle: { backgroundColor: Colors.secondaryWhite },
-          }}
-        >
+        <Tabs tabBar={(props) => <TabBar {...props} />}>
           <Tabs.Screen
             name="index"
             options={{
               tabBarLabel: ({ color }) => (
                 <PoppinsText style={{ color: color, fontSize: 10 }}>
                   Home
                 </PoppinsText>
               ),
@@ -41,7 +33,7 @@
             name="deliveryHistory"
             options={{
               tabBarLabel: ({ color }) => (
                 <PoppinsText style={{ color: color, fontSize: 10 }}>
                   Historial
                 </PoppinsText>
               ),
@@ -52,21 +44,6 @@
               ),
             }}
           />
-          <Tabs.Screen
-            name="deliverySupport"
-            options={{
-              tabBarLabel: ({ color }) => (
-                <PoppinsText style={{ color: color, fontSize: 10 }}>
-                  Soporte
-                </PoppinsText>
-              ),
-              headerShown: false,
-              title: 'Soporte',
-              tabBarIcon: () => (
-                <LifebuoyIcon width={24} height={24} color={Colors.primary} />
-              ),
-            }}
-          />
         </Tabs>
       </View>
     </AlertProvider>

src/app/(tabs)/_layout.tsx

@@ -3,22 +3,21 @@
   ListBulletIcon,
   MapPinIcon,
   TagIcon,
-  LifebuoyIcon,
 } from 'react-native-heroicons/outline';
 import { Tabs } from 'expo-router';
 import { Colors } from '../../styles/theme';
 import PoppinsText from '../../components/PoppinsText';
 import { View, StyleSheet } from 'react-native';
 import TopBar from '../../components/TopBar';
+import { TabBar } from '../../components/TabBar';
 
 export default function TabLayout() {
   return (
     <View style={styles.container}>
       <TopBar />
       <Tabs
+        tabBar={(props) => <TabBar {...props} />} // Siempre renderiza la TabBar
         screenOptions={{
-          tabBarActiveTintColor: Colors.primary,
-          tabBarStyle: { backgroundColor: Colors.secondaryWhite },
           tabBarHideOnKeyboard: true,
           tabBarVisibilityAnimationConfig: {
             show: {
@@ -36,7 +35,7 @@
           name="index"
           options={{
             tabBarLabel: ({ color }) => (
               <PoppinsText style={{ color: color, fontSize: 10 }}>
                 Home
               </PoppinsText>
             ),
@@ -52,7 +51,7 @@
           name="categories"
           options={{
             tabBarLabel: ({ color }) => (
               <PoppinsText style={{ color: color, fontSize: 10 }}>
                 Categorías
               </PoppinsText>
             ),
@@ -67,7 +66,7 @@
           name="branches"
           options={{
             tabBarLabel: ({ color }) => (
               <PoppinsText style={{ color: color, fontSize: 10 }}>
                 Sucursales
               </PoppinsText>
             ),
@@ -82,7 +81,7 @@
           name="offers"
           options={{
             tabBarLabel: ({ color }) => (
               <PoppinsText style={{ color: color, fontSize: 10 }}>
                 Ofertas
               </PoppinsText>
             ),
@@ -93,21 +92,6 @@
             ),
           }}
         />
-        <Tabs.Screen
-          name="support"
-          options={{
-            tabBarLabel: ({ color }) => (
-              <PoppinsText style={{ color: color, fontSize: 10 }}>
-                Soporte
-              </PoppinsText>
-            ),
-            title: 'Soporte',
-            headerShown: false,
-            tabBarIcon: () => (
-              <LifebuoyIcon width={24} height={24} color={Colors.primary} />
-            ),
-          }}
-        />
       </Tabs>
     </View>
   );

src/app/_layout.tsx

@@ -55,6 +55,10 @@ export default function RootLayout() {
         <Stack
           screenOptions={({ navigation }) => ({
             headerBackVisible: false,
+            headerStyle: {
+              backgroundColor: Colors.bgColor, // Color específico para esta pantalla
+            },
+            headerShadowVisible: false,
             headerLeft: () =>
               navigation.canGoBack() ? (
                 <TouchableOpacity
@@ -80,10 +84,7 @@ export default function RootLayout() {
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
           <Stack.Screen name="products" options={{ headerShown: false }} />
           <Stack.Screen name="search" options={{ headerShown: false }} />
-          <Stack.Screen
-            name="profile"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
+          <Stack.Screen name="profile" options={{ headerTitle: '' }} />
           <Stack.Screen
             name="notifications"
             options={{
@@ -94,32 +95,20 @@ export default function RootLayout() {
           />
           <Stack.Screen
             name="menu"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
-          <Stack.Screen
-            name="direction"
-            options={{ headerTitle: '', headerTransparent: true }}
+            options={{
+              headerTitle: '',
+              headerShadowVisible: false,
+            }}
           />
+          <Stack.Screen name="direction" options={{ headerTitle: '' }} />
           <Stack.Screen
             name="selectLocation"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
-          <Stack.Screen
-            name="createDirection"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
-          <Stack.Screen
-            name="orders"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
-          <Stack.Screen
-            name="order"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
-          <Stack.Screen
-            name="change-direction"
-            options={{ headerTitle: '', headerTransparent: true }}
+            options={{ headerTitle: '', headerShown: false }}
           />
+          <Stack.Screen name="createDirection" options={{ headerTitle: '' }} />
+          <Stack.Screen name="orders" options={{ headerTitle: '' }} />
+          <Stack.Screen name="order" options={{ headerTitle: '' }} />
+          <Stack.Screen name="change-direction" options={{ headerTitle: '' }} />
           <Stack.Screen
             name="register"
             options={{ headerTitle: '', headerTransparent: true }}
@@ -130,7 +119,7 @@ export default function RootLayout() {
           />
           <Stack.Screen
             name="loggedInPasswordRecovery"
-            options={{ headerTitle: '', headerTransparent: true }}
+            options={{ headerTitle: '' }}
           />
           <Stack.Screen
             name="success"
@@ -140,7 +129,6 @@ export default function RootLayout() {
             name="cart"
             options={({ navigation }) => ({
               headerTitle: '',
-              headerTransparent: true,
               headerLeft: undefined,
               headerRight: () => (
                 <TouchableOpacity onPress={() => navigation.goBack()}>
@@ -149,10 +137,7 @@ export default function RootLayout() {
               ),
             })}
           />
-          <Stack.Screen
-            name="change-password"
-            options={{ headerTitle: '', headerTransparent: true }}
-          />
+          <Stack.Screen name="change-password" options={{ headerTitle: '' }} />
           <Stack.Screen
             name="(delivery-tabs)"
             options={{ headerShown: false }}
@@ -204,7 +189,6 @@ export default function RootLayout() {
             name="active-orders"
             options={{
               headerTitle: '',
-              headerTransparent: true,
             }}
           />
         </Stack>

src/components/CardButton.tsx

@@ -9,13 +9,17 @@ interface CardButtonProps {
   initialValue: number;
   size?: number;
   syncQuantity?: (count: number) => void;
+  disabled?: boolean;
+  showNoStockAlert?: () => void; // <-- nuevo prop opcional
 }
 
 const CardButton: React.FC<CardButtonProps> = ({
   getValue,
   initialValue = 0,
   size = 4,
   syncQuantity,
+  disabled = false, // <-- Valor por defecto
+  showNoStockAlert, // <-- Add this line
 }) => {
   const [count, setCount] = useState(initialValue);
   const [showCounter, setShowCounter] = useState(false);
@@ -38,18 +42,27 @@ const CardButton: React.FC<CardButtonProps> = ({
   }, [initialValue]);
 
   const incrementCount = () => {
+    if (disabled) {
+      if (showNoStockAlert) showNoStockAlert();
+      return;
+    }
     setHasInteracted(true);
     setCount((prev) => prev + 1);
   };
 
   const decrementCount = () => {
+    if (disabled) {
+      if (showNoStockAlert) showNoStockAlert();
+      return;
+    }
     if (count > 0) {
       setHasInteracted(true);
       setCount((prev) => prev - 1);
     }
   };
 
   const showCounterIncrement = () => {
+    if (disabled) return; // <-- No permitir si está deshabilitado
     setShowCounter(true);
     incrementCount();
   };
@@ -58,18 +71,34 @@ const CardButton: React.FC<CardButtonProps> = ({
     <View style={styles.container}>
       {!showCounter ? (
         <TouchableOpacity
-          style={[styles.mainButton, { padding: size }]}
-          onPress={showCounterIncrement}
+          style={[
+            styles.mainButton,
+            { padding: size },
+            disabled && { backgroundColor: Colors.stroke }, // <-- más opaco
+          ]}
+          onPress={() => {
+            if (disabled && showNoStockAlert) showNoStockAlert();
+            else showCounterIncrement();
+          }}
         >
           <PoppinsText style={styles.buttonText}>
             <PlusIcon size={20} color={Colors.textWhite} />
           </PoppinsText>
         </TouchableOpacity>
       ) : (
-        <View style={[styles.counterContainer, { padding: size }]}>
+        <View
+          style={[
+            styles.counterContainer,
+            { padding: size },
+            disabled && { backgroundColor: Colors.stroke },
+          ]}
+        >
           <TouchableOpacity
             style={[styles.counterButton]}
-            onPress={decrementCount}
+            onPress={() => {
+              if (disabled && showNoStockAlert) showNoStockAlert();
+              else decrementCount();
+            }}
           >
             <PoppinsText style={[styles.buttonText]}>
               <MinusIcon size={20} color={Colors.textWhite} />
@@ -80,7 +109,10 @@ const CardButton: React.FC<CardButtonProps> = ({
 
           <TouchableOpacity
             style={[styles.counterButton]}
-            onPress={incrementCount}
+            onPress={() => {
+              if (disabled && showNoStockAlert) showNoStockAlert();
+              else incrementCount();
+            }}
           >
             <PoppinsText style={styles.buttonText}>
               <PlusIcon size={20} color={Colors.textWhite} />