vdb-ai-chat 1.0.21 → 1.0.23

package/src/components/utils.ts

@@ -1,6 +1,7 @@
 import { Dimensions } from "react-native";
 import { Storage } from "../storage";
 import { useMediaQuery } from "react-responsive";
+import { ButtonCategoryStyle } from "src/types";
 
 export const DEVICE_SIZE = Dimensions.get("window");
 
@@ -165,9 +166,19 @@ export const getDeviceType = (platform?: string) => {
 export enum AnalyticsEventNames {
   WIDGET_OPENED = "ai_chat_widget_opened",
   WIDGET_CLOSED = "ai_chat_widget_closed",
-  CHAT_CLEARED = "ai_chat_cleared",
-  PRODUCT_PREVIEW_CLICKED = "ai_product_preview_clicked",
-  SHOW_ALL_RESULTS_CLICKED = "ai_show_all_results_clicked",
+  CHAT_CLEARED = "ai_chat_cleared"
+}
+
+export enum AIEventNames {
+  AI_CHAT_WIDGET = "ai_chat_widget",
+}
+
+export enum AIEventTypes {
+  WIDGET_OPENED = "widget_opened",
+  WIDGET_CLOSED = "widget_closed",
+  CHAT_CLEARED = "chat_cleared",
+  PRODUCT_PREVIEW_CLICKED = "product_preview_clicked",
+  SHOW_ALL_RESULTS_CLICKED = "show_all_results_clicked",
 }
 
 export const isIpad = () => {
@@ -308,7 +319,7 @@ export const renderSearchParams = ({searchPayload, priceMode, vdbSetting, search
   return searchPayload;
 }
 
-export const generateSavedSearchName = (search_params: any) => {
+export const generateSavedSearchName = (search_params: any, shortenShapeValues: boolean = false) => {
   let options: { [k: string]: any } = {};
   let title_parts = [];
 
@@ -321,7 +332,16 @@ export const generateSavedSearchName = (search_params: any) => {
   //Shape
   if (search_params?.shapes && search_params?.shapes?.length) {
     options.shapes = search_params?.shapes || [];
-    title_parts.push(options.shapes.join(", "));
+    
+    // Shorten shape values if there are more than 3 shapes
+    if (shortenShapeValues && options.shapes.length > 3) {
+      const firstThree = options.shapes.slice(0, 3);
+      const remainingCount = options.shapes.length - 3;
+      const shapeText = `${firstThree.join(", ")} + ${remainingCount} more`;
+      title_parts.push(shapeText);
+    } else {
+      title_parts.push(options.shapes.join(", "));
+    }
   }
 
   //Carat Weight
@@ -844,3 +864,220 @@ export const generateSavedSearchName = (search_params: any) => {
 
   return { title: title_parts.filter(Boolean).join(" | "), options: options };
 };
+
+export enum ButtonCategory {
+  diam = "diam",
+  gem = "gem",
+  jewelry = "jewelry",
+  lab = "lab",
+  default = "default",
+}
+
+export enum ButtonType {
+  primary,
+  secondary,
+  tertiary,
+}
+
+export enum ProductCategory {
+  DIAMOND = "diamond",
+  LAB_GROWN_DIAMOND = "lab_grown_diamond",
+  GEMSTONE = "gemstone",
+  JEWELRY = "jewelry",
+  LABGROWN_JEWELRY = "lab_grown_jewelry",
+}
+
+export const getProductColor = (
+  productType: string | undefined
+): any => {
+  switch (productType) {
+    case ProductCategory.DIAMOND:
+      return "diam-06";
+    case ProductCategory.GEMSTONE:
+      return "gem-06";
+    case ProductCategory.JEWELRY:
+      return "jewelry-06";
+    case ProductCategory.LAB_GROWN_DIAMOND:
+      return "lab-06";
+    case ProductCategory.LABGROWN_JEWELRY:
+      return "lab-06";
+    default:
+      return "diam-06";
+  }
+};
+
+export const getProductAlphaColor = (productType: string | undefined) => {
+  switch (productType) {
+    case ProductCategory.DIAMOND:
+      return "diam-03";
+    case ProductCategory.GEMSTONE:
+      return "gem-03";
+    case ProductCategory.JEWELRY:
+      return "jewelry-03";
+    case ProductCategory.LAB_GROWN_DIAMOND:
+      return "lab-03";
+    case ProductCategory.LABGROWN_JEWELRY:
+      return "lab-03";
+    default:
+      return "diam-03";
+  }
+};
+
+export const getStyleForCategory = (
+  category: ButtonCategory,
+  type: ButtonType,
+  disabled: boolean
+): ButtonCategoryStyle => {
+  if (disabled) {
+    if (type === ButtonType.primary) {
+      return {
+        textColor: "primary-cont-disabled",
+        background: "primary-bg-disabled",
+        borderColor: `transparent`,
+        hover: "transparent",
+      };
+    }
+    if (type === ButtonType.secondary) {
+      return {
+        textColor: "secondary-cont-disabled",
+        background: "transparent",
+        borderColor: `secondary-bor-disabled`,
+        hover: "transparent",
+      };
+    }
+    if (type === ButtonType.tertiary) {
+      return {
+        textColor: "tertiary-cont-disabled",
+        background: "tertiary-bg-disabled",
+        borderColor: `transparent`,
+        hover: "transparent",
+      };
+    }
+  }
+
+  if (type === ButtonType.primary) {
+    if (category === ButtonCategory.default) {
+      return {
+        textColor: "primary-cont",
+        background: "primary-bg-static",
+        borderColor: `transparent`,
+        hover: "primary-bg-hover",
+      };
+    }
+
+    return {
+      textColor: `${category}-05`,
+      background: `${category}-01`,
+      borderColor: `transparent`,
+      hover: `${category}-02`,
+    };
+  }
+
+  if (type === ButtonType.secondary) {
+    if (category === ButtonCategory.default) {
+      return {
+        textColor: "secondary-cont",
+        background: "transparent",
+        borderColor: `secondary-bor-static`,
+        hover: "secondary-bg-hover",
+      };
+    }
+
+    return {
+      textColor: `${category}-06`,
+      background: `transparent`,
+      borderColor: `${category}-01`,
+      hover: `${category}-03`,
+    };
+  }
+
+  if (type === ButtonType.tertiary) {
+    if (category === ButtonCategory.default) {
+      return {
+        textColor: "tertiary-cont",
+        background: "tertiary-bg-static",
+        borderColor: `transparent`,
+        hover: "transparent",
+      };
+    }
+
+    return {
+      textColor: `${category}-06`,
+      background: `${category}-03`,
+      borderColor: `transparent`,
+      hover: "transparent",
+    };
+  }
+
+  return {
+    textColor: "primary-cont",
+    background: "primary-bg-static",
+    borderColor: `transparent`,
+    hover: "primary-bg-hover",
+  };
+};
+
+export const isInvalidFancyColorOvertone = (
+  fancyColorOvertoneLong?: string
+) => {
+  const invalidFancyColorOvertoneArray = ["Champagne", "Cognac", "Chameleon"];
+  if (fancyColorOvertoneLong) {
+    return invalidFancyColorOvertoneArray.includes(fancyColorOvertoneLong);
+  }
+};
+
+
+export const colorStringForShort = (isShort: boolean, itemDetail?: any) => {
+  let colorString = null;
+
+  if (isShort) {
+    if (isInvalidFancyColorOvertone(itemDetail?.fancy_color_overtone_long)) {
+      colorString = itemDetail?.is_fancy
+        ? `${
+            itemDetail?.fancy_color_intensity_short || itemDetail?.color || ""
+          } ${itemDetail?.fancy_color_short || ""}(${
+            itemDetail?.fancy_color_overtone_long || ""
+          })`
+        : `${itemDetail?.fancy_color_long || itemDetail?.color || ""}`;
+    } else {
+      colorString = itemDetail?.is_fancy
+        ? `${
+            itemDetail?.fancy_color_intensity_short ||
+            itemDetail?.fancy_color_intensity ||
+            ""
+          } ${itemDetail?.fancy_color_overtone_short || ""}${
+            itemDetail?.fancy_color_short || ""
+          }`
+        : `${itemDetail?.fancy_color_long || itemDetail?.color || ""}`;
+    }
+  } else {
+    if (isInvalidFancyColorOvertone(itemDetail?.fancy_color_overtone_long)) {
+      colorString = itemDetail?.is_fancy
+        ? [
+            itemDetail?.fancy_color_intensity_long ||
+              itemDetail?.fancy_color_intensity,
+            itemDetail?.fancy_color_long,
+            itemDetail?.fancy_color_overtone_long
+              ? `(${itemDetail.fancy_color_overtone_long})`
+              : null,
+          ]
+            .filter(Boolean)
+            .join(" ")
+        : itemDetail?.fancy_color_long || itemDetail?.color || "";
+    } else {
+      colorString = itemDetail?.is_fancy
+        ? [
+            itemDetail?.fancy_color_intensity_long ||
+              itemDetail?.fancy_color_intensity,
+            itemDetail?.fancy_color_overtone_long,
+            itemDetail?.fancy_color_long,
+          ]
+            .filter(Boolean)
+            .join(" ")
+        : itemDetail?.fancy_color_long || itemDetail?.color || "";
+    }
+  }
+
+  return colorString === "" ? "-" : colorString;
+};
+

package/src/types.ts

@@ -1,3 +1,6 @@
+import { DefaultThemeValueType } from "styled";
+import { ButtonCategory, ButtonType } from "./components/utils";
+
 export type Role = "user" | "assistant";
 
 export interface ChatMessage {
@@ -47,6 +50,7 @@ export interface ChatWidgetProps {
   /** When true, shows beta labels and disclaimer. */
   isBetaMode?: boolean;
   activeProductType?: string;
+  trackAnalyticsEvent?: (eventName: string, eventData: Record<string, any>) => void;
 }
 
 export interface ChatWidgetRef {
@@ -57,3 +61,30 @@ export interface ChatWidgetHandlers {
   onViewAllPress?: (deepLinkUrl: string, payload: any) => void;
   onItemPress?: (deepLinkUrl: string, item: any) => void;
 }
+
+export type ButtonCategoryStyle = {
+  textColor: DefaultThemeValueType;
+  background: DefaultThemeValueType;
+  borderColor: DefaultThemeValueType;
+  hover: DefaultThemeValueType;
+};
+
+export type ButtonProps = {
+  category: ButtonCategory;
+  type?: ButtonType;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  height?: number;
+  width?: number;
+  borderRadius?: number;
+  paddingLeftText?: number;
+  textTypographyStyle?: string;
+  hideText?: boolean;
+  showLeftText?: boolean;
+  manualColor?: string;
+  isDisableInteraction?: boolean;
+  maxWidth?: number;
+  style?: any;
+  children?: React.ReactNode;
+};