react-native-srschat 0.1.13 → 0.1.15

package/src/components/productCard.js

@@ -0,0 +1,240 @@
+import React, { useState, useContext } from "react";
+import { View, Text, Image, TouchableOpacity, TextInput, StyleSheet, Platform } from "react-native";
+import { AppContext } from "../contexts/AppContext";
+
+export const ProductCard = ({ prod }) => {
+  const { onProductCardClick, onAddToCartClick } = useContext(AppContext);
+
+  const [selectedUom, setSelectedUom] = useState(() => {
+    if (prod.inventory_info?.info_by_uom) {
+      const availableUoms = Object.keys(prod.inventory_info.info_by_uom);
+      const defaultUom = prod.inventory_info.default_uom;
+      return availableUoms.includes(defaultUom) ? defaultUom : availableUoms[0];
+    }
+    return "EA";
+  });
+
+  const uoms = prod.inventory_info?.info_by_uom
+    ? Object.keys(prod.inventory_info.info_by_uom)
+    : ["EA"];
+  const uomInfo = prod.inventory_info?.info_by_uom?.[selectedUom] || {};
+
+  const grossPrice = uomInfo.gross_price || 0;
+  const netPrice = uomInfo.net_price || 0;
+  const isOnSale = uomInfo.is_on_sale || false;
+  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;
+  const inStock = maxQuantity > 0;
+  const [quantity, setQuantity] = useState(valid && inStock ? 1 : 0);
+
+  const handleQuantityChange = (text) => {
+    const value = parseInt(text) || 0;
+    if (value >= 0 && value <= maxQuantity) {
+      setQuantity(value);
+    }
+  };
+
+  const handleAddToCart = () => {
+    onAddToCartClick({selectedUom: "EA", quantity: quantity, product: JSON.stringify(prod)})
+  };
+  
+  const handleProductClick = () => {
+    onProductCardClick(JSON.stringify(prod))
+  }
+
+  return (
+    <View style={styles.card}>
+      {/* Two-column layout */}
+      <View style={styles.row}>
+        {/* Left Column (Image, Price, Availability) */}
+        <View style={styles.leftColumn}>
+          <TouchableOpacity onPress={handleProductClick}>
+            <Image source={{ uri: prod.product_details.image_url }} style={styles.image} />
+          </TouchableOpacity>
+            {valid && 
+            <>
+            <View style={styles.priceContainer}>
+                {isOnSale ? (
+                <>
+                    <Text style={styles.originalPrice}>${Number(grossPrice).toFixed(2)}</Text>
+                    <Text style={styles.salePrice}>${Number(netPrice).toFixed(2)}</Text>
+                </>
+                ) : (
+                <Text style={styles.price}>${Number(grossPrice).toFixed(2)}</Text>
+                )}
+                <Text style={styles.perUnit}> / {selectedUom}</Text>
+            </View>              
+            <Text style={styles.availability}>
+                {maxQuantity === 0 ? "0 available" : maxQuantity > 1000 ? "1000+ available" : `${maxQuantity} available`}
+            </Text>
+            </>
+            }
+        </View>
+
+        {/* Right Column (Product Details) */}
+        <View style={styles.rightColumn}>
+          <TouchableOpacity onPress={handleProductClick}>
+            <Text style={styles.productName}>{prod.product_details.product_name}</Text>
+          </TouchableOpacity>
+
+          <Text style={styles.details}>
+            <Text style={styles.boldText}>MFG # </Text>{prod.product_details.manufacturer_id}
+          </Text>
+          <Text style={styles.details}>
+            <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}
+              editable={valid && inStock}
+            />
+
+            <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>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    width: '100%',
+    padding: 10,
+    padding: 12,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 5
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  leftColumn: {
+    width: "25%",
+    alignItems: "center",
+  },
+  rightColumn: {
+    width: "75%",
+    paddingLeft: 12,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    resizeMode: "contain",
+    marginBottom: 5,
+  },
+  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",
+  },
+  originalPrice: {
+    fontSize: 14,
+    textDecorationLine: "line-through",
+    color: "gray",
+    marginRight: 5,
+  },
+  salePrice: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: "#ff4757",
+  },
+  perUnit: {
+    fontSize: 12,
+    color: "gray",
+  },
+  availability: {
+    fontSize: 12,
+    color: "gray",
+    textAlign: "center",
+    marginTop: 3,
+  },
+  productName: {
+    fontSize: 16,
+    fontWeight: "medium",
+    color: "#161616",
+    marginBottom: 5,
+  },
+  details: {
+    fontSize: 13,
+    color: "#555",
+    marginTop: 3,
+  },
+  boldText: {
+    fontWeight: "bold",
+  },
+  bottomRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 10,
+  },
+  quantityInput: {
+    width: 60,
+    height: 35,
+    borderWidth: 1,
+    borderColor: "rgba(0, 0, 0, 0.23)",
+    borderRadius: 4,
+    paddingHorizontal: 10,
+    textAlign: "center",
+    marginRight: 10,
+  },
+  addToCartButton: {
+    flex: 1, 
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 4,
+  },
+  activeButton: {
+    backgroundColor: "#367cb6",
+  },
+  disabledButton: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "rgba(0, 0, 0, 0.23)",
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  activeText: {
+    color: "#fff",
+  },
+  disabledText: {
+    color: "rgba(0, 0, 0, 0.60)",
+  },
+});

package/src/components/testing.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Button, StyleSheet } from 'react-native';
+import { View, Button, StyleSheet, TouchableOpacity, Text } from 'react-native';
 
 export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
 
@@ -29,8 +29,12 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
 
   return (
     <View style={styles.container}>
-      <Button title="Product Card Click" onPress={() => onProductCardClick(product)} />
-      <Button title="Add to Cart" onPress={() => onAddToCartClick({"quantity":1,"product":product})} />
+      <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>
   );
 };
@@ -38,10 +42,19 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-evenly',
-    marginVertical: 10,
     paddingHorizontal: 16,
     borderTopWidth: 1,
     borderTopColor: '#DDD',
   },
+  button: {
+    backgroundColor: "#d4d4d4",
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderRadius: 5,
+    alignItems: "center",
+    marginBottom: 10,
+    marginTop: 10,
+  },
 });

package/src/components/welcomeButton.js

@@ -0,0 +1,51 @@
+// WelcomeButton.js
+import React, { useContext } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { AppContext } from '../contexts/AppContext';
+
+const suggestedQuestions = [
+  { text: 'What are the hours of my current branch?' },
+  { text: 'Do you have part # JNDDEV48 in stock?' },
+  { text: 'Do you carry Hayward super pumps?' },
+  { text: 'Which grid assembly goes with the Hayward DE4820 filter?' },
+  { text: '¿Puedes ayudarme en español?' }
+];
+
+const ButtonComponent = () => {
+  const { handleButtonClick } = useContext(AppContext);
+
+  return (
+    <View style={styles.buttonContainer}>
+      {suggestedQuestions.map((item, index) => (
+        <TouchableOpacity
+          key={index}
+          style={styles.button}
+          onPress={() => handleButtonClick(item.text)}
+        >
+          <Text style={styles.buttonText}>{item.text}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+  },
+  button: {
+    backgroundColor: 'white',
+    borderColor: '#004687',
+    borderWidth: 1,
+    borderRadius: 18,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginBottom: 16,
+  },
+  buttonText: {
+    color: '#004687',
+    fontSize: 13,
+    fontWeight: '400',
+  },
+});
+
+export default ButtonComponent;

package/src/components/welcomeInput.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+  Keyboard
+} from 'react-native';
+import { Header } from '../components/header';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
+  const { handleSend, input, setInput, showModal, theme } = useContext(AppContext);
+
+  return (
+        <View style={styles.inputContainer}>
+        <TextInput
+            style={styles.input}
+            value={input}
+            onChangeText={setInput}
+            placeholder="Ask a question..."
+            placeholderTextColor="#999"
+            multiline
+        />
+        <TouchableOpacity style={styles.inputButton}>
+            <Ionicons name="mic-outline" size={24} color="#8E8E93" />
+        </TouchableOpacity>
+        <TouchableOpacity
+            style={styles.sendButton}
+            onPress={() => handleSend(input)}
+            disabled={!input.trim()}
+        >
+            <Ionicons
+            name="paper-plane-outline"
+            size={24}
+            color={input.trim() ? theme.primaryColor : '#8E8E93'}
+            />
+        </TouchableOpacity>
+        </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    color: '#000000',
+  },
+  inputButton: {
+    padding: 6,
+  },
+  sendButton: {
+    padding: 6,
+    marginLeft: 'auto',
+  },
+  disabledButton: {
+    opacity: 0.7,
+  },
+});