@envive-ai/react-hooks 0.1.0

package/src/merchants/wolfMattress/wolfMattress.ts

@@ -0,0 +1,411 @@
+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 { 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 wolfMattressColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#2C3245",
+  [ColorNames.TextSecondary]: "#949494",
+  [ColorNames.TextAccent]: "#6B707C",
+  [ColorNames.TextLink]: "#2C3245",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#2C3245",
+  [ColorNames.BackgroundSecondary]: "#F2F2F2",
+  [ColorNames.BackgroundSecondaryDark]: "#E6E6E6",
+  [ColorNames.BackgroundTertiary]: "#A6C4D9",
+  [ColorNames.BackgroundDark]: "#2C3245",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#DDDDDD",
+  [ColorNames.BorderMedium]: "#949494",
+  [ColorNames.BorderDark]: "#949494",
+  [ColorNames.BorderOutline]: "#1C1C1C",
+  [ColorNames.AccentPrimary]: "#2C3245",
+  [ColorNames.AccentSecondary]: "#A6C4D9",
+};
+
+const wolfMattressOrgUIConfig = (): OrgUIConfig => {
+  const defaultWolfMattressOrgConfig = defaultOrgUIConfig(
+    OrgShortName.WolfMattress
+  );
+
+  return {
+    ...defaultWolfMattressOrgConfig,
+    chatMessageConfig: {
+      ...defaultWolfMattressOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Wolf Mattress AI",
+      variant: "accent",
+    },
+    chatHeader: {
+      ...defaultWolfMattressOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "wolf-mattress-logo-light.png",
+        OrgShortName.WolfMattress
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultWolfMattressOrgConfig.chatPreviewConfig!,
+      variant: "outlined",
+      iconFillColor: colorVar(ColorNames.AccentSecondary),
+      buttonBackgroundColor: colorVar(ColorNames.BackgroundLight),
+      buttonTextColor: colorVar(ColorNames.TextLink),
+      buttonBorderColor: colorVar(ColorNames.BorderOutline),
+      headerConfig: {
+        ...defaultWolfMattressOrgConfig.chatPreviewConfig!.headerConfig,
+      },
+      footerConfig: {
+        ...defaultWolfMattressOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultWolfMattressOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      position: "middle-right",
+      expansionText: {
+        pdp: "Is this the right Wolf for me?",
+        plp: "Need a better night's rest?",
+      },
+    },
+    productCardConfig: {
+      ...defaultWolfMattressOrgConfig.productCardConfig!,
+    },
+
+    pageCardConfig: {
+      ...defaultWolfMattressOrgConfig.pageCardConfig!,
+      variant: "minimal",
+      hoverVariant: "lift",
+      iconVariant: "accent",
+    },
+    productReviewConfig: {
+      ...defaultWolfMattressOrgConfig.productReviewConfig!,
+      colorVariant: "premium",
+    },
+    welcomeSectionConfig: {
+      ...defaultWolfMattressOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Wolf Mattress AI!",
+      subtitle:
+        "Hi! Wolf Mattress is handcrafted in America and built to last—for your personalized comfort. Let me know how I can help you achieve a better night’s rest.",
+    },
+    merchantOverrideCss: `
+      .spiffy-star-rating-star {
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+      
+      /* Icon color, all buttons */
+      .spiffy-button-base-button svg,
+      .spiffy-button-base-button svg:hover {
+        fill: var(--spiffy-colors-accent-secondary) !important;
+        stroke: var(--spiffy-colors-accent-secondary) !important;
+      }
+
+      /* Keep default colors for footer buttons in floating chat*/
+      footer .spiffy-button-base-button svg {
+        fill: var(--spiffy-colors-text-link) !important;
+        stroke: var(--spiffy-colors-text-link) !important;
+      } 
+
+      /* Override floating chat buttons to keep them original */
+      footer .spiffy-button-base-button:hover svg {
+        fill: var(--spiffy-colors-text-light) !important;
+        stroke: var(--spiffy-colors-text-light) !important;
+      } 
+
+      /* Chat Preview text color */
+      .spiffy-social-proof-content-container {
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+
+      .spiffy-social-proof-customer-count {
+        color: var(--spiffy-colors-text-accent) !important;
+      }
+
+      .spiffy-social-proof-suggestion-footer-title {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+
+      /* Chat text colors */
+      .spiffy-product-card-text-color {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+
+      /* Font size changes */
+      h2.spiffy-headline {
+        font-weight: 600 !important;
+      }
+
+      .spiffy-social-proof-content-container {
+        font-weight: 500 !important;
+      }
+
+      /* Font size changes */
+      h2.spiffy-headline-2 {
+        font-weight: 500 !important;
+      }
+
+      .spiffy-logo-icon {
+        width: 4.9375rem;
+        height: 1.25rem;
+      }
+
+      #spiffy-modal-container {
+        z-index: 100000 !important;
+      }
+
+      #spiffy-ai-chat-preview-contents div {
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+    `,
+  };
+};
+
+const wolfMattressPageConfig = (): 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",
+        },
+      ],
+    },
+    {
+      variantId: "home",
+      variantType: "homepage",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLPHomepage",
+          widgetConfigId: "chatPreviewPLP",
+        },
+      ],
+    },
+  ],
+
+  widgetConfigs: {
+    topSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "How firm or soft is it?",
+          "What do customers love about it?",
+          "How will this support my sleep?",
+          "What are the different layers of this mattress?",
+        ],
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "standard",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "wolf-mattress-logo-just-wolf.png",
+        customerQuery: "asked for personalized sleep products.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What’s the most popular mattress?",
+          "Which mattress has the most cooling comfort?",
+          "Looking for an adjustable base that’s easy to set up?",
+          "Do the Wolf Hybrid mattresses have edge support?",
+          "Which mattress is best for side sleepers?",
+        ],
+        staticPLPImageNames: [
+          "plp-image1.png",
+          "plp-image2.png",
+          "plp-image3.png",
+          "plp-image4.png",
+        ],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "outlined",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "wolf-mattress-logo-just-wolf.png",
+        customerQuery: "asked about comfort and support.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "How supportive or plush is this?",
+          "How does this improve my sleep?",
+          "What other products work with this?",
+          "What makes this a smart, long-term buy?",
+          "What awards has Wolf Mattress won?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything?",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    bottomSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "bottomSuggestionBar",
+      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",
+          "What do customers love about it?",
+          "How will this support my sleep?",
+          "What are the different layers of this mattress?",
+        ],
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "none",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".productgrid--items",
+        insertionType: DOMInsertionType.AFTER,
+      },
+    },
+    chatPreviewPLPHomepage: {
+      mountingConfigId: "chatPreviewPLPHomepage",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".section--canonical",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        marginTop: "60px",
+        maxWidth: "1384px",
+        marginLeft: "auto",
+        marginRight: "auto",
+        paddingLeft: "9px",
+        paddingRight: "9px",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: "section.product__container",
+        insertionType: DOMInsertionType.ADJACENT_BEFORE_END,
+      },
+      style: {
+        marginTop: "16px",
+      },
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".affirm-as-low-as:first-of-type",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginTop: "16px",
+        marginBottom: "16px",
+      },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".ElementsWidget__header:has(> .header__inner)",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginBottom: "16px",
+      },
+    },
+  },
+});
+
+const wolfMattressOrgInfo = {
+  shortName: OrgShortName.WolfMattress,
+  name: "Wolf Mattress",
+  domain: "wolfmattress.com",
+  defaultProductId: "wolf-14-inch-memory-foam-hybrid-plush-pillow-top",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: wolfMattressOrgUIConfig,
+  orgColors: () => wolfMattressColors,
+  orgPageConfig: wolfMattressPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { wolfMattressOrgInfo };