vdb-ai-chat 1.0.21 → 1.0.23

package/src/components/ProductsListView.tsx

@@ -2,8 +2,6 @@ import React, { memo, useEffect, useState } from "react";
 import {
   View,
   StyleSheet,
-  Text,
-  TouchableOpacity,
   ScrollView,
   Platform,
   Image,
@@ -13,12 +11,17 @@ import {
   getUserCurrencySymbol,
   formatPriceValue,
   roundUpPrices,
-  AnalyticsEventNames,
+  ProductCategory,
+  ButtonCategory,
+  ButtonType,
+  AIEventNames,
+  AIEventTypes,
+  colorStringForShort,
 } from "./utils";
 import { useTheme } from "styled-components/native";
 import { DefaultTheme } from "styled-components/native";
 import styled from "styled-components/native";
-import { useUserAnalytics } from "../hooks/useAnalytics";
+import Button from "./Button";
 
 let ImageComponent: typeof Image = Image;
 if (Platform.OS !== "web") {
@@ -29,275 +32,43 @@ if (Platform.OS !== "web") {
     // expo-image not installed, use React Native Image
   }
 }
-
-// Token configuration for diamond details display
-type TokenStyle = "primary" | "secondary";
-type TokenType =
-  | "field"
-  | "separator"
-  | "lineBreak"
-  | "group"
-  | "fieldWithSuffix"
-  | "priceField";
-
-interface TokenConfig {
-  type: TokenType;
-  field?: string;
-  style?: TokenStyle;
-  suffix?: string;
-  prefix?: string;
-  suffixStyle?: TokenStyle;
-  prefixStyle?: TokenStyle;
-  format?: "percent";
-  showCurrencyIf?: string;
-  items?: TokenConfig[];
-}
-
-const DIAMOND_TOKENS_MOBILE_WEB: TokenConfig[] = [
-  // Row 1: Basic specs
-  { type: "field", field: "shape_long", style: "primary" },
-  {
-    type: "fieldWithSuffix",
-    field: "size",
-    style: "secondary",
-    suffix: "ct",
-    showCurrencyIf: "price_per_carat",
-  },
-  { type: "field", field: "color", style: "primary" },
-  { type: "field", field: "clarity_short", style: "primary" },
-  { type: "separator" },
-  {
-    type: "group",
-    items: [
-      { type: "field", field: "cut_short", style: "primary" },
-      { type: "field", field: "polish_short", style: "primary", prefix: "/" },
-      { type: "field", field: "symmetry_short", style: "primary", prefix: "/" },
-    ],
-  },
-  { type: "separator" },
-  { type: "field", field: "fluorescence_intensity_short", style: "primary" },
-  { type: "separator" },
-  { type: "field", field: "lab_short", style: "primary" },
-  { type: "separator" },
-  {
-    type: "field",
-    field: "discount_percent",
-    style: "secondary",
-    format: "percent",
-  },
-  // Row 2: Measurements & Pricing
-  { type: "lineBreak" },
-  {
-    type: "field",
-    field: "depth_percent",
-    style: "secondary",
-    prefixStyle: "primary",
-    prefix: "D",
-    format: "percent",
-  },
-  { type: "separator" },
-  {
-    type: "field",
-    field: "table_percent",
-    style: "secondary",
-    prefixStyle: "primary",
-    prefix: "T",
-    format: "percent",
-  },
-  { type: "separator" },
-  { type: "field", field: "measurement", style: "secondary" },
-  { type: "separator" },
-  {
-    type: "priceField",
-    field: "price_per_carat",
-    style: "secondary",
-    suffixStyle: "primary",
-    suffix: "PC",
-  },
-  {
-    type: "priceField",
-    field: "total_sales_price",
-    style: "secondary",
-    prefix: " =",
-  },
-];
-
-const DIAMOND_TOKENS_TABLET: TokenConfig[] = [
-  // Row 1: Basic specs
-  { type: "field", field: "shape_long", style: "primary" },
-  {
-    type: "fieldWithSuffix",
-    field: "size",
-    style: "secondary",
-    suffix: "ct",
-    showCurrencyIf: "price_per_carat",
-  },
-  { type: "field", field: "color", style: "primary" },
-  { type: "field", field: "clarity_short", style: "primary" },
-  { type: "separator" },
-  {
-    type: "group",
-    items: [
-      { type: "field", field: "cut_short", style: "primary" },
-      { type: "field", field: "polish_short", style: "primary", prefix: "/" },
-      { type: "field", field: "symmetry_short", style: "primary", prefix: "/" },
-    ],
-  },
-  { type: "separator" },
-  { type: "field", field: "fluorescence_intensity_short", style: "primary" },
-  { type: "separator" },
-  { type: "field", field: "lab_short", style: "primary" },
-  { type: "separator" },
-  {
-    type: "field",
-    field: "depth_percent",
-    style: "secondary",
-    prefixStyle: "primary",
-    prefix: "D",
-    format: "percent",
-  },
-  { type: "separator" },
-  {
-    type: "field",
-    field: "table_percent",
-    style: "secondary",
-    prefixStyle: "primary",
-    prefix: "T",
-    format: "percent",
-  },
-  { type: "separator" },
-  { type: "field", field: "measurement", style: "secondary" },
-  { type: "separator" },  {
-    type: "field",
-    field: "discount_percent",
-    style: "secondary",
-    format: "percent",
-  },
-  // Row 2: Measurements & Pricing
-  { type: "lineBreak" },
-  {
-    type: "priceField",
-    field: "price_per_carat",
-    style: "secondary",
-    suffixStyle: "primary",
-    suffix: "PC",
-  },
-  {
-    type: "priceField",
-    field: "total_sales_price",
-    style: "secondary",
-    prefix: " =",
-  },
-];
 interface ProductsListViewProps {
-  data: any[];
-  totalResults?: number;
-  onViewAll: (item: any) => void;
-  onItemPress?: (item: any) => void;
-  item: any;
+	data: any[];
+	totalResults?: number;
+	onViewAll: (item: any) => void;
+	onItemPress?: (item: any) => void;
+  showMoreResults?: () => void;
+  showLessResults?: () => void;
+  trackAnalyticsEvent?: (eventName: string, eventData: Record<string, any>) => void;
+  currentPage?: number;
+  isLoadingMore?: boolean;
+	item: any;
 }
 
-const renderToken = (
-  token: TokenConfig,
-  item: any,
-  userCurrency: string | null,
-  index: number,
-  shouldRound: boolean = false
-): React.ReactNode => {
-  const TextView = token.style === "secondary" ? TextStyleTwo : TextStyleOne;
-  const PrefixTextView =
-    token.prefixStyle === "secondary" ? TextStyleTwo : TextStyleOne;
-  const SuffixTextView =
-    token.suffixStyle === "secondary" ? TextStyleTwo : TextStyleOne;
-  const currency = userCurrency || "$";
-  const theme = useTheme();
-  switch (token.type) {
-    case "separator":
-      return (
-        <TextView key={index} theme={theme}>
-          {"·"}
-        </TextView>
-      );
-
-    case "lineBreak":
-      return <View key={index} style={styles.lineBreak} />;
-
-    case "field": {
-      let value = item[token.field!] ?? "-";
-      if (token.format === "percent" && value !== "-") {
-        value = `${value}%`;
-      }
-      return (
-        <React.Fragment key={index}>
-          {token.prefix && (
-            <PrefixTextView theme={theme}>{token.prefix}</PrefixTextView>
-          )}
-          <TextView theme={theme}>{value}</TextView>
-        </React.Fragment>
-      );
-    }
-
-    case "fieldWithSuffix": {
-      const value = item[token.field!] ?? "-";
-      const showSuffix = token.showCurrencyIf
-        ? item[token.showCurrencyIf]
-        : true;
-      return (
-        <View key={index} style={styles.rowCenter}>
-          <TextView theme={theme}>{value}</TextView>
-          {showSuffix && token.suffix && (
-            <TextView theme={theme}>{token.suffix}</TextView>
-          )}
-        </View>
-      );
-    }
-
-    case "priceField": {
-      const value = item[token.field!];
-      const formattedPrice = formatPriceValue(token.field!, value, shouldRound);
-
-      return (
-        <View key={index} style={styles.rowCenter}>
-          {token.prefix && <TextView theme={theme}>{token.prefix}</TextView>}
-          {value && <TextView theme={theme}>{currency}</TextView>}
-          <TextView theme={theme}>{formattedPrice ?? "-"}</TextView>
-          {token.suffix && (
-            <SuffixTextView theme={theme}>{token.suffix}</SuffixTextView>
-          )}
-        </View>
-      );
-    }
-
-    case "group":
-      return (
-        <View key={index} style={styles.rowCenter}>
-          {token.items?.map((subToken, subIndex) =>
-            renderToken(subToken, item, userCurrency, subIndex, shouldRound)
-          )}
-        </View>
-      );
-
-    default:
-      return null;
-  }
-};
-
 const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
   data,
   totalResults,
   onViewAll,
   onItemPress,
+  showMoreResults,
+  showLessResults,
+  trackAnalyticsEvent,
+  currentPage = 1,
+  isLoadingMore = false,
   item,
 }) => {
   if (!data || !data.length) return null;
   const theme = useTheme();
   const [userCurrency, setUserCurrency] = useState<string | null>(null);
   const [shouldRound, setShouldRound] = useState<boolean>(false);
-  const { trackEvent } = useUserAnalytics();
-  const isTablet = theme.isTablet;  
-  const DIAMOND_TOKENS = isTablet
-    ? DIAMOND_TOKENS_TABLET
-    : DIAMOND_TOKENS_MOBILE_WEB;
+  const payload = item?.search_payload;
+  const isLabgrown =
+    typeof payload.lab_grown === "string"
+      ? payload.lab_grown === "true"
+      : typeof payload.lab_grown === "boolean"
+      ? payload.lab_grown
+      : false;
+  const productType = isLabgrown ? ProductCategory.LAB_GROWN_DIAMOND : ProductCategory.DIAMOND;
   useEffect(() => {
     const fetchCurrency = async () => {
       const currency = await getUserCurrencySymbol();
@@ -314,50 +85,137 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
 
   const handleItemPress = (dataItem: any) => {
     onItemPress?.(dataItem);
-    trackEvent?.(AnalyticsEventNames.PRODUCT_PREVIEW_CLICKED, {});
+    // trackAnalyticsEvent?.(AIEventNames.AI_CHAT_WIDGET, {
+    //   action: AIEventTypes.PRODUCT_PREVIEW_CLICKED,
+    // });
   };
 
   const handleViewAllPress = (item: any) => {
     onViewAll?.(item);
-    trackEvent?.(AnalyticsEventNames.SHOW_ALL_RESULTS_CLICKED, {});
+    // trackAnalyticsEvent?.(AIEventNames.AI_CHAT_WIDGET, {
+    //   action: AIEventTypes.SHOW_ALL_RESULTS_CLICKED,
+    // });
   };
 
   return (
     <Wrapper theme={theme}>
       <ScrollView
         showsVerticalScrollIndicator={false}
-        contentContainerStyle={styles.listContent}
       >
         {data.map((dataItem: any, index: number) => (
           <Pressable key={dataItem.id} onPress={() => handleItemPress(dataItem)}>
             {(state) => (
               // @ts-ignore
               <ListItemParent theme={theme} hovered={state.hovered}>
-                <View style={styles.left}>
-                  <View style={styles.serialContainer}>
-                    <Serial>{index + 1}.</Serial>
-                  </View>
-                  <View style={styles.tokens}>
-                    {DIAMOND_TOKENS.map((token, tokenIndex) =>
-                      renderToken(
-                        token,
-                        dataItem,
-                        userCurrency,
-                        tokenIndex,
-                        shouldRound
-                      )
-                    )}
-                  </View>
-                </View>
+                <View>
+									<View style={styles.left}>
+										{/* <View style={styles.serialContainer}>
+											<Serial>{index + 1}.</Serial>
+										</View> */}
+										<View style={styles.tokens}>
+                      <TopContainer>
+                        <TopLeftContainer>
+                          <ExtraSmallGapContainer>
+                            {/* Shape */}
+                            <TextStyleBold>{`${dataItem.shape_short ?? "-"}`}</TextStyleBold>
+                            {/* Carat */}
+                            <TextStyleBold>{`${dataItem.size ?? "-"}ct`}</TextStyleBold>
+                            {/* Color */}
+                            <TextStyleBold>{`${colorStringForShort(true, dataItem) ?? "-"}`}</TextStyleBold>
+                            {/* Clarity */}
+                            <TextStyleBold>{`${dataItem.clarity_short ?? "-"}`}</TextStyleBold>
+                            {/* LAB */}
+                            <TextStyleBold>{`${dataItem.lab_short ?? "-"}`}</TextStyleBold>
+                          </ExtraSmallGapContainer>
+                          <View style={{ flexDirection: "row", alignItems: "center" }}>
+                            {/* Cut */}
+                            <TextStyleRegular>{dataItem.cut_short ?? "-"}</TextStyleRegular>
+                            <TextStyleRegular>{"/"}</TextStyleRegular>
+                            {/* Polish */}
+                            <TextStyleRegular>{dataItem.polish_short ?? "-"}</TextStyleRegular>
+                            <TextStyleRegular>{"/"}</TextStyleRegular>
+                            {/* Symmetry */}
+                            <TextStyleRegular>{dataItem.symmetry_short ?? "-"}</TextStyleRegular>
+                          </View>
+                          <TextStyleRegular>{dataItem.fluorescence_intensity_short ?? "-"}</TextStyleRegular>
+                        </TopLeftContainer>
+                        <TopRightContainer>
+                          <PricePerCaratContainer>
+                            {dataItem.price_per_carat ? <TextStyleBold>{userCurrency ? userCurrency : "$"}</TextStyleBold> : <></>}
+                            <TextStyleBold>{formatPriceValue("price_per_carat", dataItem.price_per_carat, shouldRound) ?? "-"}</TextStyleBold>
+                          </PricePerCaratContainer>
+                          <TextStyleRegular>{"p/ct"}</TextStyleRegular>
+                        </TopRightContainer>
+											</TopContainer>
+                      <BottomContainer>
+											  <BottomLeftContainer>
+                          {/* Depth */}
+                          <DepthContainer>
+                            <TextStyleRegular>{"D"}</TextStyleRegular>
+                            <TextStyleBold>{dataItem.depth_percent ? dataItem.depth_percent + "%" : "-"}</TextStyleBold>
+                          </DepthContainer>
+
+                            {/* Table */}
+                          <TableContainer>
+                            <TextStyleRegular>{"T"}</TextStyleRegular>
+                            <TextStyleBold>{dataItem.table_percent ? dataItem.table_percent + "%" : "-"}</TextStyleBold>
+                          </TableContainer>
+
+                          <MeasurementsContainer>
+                            {/* Meas */}
+                            <TextStyleRegular>{dataItem.measurement ?? "-"}</TextStyleRegular>
+                          </MeasurementsContainer>
+                        </BottomLeftContainer>
+                        <BottomRightContainer>
+											    {/* Discount */}
+                          {isLabgrown ? <></> : <TextStyleBold>{dataItem.discount_percent ? dataItem.discount_percent + "%" : "-"}</TextStyleBold>}
+                          <TotalPriceContainer>
+                            <TotalPriceChildContainer>
+                              {dataItem.total_sales_price ? <TextStyleBold>{userCurrency ? userCurrency : "$"}</TextStyleBold> : <></>}
+                              <TextStyleBold>{formatPriceValue("total_sales_price", dataItem.total_sales_price, shouldRound) ?? "-"}</TextStyleBold>
+                            </TotalPriceChildContainer>
+                            <TextStyleRegular>{"total"}</TextStyleRegular>
+                          </TotalPriceContainer>
+                        </BottomRightContainer>
+                      </BottomContainer>
+										</View>
+									</View>
+								</View>
               </ListItemParent>
             )}
           </Pressable>
         ))}
       </ScrollView>
-
-      <ButtonView activeOpacity={0.8} onPress={() => handleViewAllPress(item)}>
-        <ButtonText>{`View All ${totalResults} diamonds`}</ButtonText>
-        <ImageComponent
+      {showMoreResults && currentPage < 3 && (
+        <ShowMoreContainer>
+          <Pressable onPress={showMoreResults} disabled={isLoadingMore}>
+            <ShowMoreText theme={theme}>
+              {isLoadingMore ? 'Loading...' : `Show more`}
+            </ShowMoreText>
+          </Pressable>
+        </ShowMoreContainer>
+      )}
+      {showLessResults && (currentPage === 3 || data.length >= 15) && (
+        <ShowMoreContainer>
+          <Pressable onPress={showLessResults}>
+            <ShowMoreText theme={theme}>
+              Show less
+            </ShowMoreText>
+          </Pressable>
+        </ShowMoreContainer>
+      )}
+      <Button 
+        category={isLabgrown ? ButtonCategory.lab : ButtonCategory.diam}
+        height={32}
+        type={ButtonType.primary}
+        borderRadius={8}
+        style={{
+          marginTop: 12,
+        }}
+        onPress={() => handleViewAllPress(item)}
+      >
+        <ButtonText>{`View All ${Number(totalResults).toLocaleString()} diamonds`}</ButtonText>
+        {/* <ImageComponent
           source={{
             uri: "https://cdn.vdbapp.com/ai/chat-widget/assets/img/right.svg",
           }}
@@ -367,8 +225,8 @@ const ProductsListViewComponent: React.FC<ProductsListViewProps> = ({
             height: 20,
             tintColor: theme["primary-cont"] || "#ffffff",
           }}
-        />
-      </ButtonView>
+        /> */}
+      </Button>
     </Wrapper>
   );
 };
@@ -377,15 +235,21 @@ const Wrapper = styled.View<{ theme: DefaultTheme }>`
   padding-horizontal: 8px;
 `;
 
-const Serial = styled.Text<{ theme: DefaultTheme }>`
-  font-size: 13px;
+const ShowMoreContainer = styled.View`
+  margin-top: 8px;
+  align-items: flex-start;
+  justify-content: center;
+`;
+
+const ShowMoreText = styled.Text<{ theme: DefaultTheme }>`
   color: ${({ theme }: { theme: DefaultTheme }) =>
-    theme["core-05"] || "#020001"};
+    theme["link-static"] || "#3378F6"};
+  font-size: 14px;
   font-weight: 500;
   font-family: 'Roboto-Medium';
 `;
 
-const TextStyleOne = styled.Text<{ theme: DefaultTheme }>`
+const TextStyleRegular = styled.Text<{ theme: DefaultTheme }>`
   font-size: 13px;
   color: ${({ theme }: { theme: DefaultTheme }) =>
     theme["core-06"] || "#4F4E57"};
@@ -394,7 +258,7 @@ const TextStyleOne = styled.Text<{ theme: DefaultTheme }>`
   font-style: normal;
 `;
 
-const TextStyleTwo = styled.Text<{ theme: DefaultTheme }>`
+const TextStyleBold = styled.Text<{ theme: DefaultTheme }>`
   font-size: 13px;
   color: ${({ theme }: { theme: DefaultTheme }) =>
     theme["core-05"] || "#020001"};
@@ -403,23 +267,6 @@ const TextStyleTwo = styled.Text<{ theme: DefaultTheme }>`
   font-style: normal;
 `;
 
-const ButtonView = styled.TouchableOpacity<{ theme: DefaultTheme }>`
-  margin-top: 12px;
-  margin-horizontal: 12px;
-  align-self: center;
-  padding-horizontal: 16px;
-  padding-vertical: 6px;
-  background-color: ${({ theme }: { theme: DefaultTheme }) =>
-    theme["primary-bg-static"] || "#292735"};
-  border-radius: 8px;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  flex-direction: row;
-  justify-content: center;
-  align-content: center;
-`;
-
 const ButtonText = styled.Text<{ theme: DefaultTheme }>`
   color: ${({ theme }: { theme: DefaultTheme }) =>
     theme["primary-cont"] || "#ffffff"};
@@ -429,7 +276,10 @@ const ButtonText = styled.Text<{ theme: DefaultTheme }>`
 `;
 
 const ListItemParent = styled.View<{ theme: DefaultTheme; hovered?: boolean }>`
-  padding-vertical: 2px;
+  padding-vertical: 12px;
+  border-bottom-width: 1px;
+  border-bottom-color: ${({ theme }: { theme: DefaultTheme }) =>
+    theme["core-03"] || "#D5D5DC"};
   background-color: ${({
     theme,
     hovered,
@@ -439,6 +289,87 @@ const ListItemParent = styled.View<{ theme: DefaultTheme; hovered?: boolean }>`
   }) => (hovered ? theme["secondary-bg-hover"] || "#EDEDF2" : "transparent")};
 `;
 
+const TopContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+const TopLeftContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+
+const TopRightContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+`;
+
+const BottomContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+const BottomLeftContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+
+const BottomRightContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+`;
+
+const PricePerCaratContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+const TotalPriceContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+`;
+
+const TotalPriceChildContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  width: 65px;
+  justify-content: flex-end;
+`;
+
+const DepthContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+`;
+
+const TableContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+`;
+
+const ExtraSmallGapContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+`;
+
+const MeasurementsContainer = styled.View``;
+
 const styles = StyleSheet.create({
   listContent: {
     gap: 8,