react-native-srschat 0.1.27 → 0.1.29

package/src/components/productCard.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
-import { View, Text, Image, TouchableOpacity, TextInput, StyleSheet, Platform, Keyboard } from "react-native";
+import { View, Text, Image, TouchableOpacity, TextInput, StyleSheet, Platform, Keyboard, ActionSheetIOS } from "react-native";
 import { AppContext } from "../contexts/AppContext";
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
@@ -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,9 +65,21 @@ 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",
+      selectedUom: selectedUom,
       quantity: quantity,
       product: prod 
     });
@@ -81,6 +94,27 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
     onProductCardClick(prodWithSku); 
   };
   
+  const handleUomChange = (value) => {
+    setSelectedUom(value);
+  };
+  
+  const openUomPicker = () => {
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options: [...uoms, 'Cancel'],
+          cancelButtonIndex: uoms.length,
+          title: 'Select Unit',
+        },
+        (buttonIndex) => {
+          if (buttonIndex !== uoms.length) {
+            handleUomChange(uoms[buttonIndex]);
+          }
+        }
+      );
+    }
+  };
+  
   return (
     <View style={styles.card}>
       {/* Two-column layout */}
@@ -88,6 +122,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 +162,89 @@ 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>
+                <TouchableOpacity 
+                  style={styles.dropdownButton}
+                  onPress={openUomPicker}
+                  disabled={!valid}
+                >
+                  <Text style={styles.dropdownButtonText}>{selectedUom}</Text>
+                  <Ionicons name="chevron-down" size={16} color="rgba(0, 0, 0, 0.6)" />
+                </TouchableOpacity>
+              </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 +255,6 @@ const styles = StyleSheet.create({
   card: {
     backgroundColor: "#fff",
     width: '100%',
-    padding: 10,
     padding: 12,
     paddingHorizontal: 16,
     borderRadius: 12,
@@ -183,6 +267,7 @@ const styles = StyleSheet.create({
   leftColumn: {
     width: "25%",
     alignItems: "center",
+    position: "relative",
   },
   rightColumn: {
     width: "75%",
@@ -194,24 +279,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 +314,7 @@ const styles = StyleSheet.create({
   salePrice: {
     fontSize: 16,
     fontWeight: "bold",
-    color: "#ff4757",
+    color: "red",
   },
   perUnit: {
     fontSize: 12,
@@ -250,29 +342,82 @@ 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,
+  },
+  dropdownButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     borderWidth: 1,
-    borderColor: "rgba(0, 0, 0, 0.23)",
+    borderColor: 'rgba(0, 0, 0, 0.23)',
     borderRadius: 4,
     paddingHorizontal: 10,
+    height: 40,
+    minWidth: 80,
+  },
+  dropdownButtonText: {
+    fontSize: 14,
+    color: '#555',
+    marginRight: 8,
+  },
+  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/voice.js

@@ -1,8 +1,9 @@
 // VoiceButton.js
 
 import React, { useState, useContext, useEffect } from 'react';
-import { TouchableOpacity, ActivityIndicator, StyleSheet, Alert } from 'react-native';
+import { TouchableOpacity, ActivityIndicator, StyleSheet, Alert, Linking, Platform } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import useAsyncStorage from '../hooks/useAsyncStorage';
 
 import { 
   startRecording, 
@@ -10,60 +11,129 @@ import {
   cancelRecording,
   requestAudioPermission, 
   cleanup, 
-  initVoice 
+  initVoice,
+  resetStoredPermission,
+  setPermissionStatusHandlers
 } from '../utils/audioRecorder';
 import { AppContext } from '../contexts/AppContext';
 
+const PERMISSION_STORAGE_KEY = '@voice_permission_status';
+
 export const VoiceButton = () => {
   const { handleVoiceSend } = useContext(AppContext);
   const [isListening, setIsListening] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [permissionChecked, setPermissionChecked] = useState(false);
+  const [hasPermission, setHasPermission] = useState(null);
+  
+  // Use your custom AsyncStorage hook
+  const [permissionStatus, setPermissionStatus] = useAsyncStorage(PERMISSION_STORAGE_KEY, null);
 
   useEffect(() => {
+    // Register our permission handlers
+    setPermissionStatusHandlers(() => permissionStatus, setPermissionStatus);
+    
     const setupVoice = async () => {
-      const initialized = await initVoice((result, error) => {
-        if (error) {
-          Alert.alert('Error', error);
-          setIsListening(false);
-          setLoading(false);
+      try {
+        // Check stored permission first
+        if (permissionStatus === 'denied') {
+          // We already know permission was denied, don't show alert again
+          setHasPermission(false);
+          setPermissionChecked(true);
           return;
         }
-        if (result) {
-          handleVoiceSend(null, result);
-          setIsListening(false);
-          setLoading(false);
-        }
-      });
+        
+        // Only request permission if not already denied
+        const permissionResult = await requestAudioPermission();
+        setHasPermission(permissionResult);
+        
+        if (permissionResult) {
+          const initialized = await initVoice((result, error) => {
+            if (error) {
+              // Don't show alert for permission errors since we handle that elsewhere
+              if (!error.includes('permission')) {
+                Alert.alert('Error', error);
+              }
+              setIsListening(false);
+              setLoading(false);
+              return;
+            }
+            if (result) {
+              handleVoiceSend(null, result);
+            }
+            // Always reset states when the recognition ends
+            setIsListening(false);
+            setLoading(false);
+          });
 
-      if (!initialized) {
-        Alert.alert(
-          'Error',
-          'Speech recognition is not available on this device'
-        );
+          if (!initialized) {
+            // Only show this alert once per session
+            if (!permissionChecked) {
+              Alert.alert(
+                'Error',
+                'Speech recognition is not available on this device'
+              );
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error in setupVoice:', error);
+      } finally {
+        setPermissionChecked(true);
       }
     };
 
-    setupVoice();
+    if (!permissionChecked) {
+      setupVoice();
+    }
 
     return () => {
       cleanup();
     };
-  }, []);
+  }, [permissionStatus, permissionChecked]);
 
   const toggleRecording = async () => {
     try {
       if (!isListening) {
-        const hasPermission = await requestAudioPermission();
-        if (!hasPermission) {
-          Alert.alert('Permission Denied', 'Microphone permission is required for voice recognition');
+        // If we already know we don't have permission, show a better message
+        if (hasPermission === false) {
+          Alert.alert(
+            'Permission Required', 
+            'Voice recognition requires microphone permission. Would you like to update your settings?',
+            [
+              {
+                text: 'Cancel',
+                style: 'cancel'
+              },
+              {
+                text: 'Settings',
+                onPress: () => {
+                  // Reset stored permission so we can check again
+                  setPermissionStatus(null);
+                  // Open device settings
+                  openAppSettings();
+                  // Reset our permission check 
+                  setPermissionChecked(false);
+                }
+              }
+            ]
+          );
           return;
         }
 
         setLoading(true);
+        const checkPermission = await requestAudioPermission();
+        if (!checkPermission) {
+          setHasPermission(false);
+          setLoading(false);
+          return;
+        }
+
         const started = await startRecording();
         if (started) {
           setIsListening(true);
         } else {
+          // Only show error if not permission related
           Alert.alert('Error', 'Failed to start voice recognition');
         }
       } else {
@@ -78,7 +148,21 @@ export const VoiceButton = () => {
       await cleanup();
     } finally {
       setLoading(false);
+    }
+  };
 
+  const openAppSettings = async () => {
+    try {
+      if (Platform.OS === 'ios') {
+        // For iOS
+        await Linking.openURL('app-settings://');
+      } else {
+        // For Android
+        await Linking.openSettings();
+      }
+    } catch (error) {
+      console.error('Cannot open settings', error);
+      Alert.alert('Error', 'Unable to open settings. Please open settings manually.');
     }
   };
 

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

package/src/layout/icon.js

@@ -2,13 +2,14 @@ import React, { useContext } from 'react';
 import { TouchableOpacity, View, StyleSheet, Text } from 'react-native';
 import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import Svg, { Path } from 'react-native-svg';
 
 export const ChatIcon = () => {
   const { setShowModal, messages, maintenance, disclaimer, uiConfig } = useContext(AppContext);
 
   // Determine position from uiConfig or default
   const iconPosition = {
-    bottom: uiConfig?.iconPosition?.bottom ?? 80,
+    top: uiConfig?.iconPosition?.top ?? 50,
     right: uiConfig?.iconPosition?.right ?? 20,
   };
 
@@ -36,7 +37,9 @@ export const ChatIcon = () => {
   return (
     <TouchableOpacity style={containerStyle} onPress={handleClick} activeOpacity={0.7}>
       <View style={styles.iconContent}>
-        <Ionicons name="chatbubble-ellipses" size={28} color="white" />
+        <Svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#ffffff" viewBox="0 0 256 256">
+          <Path d="M132,24A100.11,100.11,0,0,0,32,124v84.33A15.69,15.69,0,0,0,47.67,224H132a100,100,0,0,0,0-200Zm28,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z" />
+        </Svg>
         {iconType === 'tab' && (
           <Text style={styles.tabText}>Chat with Heritage</Text>
         )}
@@ -52,7 +55,6 @@ const styles = StyleSheet.create({
     width: 60,
     height: 60,
     borderRadius: 30,
-    backgroundColor: '#FFA500',
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 10,

package/src/layout/layout.js

@@ -64,15 +64,19 @@ export const Layout = () => {
     // uiConfig.showIcon, uiConfig.toggleChat
 
     useEffect(() => {
-      if (!disclaimer) {
-        setShowModal("Form");
-      } else {
-        if (messages.length > 1 || maintenance) {
-          setShowModal("ChatWindow");
-        }
-        else {
-          setShowModal("Welcome")
+      if (uiConfig.toggleChat) {
+        if (!disclaimer) {
+          setShowModal("Form");
+        } else {
+          if (messages.length > 1 || maintenance) {
+            setShowModal("ChatWindow");
+          }
+          else {
+            setShowModal("Welcome")
+          }
         }
+      } else {
+        setShowModal("Icon"); // Default to Icon/bubble state
       }
     }, [uiConfig.toggleChat]);
       

package/src/layout/welcome.js

@@ -6,6 +6,7 @@ import { AppContext } from '../contexts/AppContext';
 import { WelcomeInput } from '../components/welcomeInput';
 import ButtonComponent from '../components/welcomeButton';
 import { Testing } from '../components/testing';
+import { PoseidonLogo } from '../components/PoseidonLogo';
 
 export const Welcome = ({ panHandlers }) => {
   const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick } = useContext(AppContext);
@@ -25,11 +26,7 @@ export const Welcome = ({ panHandlers }) => {
         {/* Top section */}
         <View style={styles.topContainer}>
           <View style={styles.topHeader}>
-            <Image 
-              source={require('../assets/heritage.png')} 
-              style={[styles.logo, { tintColor: "white" }]} 
-              resizeMode="contain" 
-            />
+            <PoseidonLogo width={150} height={35} color="white" />
             <TouchableOpacity onPress={() => handleClick()} style={styles.collapseButton}>
               <Ionicons name="chevron-down" size={24} color="white" />
             </TouchableOpacity>

package/src/layout/window.js

@@ -180,7 +180,8 @@ const styles = StyleSheet.create({
   userMessage: {
     alignSelf: 'flex-end',
     backgroundColor: "#003764", 
-    color: "#ffffff"
+    color: "#ffffff",
+    borderTopRightRadius: 0,
   },
   aiMessage: {
     alignSelf: 'flex-start',