@envive-ai/react-hooks 0.1.0

package/src/merchants/kutFromTheKloth/kutFromTheKloth.ts

@@ -0,0 +1,418 @@
+import {
+  CHAT_PREVIEW_TESTID,
+  TOP_SUGGESTION_BAR_TESTID,
+  PROMPT_CARD_TESTID,
+  BOTTOM_SUGGESTION_BAR_TESTID,
+} 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 {
+  CHAT_PREVIEW_CONTAINER_ID,
+  TOP_SUGGESTION_BAR_PDP_ID,
+  PROMPT_CARD_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,
+  ImagePromptWidgetConfig,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+
+const kutFromTheKlothColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#423F3F",
+  [ColorNames.TextSecondary]: "#858585",
+  [ColorNames.TextAccent]: "#3E6AB4",
+  [ColorNames.TextLink]: "#000000",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#F7F5EF",
+  [ColorNames.BackgroundSecondary]: "#FFFFFF",
+  [ColorNames.BackgroundSecondaryDark]: "#F4F4F4",
+  [ColorNames.BackgroundTertiary]: "#F9FAFB",
+  [ColorNames.BackgroundDark]: "#423F3F",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#DDDDDD",
+  [ColorNames.BorderMedium]: "#858585",
+  [ColorNames.BorderDark]: "#423F3F",
+  [ColorNames.BorderOutline]: "#423F3F",
+  [ColorNames.AccentPrimary]: "#423F3F",
+  [ColorNames.AccentSecondary]: "#F7F5EF",
+};
+
+const kutFromTheKlothOrgUIConfig = (): OrgUIConfig => {
+  const defaultKutFromTheKlothOrgConfig = defaultOrgUIConfig(
+    OrgShortName.KutFromTheKloth
+  );
+
+  return {
+    ...defaultKutFromTheKlothOrgConfig,
+    chatMessageConfig: {
+      ...defaultKutFromTheKlothOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Kut from the Kloth AI",
+      variant: "accent",
+      productLink: {
+        ...(defaultKutFromTheKlothOrgConfig.chatMessageConfig?.productLink ||
+          {}),
+        iconVariant: "backgroundPrimaryDark",
+      },
+    },
+    chatHeader: {
+      ...defaultKutFromTheKlothOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "kut-from-the-kloth-logo.svg",
+        OrgShortName.KutFromTheKloth
+      ),
+      chevronColor: colorVar(ColorNames.BackgroundDark),
+    },
+    chatPreviewConfig: {
+      ...defaultKutFromTheKlothOrgConfig.chatPreviewConfig!,
+      headerConfig: {
+        ...defaultKutFromTheKlothOrgConfig.chatPreviewConfig!.headerConfig,
+      },
+      footerConfig: {
+        ...defaultKutFromTheKlothOrgConfig.chatPreviewConfig!.footerConfig,
+        suggestionButtonVariant: "outlined",
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultKutFromTheKlothOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expandedColor: colorVar(ColorNames.BackgroundDark),
+      expansionText: {
+        pdp: "Why is this a great fit?",
+        plp: "Which style fits you best?",
+      },
+    },
+    productCardConfig: {
+      ...defaultKutFromTheKlothOrgConfig.productCardConfig!,
+      variant: "bordered",
+    },
+    pageCardConfig: {
+      ...defaultKutFromTheKlothOrgConfig.pageCardConfig!,
+      variant: "outlined",
+      hoverVariant: "shadow",
+      iconVariant: "primary",
+    },
+    productReviewConfig: {
+      ...defaultKutFromTheKlothOrgConfig.productReviewConfig!,
+      styleVariant: "bordered",
+      colorVariant: "premium",
+    },
+    welcomeSectionConfig: {
+      ...defaultKutFromTheKlothOrgConfig.welcomeSectionConfig!,
+      iconName: undefined,
+      title: "Welcome to Kut from the Kloth AI!",
+      subtitle:
+        "Hey there! I’m here to help you find denim and wardrobe staples that feel as good as they look. Let’s find your perfect fit.",
+      variant: "outlined",
+    },
+    merchantOverrideCss: `
+      #spiffy-modal-container {
+        z-index: 2147483647 !important;
+      }
+      .spiffy-star-rating-container {
+        background-color: var(--spiffy-colors-background-secondary) !important;
+      }
+
+      .spiffy-star-rating-star {
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-product-review-header-reviewer {
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+
+      #spiffy-ai-floating-button {
+        z-index: 10000 !important;
+      }
+
+      .spiffy-floating-button-position {
+        top: calc(50% - 170px) !important;
+      }
+
+      #spiffy-ai-prompt-card {
+        @media (max-width: 1199px) {
+          width: calc(50% - 1px) !important;
+        }
+        @media (max-width: 768px) {
+          width: 100% !important;
+          height: 435px;
+        }
+      }
+      #spiffy-top-suggestion-bar-contents button span {
+        color: var(--spiffy-colors-text-link);
+      }
+      .spiffy-welcome-section-container {
+        border: 1px solid var(--spiffy-colors-border-light);
+        background-color: var(--spiffy-colors-background-tertiary);
+      }
+      .spiffy-welcome-section-message-subtitle {
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+      .spiffy-assistant-message-header-text {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .spiffy-suggestion-button-answer-class {
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+      .spiffy-suggestion-button-question-class {
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+      .spiffy-suggestion-button-question-class svg {
+        fill: none !important;
+      }
+      .spiffy-product-card-text-color {
+        color: var(--spiffy-colors-text-secondary);
+      }
+      .spiffy-product-review-header-reviewer {
+        font-weight: 600;
+      }
+      .spiffy-floating-button-collapsed .spiffy-floating-button-icon-container svg path {
+        stroke: var(--spiffy-colors-accent-primary);
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+      .spiffy-social-proof-content-button button {
+        border-radius: 0;
+      }
+      .spiffy-chat-preview-footer-container button {
+        border-radius: 0;
+      }
+      .spiffy-chat-preview-footer-container button svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+      .spiffy-chat-preview-footer-container button:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark);
+      }
+      .spiffy-social-proof-customer-count {
+        color: var(--spiffy-colors-text-accent) !important;
+      }
+      .spiffy-image-prompt-card-container .spiffy-suggestion-bar-row button {
+        background-color: var(--spiffy-colors-background-secondary) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+      .spiffy-image-prompt-card-container .spiffy-suggestion-bar-row button svg {
+        stroke: var(--spiffy-colors-text-primary) !important;
+      }
+      .spiffy-image-prompt-card-container .spiffy-suggestion-bar-row button:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+      }
+      .spiffy-chat-header-close-button {
+        background-color: var(--spiffy-colors-background-dark);
+      }
+      .spiffy-chat-header-close-button svg {
+        color: var(--spiffy-colors-background-light);
+      }
+    `,
+  };
+};
+
+const kutFromTheKlothPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "pdp",
+      variantType: "pdp",
+      variantTests: [{ testType: PageVariantTestType.ShopifyPDP }],
+      productIdExtractor: "shopify-product-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          widgetConfigId: "topSuggestionsBar",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionsBar",
+        },
+      ],
+    },
+    {
+      variantId: "plp",
+      variantType: "plp",
+      variantTests: [{ testType: PageVariantTestType.ShopifyPLP }],
+      plpIdExtractor: "shopify-collection-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "imagePromptCardPLP",
+          widgetConfigId: "imagePromptCardPLP",
+        },
+      ],
+    },
+  ],
+
+  mountingConfigs: {
+    imagePromptCardPLP: {
+      mountingConfigId: "imagePromptCardPLP",
+      containerId: PROMPT_CARD_ID,
+      testId: PROMPT_CARD_TESTID,
+      insertionPoint: {
+        selector: ".product-list-container .product-list--rows",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_4,
+      style: {
+        marginTop: "40px",
+        width: "33.3%",
+        aspectRatio: "1/1.45",
+        float: "left",
+      },
+    },
+
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-detail__form .product-detail-accordion",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+    },
+
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".price-area.product-detail__gap-sm",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        margin: "15px 0",
+      },
+    },
+
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".js-oke-widgetSize .oke-w-header",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginBottom: "20px",
+      },
+    },
+  },
+
+  widgetConfigs: {
+    imagePromptCardPLP: {
+      widgetConfigId: "imagePromptCard",
+      type: WidgetType.ImagePromptCard,
+      url: CdnService.getAssetURL(
+        "image-prompt-card-1.png",
+        OrgShortName.KutFromTheKloth
+      ),
+      lightText: true,
+      title: "Kut Just For You",
+      subtitle: ["Need personal styling help?"],
+      staticSuggestionCopies: [
+        "Which denim fits my style?",
+        "Best jacket for layering?",
+        "Which top pairs with everything?",
+        "Which piece works day to night?",
+      ],
+      userQueryButtonConfig: {
+        variant: "underlineLight",
+        placeholderText: "What are you looking for?",
+        icon: "sendArrow",
+      },
+    } satisfies ImagePromptWidgetConfig,
+
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "kut-from-the-kloth-logo.svg",
+        customerQuery: "asked about fit and style.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "How does this fit?",
+          "What pieces can I pair this with?",
+          "What’s the right size for me?",
+          "What is this made of?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantAccent: "dark",
+        suggestionButtonVariantDefault: "secondary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+
+    topSuggestionsBar: {
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      type: WidgetType.SuggestionBarV2,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonBorderRadius: "sm",
+      animationSpeed: "standard",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "How does this fit and feel?",
+          "How does this wear all day?",
+          "What makes this unique?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+
+    bottomSuggestionsBar: {
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      type: WidgetType.SuggestionBarV2,
+      variant: "dark",
+      hoverVariant: "secondaryDark",
+      buttonBorderRadius: "sm",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "How does this fit and feel?",
+          "How does this wear all day?",
+          "What makes this unique?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+});
+
+const kutFromTheKlothOrgInfo = {
+  shortName: OrgShortName.KutFromTheKloth,
+  name: "Kut from the kloth",
+  domain: "kutfromthekloth.com",
+  defaultProductId: "kt32138-jasmine-chiffon-blouse-ribeiramagentatan",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: kutFromTheKlothOrgUIConfig,
+  orgColors: () => kutFromTheKlothColors,
+  orgPageConfig: kutFromTheKlothPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { kutFromTheKlothOrgInfo };