@envive-ai/react-hooks 0.1.0

package/src/merchants/dreamlandBaby/dreamlandBaby.ts

@@ -0,0 +1,375 @@
+import {
+  CHAT_PREVIEW_TESTID,
+  TOP_SUGGESTION_BAR_TESTID,
+  BOTTOM_SUGGESTION_BAR_TESTID,
+} 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 {
+  CHAT_PREVIEW_CONTAINER_ID,
+  TOP_SUGGESTION_BAR_PDP_ID,
+  BOTTOM_REVIEWS_BAR_ID,
+} from "src/config/divIds";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+import { defaultOrgUIConfig } from "src/merchants/default";
+import {
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+
+const dreamlandBabyColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#2D2D2D",
+  [ColorNames.TextSecondary]: "#4B4C4C",
+  [ColorNames.TextAccent]: "#4B4C4C",
+  [ColorNames.TextLink]: "#2D2D2D",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#D3DFE9",
+  [ColorNames.BackgroundSecondary]: "#F4F3F1",
+  [ColorNames.BackgroundSecondaryDark]: "#E8E7E5",
+  [ColorNames.BackgroundTertiary]: "#F4F3F1",
+  [ColorNames.BackgroundDark]: "#2D2D2D",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#EAEAEA",
+  [ColorNames.BorderMedium]: "#D5D5D5",
+  [ColorNames.BorderDark]: "#2D2D2D",
+  [ColorNames.BorderOutline]: "#2D2D2D",
+  [ColorNames.AccentPrimary]: "#D3DFE9",
+  [ColorNames.AccentSecondary]: "#FFF9A5",
+};
+
+const dreamlandBabyOrgUIConfig = (): OrgUIConfig => {
+  const defaultDreamlandBabyOrgConfig = defaultOrgUIConfig(
+    OrgShortName.DreamlandBaby
+  );
+
+  return {
+    ...defaultDreamlandBabyOrgConfig,
+    chatMessageConfig: {
+      ...defaultDreamlandBabyOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Dreamland Baby AI",
+      variant: "accent",
+    },
+    chatHeader: {
+      ...defaultDreamlandBabyOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "dreamland-baby-logo.svg",
+        OrgShortName.DreamlandBaby
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultDreamlandBabyOrgConfig.chatPreviewConfig!,
+      iconFillColor: colorVar(ColorNames.AccentPrimary),
+      buttonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
+      buttonTextColor: colorVar(ColorNames.TextLink),
+      buttonBackgroundHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+      buttonTextHoverColor: colorVar(ColorNames.TextLink),
+      headerConfig: {
+        ...defaultDreamlandBabyOrgConfig.chatPreviewConfig!.headerConfig,
+        sparklesColor: colorVar(ColorNames.AccentPrimary),
+      },
+      footerConfig: {
+        ...defaultDreamlandBabyOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultDreamlandBabyOrgConfig.floatingEntrypointConfig!,
+      showOption: "after-interaction-anywhere",
+      position: "middle-right",
+      expansionText: {
+        pdp: "Why is this a great sleep solution?",
+        plp: "Looking for restful sleep tonight?",
+      },
+      minimizedColor: colorVar(ColorNames.BackgroundPrimary),
+      expandedColor: colorVar(ColorNames.TextSecondary),
+      iconStrokeColor: colorVar(ColorNames.TextSecondary),
+      iconFillColor: colorVar(ColorNames.TextSecondary),
+    },
+    productCardConfig: {
+      ...defaultDreamlandBabyOrgConfig.productCardConfig!,
+    },
+    pageCardConfig: {
+      ...defaultDreamlandBabyOrgConfig.pageCardConfig!,
+      variant: "minimal",
+      hoverVariant: "shadow",
+      iconVariant: "background",
+    },
+    productReviewConfig: {
+      ...defaultDreamlandBabyOrgConfig.productReviewConfig!,
+      colorVariant: "premium",
+    },
+    welcomeSectionConfig: {
+      ...defaultDreamlandBabyOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Dreamland Baby AI!",
+      subtitle:
+        "Hi there! I’m Denice, your Dreamland personal shopping assistant. I’m here to help you find sleepwear that brings better rest to your whole family.  Let me know what you’re looking for and we’ll get you dreaming in no time.",
+      colorVariant: "accent",
+    },
+    merchantOverrideCss: `
+      #spiffy-modal-container {
+        z-index: 2147483637 !important;
+      }
+
+      .spiffy-star-rating-star {
+        fill: var(--spiffy-colors-background-primary) !important;
+      }
+      
+      /* Font changes */
+      .spiffy-headline {
+        font-family: 'Baskervville', 'Poppins', sans-serif !important;
+      }
+
+      .spiffy-chat-preview-body .chakra-heading {
+        font-family: 'Baskervville', 'Poppins', sans-serif !important;
+      }
+
+      /* Derek's font changes don't include product cards */
+      .spiffy-product-card-title {
+        font-family: 'Poppins', sans-serif !important;
+      }
+
+      /* All buttons on page have should have same color sparkle icon, even on hover */
+      .spiffy-button-base-button svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-button-base-button:hover svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      /* Chatpreview secondary buttons had wrong hover color */
+      #spiffy-ai-chat-preview-contents .spiffy-button-base-button:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      /* Floating button icon is incorrect color when expanded */
+      button:hover .spiffy-floating-button-icon-container svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+        color: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      /* Suggestion buttons in chat wrong icon color, hover icon color */
+      footer .spiffy-suggestion-button-question-class svg {
+        fill: var(--spiffy-colors-text-link) !important;
+        stroke: var(--spiffy-colors-text-link) !important;
+      } 
+
+      footer .spiffy-suggestion-button-question-class:hover svg {
+        fill: var(--spiffy-colors-text-light) !important;
+        stroke: var(--spiffy-colors-text-light) !important;
+      } 
+
+      /* Document retrieval icon color set */
+      .spiffy-view-source-icon-wrapper {
+        background-color: var(--spiffy-colors-accent-primary) !important;
+      }
+
+
+    `,
+  };
+};
+
+const dreamlandBabyPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "plp",
+      variantType: "plp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      plpIdExtractor: "url-resolver-plp-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "chatPreviewPLP",
+        },
+      ],
+    },
+    {
+      variantId: "pdp",
+      variantType: "pdp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      productIdExtractor: "url-resolver-product-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          widgetConfigId: "topSuggestionBar",
+        },
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionBar",
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Are diaper changes easy?",
+          "What do other caregivers love about this?",
+          "Has this helped other babies sleep better?",
+          "What age range is this recommended for?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "dreamland-baby-sparkles.png",
+        customerQuery: "asked which products encourage sleep?",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "Which sleep sack is best for my baby’s age?",
+          "Which sleep sack has a built-in swaddle?",
+          "Looking for sleepwear for warmer nights?",
+          "Need a wearable blanket for year-round use?",
+          "A swaddle that helps soothe newborns?",
+        ],
+        staticPLPImageNames: [
+          "plp-image1.png",
+          "plp-image2.png",
+          "plp-image3.png",
+          "plp-image4.png",
+        ],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "dark",
+        userQueryButtonConfig: {
+          placeholderText: "What will you dream of next?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "dreamland-baby-sparkles.png",
+        customerQuery: "asked if it helps with sleep?",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "How do I clean and care for this?",
+          "Can this be worn with your other sleep products?",
+          "What material is this made from?",
+          "Are the arms weighted?",
+          "Does this convert into footed pajamas?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "dark",
+        userQueryButtonConfig: {
+          placeholderText: "What will you dream of next?",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    bottomSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      variant: "dark",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Are diaper changes easy?",
+          "What do other caregivers love about this?",
+          "Has this helped other babies sleep better?",
+          "What age range is this recommended for?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".js-grid",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      className: "is-plp",
+      gridInsertionType: GridInsertionType.ROW_2,
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-accordion",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        width: "100%",
+        marginTop: "16px",
+      },
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".product__price__main",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: { marginTop: "16px" },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".oke-w-header-content",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: { marginTop: "8px", marginBottom: "24px" },
+    },
+  },
+});
+
+const dreamlandBabyOrgInfo = {
+  shortName: OrgShortName.DreamlandBaby,
+  name: "Dreamland baby",
+  domain: "dreamlandbabyco.com",
+  defaultProductId: "dream-weighted-sleep-sack",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: dreamlandBabyOrgUIConfig,
+  orgColors: () => dreamlandBabyColors,
+  orgPageConfig: dreamlandBabyPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { dreamlandBabyOrgInfo };