react-native-srschat 0.1.56 → 0.1.57

package/src/components/productCard.js

@@ -24,7 +24,8 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     if (minPackStr) {
       const minPackNum = parseFloat(minPackStr);
       if (!isNaN(minPackNum) && minPackNum > 1.0) {
-        return minPackNum;
+        // Round to 2 decimal places for decimal min pack quantities
+        return Math.round(minPackNum * 100) / 100;
       }
     }
     return 1; // Default min pack quantity for individual purchase
@@ -50,6 +51,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   const currentMinPackQtyForSelectedUom = getMinPackQtyForUom(selectedUom);
 
   const [quantity, setQuantity] = useState(0);
+  const [quantityText, setQuantityText] = useState("0"); // Track the text input separately
 
   // Add keyboard listeners to detect when keyboard appears/disappears
   useEffect(() => {
@@ -80,49 +82,67 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   // Called on every keystroke in the quantity input
   const handleQuantityChange = (text) => {
     const rawValue = text.trim();
+    
+    // Update the text display immediately
+    setQuantityText(rawValue);
+    
+    // Handle empty input
     if (rawValue === "") {
         setQuantity(0);
         return;
     }
-    const numericValue = parseInt(rawValue, 10);
+    
+    // Allow partial decimal inputs like "." or "1."
+    if (rawValue === "." || rawValue.endsWith(".")) {
+        // Don't update quantity state for partial decimal inputs, just keep the text
+        return;
+    }
+    
+    const numericValue = parseFloat(rawValue);
     if (!isNaN(numericValue) && numericValue >= 0) {
-        setQuantity(numericValue);
+        // Round to 2 decimal places to handle decimal min pack quantities
+        setQuantity(Math.round(numericValue * 100) / 100);
     } else {
-        setQuantity(0); 
+        // Invalid input, reset quantity but keep the text for user feedback
+        setQuantity(0);
     }
   };
 
   // Called when the quantity input loses focus (onEndEditing)
   const handleQuantityBlur = () => {
-    const currentQuantityFromState = quantity;
-    const uom = selectedUom;
-    const minPack = getMinPackQtyForUom(uom);
     const isProdValid = prod.inventory_info?.is_valid || false;
 
-    if (!isProdValid) {
-        if (quantity !== 0) setQuantity(0);
-        return;
+    // Parse the final text input
+    const rawValue = quantityText.trim();
+    let finalQuantity = 0;
+    
+    if (rawValue !== "") {
+        const numericValue = parseFloat(rawValue);
+        if (!isNaN(numericValue) && numericValue >= 0) {
+            finalQuantity = Math.round(numericValue * 100) / 100;
+        }
     }
 
-    if (currentQuantityFromState === 0) {
-        if (quantity !== 0) setQuantity(0);
+    // Only basic validation - don't auto-correct to min pack quantities
+    if (!isProdValid) {
+        setQuantity(0);
+        setQuantityText("0");
         return;
     }
 
-    let adjustedValue;
-    if (minPack <= 1) {
-        adjustedValue = currentQuantityFromState;
-    } else { 
-        adjustedValue = Math.round(currentQuantityFromState / minPack) * minPack;
-        if (currentQuantityFromState > 0 && adjustedValue === 0) {
-            adjustedValue = minPack;
-        }
+    // Just ensure quantity is not negative, but allow any positive decimal value
+    if (finalQuantity < 0) {
+        setQuantity(0);
+        setQuantityText("0");
+        return;
     }
 
-    const finalQuantity = Math.max(0, adjustedValue);
-    if (quantity !== finalQuantity) {
-        setQuantity(finalQuantity);
-    }
+    // Update both states with the final parsed value
+    setQuantity(finalQuantity);
+    setQuantityText(finalQuantity.toString());
+    
+    // Keep the user's input as-is for valid products
+    // Validation and alerts will happen in handleAddToCart
   };
 
   const incrementQuantity = () => {
@@ -131,13 +151,28 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     
     setQuantity(prevQuantity => {
       let newQuantity;
-      if (prevQuantity === 0 && minPackForUom > 0) {
+      
+      if (prevQuantity === 0) {
+        // If starting from 0, go to first min pack
         newQuantity = minPackForUom;
-      } else {
+      } else if (minPackForUom <= 1) {
+        // If min pack is 1 or less, just increment by min pack
         newQuantity = prevQuantity + minPackForUom;
+      } else {
+        // Find the next valid multiple of min pack quantity
+        const nextMultiple = Math.ceil(prevQuantity / minPackForUom) * minPackForUom;
+        // If current quantity is already a perfect multiple, go to next multiple
+        if (Math.abs(prevQuantity % minPackForUom) < 0.01) {
+          newQuantity = prevQuantity + minPackForUom;
+        } else {
+          newQuantity = nextMultiple;
+        }
       }
 
-      return newQuantity;
+      // Round to 2 decimal places to handle decimal min pack quantities
+      const finalQuantity = Math.round(newQuantity * 100) / 100;
+      setQuantityText(finalQuantity.toString());
+      return finalQuantity;
     });
   };
 
@@ -146,21 +181,33 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
     const minPackForUom = getMinPackQtyForUom(uomForCalc);
 
     setQuantity(prevQuantity => {
-      if (prevQuantity === 0) return 0; // Cannot go below 0
-
-      let newQuantity = prevQuantity - minPackForUom;
-
-      if (newQuantity < 0) {
-        newQuantity = 0;
+      if (prevQuantity === 0) {
+        setQuantityText("0");
+        return 0; // Cannot go below 0
       }
+
+      let newQuantity;
       
-      // If new quantity is positive but less than minPackForUom, it should be 0
-      // (as any purchase must be in multiples of minPackForUom or 0)
-      if (newQuantity > 0 && newQuantity < minPackForUom) {
-          newQuantity = 0;
+      if (minPackForUom <= 1) {
+        // If min pack is 1 or less, just decrement by min pack
+        newQuantity = Math.max(0, prevQuantity - minPackForUom);
+      } else {
+        // Find the previous valid multiple of min pack quantity
+        const prevMultiple = Math.floor(prevQuantity / minPackForUom) * minPackForUom;
+        
+        // If current quantity is already a perfect multiple, go to previous multiple
+        if (Math.abs(prevQuantity % minPackForUom) < 0.01) {
+          newQuantity = Math.max(0, prevQuantity - minPackForUom);
+        } else {
+          // If not a perfect multiple, go to the lower multiple
+          newQuantity = prevMultiple;
+        }
       }
       
-      return newQuantity;
+      // Round to 2 decimal places to handle decimal min pack quantities
+      const finalQuantity = Math.round(newQuantity * 100) / 100;
+      setQuantityText(finalQuantity.toString());
+      return finalQuantity;
     });
   };
 
@@ -201,8 +248,9 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
       });
     };
 
-    if (currentMinPackQtyForSelectedUom > 1 && quantity % currentMinPackQtyForSelectedUom !== 0) {
-      const roundedResult = Math.ceil(quantity / currentMinPackQtyForSelectedUom) * currentMinPackQtyForSelectedUom;
+    // Check if quantity is valid for min pack requirements
+    if (currentMinPackQtyForSelectedUom > 1 && Math.abs(quantity % currentMinPackQtyForSelectedUom) > 0.01) {
+      const roundedResult = Math.round(Math.ceil(quantity / currentMinPackQtyForSelectedUom) * currentMinPackQtyForSelectedUom * 100) / 100;
 
       Alert.alert(
         `Item #${prod.part_number} is sold in multiples of ${currentMinPackQtyForSelectedUom} ${selectedUom}`,
@@ -211,7 +259,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
           {
             text: 'Cancel',
             onPress: () => {
-              setQuantity(0); // Reset quantity to 0
+              // Keep the user's input, don't reset to 0
             },
             style: 'cancel',
           },
@@ -246,6 +294,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
 
     // Always set quantity to 0 when UOM changes
     setQuantity(0);
+    setQuantityText("0");
   };
   
   const openUomPicker = () => {
@@ -376,7 +425,7 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
                 </TouchableOpacity>
                 
                 <TextInput
-                  value={quantity.toString()}
+                  value={quantityText}
                   onChangeText={handleQuantityChange}
                   onEndEditing={handleQuantityBlur}
                   keyboardType="numeric"

package/src/components/testProductCard.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, ScrollView, StyleSheet, Text } from 'react-native';
+import { ProductCard } from './productCard';
+
+const mockProduct = {
+  "part_number": "AEQO177",
+  "inventory_info": {
+    "default_uom": "EA",
+    "is_valid": true,
+    "info_by_uom": {
+      "EA": {
+        "gross_price": 7.83,
+        "net_price": 7.83,
+        "is_on_sale": false,
+        "quantity_available": 0,
+        "discounts": null,
+        "min_pack_qty": 1.5
+      }
+    }
+  },
+  "product_details": {
+    "product_name": "Aladdin Hayward SPX1600S SuperPump Lid Gasket | O-177-2",
+    "part_number": "AEQO177",
+    "manufacturer_id": "O-177-2",
+    "heritage_link": "https://www.heritagepoolplus.com/aeqo177-aladdin-o-ring-o-177-o-177-2-o-177-2",
+    "image_url": "https://media.heritageplus.com/image/upload/v1668157956/image/AEQO177_0.jpg"
+  }
+};
+
+export const TestProductCard = () => {
+  return (
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>Test Product Card</Text>
+      <ProductCard 
+        prod={mockProduct}
+        onFocusQuantityInput={(partNumber) => console.log('Focus on:', partNumber)}
+        messageId="test-message-123"
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f6f6f6',
+    padding: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+}); 

package/src/components/testing.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Button, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { View, Button, StyleSheet, TouchableOpacity, Text, ScrollView } from 'react-native';
+import { ProductCard } from './productCard';
 
 export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
 
@@ -14,7 +15,8 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
           "net_price": 7.83,
           "is_on_sale": false,
           "quantity_available": 0,
-          "discounts": null
+          "discounts": null,
+          "min_pack_qty": 1.5
         }
       }
     },
@@ -28,25 +30,52 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
   }
 
   return (
-    <View style={styles.container}>
-      <TouchableOpacity style={styles.button} onPress={() => onProductCardClick(product)}>
-          <Text style={styles.buttonText}>Product Card Click</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.button} onPress={() => onAddToCartClick({"quantity":1,"product":product})}>
-          <Text style={styles.buttonText}>Add to Cart</Text>
-      </TouchableOpacity>
-    </View>
+    <ScrollView style={styles.container}>
+      <Text style={styles.title}>Test Product Card</Text>
+      
+      {/* Display the actual product card */}
+      <View style={styles.productCardContainer}>
+        <ProductCard 
+          prod={product}
+          onFocusQuantityInput={(partNumber) => console.log('Focus on:', partNumber)}
+          messageId="test-message-123"
+        />
+      </View>
+      
+      {/* Test buttons */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.button} onPress={() => onProductCardClick(product)}>
+            <Text style={styles.buttonText}>Product Card Click</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={() => onAddToCartClick({"quantity":1,"product":product})}>
+            <Text style={styles.buttonText}>Add to Cart</Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: '#f6f6f6',
+    borderTopWidth: 1,
+    borderTopColor: '#DDD',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    padding: 16,
+  },
+  productCardContainer: {
+    paddingHorizontal: 16,
+  },
+  buttonContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-evenly',
     paddingHorizontal: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#DDD',
+    paddingVertical: 20,
   },
   button: {
     backgroundColor: "#d4d4d4",
@@ -54,7 +83,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 5,
     alignItems: "center",
-    marginBottom: 10,
-    marginTop: 10,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: 'bold',
   },
 });