vdb-ai-chat 1.0.20 → 1.0.22

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");
 
@@ -308,7 +309,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 +322,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 +854,155 @@ 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",
+  };
+};

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 {
@@ -57,3 +60,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;
+};