@envive-ai/react-hooks 0.1.0

package/src/merchants/westonJonBoucher/westonJonBoucher.ts

@@ -0,0 +1,473 @@
+import {
+  BOTTOM_SUGGESTION_BAR_TESTID,
+  CHAT_PREVIEW_TESTID,
+  TOP_SUGGESTION_BAR_PDP_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 {
+  BOTTOM_REVIEWS_BAR_ID,
+  CHAT_PREVIEW_CONTAINER_ID,
+  TOP_SUGGESTION_BAR_PDP_ID,
+} from "src/config/divIds";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+import { defaultOrgUIConfig } from "src/merchants/default";
+import {
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+import {
+  CustomerServiceIntegrationMode,
+  CustomerServiceType,
+} from "src/application/service/customerService/types";
+
+const westonJonBoucherColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#1C1C1C",
+  [ColorNames.TextSecondary]: "#6B6B6B",
+  [ColorNames.TextAccent]: "#6B6B6B",
+  [ColorNames.TextLink]: "#4D4D4D",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#1C1C1C",
+  [ColorNames.BackgroundSecondary]: "#FFFFFF",
+  [ColorNames.BackgroundSecondaryDark]: "#EEEEEE",
+  [ColorNames.BackgroundTertiary]: "#EEEEEE",
+  [ColorNames.BackgroundDark]: "#1C1C1C",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#EEEEEE",
+  [ColorNames.BorderLight]: "#DDDDDD",
+  [ColorNames.BorderMedium]: "#DDDDDD",
+  [ColorNames.BorderDark]: "#6B6B6B",
+  [ColorNames.BorderOutline]: "#1C1C1C",
+  [ColorNames.AccentPrimary]: "#09AC04",
+  [ColorNames.AccentSecondary]: "#EEEEEE",
+};
+
+const westonJonBoucherOrgUIConfig = (): OrgUIConfig => {
+  const defaultWestonJonBoucherOrgConfig = defaultOrgUIConfig(
+    OrgShortName.WestonJonBoucher
+  );
+
+  return {
+    ...defaultWestonJonBoucherOrgConfig,
+    customerServiceIntegration: {
+      ...defaultWestonJonBoucherOrgConfig.customerServiceIntegration,
+      provider: CustomerServiceType.redo,
+      integrationMode: CustomerServiceIntegrationMode.simple,
+      useUnifiedButton: true,
+    },
+    chatMessageConfig: {
+      ...defaultWestonJonBoucherOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Shopping Assistant",
+      variant: "accent",
+    },
+    chatHeader: {
+      ...defaultWestonJonBoucherOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "weston-jon-boucher-logo.svg",
+        OrgShortName.WestonJonBoucher
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultWestonJonBoucherOrgConfig.chatPreviewConfig!,
+      headerConfig: {
+        ...defaultWestonJonBoucherOrgConfig.chatPreviewConfig!.headerConfig,
+        title: "Shopping Assistant",
+        imageSrc: CdnService.getAssetURL(
+          "weston-jon-boucher-logo.svg",
+          OrgShortName.WestonJonBoucher
+        ),
+      },
+      footerConfig: {
+        ...defaultWestonJonBoucherOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultWestonJonBoucherOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expansionText: {
+        plp: "What do you need to complete your look?",
+        pdp: "Why is this a good fit for you?",
+      },
+    },
+    productCardConfig: {
+      ...defaultWestonJonBoucherOrgConfig.productCardConfig!,
+      variant: "bordered",
+    },
+    pageCardConfig: {
+      ...defaultWestonJonBoucherOrgConfig.pageCardConfig!,
+      variant: "filled",
+      hoverVariant: "shadow",
+      iconVariant: "background",
+    },
+    productReviewConfig: {
+      ...defaultWestonJonBoucherOrgConfig.productReviewConfig!,
+      styleVariant: "bordered",
+    },
+    welcomeSectionConfig: {
+      ...defaultWestonJonBoucherOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Weston Jon Boucher!",
+      colorVariant: "accent",
+      subtitle:
+        "Hi, Weston here. I’m here to help you build a sharp, confident style crafted just for you. Tell me about yourself and how I can find you your perfect fit.",
+    },
+    floatingChatConfig: {
+      ...defaultWestonJonBoucherOrgConfig.floatingChatConfig!,
+      suggestionButtonConfig: {
+        ...defaultWestonJonBoucherOrgConfig.floatingChatConfig
+          .suggestionButtonConfig!,
+        variant: "secondary",
+        hoverVariant: "darkAccent",
+      },
+    },
+    merchantOverrideCss: `
+      #spiffy-modal-container {
+        z-index: 1000000000 !important;
+      }
+      .spiffy-logo-icon {
+        height: 24px;
+      }
+      .spiffy-headline {
+        font-family: 'Baskerville No 2', 'Poppins', sans-serif;
+      }
+      .spiffy-star-rating-container {
+        background: var(--spiffy-colors-background-secondary) !important;
+      }
+      .spiffy-view-source-icon-wrapper {
+        background: var(--spiffy-colors-background-saturated) !important;
+      }
+      .spiffy-view-source-icon-wrapper svg {
+        fill: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-suggestion-button-question-class {
+        border-radius: 0;
+      }
+      #global-search-suggestions .spiffy-suggestion-button-question-class {
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-question-class {
+        border: 1px solid;
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+      .spiffy-suggestion-button-container {
+        border-radius: 0 !important;
+      }
+      .spiffy-suggestion-button-question-class svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+      .spiffy-social-proof-suggestion-footer-title {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+      .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-modal-sheet-footer .spiffy-suggestion-button-question-class {
+        background: var(--spiffy-colors-background-secondary-dark) !important;
+        border-radius: 20px;
+        color: var(--spiffy-colors-text-link) !important;
+        border: none !important;
+      }
+      .spiffy-modal-sheet-footer .spiffy-suggestion-button-question-class:hover {
+        border: none !important;
+      }
+      .spiffy-modal-sheet-footer .spiffy-suggestion-button-question-class svg {
+        fill: var(--spiffy-colors-text-link) !important;
+        stroke: var(--spiffy-colors-text-link) !important;
+      }
+      .spiffy-back-to-results-button {
+        color: var(--spiffy-colors-text-light);
+      }
+      .spiffy-back-to-results-button svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-floating-button-position {
+        top: calc(100% - 290px) !important;
+
+        @media (max-width: 760px) {
+          top: calc(100% - 355px) !important;
+        }
+      }
+    `,
+  };
+};
+
+const westonJonBoucherPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "plp-shop-with-ai",
+      variantType: "plp",
+      variantTests: [
+        { testType: PageVariantTestType.UrlResolver },
+        {
+          testType: PageVariantTestType.PlpId,
+          plpIdExtractor: "url-resolver-plp-id",
+          plpIds: ["shop-with-wjb-ai"],
+        },
+      ],
+      plpIdExtractor: "url-resolver-plp-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLPShopWithAI",
+          widgetConfigId: "chatPreviewPLPShopWithAI",
+        },
+      ],
+    },
+    {
+      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: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          widgetConfigId: "topSuggestionsBar",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionsBar",
+        },
+      ],
+    },
+  ],
+
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-list",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_1,
+      style: {
+        gridRow: "2 / 2",
+        gridColumn: "1 / -1",
+      },
+    },
+    chatPreviewPLPShopWithAI: {
+      mountingConfigId: "chatPreviewPLPShopWithAI",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".container--xs",
+        insertionType: DOMInsertionType.AFTER,
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-info__block-item .prose",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+    },
+
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_PDP_TESTID,
+      insertionPoint: {
+        selector: ".product-info__block-item .variant-picker",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        marginBottom: "20px",
+      },
+    },
+
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".stamped-content",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        marginBottom: "20px",
+      },
+    },
+  },
+
+  widgetConfigs: {
+    chatPreviewPLPShopWithAI: {
+      widgetConfigId: "chatPreviewPLPShopWithAI",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "weston-jon-boucher-logo.svg",
+        customerQuery: "asked what are Weston’s top picks?",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What are the best bottoms to pair with The Alastair Polo?",
+          "What’s a sharp casual shirt?",
+          "Best sweater for layering year-round?",
+          "What fits should I have for the gym?",
+        ],
+        staticPLPImageNames: [
+          "default_plp_embedded_1.png",
+          "default_plp_embedded_2.png",
+          "default_plp_embedded_3.png",
+          "default_plp_embedded_4.png",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Need style assistance?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "weston-jon-boucher-logo.svg",
+        customerQuery: "asked what are Weston’s top picks?",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What are the best bottoms to pair with The Alastair Polo?",
+          "What’s a sharp casual shirt?",
+          "Best sweater for layering year-round?",
+          "What fits should I have for the gym?",
+        ],
+        staticPLPImageNames: [
+          "default_plp_embedded_1.png",
+          "default_plp_embedded_2.png",
+          "default_plp_embedded_3.png",
+          "default_plp_embedded_4.png",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Need style assistance?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "weston-jon-boucher-logo.svg",
+        customerQuery: "asked for style advice.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What pairs well with this?",
+          "How does sizing run for muscular builds?",
+          "How do I care for this piece?",
+          "What details set this apart?",
+        ],
+        staticPLPImageNames: [
+          "default_plp_embedded_1.png",
+          "default_plp_embedded_2.png",
+          "default_plp_embedded_3.png",
+          "default_plp_embedded_4.png",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Need style assistance?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+
+    topSuggestionsBar: {
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      type: WidgetType.SuggestionBarV2,
+      variant: "primary",
+      twoRowsOnMobile: true,
+      animationSpeed: "standard",
+      hoverVariant: "darkAccent",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "What do customers say about the quality?",
+          "Why is this a must-have?",
+          "How does this enhance an athletic frame?",
+          "What sets Weston Jon Boucher apart from other brands?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+
+    bottomSuggestionsBar: {
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      type: WidgetType.SuggestionBarV2,
+      animationSpeed: "standard",
+      variant: "dark",
+      twoRowsOnMobile: true,
+      hoverVariant: "darkAccent",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "What do customers say about the quality?",
+          "Why is this a must-have?",
+          "How does this enhance an athletic frame?",
+          "What sets Weston Jon Boucher apart from other brands?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+});
+
+const westonJonBoucherOrgInfo = {
+  shortName: OrgShortName.WestonJonBoucher,
+  name: "Weston Jon Boucher",
+  domain: "westonjonboucher.com",
+  defaultProductId: "the-alastair-fitted-polo",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: westonJonBoucherOrgUIConfig,
+  orgColors: () => westonJonBoucherColors,
+  orgPageConfig: westonJonBoucherPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { westonJonBoucherOrgInfo };