srs-heritage-chatbot 1.0.0

package/src/layout/layout.js

@@ -0,0 +1,160 @@
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import { View, Animated, PanResponder, Pressable, StyleSheet } from 'react-native';
+import { AppContext } from '../contexts/AppContext';
+
+// Pages
+import { ChatWindow } from './window';
+import { ChatIcon } from './icon';
+import { Welcome } from './welcome'
+import { Disclaimer } from './disclaimer';
+import { EmailForm } from '../components/email';
+
+export const Layout = () => {
+    const { showModal, setShowModal, uiConfig, disclaimer, maintenance, messages } = useContext(AppContext);
+
+    const panY = useRef(new Animated.Value(0)).current;
+    const isDragging = useRef(false);
+
+    const handleClick = () => {
+      if ((uiConfig.showIcon ?? true) !== true) {
+        setShowModal("Off");
+      } else {
+        setShowModal("Icon");
+      }
+    };  
+    
+    /* Currently removed this from the child components.
+    If activating drag to close, put {...panHandlers} in the view around the
+    header on each page (welcome, window, disclaimer) */
+    const panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        isDragging.current = true;
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (isDragging.current && gestureState.dy >= 0) {
+          panY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        if (gestureState.dy > 120) {
+          // Close if dragged far enough
+          Animated.timing(panY, {
+            toValue: 600, // Off-screen
+            duration: 200,
+            useNativeDriver: false,
+          }).start(() => {
+            handleClick();
+            panY.setValue(0); // Reset for next time
+          });
+        } else {
+          // Snap back to full height
+          Animated.spring(panY, {
+            toValue: 0,
+            friction: 6,
+            tension: 80,
+            useNativeDriver: false,
+          }).start();
+        }
+        isDragging.current = false;
+      },
+    });
+
+    // uiConfig.showIcon, uiConfig.toggleChat
+
+    useEffect(() => {
+      // Add null check for uiConfig first
+      if (!uiConfig) {
+        setShowModal("Icon"); // Default fallback if uiConfig is missing
+        return;
+      }
+
+      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]); // Use optional chaining in dependency array
+      
+    return (
+      <View style={styles.layout} pointerEvents="box-none">
+        {showModal === "Icon" && ((uiConfig?.showIcon ?? true)) && (
+          <ChatIcon />
+        )}
+        {showModal === "ChatWindow" && (
+          <>
+            {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
+            <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+              <ChatWindow panHandlers={panResponder.panHandlers} />
+            </Animated.View>
+          </>
+        )}
+        {showModal === "Welcome" && (
+          <>
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <Welcome panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        )}
+        {showModal === "Form" &&
+          <>
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <Disclaimer panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        }
+        {showModal === "Email" &&
+          <>
+          {/* <Pressable style={styles.outsideTouchable} onPress={() => handleClick()} /> */}
+          <Animated.View style={[styles.container, { transform: [{ translateY: panY }] }]}>
+            <EmailForm panHandlers={panResponder.panHandlers} />
+          </Animated.View>
+          </>
+        }
+      </View>
+    );
+};
+  
+const styles = StyleSheet.create({
+  layout: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    justifyContent: 'flex-end',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#f6f6f6',
+    position: 'absolute',
+    zIndex: 1000,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    pointerEvents: 'box-none',
+    /* borderTopWidth: 1,
+    borderTopColor: '#DDD',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16, */
+    overflow: 'hidden',
+  },
+  outsideTouchable: {
+    flex: 1, 
+  },
+});

package/src/layout/welcome.js

@@ -0,0 +1,172 @@
+// Welcome.js
+import React, { useContext } from 'react';
+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 CloudinaryImage from '../utils/cloudinary';
+
+export const Welcome = ({ panHandlers }) => {
+  const {
+    setShowModal,
+    uiConfig,
+    onProductCardClick,
+    onAddToCartClick,
+    data,
+    theme,
+    brandLogo,
+    version,
+  } = useContext(AppContext);
+
+  const handleClick = () => {
+    if ((uiConfig.showIcon ?? true) !== true) {
+      setShowModal('Off');
+    } else {
+      setShowModal('Icon');
+    }
+
+    if (typeof uiConfig.setToggleChat === 'function') {
+      uiConfig.setToggleChat(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.parentContainer,
+          { backgroundColor: theme.primaryColor },
+        ]}>
+        {/* Top section */}
+        <View
+          style={[
+            styles.topContainer,
+            { backgroundColor: theme.primaryColor },
+          ]}>
+          <View style={styles.topHeader}>
+            {/* Logo container with absolute positioning */}
+            <View style={styles.logoContainer}>
+              <CloudinaryImage
+                cldImg={brandLogo}
+                imageStyle={{ width: 150, height: 35 }}
+              />
+            </View>
+            <TouchableOpacity
+              onPress={handleClick}
+              style={styles.collapseButton}>
+              <Ionicons name="chevron-down" size={26} color="white" />
+            </TouchableOpacity>
+          </View>
+
+          <View
+            style={[
+              styles.blueContainer,
+              { backgroundColor: theme.primaryColor },
+            ]}>
+            <Text style={styles.welcomeHeader}>
+              Hi {data?.customer_name || ''} 👋
+            </Text>
+            <Text style={styles.welcomeBody2}>
+              {`I’m your ${
+                version === 'pool' ? 'HeritagePool+' : 'Heritage+'
+              } AI Assistant. I can help you during your online visit with Product and Account information.`}
+            </Text>
+            <WelcomeInput />
+            <Text style={styles.textBeta}>
+              Beta version. AI Assistant is still learning!
+            </Text>
+          </View>
+        </View>
+
+        {/* Bottom section */}
+        <ScrollView style={styles.bottomContainer}>
+          <Text style={styles.welcomeBody}>Suggested Questions...</Text>
+          <ButtonComponent />
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  parentContainer: {
+    flexGrow: 1,
+    backgroundColor: '#437D3D',
+    paddingTop: 60,
+  },
+  topContainer: {
+    backgroundColor: '#437D3D',
+    paddingBottom: 5,
+  },
+  topHeader: {
+    paddingHorizontal: 15,
+    paddingTop: 10,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end', // Add this to position the entire topHeader to the right
+    position: 'relative',
+  },
+  logoContainer: {
+    // position: 'absolute',
+    // left: 15,
+    // top: 10,
+    // left: '50%',
+    // transform: [{ translateX: -65 }],
+    // top: 10,
+  },
+  collapseButton: {
+    paddingHorizontal: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  blueContainer: {
+    backgroundColor: '#437D3D',
+    padding: 15,
+    margin: 10,
+    borderRadius: 20,
+  },
+  welcomeHeader: {
+    fontSize: 24,
+    marginBottom: 10,
+    color: '#f6f6f6',
+    fontWeight: '600',
+  },
+  welcomeBody2: {
+    fontSize: 13,
+    lineHeight: 18,
+    color: '#f6f6f6',
+    fontWeight: '400',
+    marginBottom: 15,
+  },
+  textBeta: {
+    textAlign: 'center',
+    fontSize: 11,
+    color: '#f6f6f6',
+    fontWeight: '400',
+    marginTop: 5,
+  },
+  bottomContainer: {
+    paddingHorizontal: 25,
+    backgroundColor: '#f6f6f6',
+    paddingTop: 30,
+  },
+  welcomeBody: {
+    fontSize: 13,
+    marginBottom: 10,
+    color: '#808080',
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+});
+
+export default Welcome;