vdb-ai-chat 1.0.4 → 1.0.6

package/src/components/ProductsListView.tsx

@@ -1,148 +1,302 @@
-import React, { memo, useState } from "react";
-import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Platform, Image } from "react-native";
+import React, { memo, useEffect, useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  Image,
+  Pressable,
+} from "react-native";
+import { getUserCurrencySymbol } from "./utils";
 
 let ImageComponent: typeof Image = Image;
 if (Platform.OS !== "web") {
-	try {
-		const ExpoImage = require("expo-image").Image;
-		if (ExpoImage) ImageComponent = ExpoImage;
-	} catch {
-		// expo-image not installed, use React Native Image
-	}
+  try {
+    const ExpoImage = require("expo-image").Image;
+    if (ExpoImage) ImageComponent = ExpoImage;
+  } catch {
+    // expo-image not installed, use React Native Image
+  }
 }
 
 interface ProductsListViewProps {
-	data: any[];
-	totalResults?: number;
-	onViewAll?: () => void;
-	onItemPress?: (item: any) => void;
+  data: any[];
+  totalResults?: number;
+  onViewAll: (item: any) => void;
+  onItemPress?: (item: any) => void;
+  item: any;
 }
 
-const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({ data, totalResults, onViewAll, onItemPress }) => {
-	if (!data || !data.length) return null;
-
-	const [priceWidth, setPriceWidth] = useState<number>(0);
-
-	return (
-		<View style={styles.wrapper}>
-			<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.listContent}>
-				{data.map((item: any, index: number) => (
-					<TouchableOpacity key={item.id} onPress={() => onItemPress?.(item)} activeOpacity={0.8}>
-						<View style={styles.row}>
-							<View style={styles.left}>
-								<Text style={styles.serial}>{index + 1}.</Text>
-								<Text
-									numberOfLines={1}
-									ellipsizeMode="tail"
-									style={styles.title}
-								>
-									{item.short_title}
-								</Text>
-							</View>
-							{item.total_sales_price ? (
-								<View style={[styles.priceContainer, priceWidth ? { width: priceWidth } : null]}>
-									<Text
-										style={styles.price}
-										onLayout={(e) => {
-											const w = e.nativeEvent.layout.width;
-											if (w > priceWidth) setPriceWidth(w);
-										}}
-									>
-										${item.total_sales_price}
-									</Text>
-								</View>
-							) : (
-								<></>
-							)}
-						</View>
-					</TouchableOpacity>
-				))}
-			</ScrollView>
-
-			<TouchableOpacity style={styles.button} activeOpacity={0.8} onPress={onViewAll}>
-				<Text style={styles.buttonText}>{`View All ${totalResults} Results`}</Text>
-				<Image
-					source={{
-						uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
-					}}
-					resizeMode="contain"
-					style={{ width: 20, height: 20, tintColor: "#fff" }}
-				/>
-			</TouchableOpacity>
-		</View>
-	);
+const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
+  data,
+  totalResults,
+  onViewAll,
+  onItemPress,
+  item,
+}) => {
+  if (!data || !data.length) return null;
+
+  const [userCurrency, setUserCurrency] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchCurrency = async () => {
+      const currency = await getUserCurrencySymbol();
+      setUserCurrency(currency);
+    };
+    fetchCurrency();
+  }, []);
+
+  return (
+    <View style={styles.wrapper}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+      >
+        {data.map((item: any, index: number) => (
+          <Pressable
+            key={item.id}
+            onPress={() => onItemPress?.(item)}
+            // @ts-ignore - hovered is available on web
+            style={({ hovered }) => [
+              styles.itemContainer,
+              hovered && styles.itemHover,
+            ]}
+          >
+            <View>
+              <View style={styles.left}>
+                <View style={styles.serialContainer}>
+                  <Text style={styles.serial}>{index + 1}.</Text>
+                </View>
+                <View style={styles.tokens}>
+                  {/* Shape */}
+                  <Text style={styles.textStyleOne}>
+                    {item.shape_long ?? "-"}
+                  </Text>
+                  {/* Carat size */}
+                  <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    <Text style={styles.textStyleTwo}>{item.size ?? "-"}</Text>
+                    {item.price_per_carat ? (
+                      <Text style={styles.textStyleOne}>ct</Text>
+                    ) : (
+                      <></>
+                    )}
+                  </View>
+                  {/* Color */}
+                  <Text style={styles.textStyleOne}>{item.color ?? "-"}</Text>
+                  {/* Clarity */}
+                  <Text style={styles.textStyleOne}>
+                    {item.clarity_short ?? "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    {/* Cut */}
+                    <Text style={styles.textStyleOne}>
+                      {item.cut_short ?? "-"}
+                    </Text>
+                    <Text style={styles.textStyleOne}>{"/"}</Text>
+                    {/* Polish */}
+                    <Text style={styles.textStyleOne}>
+                      {item.polish_short ?? "-"}
+                    </Text>
+                    <Text style={styles.textStyleOne}>{"/"}</Text>
+                    {/* Symmetry */}
+                    <Text style={styles.textStyleOne}>
+                      {item.symmetry_short ?? "-"}
+                    </Text>
+                  </View>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* Fluorescence */}
+                  <Text style={styles.textStyleOne}>
+                    {item.fluorescence_intensity_short ?? "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* LAB */}
+                  <Text style={styles.textStyleOne}>
+                    {item.lab_short ?? "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* Discount */}
+                  <Text style={styles.textStyleTwo}>
+                    {item.discount_percent ? item.discount_percent + "%" : "-"}
+                  </Text>
+                  <View style={styles.lineBreak} />
+                  {/* Depth */}
+                  <Text style={styles.textStyleOne}>{"D"}</Text>
+                  <Text style={styles.textStyleTwo}>
+                    {item.depth_percent ? item.depth_percent + "%" : "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* Table */}
+                  <Text style={styles.textStyleOne}>{"T"}</Text>
+                  <Text style={styles.textStyleTwo}>
+                    {item.table_percent ? item.table_percent + "%" : "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* Meas */}
+                  <Text style={styles.textStyleTwo}>
+                    {item.measurement ?? "-"}
+                  </Text>
+                  <Text style={styles.textStyleOne}>{"·"}</Text>
+                  {/* Price Per Carat */}
+                  <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    {item.price_per_carat ? (
+                      <Text style={styles.textStyleTwo}>
+                        {userCurrency ? userCurrency : "$"}
+                      </Text>
+                    ) : (
+                      <></>
+                    )}
+                    <Text style={styles.textStyleTwo}>
+                      {item.price_per_carat ?? "-"}
+                    </Text>
+                    <Text style={styles.textStyleOne}>{"PC"}</Text>
+                  </View>
+                  {/* Total Sales Price */}
+                  <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    <Text style={styles.textStyleOne}>{" ="}</Text>
+                    {item.total_sales_price ? (
+                      <Text style={styles.textStyleTwo}>
+                        {userCurrency ? userCurrency : "$"}
+                      </Text>
+                    ) : (
+                      <></>
+                    )}
+                    <Text style={styles.textStyleTwo}>
+                      {item.total_sales_price ?? "-"}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </Pressable>
+        ))}
+      </ScrollView>
+
+      <TouchableOpacity
+        style={styles.button}
+        activeOpacity={0.8}
+        onPress={() => onViewAll(item)}
+      >
+        <Text
+          style={styles.buttonText}
+        >{`View All ${totalResults} Results`}</Text>
+        <Image
+          source={{
+            uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
+          }}
+          resizeMode="contain"
+          style={{ width: 20, height: 20, tintColor: "#fff" }}
+        />
+      </TouchableOpacity>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-	wrapper: {
-		paddingHorizontal: 8,
-	},
-
-	listContent: {
-		// No extra padding/margins
-	},
-
-	row: {
-		flexDirection: "row",
-		justifyContent: "space-between",
-		alignItems: "center",
-		paddingVertical: 6,
-		backgroundColor: "#fff",
-	},
-
-	left: {
-		flexDirection: "row",
-		alignItems: "center",
-		gap: 4,
-		flex: 1,
-		minWidth: 0,
-	},
-
-	serial: {
-		fontSize: 13,
-		color: "#020001",
-		fontWeight: "500",
-	},
-
-	title: {
-		flexShrink: 1,
-		fontSize: 13,
-		color: "#3378F6",
-		fontWeight: "500",
-	},
-
-	price: {
-		fontSize: 13,
-		fontWeight: "500",
-		color: "#020001",
-		textAlign: "left",
-	},
-	priceContainer: {
-		alignItems: "flex-start",
-		justifyContent: "center",
-	},
-
-	button: {
-		marginTop: 12,
-		marginHorizontal: 12,
-		alignSelf: "center",
-		paddingHorizontal: 16,
-		paddingVertical: 6,
-		backgroundColor: "#292735",
-		borderRadius: 8,
-		alignItems: "center",
-		gap: 16,
-		width: "100%",
-		flexDirection: "row",
-		justifyContent: "center",
-		alignContent: "center",
-	},
-
-	buttonText: {
-		color: "#fff",
-		fontSize: 14,
-		fontWeight: "600",
-	},
+  wrapper: {
+    paddingHorizontal: 8,
+  },
+
+  listContent: {
+    gap: 8,
+  },
+
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 6,
+    backgroundColor: "#fff",
+  },
+
+  left: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    minWidth: 0,
+  },
+
+  serialContainer: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+    marginRight: 4,
+  },
+
+  tokens: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 2,
+    flex: 1,
+    minWidth: 0,
+  },
+  lineBreak: {
+    width: "100%",
+    height: 0,
+  },
+
+  serial: {
+    fontSize: 13,
+    color: "#020001",
+    fontWeight: "500",
+  },
+
+  textStyleOne: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontStyle: "normal",
+    fontWeight: "400",
+    color: "#4F4E57",
+  },
+
+  textStyleTwo: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontStyle: "normal",
+    fontWeight: "500",
+    color: "#020001",
+  },
+
+  price: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: "#020001",
+    textAlign: "left",
+  },
+  priceContainer: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+  },
+
+  itemContainer: {
+    paddingVertical: 2,
+  },
+
+  itemHover: {
+    backgroundColor: "#EDEDF2",
+  },
+
+  button: {
+    marginTop: 12,
+    marginHorizontal: 12,
+    alignSelf: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: "#292735",
+    borderRadius: 8,
+    alignItems: "center",
+    gap: 16,
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignContent: "center",
+  },
+
+  buttonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
 });
 
 const ProductsListView = memo(ProductsListViewComponent);

package/src/components/utils.ts

@@ -1,4 +1,8 @@
+import { Dimensions } from "react-native";
 import { Storage } from "../storage";
+import { useMediaQuery } from "react-responsive";
+
+export const DEVICE_SIZE = Dimensions.get("window");
 
 export function formatToTime(timestamp: number): string {
   const date = new Date(timestamp);
@@ -32,16 +36,22 @@ export const fetchConversationId = async (
 
   let priceMode = _priceMode;
   if (priceMode === undefined) {
-    const userInfo = await Storage.getJSON<UserDetails>(
-      "persist:userInfo",
-      {}
-    );
+    const userInfo = await Storage.getJSON<UserDetails>("persist:userInfo", {});
     const userData = userInfo?.user as UserDetails;
     priceMode = String(userData?.price_mode) || "";
   }
   return conversations[priceMode]?.conversation_id || null;
 };
 
+export const getUserCurrencySymbol = async (): Promise<string | null> => {
+  const userInfo = await Storage.getJSON<UserDetails>(
+    "persist:userInfo",
+    {}
+  );
+  const userData = userInfo?.user as UserDetails;
+  return userData.currency_symbol || "$";
+};
+
 export interface UserDetails {
   id?: string | number;
   email?: string;
@@ -53,6 +63,8 @@ export interface UserDetails {
   price_mode?: string | number;
   plan_details?: any;
   user?: any;
+  searchResultViewType?: string;
+  currency_symbol?: string;
 }
 
 export const getUserDetails = async (): Promise<UserDetails | null> => {
@@ -102,3 +114,31 @@ export enum AnalyticsEventNames {
   WIDGET_CLOSED = "ai_chat_widget_closed",
   CHAT_CLEARED = "ai_chat_cleared",
 }
+
+export const isIpad = () => {
+  // const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  // return (
+  //   /iPad/.test(userAgent) ||
+  //   (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  // );
+  const userAgent =
+    navigator.userAgent || navigator.vendor || (window as any).opera;
+  return (
+    /iPad/.test(userAgent) ||
+    (/\bMac/.test(userAgent) &&
+      navigator.maxTouchPoints > 0 &&
+      !/iPhone/.test(userAgent))
+  );
+};
+
+export const useDeviceType = () => {
+  const { width } = DEVICE_SIZE;
+  const isMobile = useMediaQuery({ maxWidth: 767 }) || width < 767;
+  const isTablet =
+    useMediaQuery({ minWidth: 767, maxWidth: 1279 }) ||
+    (width > 767 && width <= 1279) ||
+    isIpad();
+  const isDesktop = useMediaQuery({ minWidth: 1279 }) || width > 1279;
+  const isLargeScreen = isDesktop && !isTablet && !isMobile;
+  return { isMobile, isTablet, isDesktop, isLargeScreen };
+};

package/src/storage.ts

@@ -15,10 +15,23 @@ function getLocalStorage(): Storage | null {
   return null;
 }
 
+// Helper to safely get sessionStorage (only available on web)
+function getSessionStorage(): Storage | null {
+  if (typeof window !== "undefined" && window.sessionStorage) {
+    return window.sessionStorage;
+  }
+  return null;
+}
+
 // Web storage implementation using localStorage (lazy access)
 const webStorage: StorageInterface = {
   getItem: async (key: string) => {
     try {
+      // Use sessionStorage for persist:searchFilters key
+      if (key === "persist:searchFilters") {
+        const sessionStore = getSessionStorage();
+        return sessionStore ? sessionStore.getItem(key) : null;
+      }
       const storage = getLocalStorage();
       return storage ? storage.getItem(key) : null;
     } catch {