enh

apps/user-ui/components/floating-cart-bar.tsx

@@ -52,6 +52,17 @@ interface FloatingCartBarProps {
   return `${time.format('ddd, DD MMM ')}${timeRange}`;
 };
 
+// Product name component with quantity
+const ProductNameWithQuantity = ({ name, productQuantity, unitNotation }: { name: string; productQuantity: number; unitNotation: string }) => {
+  const truncatedName = name.length > 25 ? name.substring(0, 25) + '...' : name;
+  const unit = unitNotation ? ` ${unitNotation}` : '';
+  return (
+    <MyText style={tw`text-slate-900 font-extrabold text-sm flex-1`} numberOfLines={1}>
+      {truncatedName} <MyText style={tw`text-slate-500 font-medium text-xs`}>({productQuantity}{unit})</MyText>
+    </MyText>
+  );
+};
+
 const FloatingCartBar: React.FC<FloatingCartBarProps> = ({
   isFlashDelivery = false,
   isExpanded: controlledIsExpanded,
@@ -252,9 +263,11 @@ useEffect(() => {
 
                       <View style={tw`flex-1 ml-4`}>
                         <View style={tw`flex-row items-center justify-between mb-1`}>
-                          <MyText style={tw`text-slate-900 font-extrabold text-sm flex-1`} numberOfLines={1}>
+                          <ProductNameWithQuantity
-                            {item.product.name.length > 30 ? item.product.name.substring(0, 30) + '...' : item.product.name}
+                            name={item.product.name}
-                          </MyText>
+                            productQuantity={item.product.productQuantity}
+                            unitNotation={item.product.unitNotation}
+                          />
                            <MiniQuantifier
                              value={quantities[item.id] || item.quantity}
                              onChange={(value) => {

apps/user-ui/src/components/AddToCartDialog.tsx

@@ -6,7 +6,7 @@ import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { useCartStore } from '@/src/store/cartStore';
 import { useFlashCartStore } from '@/src/store/flashCartStore';
 import { trpc } from '@/src/trpc-client';
-import { useAddToCart, useGetCart, useUpdateCartItem } from '@/hooks/cart-query-hooks';
+import { useAddToCart, useGetCart, useUpdateCartItem, useRemoveFromCart } from '@/hooks/cart-query-hooks';
 import { useGetEssentialConsts } from '@/src/api-hooks/essential-consts.api';
 import dayjs from 'dayjs';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -38,6 +38,12 @@ export default function AddToCartDialog() {
     refetchCart: true,
   });
 
+  const removeFromCart = useRemoveFromCart({
+    showSuccessAlert: false,
+    showErrorAlert: false,
+    refetchCart: true,
+  });
+
   const isOpen = !!addedToCartProduct;
 
 
@@ -91,7 +97,7 @@ export default function AddToCartDialog() {
   const cartItem = cartData?.items?.find((item: any) => item.productId === product?.id);
 
   // Determine if updating existing item (quantity > 1 means it's an update)
-  const isUpdate = (cartItem?.quantity || 0) > 1;
+  const isUpdate = (cartItem?.quantity || 0) >= 1;
 
   // Check if flash delivery option should be shown
   const showFlashOption = product?.isFlashAvailable === true && isFlashDeliveryEnabled;
@@ -130,7 +136,9 @@ export default function AddToCartDialog() {
             <View>
               <MyText style={tw`text-xl font-bold text-gray-900`}>Select Delivery Slot</MyText>
               {product?.name && (
-              <MyText style={tw`text-sm text-gray-500`}>{product.name}</MyText>
+                <MyText style={tw`text-sm text-gray-500`}>
+                  {product.name} ({product.productQuantity}{product.unitNotation ? ` ${product.unitNotation}` : ''})
+                </MyText>
               )}
             </View>
           </View>
@@ -139,8 +147,7 @@ export default function AddToCartDialog() {
             {availableSlots.map((slot: any) => (
               <MyTouchableOpacity
                 key={slot.id}
-              style={tw`flex-row items-start mb-4 bg-gray-50 p-4 rounded-xl border border-gray-100 ${
+                style={tw`flex-row items-start mb-4 bg-gray-50 p-4 rounded-xl border border-gray-100 ${selectedSlotId === slot.id ? 'border-brand500' : 'border-gray-100'
-                selectedSlotId === slot.id ? 'border-brand500' : 'border-gray-100'
                   }`}
                 onPress={() => {
                   setSelectedSlotId(slot.id);
@@ -166,8 +173,7 @@ export default function AddToCartDialog() {
           {showFlashOption && (
             <MyTouchableOpacity
               key="flash-delivery"
-            style={tw`flex-row items-center mb-4 bg-pink-50 p-4 rounded-xl border ${
+              style={tw`flex-row items-center mb-4 bg-pink-50 p-4 rounded-xl border ${selectedFlashDelivery ? 'border-pink-500' : 'border-pink-200'
-              selectedFlashDelivery ? 'border-pink-500' : 'border-pink-200'
                 }`}
               onPress={() => {
                 setSelectedFlashDelivery(true);
@@ -189,13 +195,34 @@ export default function AddToCartDialog() {
 
           <View style={tw`mt-4`}>
             <MyText style={tw`text-sm font-bold text-gray-900 mb-2`}>Quantity</MyText>
+            <View style={tw`flex-row items-center`}>
+              <View style={tw`flex-1`}>
                 <Quantifier
                   value={quantity}
                   setValue={setQuantity}
-            step={product.incrementStep}
+                  step={1}
                   unit={product.unitNotation}
                 />
               </View>
+              {isUpdate && (
+                <MyTouchableOpacity
+                  onPress={() => {
+                    if (cartItem?.id) {
+                      removeFromCart.mutate(
+                        { itemId: cartItem.id },
+                        { onSuccess: () => clearAddedToCartProduct() }
+                      );
+                    } else {
+                      clearAddedToCartProduct();
+                    }
+                  }}
+                  style={tw`p-2 ml-3 bg-red-50 rounded-lg border border-red-200`}
+                >
+                  <MaterialIcons name="delete-outline" size={24} color="#EF4444" />
+                </MyTouchableOpacity>
+              )}
+            </View>
+          </View>
 
           <View style={tw`flex-row gap-3 mt-4 pb-12`}>
             <MyTouchableOpacity

packages/ui/index.ts

@@ -63,8 +63,8 @@ const isDevMode = Constants.executionEnvironment !== "standalone";
 // const BASE_API_URL = API_URL;
 // const BASE_API_URL = 'http://10.0.2.2:4000';
 // const BASE_API_URL = 'http://192.168.100.101:4000';
-const BASE_API_URL = 'http://192.168.1.3:4000';
+// const BASE_API_URL = 'http://192.168.1.3:4000';
-// let BASE_API_URL = "https://mf.freshyo.in";
+let BASE_API_URL = "https://mf.freshyo.in";
 //  let BASE_API_URL = 'http://192.168.100.104:4000';
 //  let BASE_API_URL = 'http://192.168.29.176:4000';