react-native-srschat 0.1.68 → 0.1.70

package/lib/module/utils/cloudinary.js

@@ -1,17 +1,21 @@
-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'
     }
   });
   const myImage = Platform.OS === 'ios' ? cld.image(`${cldImg}`) : cld.image(`${cldImg}`).format('png');
@@ -32,9 +36,12 @@ 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}`);

package/lib/module/utils/cloudinary.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Cloudinary","Platform","View","AdvancedImage","scale","CloudinaryImage","cldImg","imageStyle","accessibilityLabel","testID","cld","cloud","cloudName","myImage","OS","image","format","createElement","style","resizeMode","CloudinaryBannerImage","width","height","resize","parseInt"],"sourceRoot":"../../../src","sources":["utils/cloudinary.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,QAAQ,EAAEC,IAAI,QAAQ,cAAc;AAC7C,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,KAAK,QAAQ,oCAAoC;AAE1D,MAAMC,eAAe,GAAGA,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC,kBAAkB;EAAEC;AAAO,CAAC,KAAK;EAC9E,MAAMC,GAAG,GAAG,IAAIV,UAAU,CAAC;IACzBW,KAAK,EAAE;MACLC,SAAS,EAAE;IACb;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAGZ,QAAQ,CAACa,EAAE,KAAK,KAAK,GAAGJ,GAAG,CAACK,KAAK,CAAC,GAAGT,MAAM,EAAE,CAAC,GAAGI,GAAG,CAACK,KAAK,CAAC,GAAGT,MAAM,EAAE,CAAC,CAACU,MAAM,CAAC,KAAK,CAAC;EACrG,oBACEjB,KAAA,CAAAkB,aAAA,CAACf,IAAI,qBACHH,KAAA,CAAAkB,aAAA,CAACd,aAAa;IACZG,MAAM,EAAEO,OAAQ;IAChBL,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IACfS,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAU,CAAC,EAAEZ,UAAU;EAAE,CAChD,CACG,CAAC;AAEX,CAAC;AAED,OAAO,MAAMa,qBAAqB,GAAGA,CAAC;EACpCd,MAAM;EACNC,UAAU;EACVC,kBAAkB;EAClBC,MAAM;EACNY,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG;AACX,CAAC,KAAK;EACJ,MAAMZ,GAAG,GAAG,IAAIV,UAAU,CAAC;IACzBW,KAAK,EAAE;MACLC,SAAS,EAAE;IACb;EACF,CAAC,CAAC;EACF,MAAMC,OAAO,GAAGH,GAAG,CAACK,KAAK,CAAC,GAAGT,MAAM,EAAE,CAAC;EACtCO,OAAO,CAACU,MAAM,CACZnB,KAAK,CAAC,CAAC,CACJiB,KAAK,CAACG,QAAQ,CAACH,KAAK,GAAG,CAAC,CAAC,CAAC,CAC1BC,MAAM,CAACE,QAAQ,CAACF,MAAM,GAAG,CAAC,CAAC,CAChC,CAAC;EACD,oBACEvB,KAAA,CAAAkB,aAAA,CAACf,IAAI,qBACHH,KAAA,CAAAkB,aAAA,CAACd,aAAa;IACZG,MAAM,EAAEO,OAAQ;IAChBL,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IACfS,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE,SAAS;MAAEE,KAAK,EAAEA,KAAK;MAAEC,MAAM,EAAEA;IAAO,CAAC,EAAEf,UAAU;EAAE,CAC9E,CACG,CAAC;AAEX,CAAC;AAED,eAAeF,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useContext","Cloudinary","Platform","View","AdvancedImage","scale","AppContext","CloudinaryImage","cldImg","imageStyle","accessibilityLabel","testID","brandCloudName","cld","cloud","cloudName","myImage","OS","image","format","createElement","style","resizeMode","CloudinaryBannerImage","width","height","resize","parseInt"],"sourceRoot":"../../../src","sources":["utils/cloudinary.js"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,QAAQ,EAAEC,IAAI,QAAQ,cAAc;AAC7C,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,KAAK,QAAQ,oCAAoC;AAC1D,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,MAAMC,eAAe,GAAGA,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC,kBAAkB;EAAEC;AAAO,CAAC,KAAK;EAC9E,MAAM;IAAEC;EAAe,CAAC,GAAGZ,UAAU,CAACM,UAAU,CAAC;EACjD,MAAMO,GAAG,GAAG,IAAIZ,UAAU,CAAC;IACzBa,KAAK,EAAE;MACLC,SAAS,EAAEH,cAAc,IAAI;IAC/B;EACF,CAAC,CAAC;EAEF,MAAMI,OAAO,GAAGd,QAAQ,CAACe,EAAE,KAAK,KAAK,GAAGJ,GAAG,CAACK,KAAK,CAAC,GAAGV,MAAM,EAAE,CAAC,GAAGK,GAAG,CAACK,KAAK,CAAC,GAAGV,MAAM,EAAE,CAAC,CAACW,MAAM,CAAC,KAAK,CAAC;EACrG,oBACEpB,KAAA,CAAAqB,aAAA,CAACjB,IAAI,qBACHJ,KAAA,CAAAqB,aAAA,CAAChB,aAAa;IACZI,MAAM,EAAEQ,OAAQ;IAChBN,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IACfU,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAU,CAAC,EAAEb,UAAU;EAAE,CAChD,CACG,CAAC;AAEX,CAAC;AAED,OAAO,MAAMc,qBAAqB,GAAGA,CAAC;EACpCf,MAAM;EACNC,UAAU;EACVC,kBAAkB;EAClBC,MAAM;EACNa,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG;AACX,CAAC,KAAK;EACJ,MAAM;IAAEb;EAAe,CAAC,GAAGZ,UAAU,CAACM,UAAU,CAAC;EACjD,MAAMO,GAAG,GAAG,IAAIZ,UAAU,CAAC;IACzBa,KAAK,EAAE;MACLC,SAAS,EAAEH,cAAc,IAAI;IAC/B;EACF,CAAC,CAAC;EACF,MAAMI,OAAO,GAAGH,GAAG,CAACK,KAAK,CAAC,GAAGV,MAAM,EAAE,CAAC;EACtCQ,OAAO,CAACU,MAAM,CACZrB,KAAK,CAAC,CAAC,CACJmB,KAAK,CAACG,QAAQ,CAACH,KAAK,GAAG,CAAC,CAAC,CAAC,CAC1BC,MAAM,CAACE,QAAQ,CAACF,MAAM,GAAG,CAAC,CAAC,CAChC,CAAC;EACD,oBACE1B,KAAA,CAAAqB,aAAA,CAACjB,IAAI,qBACHJ,KAAA,CAAAqB,aAAA,CAAChB,aAAa;IACZI,MAAM,EAAEQ,OAAQ;IAChBN,kBAAkB,EAAEA,kBAAmB;IACvCC,MAAM,EAAEA,MAAO;IACfU,KAAK,EAAE,CAAC;MAAEC,UAAU,EAAE,SAAS;MAAEE,KAAK,EAAEA,KAAK;MAAEC,MAAM,EAAEA;IAAO,CAAC,EAAEhB,UAAU;EAAE,CAC9E,CACG,CAAC;AAEX,CAAC;AAED,eAAeF,eAAe","ignoreList":[]}

package/lib/typescript/components/email.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../../src/components/email.js"],"names":[],"mappings":"AAiBO;;sBA4UN;;kBA7V8D,OAAO"}
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../../src/components/email.js"],"names":[],"mappings":"AAiBO;;sBAqVN;;kBAtW8D,OAAO"}

package/lib/typescript/components/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.js"],"names":[],"mappings":"AAOO,4CA4DN;kBAnEiC,OAAO"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.js"],"names":[],"mappings":"AAOO,4CAyDN;kBAhEiC,OAAO"}

package/lib/typescript/components/productCard.d.ts

@@ -2,6 +2,6 @@ export function ProductCard({ prod, onFocusQuantityInput, messageId }: {
     prod: any;
     onFocusQuantityInput: any;
     messageId: any;
-}): React.JSX.Element;
+}): React.JSX.Element | null;
 import React from "react";
 //# sourceMappingURL=productCard.d.ts.map

package/lib/typescript/components/productCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"productCard.d.ts","sourceRoot":"","sources":["../../../src/components/productCard.js"],"names":[],"mappings":"AAOO;;;;sBA8dN;kBAresD,OAAO"}
+{"version":3,"file":"productCard.d.ts","sourceRoot":"","sources":["../../../src/components/productCard.js"],"names":[],"mappings":"AAOO;;;;6BAwgBN;kBA/gBsD,OAAO"}

package/lib/typescript/components/welcomeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomeButton.d.ts","sourceRoot":"","sources":["../../../src/components/welcomeButton.js"],"names":[],"mappings":";AAaA,sDAgBC;kBA5BiC,OAAO"}
+{"version":3,"file":"welcomeButton.d.ts","sourceRoot":"","sources":["../../../src/components/welcomeButton.js"],"names":[],"mappings":";AAqBA,sDAkBC;kBAtCiC,OAAO"}

package/lib/typescript/contexts/AppContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/AppContext.js"],"names":[],"mappings":"AAMA,4CAA0C;AAEnC;;;;;;sBA8XN;kBAtY6E,OAAO"}
+{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/AppContext.js"],"names":[],"mappings":"AAMA,4CAA0C;AAEnC;;;;;;sBA2ZN;kBAna6E,OAAO"}

package/lib/typescript/layout/welcome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcome.d.ts","sourceRoot":"","sources":["../../../src/layout/welcome.js"],"names":[],"mappings":"AASO;;sBAmDN;;kBA3DiC,OAAO"}
+{"version":3,"file":"welcome.d.ts","sourceRoot":"","sources":["../../../src/layout/welcome.js"],"names":[],"mappings":"AASO;;sBAgDN;;kBAxDiC,OAAO"}

package/lib/typescript/layout/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAeO;;sBAuLN;kBAtM8D,OAAO"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAeO;;sBA0LN;kBAzM8D,OAAO"}

package/lib/typescript/utils/audioRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audioRecorder.d.ts","sourceRoot":"","sources":["../../../src/utils/audioRecorder.js"],"names":[],"mappings":"AAqBA,4EAGC;AAGD,mFAqHC;AA+ED,mDAmCC;AAED,+CAkDC;AAED,iDASC;AAED,2DA2BC;AAqDD,iDAMC;AAED,gCAgBC"}
+{"version":3,"file":"audioRecorder.d.ts","sourceRoot":"","sources":["../../../src/utils/audioRecorder.js"],"names":[],"mappings":"AAqBA,4EAGC;AAGD,mFAmHC;AAiFD,mDAwCC;AAED,+CAkDC;AAED,iDASC;AAED,2DA2BC;AAqDD,iDAMC;AAED,gCAgBC"}

package/lib/typescript/utils/cloudinary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cloudinary.d.ts","sourceRoot":"","sources":["../../../src/utils/cloudinary.js"],"names":[],"mappings":"AA0BO;;;;;;;sBA6BN;;kBAvDiB,OAAO;AAMzB;;;;;sBAkBC"}
+{"version":3,"file":"cloudinary.d.ts","sourceRoot":"","sources":["../../../src/utils/cloudinary.js"],"names":[],"mappings":"AA4BO;;;;;;;sBA8BN;;kBA1DiC,OAAO;AAOzC;;;;;sBAmBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-srschat",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "private": false,
   "description": "A modern, sophisticated chat interface for React Native",
   "main": "lib/commonjs/index",

package/src/components/email.js

@@ -16,11 +16,12 @@ import { Header } from "./header";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 export const EmailForm = ({ panHandlers }) => {
-  const { data, BASE_URL, setShowModal, formatChatHistory, conversationStartTime, sessionId } = useContext(AppContext);
+  const { data, BASE_URL, setShowModal, formatChatHistory, conversationStartTime, sessionId, theme } = useContext(AppContext);
+  const API_PREFIX = "https://";
   const [subject, setSubject] = useState("");
   const [message, setMessage] = useState("");
-  const [userEmail, setUserEmail] = useState(data?.user_email || "");
-  const [branchEmail, setBranchEmail] = useState((data?.branch_email) || "");
+  const [userEmail, setUserEmail] = useState(data?.user_email || ""); // Sender's email
+  const [branchEmail, setBranchEmail] = useState((data?.branch_email) || ""); // Recipient's email
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
@@ -152,81 +153,89 @@ export const EmailForm = ({ panHandlers }) => {
   const handleComposeEmail = async () => {
     setIsComposing(true);
     setError("");
-    setSuccess(false);
 
     try {
-      const chatHistory = formatChatHistory();
-      const payload = buildEmailRequestPayload(chatHistory);
+      const chatHistory = formatChatHistory().map(({ variant_type, ...rest }) => rest);
+
+      const payload = {
+        chat_history: chatHistory,
+        conversation_start_time: conversationStartTime || null,
+        customer_name: data?.customer_name || null,
+        user_id: data?.user_id || null,
+        session_id: data?.session_id || data?.session || sessionId || null,
+        user_email: data?.user_email || "",
+        branch_email: data?.branch_email || ""
+      };
+
+      console.log("Email composition request payload:", payload);
+
+      const response = await axios.post(`${API_PREFIX}${BASE_URL}/compose-email`, payload);
+
+      const textToType = response.data.message;
+      let currentText = "";
+      const typingSpeed = 10;
+
+      for (let i = 0; i < textToType.length; i++) {
+        await new Promise(resolve => setTimeout(resolve, typingSpeed));
+        currentText += textToType[i];
+        setMessage(currentText);
+      }
 
-      const response = await axios.post(`https://${BASE_URL}/compose-email`, payload);
-      // Use customer name from data if available, otherwise leave blank    
-      
-      setMessage(response.data.message);
       setSubject(response.data.subject || "");
+      setUserEmail(response.data.user_email || userEmail || "");
+      // Don't overwrite branch email if response doesn't have it
+      if (response.data.branch_email) {
+        setBranchEmail(response.data.branch_email);
+      }
+
     } catch (error) {
-      setError(error.response?.data?.message || "Failed to compose email");
-      setSuccess(false);
+      setError(
+        error.response?.data?.message ||
+        error.message ||
+        "Failed to compose email"
+      );
     } finally {
       setIsComposing(false);
     }
   };
 
   const handleSubmit = async () => {
-    const emailError = validateEmail(userEmail);
-    if (emailError) {
-      setError(emailError);
-      setSuccess(false);
+    if (!userEmail || !subject || !message) {
+      setError("Please fill in all fields");
       return;
     }
-    if (!subject || !message) {
-      setError("Please fill in all fields");
-      setSuccess(false);
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(userEmail)) {
+      setError("Please enter a valid email address");
       return;
     }
 
     setIsLoading(true);
-    setError("");
-    setSuccess(false);
 
     try {
-      const chatHistory = formatChatHistory();
-      const payload = {
-        ...buildEmailRequestPayload(chatHistory),
+      const chatHistory = formatChatHistory().map(({ variant_type, ...rest }) => rest);
+      console.log("Sending email with chat history:", chatHistory);
+
+      await axios.post(`https://${BASE_URL}/send-email`, {
         user_email: userEmail,
         subject,
         message,
-        branch_email: branchEmail,
-        customer_name: data?.customer_name ?? null,
-        conversation_start_time: conversationStartTime ?? null,
-      };
-
-      await axios.post(`https://${BASE_URL}/send-email`, payload);
-
+        chat_history: chatHistory,
+        conversation_start_time: conversationStartTime,
+        customer_name: data?.customer_name,
+        branch_email: branchEmail || data?.branch_email || ""
+      });
       setSuccess(true);
-      setError("");
       setTimeout(() => {
         setSuccess(false);
         setShowModal("ChatWindow");
       }, 2000);
     } catch (error) {
-      console.error("Email send error:", {
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        errorMessage: error.response?.data?.message,
-        errorDetails: error.response?.data,
-        requestPayload: {
-          user_email: userEmail,
-          subject,
-          message_length: message?.length,
-          branch_email: branchEmail,
-          customer_name: data?.customer_name,
-          conversation_start_time: conversationStartTime,
-          session_id: data?.session_id || data?.session || sessionId,
-          chat_history_length: chatHistory?.length
-        }
-      });
-      setError(error.response?.data?.message || "Failed to send email");
-      setSuccess(false);
+      setError(
+        error.response?.data?.message ||
+        error.message ||
+        "Failed to send email",
+      );
     } finally {
       setIsLoading(false);
     }
@@ -257,7 +266,7 @@ export const EmailForm = ({ panHandlers }) => {
           Press "Draft My Email" to generate an email based on your chat conversation. You can review and modify before sending.
         </Text>
 
-        <TouchableOpacity style={styles.composeButton} onPress={handleComposeEmail} disabled={isComposing}>
+        <TouchableOpacity style={[styles.composeButton, { backgroundColor: theme.primaryColor }]} onPress={handleComposeEmail} disabled={isComposing}>
           {isComposing ? (
             <ActivityIndicator size="small" color="#FFFFFF" />
           ) : (
@@ -341,7 +350,7 @@ export const EmailForm = ({ panHandlers }) => {
         {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}>
+        <TouchableOpacity style={[styles.sendButton, { backgroundColor: theme.primaryColor }]} onPress={handleSubmit} disabled={isLoading}>
           {isLoading ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.buttonText}>Send Email</Text>}
         </TouchableOpacity>
       </KeyboardAwareScrollView>
@@ -405,14 +414,12 @@ const styles = StyleSheet.create({
     color: "#000",
   },
   composeButton: {
-    backgroundColor: "#367CB6",
     borderRadius: 5,
     padding: 12,
     alignItems: "center",
     marginBottom: 20,
   },
   sendButton: {
-    backgroundColor: "#367CB6",
     borderRadius: 5,
     padding: 12,
     alignItems: "center",

package/src/components/header.js

@@ -6,7 +6,7 @@ import CloudinaryImage from '../utils/cloudinary';
 // import { PoseidonLogo } from './PoseidonLogo';
 
 export const Header = () => {
-  const { showModal, setShowModal, setMessages, defaultMessage, handleClearState, uiConfig } = useContext(AppContext);
+  const { showModal, setShowModal, setMessages, defaultMessage, handleClearState, uiConfig, theme, brandLogo } = useContext(AppContext);
 
   const handleClick = () => {
     if ((uiConfig.showIcon ?? true) !== true) {
@@ -21,7 +21,7 @@ export const Header = () => {
   };
 
   return (
-    <View style={styles.header}>
+    <View style={[styles.header, { backgroundColor: theme.primaryColor }]}>
       {/* Logo on the left */}
       <View style={styles.section}>
         {/* <PoseidonLogo width={150} height={35} color="white" /> */}
@@ -31,10 +31,7 @@ export const Header = () => {
           width={150}
           height={35}
         /> */}
-        <CloudinaryImage
-          cldImg="logos/HLSG_Logo_Lockup_Color"
-          imageStyle={{ width: 150, height: 35 }}
-        />
+        <CloudinaryImage cldImg={brandLogo} imageStyle={{ width: 150, height: 35 }} />
       </View>
 
       {/* Title in the center */}
@@ -52,15 +49,15 @@ export const Header = () => {
         {showModal !== "Form" && showModal !== "Email" &&
           <>
           <TouchableOpacity onPress={() => setShowModal("Email")}>
-            <Ionicons name="mail" size={24} color="white" />
+            <Ionicons name="mail" size={24} color={theme.textColorSecondary} />
           </TouchableOpacity>
           <TouchableOpacity onPress={() => handleClearState()}>
-            <Ionicons name="trash" size={22} color="white" />
+            <Ionicons name="trash" size={22} color={theme.textColorSecondary} />
           </TouchableOpacity>
           </>
         }
         <TouchableOpacity onPress={() => handleClick()}>
-          <Ionicons name="close" size={26} color="white" />
+          <Ionicons name="close" size={26} color={theme.textColorSecondary} />
         </TouchableOpacity>
       </View>
     </View>

package/src/components/productCard.js

@@ -9,6 +9,48 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
   const { onProductCardClick, onAddToCartClick, sessionId, data, ADD_TO_CART_URL } = useContext(AppContext);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
 
+  // Validation: Check for incomplete product information
+  const hasValidProductDetails = () => {
+    if (!prod || !prod.product_details) {
+      return false;
+    }
+
+    const details = prod.product_details;
+    if (!details.product_name || !details.part_number || !details.image_url) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const hasValidInventoryInfo = () => {
+    if (!prod.inventory_info || !prod.inventory_info.info_by_uom) {
+      return false;
+    }
+
+    const uomData = prod.inventory_info.info_by_uom;
+    const uomKeys = Object.keys(uomData);
+
+    if (uomKeys.length === 0) {
+      return false;
+    }
+
+    // Check if at least one UOM has valid pricing
+    const hasValidPricing = uomKeys.some(uom => {
+      const uomInfo = uomData[uom];
+      return uomInfo &&
+             typeof uomInfo.gross_price === 'number' &&
+             uomInfo.gross_price > 0;
+    });
+
+    return hasValidPricing;
+  };
+
+  // Return null if product lacks essential information
+  if (!hasValidProductDetails() || !hasValidInventoryInfo()) {
+    return null;
+  }
+
   const [selectedUom, setSelectedUom] = useState(() => {
     if (prod.inventory_info?.info_by_uom) {
       const availableUoms = Object.keys(prod.inventory_info.info_by_uom);
@@ -360,13 +402,13 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
             <View style={styles.priceContainer}>
                 {isOnSale ? (
                 <>
-                    <Text style={styles.originalPrice} allowFontScaling={false}>${Number(grossPrice).toFixed(2)}</Text>
-                    <Text style={styles.salePrice} allowFontScaling={false}>${Number(netPrice).toFixed(2)}</Text>
+                    <Text style={styles.originalPrice} allowFontScaling={false}>${Number(grossPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
+                    <Text style={styles.salePrice} allowFontScaling={false}>${Number(netPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
                     <Text style={styles.perUnit}>/ {selectedUom}</Text>
                 </>
                 ) : (
                 <>
-                    <Text style={styles.price} allowFontScaling={false}>${Number(grossPrice).toFixed(2)}</Text>
+                    <Text style={styles.price} allowFontScaling={false}>${Number(grossPrice).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</Text>
                     <Text style={styles.perUnit}>/ {selectedUom}</Text>
                 </>
                 )}

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/disclaimer.js

@@ -6,7 +6,7 @@ import { Header } from '../components/header';
 import { Testing } from "../components/testing";
 
 export const Disclaimer = ({ panHandlers }) => {
-  const { setShowModal, confirmDisclaimer, uiConfig, onAddToCartClick, onProductCardClick } = useContext(AppContext);
+  const { setShowModal, confirmDisclaimer, uiConfig, onAddToCartClick, onProductCardClick, theme } = useContext(AppContext);
 
   const sections = [
     {
@@ -47,7 +47,7 @@ export const Disclaimer = ({ panHandlers }) => {
           </Text>
 
           {sections.map((section, index) => (
-            <Paragraph key={index} title={section.title} details={section.details} icon={section.icon} />
+            <Paragraph key={index} title={section.title} details={section.details} icon={section.icon} theme={theme} />
           ))}
 
           <Text style={styles.disclaimerText}>
@@ -61,7 +61,7 @@ export const Disclaimer = ({ panHandlers }) => {
             <Testing onProductCardClick={onProductCardClick} onAddToCartClick={onAddToCartClick} />
         }
         <View style={styles.confirmArea}>
-            <TouchableOpacity style={styles.button} onPress={confirmDisclaimer}>
+            <TouchableOpacity style={[styles.button, { backgroundColor: theme.primaryColor }]} onPress={confirmDisclaimer}>
                 <Text style={styles.buttonText}>Confirm</Text>
             </TouchableOpacity>
             <Text style={styles.confirmText}>
@@ -72,11 +72,11 @@ export const Disclaimer = ({ panHandlers }) => {
   );
 };
 
-const Paragraph = ({ title, details, icon }) => {
+const Paragraph = ({ title, details, icon, theme }) => {
   return (
     <View style={styles.sectionContainer}>
-      <View style={styles.iconContainer}>
-        <Feather name={icon} size={18} color="#1976d2" />
+      <View style={[styles.iconContainer, { backgroundColor: `${theme.primaryColor}20` }]}>
+        <Feather name={icon} size={18} color={theme?.primaryColor || '#1976d2'} />
       </View>
       <View style={styles.textContainer}>
         <Text style={styles.sectionTitle}>{title}</Text>
@@ -135,7 +135,6 @@ const styles = StyleSheet.create({
     elevation: 1,
   },
   iconContainer: {
-    backgroundColor: "#bbdefb",
     borderRadius: 10,
     padding: 10,
     alignItems: "center",
@@ -165,7 +164,6 @@ const styles = StyleSheet.create({
     paddingBottom: 25,
   },
   button: {
-    backgroundColor: "#367CB6",
     width: "100%",
     paddingVertical: 12,
     borderRadius: 5,

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.