Feature/app m 14 offers

src/components/Card.tsx

@@ -7,6 +7,7 @@ import { truncateString } from '../utils/commons';
 import { useCart } from '../hooks/useCart';
 import { Product } from '../types/Product';
 import { useRouter } from 'expo-router';
+import { formatPrice } from '../utils/formatPrice';
 
 const ProductCard: React.FC<Product> = ({
   id,
@@ -15,13 +16,17 @@ const ProductCard: React.FC<Product> = ({
   imageUrl,
   name,
   category,
-  //originalPrice,
-  //discount,
+  originalPrice,
+  discount,
   finalPrice,
   getQuantity,
 }) => {
-  const { getItemQuantity, updateCartQuantity } = useCart();
+  const { getItemQuantity, addToCart } = useCart();
   const router = useRouter();
+  const computedFinalPrice = discount
+    ? (finalPrice * (100 - discount)) / 100
+    : finalPrice;
+
   return (
     <TouchableOpacity
       onPress={() =>
@@ -57,7 +62,15 @@ const ProductCard: React.FC<Product> = ({
               <CardButton
                 getValue={(quantity) => {
                   if (getQuantity) getQuantity(quantity);
-                  updateCartQuantity(id, quantity);
+                  // Asegura que price siempre sea number
+                  addToCart({
+                    id,
+                    name,
+                    price: originalPrice ?? 0,
+                    quantity,
+                    image: imageUrl,
+                    discount: discount ?? 0,
+                  });
                 }}
                 initialValue={getItemQuantity(id)}
               />
@@ -66,22 +79,18 @@ const ProductCard: React.FC<Product> = ({
         </View>
         <View style={styles.description}>
           <PoppinsText style={styles.name}>{truncateString(name)}</PoppinsText>
-          {/** 
           {discount && (
             <View style={styles.priceContainer}>
               <PoppinsText style={styles.originalPrice}>
-                ${originalPrice}
+                ${formatPrice(originalPrice ?? 0)}
               </PoppinsText>
-              <PoppinsText style={styles.discount}>{discount}%</PoppinsText> // Comentado 
+              <PoppinsText style={styles.discount}>{discount}%</PoppinsText>
             </View>
-          )}*/}
+          )}
           <PoppinsText
-            style={[
-              styles.finalPrice,
-              //!discount && { color: Colors.semanticInfo },
-            ]}
+            style={[styles.finalPrice, !discount && { color: Colors.textMain }]}
           >
-            ${finalPrice}
+            ${formatPrice(computedFinalPrice)}
           </PoppinsText>
         </View>
       </View>

src/components/CardButton.tsx

@@ -19,15 +19,16 @@ const CardButton: React.FC<CardButtonProps> = ({
 }) => {
   const [count, setCount] = useState(initialValue);
   const [showCounter, setShowCounter] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   const toggleCounter = () => setShowCounter(count > 0);
   useEffect(toggleCounter, [count]);
 
   useEffect(() => {
-    if (getValue) {
+    if (hasInteracted && getValue) {
       getValue(count);
     }
-    if (syncQuantity) {
+    if (hasInteracted && syncQuantity) {
       syncQuantity(count);
     }
   }, [count]);
@@ -37,11 +38,13 @@ const CardButton: React.FC<CardButtonProps> = ({
   }, [initialValue]);
 
   const incrementCount = () => {
+    setHasInteracted(true);
     setCount((prev) => prev + 1);
   };
 
   const decrementCount = () => {
     if (count > 0) {
+      setHasInteracted(true);
       setCount((prev) => prev - 1);
     }
   };

src/components/OrderSummary.tsx

@@ -5,6 +5,7 @@ import PoppinsText from './PoppinsText';
 import { Colors, FontSizes } from '../styles/theme';
 import type { CartItem } from '../redux/slices/cartSlice';
 import { ChevronDownIcon, ChevronUpIcon } from 'react-native-heroicons/outline';
+import { formatPrice } from '../utils/formatPrice';
 
 const OrderSummary = () => {
   const { cartItems } = useCart();
@@ -14,26 +15,29 @@ const OrderSummary = () => {
     (sum, item) => sum + item.price * item.quantity,
     0,
   );
-  // const totalDiscount = cartItems.reduce(
-  //   (sum, item) => sum + item.price * (item.quantity * 0.1), // Comentado
-  //   0,
-  // );
+  const totalDiscount = cartItems.reduce(
+    (sum, item) =>
+      sum + item.price * item.quantity * ((item.discount ?? 0) / 100),
+    0,
+  );
+  const total = subtotal - totalDiscount;
 
   const renderItem = ({ item }: { item: CartItem }) => {
-    // const discount = 10; // Comentado
-    // const discountedPrice = item.price * (1 - discount / 100); // Comentado
-    // const totalDiscountedPrice = discountedPrice * item.quantity; // Comentado
+    const discount = item.discount ?? 0;
+    const discountedPrice = item.price * (1 - discount / 100);
+    const totalDiscountedPrice = discountedPrice * item.quantity;
     const totalOriginalPrice = item.price * item.quantity;
 
     return (
       <View style={styles.card}>
         <View style={styles.imageContainer}>
-          {/** 
-          <View style={styles.discountBadge}>
-            <PoppinsText style={styles.discountBadgeText}>
-              -10%
-            </PoppinsText>
-          </View>*/}
+          {discount > 0 && (
+            <View style={styles.discountBadge}>
+              <PoppinsText style={styles.discountBadgeText}>
+                -{discount}%
+              </PoppinsText>
+            </View>
+          )}
           <Image
             source={{ uri: item.image }}
             style={styles.productImage}
@@ -44,15 +48,14 @@ const OrderSummary = () => {
           <View style={styles.row}>
             <PoppinsText style={styles.productName}>{item.name}</PoppinsText>
             <PoppinsText style={styles.productTotalPrice}>
-              ${totalOriginalPrice.toFixed(2)}
+              ${formatPrice(totalDiscountedPrice)}
             </PoppinsText>
           </View>
-          {/**
           <PoppinsText style={styles.productOriginalPrice}>
-            ${totalOriginalPrice.toFixed(2)}
-          </PoppinsText> */}
+            ${formatPrice(totalOriginalPrice)}
+          </PoppinsText>
           <PoppinsText style={styles.productPrice}>
-            (${item.price} c/u)
+            (${formatPrice(discountedPrice)} c/u)
           </PoppinsText>
           <PoppinsText style={styles.productQuantity}>
             Cantidad: {item.quantity}
@@ -102,12 +105,20 @@ const OrderSummary = () => {
             <View style={styles.row}>
               <PoppinsText style={styles.subtotalText}>Subtotal</PoppinsText>
               <PoppinsText style={styles.subtotalText}>
-                ${subtotal.toFixed(2)}
+                ${formatPrice(subtotal)}
               </PoppinsText>
             </View>
             <View style={styles.row}>
               <PoppinsText style={styles.discountText}>Descuentos</PoppinsText>
-              <PoppinsText style={styles.discountText}>-$0.00</PoppinsText>
+              <PoppinsText style={styles.discountText}>
+                -${formatPrice(totalDiscount)}
+              </PoppinsText>
+            </View>
+            <View style={styles.row}>
+              <PoppinsText style={styles.subtotalText}>Total</PoppinsText>
+              <PoppinsText style={styles.subtotalText}>
+                ${formatPrice(total)}
+              </PoppinsText>
             </View>
           </View>
         </>

src/components/SearchInput.tsx

@@ -17,6 +17,7 @@ import PoppinsText from './PoppinsText';
 import { router } from 'expo-router';
 import { ProductService } from '../services/products';
 import { ProductPresentation } from '@pharmatech/sdk';
+import { formatPrice } from '../utils/formatPrice';
 
 interface SearchInputProps {
   placeholder?: string;
@@ -195,7 +196,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
                         color: Colors.primary,
                       }}
                     >
-                      $ {p?.price}
+                      $ {formatPrice(p?.price)}
                     </PoppinsText>
                   </View>
                 </TouchableOpacity>

src/hooks/useCart.ts

@@ -15,15 +15,31 @@ export const useCart = () => {
   const userId = useSelector((state: RootState) => state.cart.userId);
 
   const addToCart = (item: CartItem) => {
+    if (item.quantity <= 0) return; // <-- NO agregar si cantidad es 0
+    console.log('[addToCart] Item añadido al carrito:', item); // <-- LOG
     dispatch(addItem(item));
   };
 
   const removeFromCart = (id: string) => {
     dispatch(removeItem(id));
   };
 
-  const updateCartQuantity = (id: string, quantity: number) => {
-    dispatch(updateQuantity({ id, quantity }));
+  const updateCartQuantity = (
+    id: string,
+    quantity: number,
+    discount?: number,
+    price?: number,
+  ) => {
+    // Busca el item actual en el carrito
+    const item = cartItems.find((item) => item.id === id);
+    dispatch(
+      updateQuantity({
+        id,
+        quantity,
+        discount: typeof discount === 'number' ? discount : item?.discount,
+        price: typeof price === 'number' ? price : item?.price,
+      }),
+    );
   };
 
   const getItemQuantity = (id: string) => {

src/redux/slices/cartSlice.ts

@@ -6,6 +6,7 @@ export type CartItem = {
   price: number;
   quantity: number;
   image: string;
+  discount?: number;
 };
 
 type CartState = {
@@ -35,13 +36,16 @@ const cartSlice = createSlice({
       }
     },
     addItem: (state, action: PayloadAction<CartItem>) => {
-      const existingItem = state.items.find(
+      const existing = state.items.find(
         (item) => item.id === action.payload.id,
       );
-      if (existingItem) {
-        existingItem.quantity = action.payload.quantity;
+      if (existing) {
+        // Si ya existe, actualiza cantidad y descuento correctamente
+        existing.quantity = action.payload.quantity;
+        existing.price = action.payload.price;
+        existing.discount = action.payload.discount; // <-- ¡Asegúrate de actualizar el descuento!
       } else {
-        state.items.push(action.payload);
+        state.items.push({ ...action.payload });
       }
       state.total = calculateTotal(state.items);
     },
@@ -51,11 +55,22 @@ const cartSlice = createSlice({
     },
     updateQuantity: (
       state,
-      action: PayloadAction<{ id: string; quantity: number }>,
+      action: PayloadAction<{
+        id: string;
+        quantity: number;
+        discount?: number;
+        price?: number;
+      }>,
     ) => {
       const item = state.items.find((item) => item.id === action.payload.id);
       if (item) {
         item.quantity = action.payload.quantity;
+        if (typeof action.payload.discount === 'number') {
+          item.discount = action.payload.discount;
+        }
+        if (typeof action.payload.price === 'number') {
+          item.price = action.payload.price;
+        }
       }
       state.total = calculateTotal(state.items);
     },