@envive-ai/react-hooks 0.1.0

package/src/merchants/coterie/coterie.ts

@@ -0,0 +1,280 @@
+import {
+  CHAT_PREVIEW_TESTID,
+  TOP_SUGGESTION_BAR_TESTID,
+} from "src/config/locators";
+import {
+  BasicOrgInfoType,
+  FeatureGates,
+  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 {
+  SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_CLASS,
+  SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_TEXT_CLASS,
+  SPIFFY_SOCIAL_PROOF_CUSTOMER_COUNT_CLASS,
+  SPIFFY_SOCIAL_PROOF_CONTENT_CONTAINER_CLASS,
+} from "src/config/socialProofClasses";
+import { defaultOrgUIConfig } from "src/merchants/default";
+import {
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+import { TOP_SUGGESTION_BAR_PDP_ID } from "src/config/divIds";
+import { CHAT_PREVIEW_CONTAINER_ID } from "src/config/divIds";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+
+const coterieColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#141414",
+  [ColorNames.TextSecondary]: "#575757",
+  [ColorNames.TextAccent]: "#0000C9",
+  [ColorNames.TextLink]: "#0000C9",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#0000C9",
+  [ColorNames.BackgroundSecondary]: "#F9F4EC",
+  [ColorNames.BackgroundSecondaryDark]: "#E5E0D9",
+  [ColorNames.BackgroundTertiary]: "#D1E3FB",
+  [ColorNames.BackgroundDark]: "#000065",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#D1E3FB",
+  [ColorNames.BorderLight]: "#E7E7E7",
+  [ColorNames.BorderMedium]: "#959697",
+  [ColorNames.BorderDark]: "#575757",
+  [ColorNames.BorderOutline]: "#0000C9",
+  [ColorNames.AccentPrimary]: "#C1D2E9",
+  [ColorNames.AccentSecondary]: "#4B4D4E",
+};
+
+export const coteriePageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "pdpSummarizeReviews",
+      variantType: "pdp",
+      variantTests: [
+        { testType: PageVariantTestType.UrlResolver },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsSummarizeReviewsEnabled,
+        },
+      ],
+      productIdExtractor: "url-resolver-product-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "topSuggestionBar",
+          widgetConfigId: "topSuggestionBarSummarizeReviews",
+        },
+      ],
+    },
+    {
+      variantId: "pdp",
+      variantType: "pdp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      productIdExtractor: "url-resolver-product-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "topSuggestionBar",
+          widgetConfigId: "topSuggestionBar",
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionBar: {
+      widgetConfigId: "topSuggestionBar",
+      contentId: "spiffy-top-suggestion-bar",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      type: WidgetType.SuggestionBarV2,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "tertiary",
+      hoverVariant: "dark",
+      buttonTexts: {
+        default: [
+          "How do they use clean ingredients?",
+          "What do parents think?",
+        ],
+        productSpecific: {
+          "the-diaper": [
+            "Are they totally chlorine free?",
+            "How do they help with sleep?",
+            "How do they reduce the risk of rash?",
+          ],
+          "the-pant": [
+            "How do they use clean ingredients?",
+            "How do they have more liquid capacity?",
+            "How do they reduce wetness on skin?",
+          ],
+        },
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "standard",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarSummarizeReviews: {
+      widgetConfigId: "topSuggestionBarSummarizeReviews",
+      contentId: "spiffy-top-suggestion-bar",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      type: WidgetType.SuggestionBarV2,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "tertiary",
+      hoverVariant: "dark",
+      buttonTexts: {
+        default: [
+          "Summarize reviews",
+          "Are they totally chlorine free?",
+          "How do they help with sleep?",
+          "How do they reduce the risk of rash?",
+        ],
+        productSpecific: {
+          "the-diaper": [
+            "Summarize reviews",
+            "Are they totally chlorine free?",
+            "How do they help with sleep?",
+            "How do they reduce the risk of rash?",
+          ],
+          "the-pant": [
+            "Summarize reviews",
+            "How do they use clean ingredients?",
+            "How do they have more liquid capacity?",
+            "How do they reduce wetness on skin?",
+          ],
+        },
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "standard",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      variant: "flat",
+      type: WidgetType.ChatPreview,
+      socialProofConfig: {
+        customerQuery: "asked how it improves sleep...",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What do reviewers think?",
+          "How do they use clean ingredients?",
+          "How do they reduce risk of rash?",
+          "Are they totally chlorine-free?",
+          "How do they have more liquid capacity?",
+        ],
+        suggestionButtonVariantDefault: "tertiary",
+        suggestionButtonVariantAccent: "primary",
+        suggestionButtonDataAttributes: {
+          "data-cta-location": "pdp-hero",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+  },
+  mountingConfigs: {
+    topSuggestionBar: {
+      mountingConfigId: "topSuggestionBar",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".genericPdpHero_starsReviews__wLPyN",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      style: {
+        width: "100%",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: "form[class*='genericPdpHeroForm']",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      dataAttributes: {
+        "data-cta-location": "pdp-hero",
+      },
+    },
+  },
+});
+
+const coterieOrgUIConfig = (): OrgUIConfig => {
+  const defaultCoterieOrgConfig = defaultOrgUIConfig(OrgShortName.Coterie);
+
+  return {
+    ...defaultCoterieOrgConfig,
+    welcomeSectionConfig: {
+      ...defaultCoterieOrgConfig.welcomeSectionConfig!,
+      title: "Coterie FAQs",
+      subtitle:
+        "Here to answer all of your questions- everything from safety concerns to the science behind the product. The information provided is not from a medical professional and is not medical advice.",
+    },
+    floatingEntrypointConfig: {
+      ...defaultCoterieOrgConfig.floatingEntrypointConfig!,
+      showOption: "after-interaction-anywhere",
+    },
+    chatMessageConfig: {
+      ...defaultCoterieOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Coterie",
+    },
+    chatHeader: {
+      ...defaultCoterieOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "coterie-logo-white.png",
+        OrgShortName.Coterie
+      ),
+    },
+
+    floatingChatConfig: {
+      ...defaultCoterieOrgConfig.floatingChatConfig,
+      userQueryInputEnabled: false,
+      neverShowSingleProductCards: true,
+      ignoreFirstModelResponse: true,
+    },
+    merchantOverrideCss: `
+      .${SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_CLASS} {
+        border-radius: 8px;
+      }
+      .${SPIFFY_SOCIAL_PROOF_SUGGESTION_BUTTON_TEXT_CLASS} {
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .${SPIFFY_SOCIAL_PROOF_CUSTOMER_COUNT_CLASS} {
+        color: ${colorVar(ColorNames.TextAccent)} !important;
+      }
+      .${SPIFFY_SOCIAL_PROOF_CONTENT_CONTAINER_CLASS} {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 120%;
+        color: ${colorVar(ColorNames.TextPrimary)} !important;
+      }
+      .spiffy-product-card-title { 
+        font-family: var(--chakra-fonts-heading);
+      }
+
+      @media screen and (min-width: 429px) {
+        .${SPIFFY_SOCIAL_PROOF_CONTENT_CONTAINER_CLASS} {
+          font-size: 20px;
+        }
+      }
+    `,
+  };
+};
+
+const coterieOrgInfo = {
+  shortName: OrgShortName.Coterie,
+  name: "Coterie",
+  domain: "coterie.com",
+  defaultProductId: "the-diaper",
+  alwaysEnabledMerchants: false,
+  orgUIConfig: coterieOrgUIConfig,
+  orgColors: () => coterieColors,
+  orgPageConfig: coteriePageConfig,
+} satisfies BasicOrgInfoType;
+
+export { coterieOrgInfo };

package/src/merchants/default.ts

@@ -0,0 +1,193 @@
+import { BasicOrgInfoType, OrgShortName } from 'src/application/models/supportedOrgs';
+import {
+  CustomerServiceIntegrationMode,
+  CustomerServiceType,
+} from 'src/application/service/customerService/types';
+import {
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+} from 'src/contexts/types';
+
+const defaultOrgUIConfig = (orgShortName: string): OrgUIConfig => ({
+  shortName: orgShortName,
+  chatMessageConfig: {
+    assistantChatTitle: 'Shopping Assistant',
+    variant: 'accent',
+    productLink: {
+      variant: 'textLink',
+      iconVariant: 'backgroundPrimary',
+      hoverVariant: 'backgroundDark',
+    },
+  },
+  floatingChatConfig: {
+    enableWatermark: true,
+    neverShowSingleProductCards: false,
+    userQueryInputEnabled: true,
+    suggestionButtonConfig: {
+      variant: 'secondary',
+      hoverVariant: 'dark',
+      answerVariant: 'outlined',
+    },
+    replyInputConfig: {
+      size: 'md',
+      sendIcon: 'send',
+    },
+  },
+  chatHeader: {
+    collapsedColor: colorVar(ColorNames.BackgroundPrimary),
+    expandedColor: colorVar(ColorNames.BackgroundPrimary),
+    chevronColor: colorVar(ColorNames.BackgroundLight),
+    headerBarHeightPartialView: 31,
+    headerBarHeightFullView: 20,
+    customerSupportSwitchConfig: {
+      variant: 'attached',
+      borderColor: colorVar(ColorNames.BackgroundLight),
+      selectedTextColor: colorVar(ColorNames.TextPrimary),
+      backgroundColor: colorVar(ColorNames.BackgroundLight),
+      unselectedTextColor: colorVar(ColorNames.TextLight),
+      supportTitle: 'Live Support',
+      spiffyTitle: 'Shop with AI',
+      spiffyTitleHasLogo: false,
+    },
+  },
+  chatPreviewConfig: {
+    variant: 'flat',
+    largeProductComparison: false,
+    filledBackgroundColor: colorVar(ColorNames.BackgroundLight),
+    topMargin: 5,
+    iconFillColor: colorVar(ColorNames.TextLight),
+    buttonTextColor: colorVar(ColorNames.TextLight),
+    buttonTextHoverColor: colorVar(ColorNames.BackgroundPrimary),
+    buttonBackgroundColor: colorVar(ColorNames.BackgroundPrimary),
+    buttonBackgroundHoverColor: colorVar(ColorNames.BackgroundSecondary),
+    copies: {
+      pdp: [],
+      plp: [],
+    },
+    footerConfig: {
+      hasFade: true,
+      suggestionButtonVariant: 'dark',
+      suggestionsBackground: colorVar(ColorNames.BackgroundLight),
+      replyButtonIcon: 'send',
+      replyButtonText: 'What can I help you find?',
+      replyInputHasShadow: true,
+      replyInputHasBorder: false,
+    },
+    headerConfig: {
+      title: 'Shopping Assistant',
+      imageHeight: 30,
+      iconWidth: '24px',
+      iconHeight: '24px',
+    },
+  },
+  floatingEntrypointConfig: {
+    position: 'middle-right',
+    expansionText: {
+      pdp: 'Question about our products?',
+      plp: 'Need help deciding?',
+    },
+    minimizedColor: colorVar(ColorNames.BackgroundPrimary),
+    expandedColor: colorVar(ColorNames.BackgroundPrimary),
+    textColor: colorVar(ColorNames.TextLight),
+    showOption: 'always',
+    fontSize: 14,
+  },
+  pageCardConfig: {
+    variant: 'filled',
+    hoverVariant: 'shadow',
+    iconVariant: 'primary',
+  },
+  productCardConfig: {
+    variant: 'filled',
+    hoverVariant: 'backgroundDark',
+    layoutVariant: 'normal',
+  },
+  partialViewConfig: {
+    maxHeight: 89,
+    borderRadius: '16px',
+  },
+  productReviewConfig: {
+    styleVariant: 'standard',
+    colorVariant: 'neutral',
+    verifiedBuyerTitle: 'Verified Buyer',
+    incentivizedReviewFlag: false,
+  },
+  welcomeSectionConfig: {
+    variant: 'standard',
+    colorVariant: 'standard',
+    title: 'Welcome!',
+    subtitle: 'Here to answer all of your questions!',
+    // icon: Sparkles,
+    iconName: 'sparkles', // Using serializable icon name instead of React component
+  },
+  customerServiceIntegration: {
+    integrationMode: CustomerServiceIntegrationMode.none,
+    provider: CustomerServiceType.unsupported,
+    businessHoursPolling: 30000, // 30s
+    reopenChatMessage:
+      '👋👋 Hey there! Want to continue the conversation or need more help? Click below to start a new message.',
+  },
+  searchConfig: {
+    enableGlobalSearch: false,
+    searchFilterConfig: [],
+  },
+});
+
+const defaultColors: ColorMapping = {
+  [ColorNames.TextPrimary]: '#000000',
+  [ColorNames.TextSecondary]: '#666666',
+  [ColorNames.TextAccent]: '#808080',
+  [ColorNames.TextLink]: '#4D4D4D',
+  [ColorNames.TextLight]: '#FFFFFF',
+  [ColorNames.BackgroundPrimary]: '#999999',
+  [ColorNames.BackgroundSecondary]: '#F2F2F2',
+  [ColorNames.BackgroundSecondaryDark]: '#E5E5E5',
+  [ColorNames.BackgroundTertiary]: '#E5E5E5',
+  [ColorNames.BackgroundDark]: '#000000',
+  [ColorNames.BackgroundLight]: '#FFFFFF',
+  [ColorNames.BackgroundSaturated]: '#CCCCCC',
+  [ColorNames.BorderLight]: '#E5E5E5',
+  [ColorNames.BorderMedium]: '#B2B2B2',
+  [ColorNames.BorderDark]: '#4D4D4D',
+  [ColorNames.BorderOutline]: '#4D4D4D',
+  [ColorNames.AccentPrimary]: '#999999',
+  [ColorNames.AccentSecondary]: '#B2B2B2',
+};
+
+const defaultPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: 'plp',
+      variantType: 'plp',
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      plpIdExtractor: 'url-resolver-plp-id',
+      widgetMounting: [],
+    },
+    {
+      variantId: 'pdp',
+      variantType: 'pdp',
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      productIdExtractor: 'url-resolver-product-id',
+      widgetMounting: [],
+    },
+  ],
+  widgetConfigs: {},
+  mountingConfigs: {},
+});
+
+const defaultOrgInfo = {
+  shortName: OrgShortName.Default,
+  name: 'Default',
+  domain: 'default.com',
+  defaultProductId: 'default',
+  alwaysEnabledMerchants: true,
+  orgColors: () => defaultColors,
+  orgUIConfig: () => defaultOrgUIConfig(OrgShortName.Default),
+  orgPageConfig: defaultPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { defaultColors, defaultOrgUIConfig, defaultPageConfig, defaultOrgInfo };