@envive-ai/react-hooks 0.1.5 → 0.1.6

package/src/merchants/bandolier/bandolier.ts

@@ -13,13 +13,13 @@ import {
   OrgShortName,
 } from "src/application/models";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { CdnService } from "src/application/service/cdnService";
+import { getCdnAssetURL } from "src/application/utils/cdnUtils";
 import {
   CustomerServiceIntegrationMode,
   CustomerServiceType,
-} from "src/application/service/customerService/types";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
-import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
+} from "src/types/customerService";
+import { DOMInsertionType } from "src/merchants/domInsertion";
+import { GridInsertionType } from "src/merchants/gridInsertion";
 import {
   BOTTOM_REVIEWS_BAR_ID,
   CHAT_PREVIEW_CONTAINER_ID,
@@ -92,10 +92,7 @@ const bandolierOrgUIConfig = (): OrgUIConfig => {
     },
     chatHeader: {
       ...defaultBandolierOrgConfig.chatHeader,
-      imageSrc: CdnService.getAssetURL(
-        "bandolier-logo.svg",
-        OrgShortName.Bandolier
-      ),
+      imageSrc: getCdnAssetURL("bandolier-logo.svg", OrgShortName.Bandolier),
     },
     chatPreviewConfig: {
       ...defaultBandolierOrgConfig.chatPreviewConfig!,
@@ -955,10 +952,7 @@ const bandolierPageConfig = (): OrgPageConfig => ({
     imagePromptCardPLPPhoneCases: {
       widgetConfigId: "imagePromptCard",
       type: WidgetType.ImagePromptCard,
-      url: CdnService.getAssetURL(
-        "image-prompt-card-2.png",
-        OrgShortName.Bandolier
-      ),
+      url: getCdnAssetURL("image-prompt-card-2.png", OrgShortName.Bandolier),
       lightText: true,
       title: "What can we help you find today?",
       subtitle: [
@@ -987,10 +981,7 @@ const bandolierPageConfig = (): OrgPageConfig => ({
     imagePromptCardPLPAccessories: {
       widgetConfigId: "imagePromptCard",
       type: WidgetType.ImagePromptCard,
-      url: CdnService.getAssetURL(
-        "image-prompt-card-2.png",
-        OrgShortName.Bandolier
-      ),
+      url: getCdnAssetURL("image-prompt-card-2.png", OrgShortName.Bandolier),
       lightText: true,
       title: "What can we help you find today?",
       subtitle: [
@@ -1014,10 +1005,7 @@ const bandolierPageConfig = (): OrgPageConfig => ({
     imagePromptCardPLPBags: {
       widgetConfigId: "imagePromptCard",
       type: WidgetType.ImagePromptCard,
-      url: CdnService.getAssetURL(
-        "image-prompt-card-2.png",
-        OrgShortName.Bandolier
-      ),
+      url: getCdnAssetURL("image-prompt-card-2.png", OrgShortName.Bandolier),
       lightText: true,
       title: "What can we help you find today?",
       subtitle: [
@@ -1043,10 +1031,7 @@ const bandolierPageConfig = (): OrgPageConfig => ({
     imagePromptCardPLPShopAll: {
       widgetConfigId: "imagePromptCard",
       type: WidgetType.ImagePromptCard,
-      url: CdnService.getAssetURL(
-        "image-prompt-card-2.png",
-        OrgShortName.Bandolier
-      ),
+      url: getCdnAssetURL("image-prompt-card-2.png", OrgShortName.Bandolier),
       lightText: true,
       title: "What can we help you find today?",
       subtitle: [
@@ -1070,10 +1055,7 @@ const bandolierPageConfig = (): OrgPageConfig => ({
     imagePromptCardPLP: {
       widgetConfigId: "imagePromptCard",
       type: WidgetType.ImagePromptCard,
-      url: CdnService.getAssetURL(
-        "image-prompt-card-2.png",
-        OrgShortName.Bandolier
-      ),
+      url: getCdnAssetURL("image-prompt-card-2.png", OrgShortName.Bandolier),
       lightText: true,
       title: "What can we help you find today?",
       subtitle: [

package/src/merchants/carpe/carpe.ts

@@ -6,9 +6,9 @@ import {
 } from "src/config/locators";
 import { BasicOrgInfoType, OrgShortName } from "src/application/models";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { CdnService } from "src/application/service/cdnService";
-import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import { getCdnAssetURL } from "src/application/utils/cdnUtils";
+import { GridInsertionType } from "src/merchants/gridInsertion";
+import { DOMInsertionType } from "src/merchants/domInsertion";
 import {
   CHAT_PREVIEW_CONTAINER_ID,
   TOP_SUGGESTION_BAR_PDP_ID,
@@ -62,10 +62,7 @@ const carpeOrgUIConfig = (): OrgUIConfig => {
     },
     chatHeader: {
       ...defaultCarpeOrgConfig.chatHeader,
-      imageSrc: CdnService.getAssetURL(
-        "carpe-logo-white.svg",
-        OrgShortName.Carpe
-      ),
+      imageSrc: getCdnAssetURL("carpe-logo-white.svg", OrgShortName.Carpe),
     },
     chatPreviewConfig: {
       ...defaultCarpeOrgConfig.chatPreviewConfig!,
@@ -78,7 +75,7 @@ const carpeOrgUIConfig = (): OrgUIConfig => {
 
       headerConfig: {
         ...defaultCarpeOrgConfig.chatPreviewConfig!.headerConfig,
-        imageSrc: CdnService.getAssetURL("carpe-logo.svg", OrgShortName.Carpe),
+        imageSrc: getCdnAssetURL("carpe-logo.svg", OrgShortName.Carpe),
         imageHeight: 16,
         title: "SHOPPING ASSISTANT",
       },

package/src/merchants/coterie/coterie.ts

@@ -8,8 +8,8 @@ import {
   OrgShortName,
 } from "src/application/models";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { CdnService } from "src/application/service/cdnService";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import { getCdnAssetURL } from "src/application/utils/cdnUtils";
+import { DOMInsertionType } from "src/merchants/domInsertion";
 import {
   SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_CLASS,
   SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_TEXT_CLASS,
@@ -224,10 +224,7 @@ const coterieOrgUIConfig = (): OrgUIConfig => {
     },
     chatHeader: {
       ...defaultCoterieOrgConfig.chatHeader,
-      imageSrc: CdnService.getAssetURL(
-        "coterie-logo-white.png",
-        OrgShortName.Coterie
-      ),
+      imageSrc: getCdnAssetURL("coterie-logo-white.png", OrgShortName.Coterie),
     },
 
     floatingChatConfig: {

package/src/merchants/default.ts

@@ -1,8 +1,11 @@
-import { BasicOrgInfoType, OrgShortName } from 'src/application/models/supportedOrgs';
+import {
+  BasicOrgInfoType,
+  OrgShortName,
+} from "src/application/models/supportedOrgs";
 import {
   CustomerServiceIntegrationMode,
   CustomerServiceType,
-} from 'src/application/service/customerService/types';
+} from "src/types/customerService";
 import {
   ColorMapping,
   ColorNames,
@@ -10,17 +13,17 @@ import {
   OrgPageConfig,
   OrgUIConfig,
   PageVariantTestType,
-} from 'src/contexts/types';
+} from "src/contexts/types";
 
 const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
   shortName: orgShortName,
   chatMessageConfig: {
-    assistantChatTitle: 'Shopping Assistant',
-    variant: 'accent',
+    assistantChatTitle: "Shopping Assistant",
+    variant: "accent",
     productLink: {
-      variant: 'textLink',
-      iconVariant: 'backgroundPrimary',
-      hoverVariant: 'backgroundDark',
+      variant: "textLink",
+      iconVariant: "backgroundPrimary",
+      hoverVariant: "backgroundDark",
     },
   },
   floatingChatConfig: {
@@ -28,13 +31,13 @@ const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
     neverShowSingleProductCards: false,
     userQueryInputEnabled: true,
     suggestionButtonConfig: {
-      variant: 'secondary',
-      hoverVariant: 'dark',
-      answerVariant: 'outlined',
+      variant: "secondary",
+      hoverVariant: "dark",
+      answerVariant: "outlined",
     },
     replyInputConfig: {
-      size: 'md',
-      sendIcon: 'send',
+      size: "md",
+      sendIcon: "send",
     },
   },
   chatHeader: {
@@ -44,18 +47,18 @@ const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
     headerBarHeightPartialView: 31,
     headerBarHeightFullView: 20,
     customerSupportSwitchConfig: {
-      variant: 'attached',
+      variant: "attached",
       borderColor: colorVar(ColorNames.BackgroundLight),
       selectedTextColor: colorVar(ColorNames.TextPrimary),
       backgroundColor: colorVar(ColorNames.BackgroundLight),
       unselectedTextColor: colorVar(ColorNames.TextLight),
-      supportTitle: 'Live Support',
-      spiffyTitle: 'Shop with AI',
+      supportTitle: "Live Support",
+      spiffyTitle: "Shop with AI",
       spiffyTitleHasLogo: false,
     },
   },
   chatPreviewConfig: {
-    variant: 'flat',
+    variant: "flat",
     largeProductComparison: false,
     filledBackgroundColor: colorVar(ColorNames.BackgroundLight),
     topMargin: 5,
@@ -70,66 +73,66 @@ const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
     },
     footerConfig: {
       hasFade: true,
-      suggestionButtonVariant: 'dark',
+      suggestionButtonVariant: "dark",
       suggestionsBackground: colorVar(ColorNames.BackgroundLight),
-      replyButtonIcon: 'send',
-      replyButtonText: 'What can I help you find?',
+      replyButtonIcon: "send",
+      replyButtonText: "What can I help you find?",
       replyInputHasShadow: true,
       replyInputHasBorder: false,
     },
     headerConfig: {
-      title: 'Shopping Assistant',
+      title: "Shopping Assistant",
       imageHeight: 30,
-      iconWidth: '24px',
-      iconHeight: '24px',
+      iconWidth: "24px",
+      iconHeight: "24px",
     },
   },
   floatingEntrypointConfig: {
-    position: 'middle-right',
+    position: "middle-right",
     expansionText: {
-      pdp: 'Question about our products?',
-      plp: 'Need help deciding?',
+      pdp: "Question about our products?",
+      plp: "Need help deciding?",
     },
     minimizedColor: colorVar(ColorNames.BackgroundPrimary),
     expandedColor: colorVar(ColorNames.BackgroundPrimary),
     textColor: colorVar(ColorNames.TextLight),
-    showOption: 'always',
+    showOption: "always",
     fontSize: 14,
   },
   pageCardConfig: {
-    variant: 'filled',
-    hoverVariant: 'shadow',
-    iconVariant: 'primary',
+    variant: "filled",
+    hoverVariant: "shadow",
+    iconVariant: "primary",
   },
   productCardConfig: {
-    variant: 'filled',
-    hoverVariant: 'backgroundDark',
-    layoutVariant: 'normal',
+    variant: "filled",
+    hoverVariant: "backgroundDark",
+    layoutVariant: "normal",
   },
   partialViewConfig: {
     maxHeight: 89,
-    borderRadius: '16px',
+    borderRadius: "16px",
   },
   productReviewConfig: {
-    styleVariant: 'standard',
-    colorVariant: 'neutral',
-    verifiedBuyerTitle: 'Verified Buyer',
+    styleVariant: "standard",
+    colorVariant: "neutral",
+    verifiedBuyerTitle: "Verified Buyer",
     incentivizedReviewFlag: false,
   },
   welcomeSectionConfig: {
-    variant: 'standard',
-    colorVariant: 'standard',
-    title: 'Welcome!',
-    subtitle: 'Here to answer all of your questions!',
+    variant: "standard",
+    colorVariant: "standard",
+    title: "Welcome!",
+    subtitle: "Here to answer all of your questions!",
     // icon: Sparkles,
-    iconName: 'sparkles', // Using serializable icon name instead of React component
+    iconName: "sparkles", // Using serializable icon name instead of React component
   },
   customerServiceIntegration: {
     integrationMode: CustomerServiceIntegrationMode.none,
     provider: CustomerServiceType.unsupported,
     businessHoursPolling: 30000, // 30s
     reopenChatMessage:
-      '👋👋 Hey there! Want to continue the conversation or need more help? Click below to start a new message.',
+      "👋👋 Hey there! Want to continue the conversation or need more help? Click below to start a new message.",
   },
   searchConfig: {
     enableGlobalSearch: false,
@@ -138,40 +141,40 @@ const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
 });
 
 const defaultColors: ColorMapping = {
-  [ColorNames.TextPrimary]: '#000000',
-  [ColorNames.TextSecondary]: '#666666',
-  [ColorNames.TextAccent]: '#808080',
-  [ColorNames.TextLink]: '#4D4D4D',
-  [ColorNames.TextLight]: '#FFFFFF',
-  [ColorNames.BackgroundPrimary]: '#999999',
-  [ColorNames.BackgroundSecondary]: '#F2F2F2',
-  [ColorNames.BackgroundSecondaryDark]: '#E5E5E5',
-  [ColorNames.BackgroundTertiary]: '#E5E5E5',
-  [ColorNames.BackgroundDark]: '#000000',
-  [ColorNames.BackgroundLight]: '#FFFFFF',
-  [ColorNames.BackgroundSaturated]: '#CCCCCC',
-  [ColorNames.BorderLight]: '#E5E5E5',
-  [ColorNames.BorderMedium]: '#B2B2B2',
-  [ColorNames.BorderDark]: '#4D4D4D',
-  [ColorNames.BorderOutline]: '#4D4D4D',
-  [ColorNames.AccentPrimary]: '#999999',
-  [ColorNames.AccentSecondary]: '#B2B2B2',
+  [ColorNames.TextPrimary]: "#000000",
+  [ColorNames.TextSecondary]: "#666666",
+  [ColorNames.TextAccent]: "#808080",
+  [ColorNames.TextLink]: "#4D4D4D",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#999999",
+  [ColorNames.BackgroundSecondary]: "#F2F2F2",
+  [ColorNames.BackgroundSecondaryDark]: "#E5E5E5",
+  [ColorNames.BackgroundTertiary]: "#E5E5E5",
+  [ColorNames.BackgroundDark]: "#000000",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#E5E5E5",
+  [ColorNames.BorderMedium]: "#B2B2B2",
+  [ColorNames.BorderDark]: "#4D4D4D",
+  [ColorNames.BorderOutline]: "#4D4D4D",
+  [ColorNames.AccentPrimary]: "#999999",
+  [ColorNames.AccentSecondary]: "#B2B2B2",
 };
 
 const defaultPageConfig = (): OrgPageConfig => ({
   pageVariants: [
     {
-      variantId: 'plp',
-      variantType: 'plp',
+      variantId: "plp",
+      variantType: "plp",
       variantTests: [{ testType: PageVariantTestType.UrlResolver }],
-      plpIdExtractor: 'url-resolver-plp-id',
+      plpIdExtractor: "url-resolver-plp-id",
       widgetMounting: [],
     },
     {
-      variantId: 'pdp',
-      variantType: 'pdp',
+      variantId: "pdp",
+      variantType: "pdp",
       variantTests: [{ testType: PageVariantTestType.UrlResolver }],
-      productIdExtractor: 'url-resolver-product-id',
+      productIdExtractor: "url-resolver-product-id",
       widgetMounting: [],
     },
   ],
@@ -181,9 +184,9 @@ const defaultPageConfig = (): OrgPageConfig => ({
 
 const defaultOrgInfo = {
   shortName: OrgShortName.Default,
-  name: 'Default',
-  domain: 'default.com',
-  defaultProductId: 'default',
+  name: "Default",
+  domain: "default.com",
+  defaultProductId: "default",
   alwaysEnabledMerchants: true,
   orgColors: () => defaultColors,
   orgUIConfig: () => defaultOrgUIConfig(OrgShortName.Default),

package/src/merchants/domInsertion.ts

@@ -0,0 +1,30 @@
+enum DOMInsertionType {
+  AFTER = "after",
+  BEFORE = "before",
+  ADJACENT_AFTER_BEGIN = "adjacent-after-begin",
+  ADJACENT_BEFORE_BEGIN = "adjacent-before-begin",
+  ADJACENT_AFTER_END = "adjacent-after-end",
+  ADJACENT_BEFORE_END = "adjacent-before-end",
+  APPEND_CHILD = "append-child",
+  NONE = "none",
+}
+
+export const DOMInsertionTypeToInsertPosition = (
+  type: DOMInsertionType
+): InsertPosition => {
+  switch (type) {
+    case DOMInsertionType.ADJACENT_AFTER_BEGIN:
+      return "afterbegin";
+    case DOMInsertionType.BEFORE:
+    case DOMInsertionType.ADJACENT_BEFORE_BEGIN:
+      return "beforebegin";
+    case DOMInsertionType.ADJACENT_BEFORE_END:
+      return "beforeend";
+    case DOMInsertionType.AFTER:
+    case DOMInsertionType.ADJACENT_AFTER_END:
+    default:
+      return "afterend";
+  }
+};
+
+export { DOMInsertionType };

package/src/merchants/dreamlandBaby/dreamlandBaby.ts

@@ -5,9 +5,9 @@ import {
 } from "src/config/locators";
 import { BasicOrgInfoType, OrgShortName } from "src/application/models";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { CdnService } from "src/application/service/cdnService";
-import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import { getCdnAssetURL } from "src/application/utils/cdnUtils";
+import { GridInsertionType } from "src/merchants/gridInsertion";
+import { DOMInsertionType } from "src/merchants/domInsertion";
 import {
   CHAT_PREVIEW_CONTAINER_ID,
   TOP_SUGGESTION_BAR_PDP_ID,
@@ -62,7 +62,7 @@ const dreamlandBabyOrgUIConfig = (): OrgUIConfig => {
     },
     chatHeader: {
       ...defaultDreamlandBabyOrgConfig.chatHeader,
-      imageSrc: CdnService.getAssetURL(
+      imageSrc: getCdnAssetURL(
         "dreamland-baby-logo.svg",
         OrgShortName.DreamlandBaby
       ),
@@ -244,7 +244,10 @@ const dreamlandBabyPageConfig = (): OrgPageConfig => ({
       addSeparators: false,
       socialProofConfig: {
         staticPLPImagesLayout: "grid",
-        logoName: "dreamland-baby-sparkles.png",
+        logoName: getCdnAssetURL(
+          "dreamland-baby-sparkles.png",
+          OrgShortName.DreamlandBaby
+        ),
         customerQuery: "asked which products encourage sleep?",
         headerTitle: "Shopping Assistant",
         suggestionButtonStrings: [
@@ -275,7 +278,10 @@ const dreamlandBabyPageConfig = (): OrgPageConfig => ({
       addSeparators: false,
       socialProofConfig: {
         staticPLPImagesLayout: "horizontal",
-        logoName: "dreamland-baby-sparkles.png",
+        logoName: getCdnAssetURL(
+          "dreamland-baby-sparkles.png",
+          OrgShortName.DreamlandBaby
+        ),
         customerQuery: "asked if it helps with sleep?",
         headerTitle: "Shopping Assistant",
         suggestionButtonStrings: [

package/src/merchants/fiveCbd/fiveCbd.ts

@@ -4,9 +4,9 @@ import {
 } from "src/config/locators";
 import { OrgShortName, BasicOrgInfoType } from "src/application/models";
 import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
-import { CdnService } from "src/application/service/cdnService";
-import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
-import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import { getCdnAssetURL } from "src/application/utils/cdnUtils";
+import { GridInsertionType } from "src/merchants/gridInsertion";
+import { DOMInsertionType } from "src/merchants/domInsertion";
 import {
   CHAT_PREVIEW_CONTAINER_ID,
   TOP_SUGGESTION_BAR_PDP_ID,
@@ -57,10 +57,7 @@ const fiveCbdOrgUIConfig = (): OrgUIConfig => {
     },
     chatHeader: {
       ...defaultFiveCbdOrgConfig.chatHeader,
-      imageSrc: CdnService.getAssetURL(
-        "five-cbd-mini-logo.svg",
-        OrgShortName.FiveCbd
-      ),
+      imageSrc: getCdnAssetURL("five-cbd-mini-logo.svg", OrgShortName.FiveCbd),
     },
     chatPreviewConfig: {
       ...defaultFiveCbdOrgConfig.chatPreviewConfig!,
@@ -72,10 +69,7 @@ const fiveCbdOrgUIConfig = (): OrgUIConfig => {
       buttonBorderColor: colorVar(ColorNames.BackgroundSecondaryDark),
       headerConfig: {
         ...defaultFiveCbdOrgConfig.chatPreviewConfig!.headerConfig,
-        imageSrc: CdnService.getAssetURL(
-          "five-cbd-logo.svg",
-          OrgShortName.FiveCbd
-        ),
+        imageSrc: getCdnAssetURL("five-cbd-logo.svg", OrgShortName.FiveCbd),
         imageHeight: 16,
       },
       footerConfig: {
@@ -583,7 +577,7 @@ const fiveCbdPageConfig = (): OrgPageConfig => ({
       addSeparators: false,
       socialProofConfig: {
         staticPLPImagesLayout: "grid",
-        logoName: "five-cbd-logo.svg",
+        logoName: getCdnAssetURL("five-cbd-logo.svg", OrgShortName.FiveCbd),
         customerQuery: "asked about effects.",
         headerTitle: "Shopping Assistant",
         suggestionButtonStrings: [
@@ -615,7 +609,7 @@ const fiveCbdPageConfig = (): OrgPageConfig => ({
       addSeparators: true,
       socialProofConfig: {
         staticPLPImagesLayout: "horizontal",
-        logoName: "five-cbd-logo.svg",
+        logoName: getCdnAssetURL("five-cbd-logo.svg", OrgShortName.FiveCbd),
         customerQuery: "asked how long it takes to feel the effects.",
         headerTitle: "Shopping Assistant",
         suggestionButtonStrings: [