@envive-ai/react-hooks 0.1.0

package/src/merchants/carpe/carpe.ts

@@ -0,0 +1,656 @@
+import { PageVisitCategory } from "@spiffy-ai/commerce-api-client";
+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 { defaultOrgUIConfig } from "src/merchants/default";
+import {
+  CategoryExtractorType,
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+
+const carpeColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#000000",
+  [ColorNames.TextSecondary]: "#888888",
+  [ColorNames.TextAccent]: "#F36E21",
+  [ColorNames.TextLink]: "#353535",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#F36E21",
+  [ColorNames.BackgroundSecondary]: "#F2F2F2",
+  [ColorNames.BackgroundSecondaryDark]: "#E6E6E6",
+  [ColorNames.BackgroundTertiary]: "#F78E1F",
+  [ColorNames.BackgroundDark]: "#353535",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#F2F2F2",
+  [ColorNames.BorderMedium]: "#B5B5B5",
+  [ColorNames.BorderDark]: "#888888",
+  [ColorNames.BorderOutline]: "#353535",
+  [ColorNames.AccentPrimary]: "#F36E21",
+  [ColorNames.AccentSecondary]: "#009BDF",
+};
+
+const carpeOrgUIConfig = (): OrgUIConfig => {
+  const defaultCarpeOrgConfig = defaultOrgUIConfig(OrgShortName.Carpe);
+
+  return {
+    ...defaultCarpeOrgConfig,
+    chatMessageConfig: {
+      ...defaultCarpeOrgConfig.chatMessageConfig,
+      assistantChatTitle: "CARPE AI",
+      variant: "accent",
+    },
+    chatHeader: {
+      ...defaultCarpeOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "carpe-logo-white.svg",
+        OrgShortName.Carpe
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultCarpeOrgConfig.chatPreviewConfig!,
+
+      iconFillColor: colorVar(ColorNames.BackgroundPrimary),
+      buttonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
+      buttonBackgroundHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+      buttonTextColor: colorVar(ColorNames.TextLink),
+      buttonTextHoverColor: colorVar(ColorNames.TextLink),
+
+      headerConfig: {
+        ...defaultCarpeOrgConfig.chatPreviewConfig!.headerConfig,
+        imageSrc: CdnService.getAssetURL("carpe-logo.svg", OrgShortName.Carpe),
+        imageHeight: 16,
+        title: "SHOPPING ASSISTANT",
+      },
+      footerConfig: {
+        ...defaultCarpeOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultCarpeOrgConfig.floatingEntrypointConfig!,
+      expandedColor: colorVar(ColorNames.BackgroundDark),
+      minimizedColor: colorVar(ColorNames.BackgroundPrimary),
+      showOption: "always",
+    },
+    productCardConfig: {
+      ...defaultCarpeOrgConfig.productCardConfig!,
+    },
+
+    pageCardConfig: {
+      ...defaultCarpeOrgConfig.pageCardConfig!,
+      variant: "minimal",
+      hoverVariant: "shadow",
+      iconVariant: "background",
+    },
+    productReviewConfig: {
+      ...defaultCarpeOrgConfig.productReviewConfig!,
+    },
+    welcomeSectionConfig: {
+      ...defaultCarpeOrgConfig.welcomeSectionConfig!,
+      colorVariant: "light",
+      title: "Welcome to CARPE AI!",
+      subtitle:
+        "Hi there! I'm here to help you find the right sweat solution- whether it's for your underarms, hands, feet, face, or beyond. Let's take the guesswork out and find what works for you.",
+    },
+    merchantOverrideCss: `
+      #spiffy-modal-container {
+        z-index: 10000 !important;
+      }
+
+      /* Global icon overrides */
+      .spiffy-icon svg,
+      .spiffy-icon path,
+      .spiffy-button-base-button svg,
+      .spiffy-button-base-button path {
+        fill: var(--spiffy-colors-background-primary) !important;
+        stroke: var(--spiffy-colors-background-primary) !important;
+      }
+
+      .spiffy-welcome-section-message-title {
+        color: var(--spiffy-colors-text-light) !important;
+        font-weight: 600 !important;
+      }
+
+      .spiffy-chat-header-close-button svg {
+        fill: var(--spiffy-colors-background-primary) !important;
+        stroke: var(--spiffy-colors-background-primary) !important;
+      }
+
+      .spiffy-chat-header-container img {
+        height: 16px !important;
+      }
+
+      .spiffy-suggestion-button-container svg {
+        fill: var(--spiffy-colors-background-primary) !important;
+        stroke: var(--spiffy-colors-background-primary) !important;
+      }
+
+      .spiffy-chat-preview-footer-container .spiffy-button-base-button {
+        background-color: var(--spiffy-colors-background-secondary) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      .spiffy-chat-preview-footer-container .spiffy-button-base-button:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      .spiffy-modal-sheet-footer .spiffy-button-base-button:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      .spiffy-social-proof-content-button .spiffy-button-base-button:hover {
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      .spiffy-suggestion-button-question-class:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-link) !important;
+      }
+
+      .spiffy-social-proof-customer-count {
+        color: var(--spiffy-colors-text-accent) !important;
+      }
+
+      .spiffy-social-proof-content-container {
+        color: var(--spiffy-colors-text-primary) !important;
+        font-size: 20px;
+      }
+
+      .spiffy-social-proof-suggestion-footer-title {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+
+      .spiffy-social-proof-header {
+        text-transform: uppercase !important;
+      }
+
+      .spiffy-social-proof-header img {
+        transform: translateY(3px);
+      }
+
+      .spiffy-welcome-section-container {
+        color: var(--spiffy-colors-text-light) !important;
+      }
+
+      .spiffy-welcome-section-container svg {
+        fill: var(--spiffy-colors-text-light) !important;
+      }
+
+      .spiffy-modal-sheet-footer .spiffy-suggestion-button-question-class svg {
+        display: none;
+      }
+
+      .spiffy-suggestion-button-answer-class:hover {
+        border-color: var(--spiffy-colors-background-secondary-dark) !important;
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+
+      .spiffy-product-card-price, .spiffy-product-card-rating {
+        color: var(--spiffy-colors-text-secondary);
+      }
+      
+      .spiffy-product-card-title {
+        color: var(--spiffy-colors-text-link);
+      }
+
+      .spiffy-star-rating-container {
+        background: var(--spiffy-colors-background-light) !important;
+      }
+
+      .spiffy-star-rating-container svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+      
+      .spiffy-view-source-icon-wrapper {
+        background-color: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-view-source-icon-wrapper svg {
+        fill: var(--spiffy-colors-background-light) !important;
+      }
+
+      .spiffy-headline {
+        font-family: 'font-sansserif-regular', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif !important;
+      }
+      
+      .spiffy-body-text, 
+      .spiffy-chat-preview-body-description,
+      .spiffy-social-proof-suggestion-footer-title,
+      .spiffy-social-proof-content-container {
+        font-family: 'Montserrat', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif !important;
+      }
+      
+      .spiffy-assistant-message-header-text  {
+        font-weight: 600 !important;
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+
+      /* Add negative margin to preserve the user query button shadow. */
+      #spiffy-ai-chat-preview-contents {
+        padding: 0 8px;
+        margin-left: -8px;
+        margin-right: -8px;
+      }
+
+      #spiffy-ai-chat-preview-contents > hr {
+        border: solid 1px var(--spiffy-colors-border-light) !important;
+      }
+
+      #spiffy-ai-chat-preview-contents > div > button > svg {
+        fill: var(--spiffy-colors-background-saturated) !important;
+      }
+  `,
+    floatingChatConfig: {
+      ...defaultCarpeOrgConfig.floatingChatConfig,
+      suggestionButtonConfig: {
+        ...defaultCarpeOrgConfig.floatingChatConfig.suggestionButtonConfig!,
+        hoverVariant: "secondaryDark",
+      },
+    },
+  };
+};
+
+const carpePageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "supportPages",
+      variantType: "page_visit",
+      variantTests: [
+        {
+          testType: PageVariantTestType.PageCategory,
+          extractor: {
+            type: CategoryExtractorType.VisitCategoryMap,
+            map: {
+              [PageVisitCategory.ProductLike]: [
+                "mycarpe.com",
+                "/pages/save-67-build-your-bundle",
+              ],
+            },
+          },
+        },
+      ],
+
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDPCustomPage",
+          widgetConfigId: "chatPreviewPDPCustom",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDPCustomPage",
+          widgetConfigId: "topSuggestionBarPDPCustomPage",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDPCustomPage",
+          widgetConfigId: "bottomSuggestionsBar",
+        },
+      ],
+    },
+    {
+      variantId: "plp",
+      variantType: "plp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      plpIdExtractor: "url-resolver-plp-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "chatPreviewPLP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDPCustomPage",
+          widgetConfigId: "topSuggestionBarPDPCustomPage",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDPCustomPage",
+          widgetConfigId: "bottomSuggestionsBar",
+        },
+      ],
+    },
+    {
+      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: "bottomSuggestionsBar",
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionBarPDPCustomPage: {
+      buttonBorderRadius: "md",
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarPDPCustomPage",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "dark",
+      boldFirstButton: true,
+      hoverVariant: "secondaryDark",
+      animationSpeed: "standard",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "What results do people see?",
+          "How does this feel on the skin?",
+          "How long does this take to work?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryDark",
+      boldFirstButton: true,
+      animationSpeed: "standard",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "What results do people see?",
+          "How does this feel on the skin?",
+          "How long does this take to work?",
+        ],
+        productSpecific: {
+          "41133834797189": [
+            // Feminine Care Deo
+            "Is Carpe safe for sensitive skin in intimate areas?",
+            "How is Carpe Feminine Care Deodorant different from other intimate/whole body deodorants?",
+            "Where is Carpe safe to apply?",
+            "What results do people see?",
+          ],
+          "34411152015493": [
+            // Face Lotion
+            "How does Carpe Sweat Absorbing Face Lotion help with face sweat?",
+            "Can I wear Carpe Face Lotion with makeup?",
+            "How do I use this within my skincare routine?",
+            "Do I need to reapply throughout the day?",
+          ],
+          "40619547918469": [
+            // Primer
+            "How long does this product work for sweat and oil absorption?",
+            "Can I wear this without foundation?",
+            "Is this buildable?",
+            "Is this suitable for sensitive skin?",
+          ],
+          "40670841536645": [
+            // Setting Mist
+            "How does this feel on the skin?",
+            "How long does it make makeup stay put?",
+            "How long does it take to dry on the skin?",
+          ],
+          "40187330297989": [
+            // Hand
+            "How does this lotion work?",
+            "What does it smell like?",
+            "Will this lotion make my hands sticky?",
+            "How long do the effects last?",
+            "Does this lotion help with grip?",
+          ],
+          "34043179139205": [
+            // Foot
+            "How does this lotion work?",
+            "How do I apply Carpe Sweat Absorbing Foot Lotion?",
+            "Does this prevent blisters?",
+            "Can I use Carpe foot lotion with other foot odor products?",
+          ],
+        },
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+
+    bottomSuggestionsBar: {
+      buttonBorderRadius: "md",
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      variant: "dark",
+      boldFirstButton: true,
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "What results do people see?",
+          "How does this feel on the skin?",
+          "How long does this take to work?",
+        ],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "carpe-logo.svg",
+        customerQuery: "asked about finding the right sweat solution",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What's best to reduce underarm sweat?",
+          "What helps with sweaty hands?",
+          "Which product is gentle on the face?",
+          "Best on-the-go sweat solution?",
+          "What's the best starter bundle for first time users?",
+        ],
+        staticPLPImageNames: [
+          "plp-Image1.png",
+          "plp-Image2.png",
+          "plp-Image3.png",
+          "plp-Image4.png",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "dark",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "searchIcon",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        logoName: "carpe-logo.svg",
+        customerQuery: "asked about this product",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "How do I apply this?",
+          "Can I use this every day?",
+          "Is it safe for sensitive skin?",
+          "What ingredients are in this?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "dark",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "searchIcon",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDPCustom: {
+      widgetConfigId: "chatPreviewPDPCustom",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "carpe-logo.svg",
+        customerQuery: "asked about this product",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "How do I apply this?",
+          "Can I use this every day?",
+          "Is it safe for sensitive skin?",
+          "What ingredients are in this?",
+        ],
+        staticPLPImageNames: [
+          "plp-Image1.png",
+          "plp-Image2.png",
+          "plp-Image3.png",
+          "plp-Image4.png",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "dark",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "searchIcon",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+  },
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".plp-product-collection",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      className: "carpe-chat-preview-plp",
+      gridInsertionType: GridInsertionType.FIXED_6,
+      style: {
+        minWidth: "300px",
+        gridRow: "2 / 2",
+        gridColumn: "1 / -1",
+        margin: "6px 0",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".ProductForm-controls",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginTop: "15px",
+      },
+    },
+    topSuggestionBarPDPCustomPage: {
+      mountingConfigId: "topSuggestionBarPDPCustomPage",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".save67-quantity-selector",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        marginTop: "20px",
+        marginBottom: "25px",
+      },
+    },
+    bottomSuggestionBarPDPCustomPage: {
+      mountingConfigId: "bottomSuggestionBarPDPCustomPage",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".oke-w-header",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginTop: "15px",
+        marginLeft: "auto",
+        marginRight: "auto",
+        borderRadius: "8px",
+        maxWidth: "89vw",
+      },
+    },
+    chatPreviewPDPCustomPage: {
+      mountingConfigId: "chatPreviewPDPCustomPage",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".save67-product-atc-benefits-wrapper",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginTop: "15px",
+      },
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".Product-header",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginTop: "7px",
+        marginBottom: "7px",
+      },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".oke-w-main",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        marginLeft: "auto",
+        marginRight: "auto",
+        maxWidth: "89vw",
+      },
+    },
+  },
+});
+
+const carpeOrgInfo = {
+  shortName: OrgShortName.Carpe,
+  name: "Carpe",
+  domain: "mycarpe.com/",
+  defaultProductId: "39731826098309",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: carpeOrgUIConfig,
+  orgColors: () => carpeColors,
+  orgPageConfig: carpePageConfig,
+} satisfies BasicOrgInfoType;
+
+export { carpeOrgInfo };