react-native-srschat 0.1.68 → 0.1.69

package/src/components/welcomeButton.js

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { AppContext } from '../contexts/AppContext';
 
-const suggestedQuestions = [
+const landscapeQuestions = [
   { text: 'What are the hours of my current branch?' },
   { text: 'Do you have part # RBLESPLXME2 in stock?' },
   { text: 'How do I install the seal on B82456?' },
@@ -11,18 +11,28 @@ const suggestedQuestions = [
   { text: '¿Puedes ayudarme en español?' }
 ];
 
+const poolQuestions = [
+  { 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);
+  const { handleButtonClick, theme, data } = useContext(AppContext);
+  const isPool = data?.brand_version === 'pool';
+  const suggestedQuestions = isPool ? poolQuestions : landscapeQuestions;
 
   return (
     <View style={styles.buttonContainer}>
       {suggestedQuestions.map((item, index) => (
         <TouchableOpacity
           key={index}
-          style={styles.button}
+          style={[styles.button, { borderColor: theme.primaryColor }]}
           onPress={() => handleButtonClick(item.text)}
         >
-          <Text style={styles.buttonText}>{item.text}</Text>
+          <Text style={[styles.buttonText, { color: theme.primaryColor }]}>{item.text}</Text>
         </TouchableOpacity>
       ))}
     </View>

package/src/contexts/AppContext.js

@@ -7,25 +7,54 @@ import { loadChat, updateChat, defaultState } from '../utils/storage';
 export const AppContext = createContext();
 
 export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConfig = {}, children }) => {
+  // Brand-driven configuration
+  const version = (data?.brand_version === 'pool' || data?.brand_version === 'landscape') ? data.brand_version : 'landscape';
+  const API_PREFIX = "https://";
+
+  const BRAND_CONFIG = (() => {
+    const isStage = data?.env === 'stage';
+    return {
+      pool: {
+        primaryColor: '#004687',
+        userMessageColor: '#003764',
+        cloudName: 'heritageplus',
+        // Pool assets live under mobileapp/ in heritageplus cloud
+        logoId: 'mobileapp/logos/HPSG_HPlus_Logo_White',
+        baseHost: isStage
+          ? 'pool-stage-external-agent-adk-586731320826.us-east1.run.app'
+          : 'pool-prod-external-agent-adk-586731320826.us-east1.run.app',
+        loggingHost: 'srs-external-agent-logging-586731320826.us-central1.run.app',
+      },
+      landscape: {
+        primaryColor: '#437D3D',
+        userMessageColor: '#437D3D',
+        cloudName: 'mktg',
+        logoId: 'logos/HLSG_Logo_Lockup_Color',
+        baseHost: isStage
+          ? 'landscape-stage-external-agent-adk-586731320826.us-east1.run.app'
+          : 'landscape-prod-external-agent-adk-586731320826.us-east1.run.app',
+        loggingHost: 'srs-external-agent-landscape-logging-586731320826.us-central1.run.app',
+      },
+    }[version];
+  })();
+
+  const BASE_URL = BRAND_CONFIG.baseHost;
+  const LOGGING_URL = BRAND_CONFIG.loggingHost;
+  const TRACK_CLICK_URL = `${API_PREFIX}${LOGGING_URL}/track-click`;
+  const ADD_TO_CART_URL = `${API_PREFIX}${LOGGING_URL}/add-to-cart`;
+
   const theme = {
-    userMessage: '#003764',
-    botMessage: '#003764',
+    userMessage: BRAND_CONFIG.userMessageColor,
+    botMessage: BRAND_CONFIG.userMessageColor,
     backgroundColor: '#f6f6f6',
     textColor: '#161616',
     textColorSecondary: '#FFFFFF',
     inlineButtonColor: '#dbd4c8',
-    primaryColor: '#161616'
+    primaryColor: BRAND_CONFIG.primaryColor,
   };
 
-  const TRACK_CLICK_URL = "https://srs-external-agent-landscape-logging-586731320826.us-central1.run.app/track-click"
-  const ADD_TO_CART_URL = "https://srs-external-agent-landscape-logging-586731320826.us-central1.run.app/add-to-cart"
-  
-  // Backend URLs
-  const BASE_URL = data.env === "stage"
-    ? "landscape-stage-external-agent-adk-586731320826.us-east1.run.app"
-    : "landscape-prod-external-agent-adk-586731320826.us-east1.run.app";
-  const LOGGING_URL = "srs-external-agent-landscape-logging-586731320826.us-central1.run.app";
-  const API_PREFIX = "https://";
+  const brandLogo = BRAND_CONFIG.logoId;
+  const brandCloudName = BRAND_CONFIG.cloudName;
 
   // Default Messages
   const defaultMessage = [
@@ -382,7 +411,7 @@ export const AppProvider = ({ data, onProductCardClick, onAddToCartClick, uiConf
         startStreaming, setStartStreaming, maintenance, setMaintenance, feedback, setFeedback, handleFeedback, feedbackOpen, setFeedbackOpen, 
         writeFeedback, setWriteFeedback, writeAnswer, setWriteAnswer, BASE_URL, lastMessageId, setLastMessageId, 
         onProductCardClick, onAddToCartClick: handleAddToCartWithMessage, data, sessionId, setSessionId, handleWrittenFeedback, switchFeedbackOpen, confirmDisclaimer,
-        formatChatHistory, uiConfig, handleVoiceSend, TRACK_CLICK_URL, ADD_TO_CART_URL, isListening, setIsListening
+        formatChatHistory, uiConfig, handleVoiceSend, TRACK_CLICK_URL, ADD_TO_CART_URL, isListening, setIsListening, brandLogo, brandCloudName
       }}
     >
       {children}

package/src/layout/welcome.js

@@ -8,7 +8,7 @@ import ButtonComponent from '../components/welcomeButton';
 import CloudinaryImage from '../utils/cloudinary';
 
 export const Welcome = ({ panHandlers }) => {
-  const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick, data } = useContext(AppContext);
+  const { setShowModal, uiConfig, onProductCardClick, onAddToCartClick, data, theme, brandLogo } = useContext(AppContext);
 
   const handleClick = () => {
     if ((uiConfig.showIcon ?? true) !== true) {
@@ -24,23 +24,20 @@ export const Welcome = ({ panHandlers }) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.parentContainer}>
+      <View style={[styles.parentContainer, { backgroundColor: theme.primaryColor }]}>
         {/* Top section */}
-        <View style={styles.topContainer}>
+        <View style={[styles.topContainer, { backgroundColor: theme.primaryColor }]}>
           <View style={styles.topHeader}>
             {/* Logo container with absolute positioning */}
             <View style={styles.logoContainer}>
-              <CloudinaryImage
-                cldImg="logos/HLSG_Logo_Lockup_Color"
-                imageStyle={{ width: 150, height: 35 }}
-              />
+              <CloudinaryImage cldImg={brandLogo} imageStyle={{ width: 150, height: 35 }} />
             </View>
             <TouchableOpacity onPress={handleClick} style={styles.collapseButton}>
               <Ionicons name="close" size={26} color="white" />
             </TouchableOpacity>
           </View>
           
-          <View style={styles.blueContainer}>
+          <View style={[styles.blueContainer, { backgroundColor: theme.primaryColor }]}>
             <Text style={styles.welcomeHeader}>Hi {data?.customer_name || ""} 👋</Text>
             <Text style={styles.welcomeBody2}>
               I’m your Heritage+ AI Agent. I can help you during your online visit with Product and Account information.

package/src/layout/window.js

@@ -15,7 +15,7 @@ import { ProgressCircle } from '../components/progressCircle';
 
 export const ChatWindow = ({ panHandlers }) => {
   const { handleSend, messages, input, setInput, ghostMessage, handleButtonClick,
-    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator, feedbackOpen, setFeedbackOpen
+    onProductCardClick, onAddToCartClick, uiConfig, ghostCard, typingIndicator, feedbackOpen, setFeedbackOpen, theme
    } = useContext(AppContext);
 
   const scrollViewRef = useRef(null);
@@ -106,7 +106,7 @@ export const ChatWindow = ({ panHandlers }) => {
           
           <View key={msg.id || msg.message_id || i} style={styles.messageWrapper}>
             {msg.type !== "middle" && (
-                <View style={[ styles.messageBubble, msg.type === "user" ? styles.userMessage : styles.aiMessage,]}>
+                <View style={[ styles.messageBubble, msg.type === "user" ? [styles.userMessage, { backgroundColor: theme.userMessage }] : styles.aiMessage,]}>
 
                   <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22, includeFontPadding: false, textAlignVertical: 'center' }}}> 
                     {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
@@ -149,9 +149,12 @@ export const ChatWindow = ({ panHandlers }) => {
 
             {msg.suggested_questions && Array.isArray(msg.questions) && msg.questions.length > 0 && 
               msg.questions.map((question, index) => (
-                <TouchableOpacity key={index} style={styles.suggestedQuestionButton}
-                  onPress={() => handleButtonClick(question)}>
-                  <Text style={styles.suggestedQuestionText}>{question}</Text>
+                <TouchableOpacity
+                  key={index}
+                  style={[styles.suggestedQuestionButton, { borderColor: theme.primaryColor }]}
+                  onPress={() => handleButtonClick(question)}
+                >
+                  <Text style={[styles.suggestedQuestionText, { color: theme.primaryColor }]}>{question}</Text>
                 </TouchableOpacity>
             ))}
 

package/src/utils/cloudinary.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Cloudinary } from '@cloudinary/url-gen';
 import { Platform, View } from 'react-native';
 import { AdvancedImage } from 'cloudinary-react-native';
 import { scale } from '@cloudinary/url-gen/actions/resize';
+import { AppContext } from '../contexts/AppContext';
 
 const CloudinaryImage = ({ cldImg, imageStyle, accessibilityLabel, testID }) => {
+  const { brandCloudName } = useContext(AppContext);
   const cld = new Cloudinary({
     cloud: {
-      cloudName: 'mktg'
+      cloudName: brandCloudName || 'mktg'
     }
   });
 
@@ -32,9 +34,10 @@ export const CloudinaryBannerImage = ({
   width = 345,
   height = 100
 }) => {
+  const { brandCloudName } = useContext(AppContext);
   const cld = new Cloudinary({
     cloud: {
-      cloudName: 'mktg'
+      cloudName: brandCloudName || 'mktg'
     }
   });
   const myImage = cld.image(`${cldImg}`);