react-native-srschat 0.1.30 → 0.1.32

package/src/components/productCard.js

@@ -24,7 +24,8 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
   const grossPrice = uomInfo.gross_price || 0;
   const netPrice = uomInfo.net_price || 0;
   const isOnSale = uomInfo.is_on_sale || false;
-  const discounts = uomInfo.discounts || []
+  const discounts = uomInfo.discounts || [];
+  
 
   const maxQuantity = Math.floor(prod.inventory_info?.info_by_uom?.EA?.quantity_available || 0);
   const valid = prod.inventory_info?.is_valid || false;
@@ -64,6 +65,18 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
     }
   };
 
+  const incrementQuantity = () => {
+    if (quantity < maxQuantity) {
+      setQuantity(prevQuantity => prevQuantity + 1);
+    }
+  };
+
+  const decrementQuantity = () => {
+    if (quantity > 0) {
+      setQuantity(prevQuantity => prevQuantity - 1);
+    }
+  };
+
   const handleAddToCart = () => {
     onAddToCartClick({
       selectedUom: "EA",
@@ -81,6 +94,10 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
     onProductCardClick(prodWithSku); 
   };
   
+  const handleUomChange = (value) => {
+    setSelectedUom(value);
+  };
+  
   return (
     <View style={styles.card}>
       {/* Two-column layout */}
@@ -88,6 +105,11 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
         {/* Left Column (Image, Price, Availability) */}
         <View style={styles.leftColumn}>
           <TouchableOpacity onPress={handleProductClick}>
+            {isOnSale && (
+              <View style={styles.saleTag}>
+                <Text style={styles.saleTagText}>SALE</Text>
+              </View>
+            )}
             <Image source={{ uri: prod.product_details.image_url }} style={styles.image} />
           </TouchableOpacity>
             {valid && 
@@ -123,43 +145,104 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
             <Text style={styles.boldText}>Part # </Text>{prod.part_number}
           </Text>
 
-          {/* Bottom Row: Quantity Input & Add to Cart Button */}
-          <View style={styles.bottomRow}>
-            <TextInput
-              value={quantity.toString()}
-              onChangeText={handleQuantityChange}
-              keyboardType="numeric"
-              style={[
-                styles.quantityInput,
-                { 
-                  height: 40, 
-                  minHeight: 40,
-                  maxHeight: 40
-                }
-              ]}
-              editable={valid && inStock}
-              underlineColorAndroid="transparent"
-              autoCorrect={false}
-              autoCapitalize="none"
-              caretHidden={false}
-              contextMenuHidden={true}
-              disableFullscreenUI={true}
-              defaultValue="1"
-            />
+          {/* Display discounts if available */}
+          {discounts.length > 0 && (
+            <View style={styles.discountContainer}>
+              {discounts.map((discount, index) => (
+                <Text key={index} style={styles.discountText}>{discount}</Text>
+              ))}
+            </View>
+          )}
 
-            <TouchableOpacity 
-              onPress={handleAddToCart} 
-              disabled={!valid || !inStock || quantity === 0}
-              style={[
-                styles.addToCartButton,
-                valid && inStock && quantity > 0 ? styles.activeButton : styles.disabledButton
-              ]}
-            >
-              <Text style={[styles.buttonText, valid && inStock && quantity > 0 ? styles.activeText : styles.disabledText]}>
-                Add to Cart
-              </Text>
-            </TouchableOpacity>
+          {/* Input Section with UOM Selector and Quantity */}
+          <View style={styles.inputRow}>
+            {uoms.length > 1 ? (
+              <View style={styles.uomSelectorContainer}>
+                <Text style={styles.inputLabel}>Unit</Text>
+                <View style={[styles.uomSelector, { height: 40 }]}>
+                  {uoms.map((uom) => (
+                    <TouchableOpacity
+                      key={uom}
+                      style={[
+                        styles.uomOption,
+                        selectedUom === uom && styles.selectedUomOption,
+                        { height: 40 }
+                      ]}
+                      onPress={() => handleUomChange(uom)}
+                      disabled={!valid}
+                    >
+                      <Text 
+                        style={[
+                          styles.uomText, 
+                          selectedUom === uom && styles.selectedUomText
+                        ]}
+                      >
+                        {uom}
+                      </Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+            ) : null}
+            
+            <View style={styles.quantityContainer}>
+              <Text style={styles.inputLabel}>Qty</Text>
+              <View style={styles.quantityInputContainer}>
+                <TouchableOpacity 
+                  style={styles.quantityButton}
+                  onPress={decrementQuantity}
+                  disabled={!valid || quantity <= 0}
+                >
+                  <Ionicons 
+                    name="remove" 
+                    size={18} 
+                    color={valid && quantity > 0 ? "#367cb6" : "rgba(0, 0, 0, 0.23)"} 
+                  />
+                </TouchableOpacity>
+                
+                <TextInput
+                  value={quantity.toString()}
+                  onChangeText={handleQuantityChange}
+                  keyboardType="numeric"
+                  style={styles.quantityInput}
+                  editable={valid && inStock}
+                  underlineColorAndroid="transparent"
+                  autoCorrect={false}
+                  autoCapitalize="none"
+                  caretHidden={false}
+                  contextMenuHidden={true}
+                  disableFullscreenUI={true}
+                  defaultValue="1"
+                />
+                
+                <TouchableOpacity 
+                  style={styles.quantityButton}
+                  onPress={incrementQuantity}
+                  disabled={!valid || quantity >= maxQuantity}
+                >
+                  <Ionicons 
+                    name="add" 
+                    size={18} 
+                    color={valid && quantity < maxQuantity ? "#367cb6" : "rgba(0, 0, 0, 0.23)"} 
+                  />
+                </TouchableOpacity>
+              </View>
+            </View>
           </View>
+
+          {/* Add to Cart Button on a new line */}
+          <TouchableOpacity 
+            onPress={handleAddToCart} 
+            disabled={!valid || !inStock || quantity === 0}
+            style={[
+              styles.addToCartButton,
+              valid && inStock && quantity > 0 ? styles.activeButton : styles.disabledButton
+            ]}
+          >
+            <Text style={[styles.buttonText, valid && inStock && quantity > 0 ? styles.activeText : styles.disabledText]}>
+              Add to Cart
+            </Text>
+          </TouchableOpacity>
         </View>
       </View>
     </View>
@@ -170,7 +253,6 @@ const styles = StyleSheet.create({
   card: {
     backgroundColor: "#fff",
     width: '100%',
-    padding: 10,
     padding: 12,
     paddingHorizontal: 16,
     borderRadius: 12,
@@ -183,6 +265,7 @@ const styles = StyleSheet.create({
   leftColumn: {
     width: "25%",
     alignItems: "center",
+    position: "relative",
   },
   rightColumn: {
     width: "75%",
@@ -194,24 +277,31 @@ const styles = StyleSheet.create({
     resizeMode: "contain",
     marginBottom: 5,
   },
+  saleTag: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: "red",
+    borderRadius: 4,
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    zIndex: 1,
+  },
+  saleTagText: {
+    color: "#fff",
+    fontSize: 10,
+    fontWeight: "bold",
+  },
   price: {
     fontSize: 14,
     fontWeight: "bold",
     textAlign: "center",
   },
-  saleTag: {
-    backgroundColor: "#ff4757",
-    color: "#fff",
-    fontSize: 12,
-    fontWeight: "bold",
-    paddingVertical: 2,
-    paddingHorizontal: 5,
-    borderRadius: 4,
-    marginBottom: 5,
-  },
   priceContainer: {
     flexDirection: "row",
     alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "center",
   },
   originalPrice: {
     fontSize: 14,
@@ -222,7 +312,7 @@ const styles = StyleSheet.create({
   salePrice: {
     fontSize: 16,
     fontWeight: "bold",
-    color: "#ff4757",
+    color: "red",
   },
   perUnit: {
     fontSize: 12,
@@ -250,29 +340,92 @@ const styles = StyleSheet.create({
   boldText: {
     fontWeight: "bold",
   },
-  bottomRow: {
+  discountContainer: {
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  discountText: {
+    fontSize: 13,
+    color: "#e41e31",
+    fontWeight: "500",
+    // backgroundColor: "#f0f7ff",
+    // borderWidth: 1,
+    // borderColor: "#bae0ff",
+    // borderRadius: 4,
+    // padding: 3,
+    marginTop: 3,
+  },
+  inputRow: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-end",
     marginTop: 10,
+    marginBottom: 10,
   },
-  quantityInput: {
-    width: 60,
-    height: Platform.OS === 'ios' ? 40 : 35,
+  uomSelectorContainer: {
+    marginRight: 10,
+  },
+  inputLabel: {
+    fontSize: 12,
+    color: "rgba(0, 0, 0, 0.6)",
+    marginBottom: 4,
+  },
+  uomSelector: {
+    flexDirection: "row",
     borderWidth: 1,
     borderColor: "rgba(0, 0, 0, 0.23)",
     borderRadius: 4,
-    paddingHorizontal: 10,
+    overflow: "hidden",
+    height: 40,
+  },
+  uomOption: {
+    paddingHorizontal: 12,
+    backgroundColor: "transparent",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+  },
+  selectedUomOption: {
+    backgroundColor: "#367cb6",
+  },
+  uomText: {
+    fontSize: 14,
+    color: "#555",
+  },
+  selectedUomText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+  quantityContainer: {
+    flex: 1,
+  },
+  quantityInputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 40,
+    borderWidth: 1,
+    borderColor: "rgba(0, 0, 0, 0.23)",
+    borderRadius: 4,
+  },
+  quantityButton: {
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  quantityInput: {
+    flex: 1,
+    height: 40,
     textAlign: "center",
-    marginRight: 10,
-    lineHeight: Platform.OS === 'ios' ? undefined : 24,
-    includeFontPadding: false,
+    paddingHorizontal: 5,
+    fontSize: 14,
+    minWidth: 40,
   },
   addToCartButton: {
-    flex: 1, 
     height: 40,
     justifyContent: "center",
     alignItems: "center",
     borderRadius: 4,
+    marginTop: 5,
   },
   activeButton: {
     backgroundColor: "#367cb6",

package/src/components/welcomeInput.js

@@ -18,6 +18,20 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
 
   const { data, handleSend, input, setInput, showModal, theme } = useContext(AppContext);
 
+  const handleKeyPress = ({ nativeEvent }) => {
+    if (nativeEvent.key === 'return' && !nativeEvent.shiftKey) {
+      nativeEvent.preventDefault && nativeEvent.preventDefault();
+      handleSend(input);
+      return;
+    }
+  };
+
+  const onSubmitEditing = () => {
+    if (input.trim()) {
+      handleSend(input);
+    }
+  };
+
   return (
         <View style={styles.inputContainer}>
         <TextInput
@@ -26,7 +40,12 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
             onChangeText={setInput}
             placeholder="Ask a question..."
             placeholderTextColor="#999"
-            multiline
+            multiline={false}
+            returnKeyType="send"
+            enablesReturnKeyAutomatically={true}
+            onKeyPress={handleKeyPress}
+            onSubmitEditing={onSubmitEditing}
+            blurOnSubmit={false}
         />
         <VoiceButton/>
         <TouchableOpacity