@envive-ai/react-hooks 0.1.0

package/src/merchants/wolfTactical/wolfTactical.ts

@@ -0,0 +1,389 @@
+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 { 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";
+
+const wolfTacticalColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#000000",
+  [ColorNames.TextSecondary]: "#000000",
+  [ColorNames.TextAccent]: "#C20000",
+  [ColorNames.TextLink]: "#000000",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#000000",
+  [ColorNames.BackgroundSecondary]: "#FFFFFF",
+  [ColorNames.BackgroundSecondaryDark]: "#F9F9F9",
+  [ColorNames.BackgroundTertiary]: "#F9F9F9",
+  [ColorNames.BackgroundDark]: "#000000",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#000000",
+  [ColorNames.BorderLight]: "#CCCCCC",
+  [ColorNames.BorderMedium]: "#9A9A9A",
+  [ColorNames.BorderDark]: "#000000",
+  [ColorNames.BorderOutline]: "#000000",
+  [ColorNames.AccentPrimary]: "#C20000",
+  [ColorNames.AccentSecondary]: "#000000",
+};
+
+const wolfTacticalOrgUIConfig = (): OrgUIConfig => {
+  const defaultWolfTacticalOrgConfig = defaultOrgUIConfig(
+    OrgShortName.WolfTactical
+  );
+
+  return {
+    ...defaultWolfTacticalOrgConfig,
+    chatMessageConfig: {
+      ...defaultWolfTacticalOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Wolf Tactical Assistant",
+      variant: "accent",
+    },
+    chatHeader: {
+      ...defaultWolfTacticalOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "white-logo.png",
+        OrgShortName.WolfTactical
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultWolfTacticalOrgConfig.chatPreviewConfig!,
+      headerConfig: {
+        ...defaultWolfTacticalOrgConfig.chatPreviewConfig!.headerConfig,
+        imageSrc: CdnService.getAssetURL(
+          "black-logo.png",
+          OrgShortName.WolfTactical
+        ),
+      },
+      footerConfig: {
+        ...defaultWolfTacticalOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+      buttonBackgroundColor: wolfTacticalColors[ColorNames.BackgroundSecondary],
+      buttonTextColor: wolfTacticalColors[ColorNames.TextPrimary],
+    },
+    floatingEntrypointConfig: {
+      ...defaultWolfTacticalOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expansionText: {
+        pdp: "Is this the right gear for you?",
+        plp: "What’s your next tactical upgrade?",
+      },
+    },
+    productCardConfig: {
+      ...defaultWolfTacticalOrgConfig.productCardConfig!,
+      variant: "filled",
+    },
+    pageCardConfig: {
+      ...defaultWolfTacticalOrgConfig.pageCardConfig!,
+      variant: "outlined",
+      hoverVariant: "lift",
+      iconVariant: "accent",
+    },
+    productReviewConfig: {
+      ...defaultWolfTacticalOrgConfig.productReviewConfig!,
+      styleVariant: "standard",
+      colorVariant: "brand",
+    },
+    welcomeSectionConfig: {
+      ...defaultWolfTacticalOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Wolf Tactical AI!",
+      subtitle:
+        "Need help choosing the right gear? I’m your direct line for building a kit that’s as relentless as you are—vests, belts, and gear that hold up under pressure. Ask me anything—from fit and performance to stacking your lineup for max results.",
+      colorVariant: "accent",
+    },
+    merchantOverrideCss: `
+			.spiffy-social-proof-content-button > button,
+			.spiffy-chat-preview-footer-container > div > div > div > button,
+			#spiffy-top-suggestion-bar-contents > div > div > div > div .spiffy-button-base-button {
+				border-radius: 0px !important;
+				border: 1px solid var(--spiffy-colors-background-secondary-dark) !important;
+			}
+
+			.spiffy-modal-sheet-content button.spiffy-button-base-button[data-testid="spiffy-suggestion-button"] {
+				border: 1px solid var(--spiffy-colors-border-outline) !important;
+				fill: var(--spiffy-colors-text-primary) !important;
+				stroke: var(--spiffy-colors-text-primary) !important;
+			}
+			.spiffy-modal-sheet-content button.spiffy-button-base-button[data-testid="spiffy-suggestion-button"]:hover {
+				color: var(--spiffy-colors-text-primary) !important;
+				background: var(--spiffy-colors-background-secondary-dark) !important;
+				border: none !important;
+			}
+
+			.no-scrollbar.spiffy-tw-overflow-x-scroll > div {
+				margin: 10px 0px !important;
+			}
+			.no-scrollbar.spiffy-tw-overflow-x-scroll > div > div {
+				border-radius: 10px !important;
+				box-shadow: 0 12px 3px 0 #00000000, 0 8px 3px 0 #00000003, 0 4px 3px 0 #0000000D, 0 2px 2px 0 #00000017, 0 0 1px 0 #0000001A;
+			}
+
+			.spiffy-welcome-section-message-title {
+				font-size: 18px !important;
+				font-weight: 600 !important;
+			}
+
+			.spiffy-social-proof-header > img {
+				height: 24px !important;
+			}
+
+			/* Chat Preview Footer buttons - Post engagement */
+			.spiffy-chat-preview-footer-container .spiffy-suggestion-button-container {
+				border-radius: 20px !important;
+				border: 1px solid var(--spiffy-colors-border-outline) !important;
+			}
+			.spiffy-chat-preview-footer-container .spiffy-suggestion-button-container:hover {
+				background: var(--spiffy-colors-background-primary) !important;
+				color: var(--spiffy-colors-text-light) !important;
+			}
+			.spiffy-chat-preview-footer-container .spiffy-suggestion-button-container > svg {
+				display: none !important;
+			}
+		`,
+  };
+};
+
+const wolfTacticalPageConfig = (): 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: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          mountingPointWidgets: [
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.InCollection,
+                  collections: ["plate-carrier"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarPlateCarrier",
+            },
+            {
+              tests: [{ testType: PageVariantTestType.Fallback }],
+              widgetConfigId: "topSuggestionBar",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "How does it fit?",
+          "What are the benefits?",
+          "How does it stand up to daily, intense use?",
+          "Is it comfortable or easy to use?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarPlateCarrier: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionsBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "What makes this vest different from others?",
+          "How do real users rate its performance and comfort?",
+          "Will this restrict my movement during workouts?",
+          "Is it adjustable and secure for all body types?",
+          "How does it stand up to daily, intense use?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "black-logo.png",
+        customerQuery: "asked which products are best for everyday carry.",
+        headerTitle: "Wolf Tactical Shopping Assistant",
+        suggestionButtonStrings: [
+          "Best belt for everyday carry?",
+          "Which vest scales with my training?",
+          "What gear handles gym to range?",
+          "Which pouch keeps things secure and slim? ",
+          "Most popular gear?",
+        ],
+        staticPLPImageNames: [
+          "plp-image1.png",
+          "plp-image2.png",
+          "plp-image3.png",
+          "plp-image4.png",
+        ],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "What can I help you find?",
+          icon: "searchIcon",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      addSeparators: false,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "black-logo.png",
+        customerQuery: "asked about size and fit.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What do reviewers think?",
+          "What materials are this made from?",
+          "What’s the sizing and adjustability like?",
+          "What other products does this pair with?",
+          "Can I train with this daily?",
+          "What benefits should I expect?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    bottomSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "bottomSuggestionsBar",
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      variant: "dark",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: ["suggestion 1", "suggestion 2", "suggestion 3"],
+      },
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".grid--uniform",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_4,
+      className: "grid__item grid-product",
+      style: {
+        borderTop: `1px solid ${wolfTacticalColors[ColorNames.BorderLight]}`,
+        borderBottom: `1px solid ${wolfTacticalColors[ColorNames.BorderLight]}`,
+        paddingBottom: "14px",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product-block > .rte > p",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      style: {
+        borderTop: `1px solid ${wolfTacticalColors[ColorNames.BorderLight]}`,
+        borderBottom: `1px solid ${wolfTacticalColors[ColorNames.BorderLight]}`,
+        paddingTop: "10px",
+        paddingBottom: "10px",
+        marginBottom: "18px",
+      },
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".product-block--price",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      style: {
+        marginBottom: "20px",
+      },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".fake-selector",
+        insertionType: DOMInsertionType.AFTER,
+      },
+    },
+  },
+});
+
+const wolfTacticalOrgInfo = {
+  shortName: OrgShortName.WolfTactical,
+  name: "Wolf Tactical",
+  domain: "wolftacticalusa.com",
+  defaultProductId: "tactical-shooting-gloves",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: wolfTacticalOrgUIConfig,
+  orgColors: () => wolfTacticalColors,
+  orgPageConfig: wolfTacticalPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { wolfTacticalOrgInfo };

package/src/types/custservice-types.ts

@@ -0,0 +1,28 @@
+import { CustServiceMessage } from '@spiffy-ai/commerce-api-client';
+
+export enum ChatState {
+  INITIAL = 'initial',
+  FORM = 'form',
+  CHAT = 'chat',
+}
+
+export type OutsideHoursFormData = {
+  subject: string;
+  name?: string;
+  email: string;
+  question: string;
+};
+
+export type Message = CustServiceMessage;
+
+export enum CustomerServiceOverrides {
+  LEGAL_MESSAGE = 'spiffy-customer-service-legal-message',
+  DARK_BUTTON_CONTAINER = 'spiffy-customer-service-dark-button-container',
+  DARK_BUTTON = 'spiffy-customer-service-dark-button',
+  DARK_BUTTON_HOVER_TEXT = 'spiffy-customer-service-dark-button-hover-text',
+  DARK_BUTTON_TEXT = 'spiffy-customer-service-dark-button-text',
+  FORM_FIELD = 'spiffy-customer-service-form-field',
+  AI_NAME = 'spiffy-customer-service-ai-name',
+  WAITING_MESSAGE = 'spiffy-customer-service-waiting-message',
+  WAITING_MESSAGE_ICON = 'spiffy-customer-service-waiting-message-icon'
+}

package/src/types/search-filter-types.ts

@@ -0,0 +1,111 @@
+export type ModalSheetProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  closeModal: () => void;
+  desktopWidth?: number;
+  mobileFullHeight?: number;
+  animationDuration?: number;
+  headerProps: ModalSheetHeaderProps;
+  footerProps?: ModalSheetFooterProps;
+  showOverlay?: boolean;
+};
+
+export type ModalSheetHeaderProps = {
+  headerVariant?: ModalSheetHeaderVariant;
+  headerContent: React.ReactNode;
+  handleHeaderClick?: () => void;
+};
+
+export type ModalSheetFooterProps = {
+  footerContent: React.ReactNode;
+  footerClassName?: string;
+};
+
+export type ModalSheetHeaderVariant = "primary";
+
+export type CloseIconVariant = "light" | "tertiary" | "dark";
+export type ModalSheetCloseIconProps = {
+  closeIconVariant: CloseIconVariant;
+  closeIcon?: React.ReactNode;
+  closeModal?: () => void;
+  iconSize?: string;
+};
+
+export type SearchFilterProps = {
+  filters: SearchFilter[];
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  headerContent?: React.ReactNode;
+  footerContent?: React.ReactNode;
+  filterButtonText?: string; // New prop for custom button text
+  headerClassName?: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor?: string;
+  radioButtonUncheckedBorderColor?: string;
+  filterCloseIconVariant: CloseIconVariant;
+};
+
+export type SelectFilterItem = ({
+  filterId,
+  filterItemId,
+  isSelected,
+  displayName,
+}: {
+  filterId: string;
+  filterItemId: string;
+  isSelected: boolean;
+  displayName: string;
+}) => void;
+
+export type SelectedFilterItem = {
+  filterId: string;
+  filterItemId: string;
+};
+
+export type SearchFilter = {
+  filterId: string;
+  displayName: string;
+  items: SearchFilterItem[];
+};
+
+export type SearchFilterItem = {
+  filterItemId: string;
+  displayName: string;
+  productCount: number;
+  isSelected: boolean;
+};
+
+export type SearchFilterHeaderProps = {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: CloseIconVariant;
+};
+
+export type FilterProps = {
+  filter: SearchFilter;
+  selectFilterItem: SelectFilterItem;
+  radioButtonFillColor?: string;
+  radioButtonHoverColor?: string;
+  radioButtonUncheckedBorderColor?: string;
+};
+
+export type FilterItemProps = {
+  filterId: string;
+  filterItem: SearchFilterItem;
+  selectFilterItem: SelectFilterItem;
+};
+
+export type FilterFooterProps = {
+  closeModal: () => void;
+  clearAllFilters: () => void;
+  filterCount: number;
+  hasFiltersChanged: boolean;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+};

package/src/types/suggestionBarV2-types.ts

@@ -0,0 +1,4 @@
+export enum SuggestionBarLocationForMetrics {
+    SUGGESTION_BAR_TOP = 'top',
+    SUGGESTION_BAR_BOTTOM = 'bottom'
+}

package/src/types/test-types.ts

@@ -0,0 +1,3 @@
+export interface TestProps {
+  dataTestId?: string;
+}

package/src/types.ts

@@ -0,0 +1,66 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+
+import { AmplitudeAdapter } from "./adapters/amplitude";
+import { VariantInfo } from "./application/models/variantInfo";
+import { OrgPageConfig } from "./contexts/types";
+import { ExtensionInfo } from "./extension";
+
+// Export the type for use in tests
+export type SpiffyInit = {
+  init: (apiKey: string, variantInfo?: VariantInfo) => Promise<boolean>;
+  getOrgInfo: (apiKey: string) => Promise<OrgInfo>;
+  refresh: () => Promise<void>;
+  isInitialized?: boolean;
+  extensionInfo: ExtensionInfo;
+  setVariantInfoOverride: (variantInfo: VariantInfo) => void;
+  // TODO: Other functions to invoke page loads, record checkout events etc
+  _amplitudeAdapter?: AmplitudeAdapter;
+  /**
+   * Ability to toggle/open/close chat via new global namespace
+   * @param triggerId (optional) ID of the element that is triggering this function call
+   */
+  openChat?: (triggerId?: string) => void;
+  closeChat?: (triggerId?: string) => void;
+  toggleChat?: (triggerId?: string) => void;
+  getChatIsOpen?: () => boolean;
+  // Open the chat with a specific prompt
+  openChatWithPrompt?: (prompt: string, triggerId?: string) => void;
+  /**
+   * Apply overrides to the FrontendConfig at runtime (deep merge with operators).
+   */
+  applyFrontendConfigOverrides?: (overrides: any[]) => void;
+};
+
+export type OrgInfo = {
+  name: string;
+  domain: string;
+  defaultProductId: string;
+  alwaysEnabledMerchants: boolean;
+  orgPageConfig?: () => OrgPageConfig;
+};
+
+declare global {
+  interface Window {
+    [key: string]: SpiffyInit;
+    _spiffy: {
+      publicKey?: string;
+      userID?: string;
+      env?: "prod" | "dev";
+      clientID?: string;
+      show?: boolean;
+      featureOverrides?: Record<string, boolean>;
+      variantInfoOverride?: VariantInfo;
+      variantUrlOverride?: string;
+      reducedMotionOverride?: boolean;
+    };
+    spiffy: {
+      _amplitudeAdapter?: AmplitudeAdapter;
+    };
+    chrome: {
+      runtime: {
+        sendMessage: (extensionId: string, payload: any) => Promise<void>;
+        lastError: string | null;
+      };
+    };
+  }
+}