react-native-srschat 0.1.41 → 0.1.43

package/src/components/email.js

@@ -1,23 +1,39 @@
-import React, { useState, useContext } from "react";
-import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert, StyleSheet, ScrollView } from "react-native";
+import React, { useState, useContext, useRef } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  Platform,
+  findNodeHandle
+} from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import axios from "axios";
 import { AppContext } from "../contexts/AppContext";
 import { Header } from "./header";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 export const EmailForm = ({ panHandlers }) => {
   const { data, BASE_URL, setShowModal, messages, formatChatHistory, conversationStartTime } = useContext(AppContext);
   const [subject, setSubject] = useState("");
   const [message, setMessage] = useState("");
   const [userEmail, setUserEmail] = useState("");
-  const [branchEmail, setBranchEmail] = useState(data.branch_email || "");
+  const [branchEmail, setBranchEmail] = useState((data?.branch_email) || "");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
 
+  // Refs for the scroll view and inputs
+  const scrollViewRef = useRef(null);
+  const subjectInputRef = useRef(null);
+  const messageInputRef = useRef(null);
+  const emailInputRef = useRef(null);
+
   const handleComposeEmail = async () => {
-    setIsComposing(true); 
+    setIsComposing(true);
     setError("");
 
     try {
@@ -25,7 +41,7 @@ export const EmailForm = ({ panHandlers }) => {
       const payload = {
         chat_history: chatHistory,
         conversation_start_time: conversationStartTime,
-        customer_name: '',
+        customer_name: "",
         branch_email: branchEmail,
       };
 
@@ -60,7 +76,7 @@ export const EmailForm = ({ panHandlers }) => {
         message,
         chat_history: chatHistory,
         conversation_start_time: conversationStartTime,
-        customer_name: '',
+        customer_name: "",
         branch_email: branchEmail,
       });
 
@@ -76,50 +92,92 @@ export const EmailForm = ({ panHandlers }) => {
     }
   };
 
-    return (
-      <View style={styles.container}>
-        <View>
-            <Header />
-        </View>
+  return (
+    <View style={styles.container}>
+      <Header />
+      <KeyboardAwareScrollView
+        ref={scrollViewRef}
+        style={styles.content}
+        contentContainerStyle={{ flexGrow: 1, paddingBottom: 50 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={true}
+        enableOnAndroid={true}
+        extraScrollHeight={40}
+        keyboardDismissMode="interactive"
+        bounces={false}
+      >
         <View style={styles.topBar}>
-            <TouchableOpacity onPress={() => setShowModal("ChatWindow")} style={styles.backButton}>
+          <TouchableOpacity onPress={() => setShowModal("ChatWindow")} style={styles.backButton}>
             <Ionicons name="arrow-back" size={20} color="#000" />
-            </TouchableOpacity>
-            <Text style={styles.topBarTitle}>Contact Us</Text>
+          </TouchableOpacity>
+          <Text style={styles.topBarTitle}>Contact Us</Text>
         </View>
-        <ScrollView 
-            style={styles.content}
-            contentContainerStyle={{ paddingBottom: 100 }} // Add padding to bottom
-            keyboardShouldPersistTaps="handled"
-            showsVerticalScrollIndicator={true}
-            >
-                
-            <Text style={styles.infoText}>
-            Our AI assistant can help draft a professional email based on your chat conversation. The email will capture your main points and maintain a conversational tone. You can review and modify before sending.
-            </Text>
-
-            <TouchableOpacity style={styles.composeButton} onPress={handleComposeEmail} disabled={isComposing}>
-            {isComposing ? (
-                <ActivityIndicator size="small" color="#FFFFFF" />
-            ) : (
-                <Text style={styles.buttonText}>Draft My Email</Text>
-            )}
-            </TouchableOpacity>
-
-            <TextInput style={styles.input} value={branchEmail} editable={false} placeholder="Branch Email" />
-            <TextInput style={styles.input} value={userEmail} onChangeText={setUserEmail} placeholder="Your Email" />
-            <TextInput style={styles.input} value={subject} onChangeText={setSubject} placeholder="Subject" />
-            <TextInput style={styles.textArea} value={message} onChangeText={setMessage} placeholder="Message" multiline />
-
-            {error ? <Text style={styles.errorText}>{error}</Text> : null}
-            {success ? <Text style={styles.successText}>Email sent successfully!</Text> : null}
-
-            <TouchableOpacity style={styles.sendButton} onPress={handleSubmit} disabled={isLoading}>
-            {isLoading ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.buttonText}>Send Email</Text>}
-            </TouchableOpacity>
-        </ScrollView>
-      </View>
-    );
+
+        <Text style={styles.infoText}>
+          Our AI assistant can help draft a professional email based on your chat conversation. The email will capture your main points and maintain a conversational tone. You can review and modify before sending.
+        </Text>
+
+        <TouchableOpacity style={styles.composeButton} onPress={handleComposeEmail} disabled={isComposing}>
+          {isComposing ? (
+            <ActivityIndicator size="small" color="#FFFFFF" />
+          ) : (
+            <Text style={styles.buttonText}>Draft My Email</Text>
+          )}
+        </TouchableOpacity>
+
+        <TextInput
+          style={styles.input}
+          value={branchEmail}
+          editable={false}
+          placeholder="Branch Email"
+        />
+        <TextInput
+          ref={emailInputRef}
+          style={styles.input}
+          value={userEmail}
+          onChangeText={setUserEmail}
+          placeholder="Your Email"
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(emailInputRef.current)
+            )
+          }
+        />
+        <TextInput
+          ref={subjectInputRef}
+          style={styles.input}
+          value={subject}
+          onChangeText={setSubject}
+          placeholder="Subject"
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(subjectInputRef.current)
+            )
+          }
+        />
+        <TextInput
+          ref={messageInputRef}
+          style={styles.textArea}
+          value={message}
+          onChangeText={setMessage}
+          placeholder="Message"
+          multiline
+          onFocus={() =>
+            scrollViewRef.current?.scrollToFocusedInput(
+              findNodeHandle(messageInputRef.current)
+            )
+          }
+        />
+
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+        {success ? <Text style={styles.successText}>Email sent successfully!</Text> : null}
+
+        <TouchableOpacity style={styles.sendButton} onPress={handleSubmit} disabled={isLoading}>
+          {isLoading ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.buttonText}>Send Email</Text>}
+        </TouchableOpacity>
+      </KeyboardAwareScrollView>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
@@ -129,24 +187,22 @@ const styles = StyleSheet.create({
   content: {
     padding: 20,
     paddingTop: 5,
-    paddingBottom: 40,
-    marginBottom: 40
+    flex: 1,
   },
   topBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     paddingVertical: 10,
-    paddingHorizontal: 16,
-    marginTop: 10
+    marginTop: 10,
   },
   backButton: {
     padding: 8,
     borderRadius: 20,
-    backgroundColor: '#FFF',
+    backgroundColor: "#FFF",
   },
   topBarTitle: {
     fontSize: 18,
-    fontWeight: 'medium',
+    fontWeight: "500",
     marginLeft: 12,
   },
   infoText: {
@@ -208,3 +264,5 @@ const styles = StyleSheet.create({
     marginTop: 10,
   },
 });
+
+export default EmailForm;

package/src/components/header.js

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
 import { AppContext } from '../contexts/AppContext';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { SvgCssUri } from 'react-native-svg/css';
 import CloudinaryImage from '../utils/cloudinary';
 // import { PoseidonLogo } from './PoseidonLogo';
 

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 = Array.isArray(uomInfo.discounts) ? uomInfo.discounts : [];
+
   
 
   const maxQuantity = Math.floor(prod.inventory_info?.info_by_uom?.EA?.quantity_available || 0);
@@ -201,7 +202,6 @@ export const ProductCard = ({ prod, onFocusQuantityInput }) => {
                   disabled={!valid}
                 >
                   <Text style={styles.dropdownButtonText}>{selectedUom}</Text>
-                  <Ionicons name="close" size={26} color="rgba(0, 0, 0, 0.6)" />
                 </TouchableOpacity>
               </View>
             ) : null}

package/src/layout/welcome.js

@@ -1,14 +1,11 @@
 // Welcome.js
 import React, { useContext } from 'react';
-import { View, Text, Image, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { AppContext } from '../contexts/AppContext';
 import { WelcomeInput } from '../components/welcomeInput';
 import ButtonComponent from '../components/welcomeButton';
-import { Testing } from '../components/testing';
-import { SvgCssUri } from 'react-native-svg/css';
 import CloudinaryImage from '../utils/cloudinary';
-// import { PoseidonLogo } from '../components/PoseidonLogo';
 
 export const Welcome = ({ panHandlers }) => {
   const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick } = useContext(AppContext);
@@ -20,30 +17,25 @@ export const Welcome = ({ panHandlers }) => {
       setShowModal("Icon");
     }
     
-    // Reset toggleChat in the parent component
     if (typeof uiConfig.setToggleChat === 'function') {
       uiConfig.setToggleChat(false);
     }
   };
 
   return (
-    <View contentContainerStyle={styles.container}>
+    <View style={styles.container}>
       <View style={styles.parentContainer}>
-        
         {/* Top section */}
         <View style={styles.topContainer}>
           <View style={styles.topHeader}>
-            {/* <PoseidonLogo width={150} height={35} color="white" /> */}
-            {/* <SvgCssUri
-              uri="https://media.heritageplus.com/image/upload/v1743632330/MobileApp/posiden.svg"
-              width={150}
-              height={35}
-            /> */}
-            <CloudinaryImage
-              cldImg="posiden"
-              imageStyle={{ width: 150, height: 35 }}
-            />
-            <TouchableOpacity onPress={() => handleClick()} style={styles.collapseButton}>
+            {/* Logo container with absolute positioning */}
+            <View style={styles.logoContainer}>
+              <CloudinaryImage
+                cldImg="posiden"
+                imageStyle={{ width: 150, height: 35 }}
+              />
+            </View>
+            <TouchableOpacity onPress={handleClick} style={styles.collapseButton}>
               <Ionicons name="close" size={26} color="white" />
             </TouchableOpacity>
           </View>
@@ -51,8 +43,7 @@ export const Welcome = ({ panHandlers }) => {
           <View style={styles.blueContainer}>
             <Text style={styles.welcomeHeader}>Hi 👋</Text>
             <Text style={styles.welcomeBody2}>
-              I'm Poseidon, your Heritage Pool+ AI Agent. I can help you during your online
-              visit with Product and Account information.
+              I'm Poseidon, your Heritage Pool+ AI Agent. I can help you during your online visit with Product and Account information.
             </Text>
             <WelcomeInput />
             <Text style={styles.textBeta}>Beta version. Poseidon is learning!</Text>
@@ -76,7 +67,7 @@ const styles = StyleSheet.create({
   parentContainer: {
     flexGrow: 1,
     backgroundColor: '#004687',
-    paddingTop: 60
+    paddingTop: 60,
   },
   topContainer: {
     backgroundColor: '#004687',
@@ -84,14 +75,19 @@ const styles = StyleSheet.create({
   },
   topHeader: {
     flexDirection: 'row',
-    justifyContent: 'flex-end',
     alignItems: 'center',
     paddingHorizontal: 15,
     paddingTop: 10,
+    justifyContent: 'flex-end',
+    position: 'relative', 
   },
-  logo: {
-    width: 120,
-    height: 50,
+  logoContainer: {
+    position: 'absolute',
+    left: 15,  
+    top: 10,
+    // left: '50%',
+    // transform: [{ translateX: -65 }],
+    // top: 10,  
   },
   collapseButton: {
     paddingHorizontal: 15,
@@ -122,12 +118,12 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: '#f6f6f6',
     fontWeight: '400',
-    marginTop: 5
+    marginTop: 5,
   },
   bottomContainer: {
     paddingHorizontal: 25,
     backgroundColor: "#f6f6f6",
-    paddingTop: 30
+    paddingTop: 30,
   },
   welcomeBody: {
     fontSize: 13,
@@ -138,3 +134,4 @@ const styles = StyleSheet.create({
   },
 });
 
+export default Welcome;