@envive-ai/react-hooks 0.1.0

package/src/merchants/supergoop/supergoop.ts

@@ -0,0 +1,376 @@
+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 {
+  CustomerServiceIntegrationMode,
+  CustomerServiceType,
+} from "src/application/service/customerService/types";
+import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
+import SupergoopWhiteLogo from "@envive-ai/react-icons/SupergoopWhiteLogo";
+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 {
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+import { ChatState } from "src/types/custservice-types";
+
+const supergoopColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#202020",
+  [ColorNames.TextSecondary]: "#5C5C5C",
+  [ColorNames.TextAccent]: "#00008C",
+  [ColorNames.TextLink]: "#2F2BD8",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#0000B4",
+  [ColorNames.BackgroundSecondary]: "#F7F7F7",
+  [ColorNames.BackgroundSecondaryDark]: "#E5E7EB",
+  [ColorNames.BackgroundTertiary]: "#FFE922",
+  [ColorNames.BackgroundDark]: "#00008C",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#FFE922",
+  [ColorNames.BorderLight]: "#E0E0E0",
+  [ColorNames.BorderMedium]: "#B4B4B4",
+  [ColorNames.BorderDark]: "#5C5C5C",
+  [ColorNames.BorderOutline]: "#0000B4",
+  [ColorNames.AccentPrimary]: "#0000B4",
+  [ColorNames.AccentSecondary]: "#70AED0",
+};
+
+const supergoopOrgUIConfig = (): OrgUIConfig => {
+  const defaultSupergoopOrgConfig = defaultOrgUIConfig(OrgShortName.Supergoop);
+
+  return {
+    ...defaultSupergoopOrgConfig,
+    chatMessageConfig: {
+      ...defaultSupergoopOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Supergoop! AI",
+      productLink: {
+        ...defaultSupergoopOrgConfig.chatMessageConfig.productLink,
+        iconVariant: "backgroundSaturated",
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultSupergoopOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expansionText: {
+        pdp: "What have customers said?",
+        plp: "Hear from others who have tried it!",
+      },
+    },
+    chatHeader: {
+      ...defaultSupergoopOrgConfig.chatHeader,
+      icon: SupergoopWhiteLogo,
+      customerSupportSwitchConfig: {
+        ...defaultSupergoopOrgConfig.chatHeader.customerSupportSwitchConfig!,
+        supportTitle: "Customer Care Team",
+      },
+    },
+    welcomeSectionConfig: {
+      ...defaultSupergoopOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Supergoop! AI",
+      subtitle:
+        "Need help? I've got you! Ask me a question or tell me what you're looking for, and I'll get you there in no time.",
+    },
+    chatPreviewConfig: {
+      ...defaultSupergoopOrgConfig.chatPreviewConfig!,
+      copies: {
+        pdp: [
+          "how others feel about its texture?",
+          "which skin types it is best for?",
+          "if it's great for outdoor adventures?",
+          "if it works well under makeup?",
+        ],
+        plp: [
+          "a lightweight SPF that won't clog your pores?",
+          "a sunscreen that's gentle on sensitive skin?",
+          "the perfect moisturizer with SPF?",
+          "an SPF that primes for makeup?",
+        ],
+      },
+      iconFillColor: colorVar(ColorNames.AccentPrimary),
+      buttonTextColor: colorVar(ColorNames.AccentPrimary),
+      buttonTextHoverColor: colorVar(ColorNames.AccentPrimary),
+      buttonBackgroundColor: colorVar(ColorNames.BackgroundSecondary),
+      buttonBackgroundHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+      headerConfig: {
+        title: "Shopping Assistant",
+      },
+    },
+    productCardConfig: {
+      ...defaultSupergoopOrgConfig.productCardConfig!,
+      pricePrefix: "From",
+    },
+    productReviewConfig: {
+      ...defaultSupergoopOrgConfig.productReviewConfig!,
+    },
+    customerServiceIntegration: {
+      ...defaultSupergoopOrgConfig.customerServiceIntegration,
+      integrationMode: CustomerServiceIntegrationMode.full,
+      provider: CustomerServiceType.gorgias,
+      formAiName: "Supergoop! AI...",
+      contactSubjectOptions: [
+        "Track Order",
+        "Report Issue",
+        "Cancel Order",
+        "Product Question",
+        "Other",
+      ],
+      welcomeTitle: "Chat with the Supergoop! Customer Care Team",
+      showWelcomeOnForm: true,
+      showAISuggestionsWithinBusinessHours: false,
+      chatEnabledDuringBusinessHours: true,
+      waitingMessagePosition: "BEFORE_MESSAGES",
+      welcomeDescription:
+        "Thanks for reaching out! Our Customer Care Team's hours are M-F, 8am-4pm CT",
+      getCustomWaitingMessage: () =>
+        `Hi there! We’ll be with you real soon! 💛`,
+      withinBusinessHoursMessage:
+        "👋 Hi there! If you need an answer immediately, Supergoop! AI can help you, otherwise you can leave our Support Team a message and we will respond via email in a few hours.",
+      withinBusinessHoursWaitingMessage:
+        "👋 Hi there! A Customer Care Team member will respond within 5 minutes. If you need an answer immediately, Supergoop! AI can help you.",
+      outsideBusinessHoursMessage:
+        "👋 Hi, we’re sorry but our Customer Care Team is currently offline.<br /><br />If you need an answer immediately, Supergoop AI! can help you, otherwise you can leave a message for our Support Team and we will email you when we’re back online.",
+      outsideBusinessHoursWaitingMessage:
+        "⚡⚡ You're all set! Our Customer Care Team will respond via email as soon as we're back online. Thank you for your patience!",
+      withinBusinessHoursFormMessage:
+        "👋 Hi there! A Customer Care Team member will respond within 5 minutes. If you need an answer immediately, Supergoop! AI can help you.",
+      outsideBusinessHoursFormMessage:
+        "To help us fix your issue faster, please give us a little more detail.",
+      suggestedAIQuestions: [
+        "How do I return an item?",
+        "What is your return policy?",
+        "What is your shipping policy?",
+        "Do you have any discounts?",
+      ],
+      businessHoursStartUTC: "9:30AM",
+      businessHoursEndUTC: "6:00PM",
+      businessHoursTimezone: "-05:00", // ET
+      withinBusinessHoursInitialState: ChatState.FORM,
+      outsideBusinessHoursInitialState: ChatState.INITIAL,
+      withinBusinessHoursButtontext: "Send a message",
+      outsideBusinessHoursButtontext: "Send a message",
+    },
+
+    merchantOverrideCss: `
+      .spiffy-star-rating-container {
+        background: var(--spiffy-colors-background-tertiary) !important;
+      }
+      .spiffy-star-rating-rating {
+        color: var(--spiffy-colors-background-primary) !important;
+      }
+      .spiffy-star-rating-star {
+        fill: var(--spiffy-colors-background-primary) !important;
+      }
+      
+      .spiffy-product-card-title {
+        font-family: var(--chakra-fonts-heading);
+        color: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-product-card-rating-star-color {
+        fill: var(--spiffy-colors-background-primary);
+      }
+      .spiffy-welcome-section-svg-icon {
+        height: 24px;
+      }
+      #spiffy-ai-floating-button {
+        z-index: 49 !important;
+      }
+    `,
+  };
+};
+
+const supergoopPageConfig = (): 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: "topSuggestionsBar",
+        },
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionsBar",
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionsBar: {
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      type: WidgetType.SuggestionBarV2,
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Is it gentle enough for sensitive skin?",
+          "Is this right for combination skin?",
+          "What do reviewers say about its texture?",
+          "Is this great for outdoor sports?",
+        ],
+        productSpecific: {
+          "unseen-sunscreen-spf-50": [
+            "What is new and different?",
+            "Summarize the reviews",
+            "Is it gentle enough for sensitive skin?",
+            "Is this right for combination skin?",
+            "What do reviewers say about its texture?",
+          ],
+        },
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "none",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+    } satisfies ChatPreviewWidgetConfig,
+    bottomSuggestionsBar: {
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      type: WidgetType.SuggestionBarV2,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Is it gentle enough for sensitive skin?",
+          "Is this right for combination skin?",
+          "What do reviewers say about its texture?",
+          "Is this great for outdoor sports?",
+        ],
+        productSpecific: {
+          "unseen-sunscreen-spf-50": [
+            "What is new and different?",
+            "Summarize the reviews",
+            "Is it gentle enough for sensitive skin?",
+            "Is this right for combination skin?",
+            "What do reviewers say about its texture?",
+          ],
+        },
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: true,
+      animationSpeed: "none",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".ss__results",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.ROW_2,
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-review",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      style: {
+        marginBottom: "4px",
+        marginTop: "4px",
+      },
+      // supergoop also uses tailwind, these classes keep the embedded widget consistent with the layout of the pdp hero
+      className:
+        'class="px-5 lg:container grid lg:grid-cols-1 grid-cols-1 mb-10 tab:my-10 product-review items-center lg:mt-5"',
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".price + *",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      style: {
+        marginBottom: "4px",
+        marginTop: "4px",
+      },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".yotpo-filters-container",
+        insertionType: DOMInsertionType.ADJACENT_BEFORE_BEGIN,
+      },
+      style: {
+        marginBottom: "8px",
+        marginTop: "8px",
+      },
+    },
+  },
+});
+
+const supergoopOrgInfo = {
+  shortName: OrgShortName.Supergoop,
+  name: "Supergoop",
+  domain: "supergoop.com",
+  defaultProductId: "unseen-sunscreen-spf-50",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: supergoopOrgUIConfig,
+  orgColors: () => supergoopColors,
+  orgPageConfig: supergoopPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { supergoopOrgInfo };