@envive-ai/react-hooks 0.1.0

package/src/merchants/modells/modells.ts

@@ -0,0 +1,546 @@
+import {
+  CHAT_PREVIEW_TESTID,
+  TOP_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,
+} 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 modellsColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#000",
+  [ColorNames.TextSecondary]: "#9A9A9A",
+  [ColorNames.TextAccent]: "#11195C",
+  [ColorNames.TextLink]: "#000",
+  [ColorNames.TextLight]: "#FFF",
+  [ColorNames.BackgroundPrimary]: "#11195C",
+  [ColorNames.BackgroundSecondary]: "#F5F5F5",
+  [ColorNames.BackgroundSecondaryDark]: "#E9E9E9",
+  [ColorNames.BackgroundTertiary]: "#EAEAEA",
+  [ColorNames.BackgroundDark]: "#11195C",
+  [ColorNames.BackgroundLight]: "#FFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#EEE",
+  [ColorNames.BorderMedium]: "#CCC",
+  [ColorNames.BorderDark]: "#11195C",
+  [ColorNames.BorderOutline]: "#11195C",
+  [ColorNames.AccentPrimary]: "#D02338",
+  [ColorNames.AccentSecondary]: "#11195C",
+};
+
+const modellsOrgUIConfig = (): OrgUIConfig => {
+  const defaultModellsOrgConfig = defaultOrgUIConfig(OrgShortName.Modells);
+
+  return {
+    ...defaultModellsOrgConfig,
+    chatMessageConfig: {
+      ...defaultModellsOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Mo’s AI",
+    },
+    chatHeader: {
+      ...defaultModellsOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "modells-logo-tiny.png",
+        OrgShortName.Modells
+      ),
+    },
+    chatPreviewConfig: {
+      ...defaultModellsOrgConfig.chatPreviewConfig!,
+      headerConfig: {
+        ...defaultModellsOrgConfig.chatPreviewConfig!.headerConfig,
+      },
+      footerConfig: {
+        ...defaultModellsOrgConfig.chatPreviewConfig!.footerConfig,
+        suggestionButtonVariant: "outlined",
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultModellsOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expansionText: {
+        pdp: "Why is this a win?",
+        plp: "Need help picking the perfect gear?",
+      },
+    },
+    productCardConfig: {
+      ...defaultModellsOrgConfig.productCardConfig!,
+    },
+
+    pageCardConfig: {
+      ...defaultModellsOrgConfig.pageCardConfig!,
+    },
+    productReviewConfig: {
+      ...defaultModellsOrgConfig.productReviewConfig!,
+      colorVariant: "premium",
+    },
+
+    floatingChatConfig: {
+      ...defaultModellsOrgConfig.floatingChatConfig,
+      enableWatermark: false,
+      suggestionButtonConfig: {
+        variant: "secondary",
+        hoverVariant: "secondaryDark",
+      },
+    },
+    welcomeSectionConfig: {
+      ...defaultModellsOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Mo’s AI!",
+      subtitle:
+        "Hi there! I’m here to help you find the right gear for the right game. What can I help you with today?",
+    },
+    merchantOverrideCss: `
+      #spiffy-modal-container {
+        z-index: 2147483637 !important;
+      }
+      .spiffy-suggestion-button-question-class {
+        border-color: var(--spiffy-colors-background-secondary-dark);
+      }
+      div[data-testid="spiffy-scrollable-suggestions"] .spiffy-suggestion-button-question-class svg {
+        display: none;
+      }
+      .spiffy-product-card-price, .spiffy-product-card-rating {
+        color: var(--spiffy-colors-text-secondary);
+      }
+      .spiffy-social-proof-content-button .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 svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+      .spiffy-social-proof-content-container {
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+      .spiffy-chat-preview-footer-container .spiffy-button-base-button {
+        border: 1px solid var(--spiffy-colors-background-secondary-dark);
+      }
+      .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-chat-preview-footer-container .spiffy-button-base-button:hover svg {
+        fill: var(--spiffy-colors-accent-primary) !important;
+        stroke: var(--spiffy-colors-accent-primary) !important;
+      }
+      div[data-testid="spiffy-chat-preview"] {
+        .spiffy-button-base-button {
+          border-radius: 20px;
+          border: 1px solid var(--spiffy-colors-border-outline) !important;
+        }
+        .spiffy-button-base-button:hover {
+          border-color: var(--spiffy-colors-background-secondary-dark) !important;
+        }
+        svg {
+          display: none;
+        }
+      }
+      .spiffy-social-proof-customer-count {
+        color: var(--spiffy-colors-text-accent) !important;
+      }
+      div[data-testid="spiffy-chat-preview-body"] .spiffy-headline {
+        color: var(--spiffy-colors-text-accent);
+      }
+      .spiffy-user-query-button svg {
+        fill: var(--spiffy-colors-border-medium);
+      }
+      .spiffy-message-content-container > .spiffy-tw-typography-ul {
+        padding-left: 0px !important;
+        list-style-type: none !important;
+      }
+
+      .spiffy-social-proof-suggestion-footer-title {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+    `,
+  };
+};
+
+const modellsPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "pdpGiftCard",
+      variantType: "pdp",
+      variantTests: [
+        { testType: PageVariantTestType.ShopifyPDP },
+        {
+          testType: PageVariantTestType.HasMerchantTag,
+          merchantTags: ["Gift Cards"],
+        },
+      ],
+      productIdExtractor: "shopify-product-variant-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+      ],
+    },
+    {
+      variantId: "pdpTopCategories",
+      variantType: "pdp",
+      variantTests: [{ testType: PageVariantTestType.ShopifyPDP }],
+      productIdExtractor: "shopify-product-variant-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          mountingPointWidgets: [
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["baseball hats"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarHats",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["jerseys", "collectibles"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarFanShop",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["camping"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarCamping",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["supplements"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarSupplements",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["Golf"],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarGolf",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: [
+                    "drinkware",
+                    "tumblers",
+                    "Cups & Mugs",
+                    "cups & mugs",
+                    "coffee mugs",
+                    "Travel Mugs",
+                    "travel mugs",
+                    "water bottles",
+                  ],
+                },
+              ],
+              widgetConfigId: "topSuggestionBarDrinkware",
+            },
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.Fallback,
+                },
+              ],
+              widgetConfigId: "topSuggestionBar",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      variantId: "plp",
+      variantType: "plp",
+      variantTests: [{ testType: PageVariantTestType.ShopifyPLP }],
+      plpIdExtractor: "shopify-collection-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "chatPreviewPLP",
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    topSuggestionBarHats: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarHats",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "How does it fit?",
+          "Why is this a must-have?",
+          "What pairs well with this?",
+          "Can I get matching gear for the whole family?",
+          "Can I wear this to the gym or is it more for casual wear?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarFanShop: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarFanShop",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "How does it fit?",
+          "Why is this a must-have?",
+          "How’s the quality?",
+          "What else do you have from this team?",
+          "What else do you have for teams from this region?",
+          "Is this one-of-a-kind?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarCamping: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarCamping",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "How do I use this?",
+          "Any special care instructions?",
+          "What is the setup process like?",
+          "How durable is this item?",
+          "Are tools included for setup or do I need my own?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarSupplements: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarSupplements",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "What are the benefits?",
+          "How long until I see results?",
+          "How should I use this?",
+          "What are the ingredients? Potential allergens?",
+          "How should this be stored?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarGolf: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarGolf",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "How do I use this?",
+          "Any special care instructions?",
+          "How will this up my game?",
+          "What pairs well with this?",
+          "What skill level is this best for?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBarDrinkware: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBarDrinkware",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "What makes Modell’s drinkware a cut above the rest?",
+          "What else do you have from this brand?",
+          "Is it insulated?",
+          "How do I clean this?",
+          "What is this made of? Is it BPA-free?",
+          "Is it compatible with car cup holders?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    topSuggestionBar: {
+      type: WidgetType.SuggestionBarV2,
+      widgetConfigId: "topSuggestionBar",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "secondary",
+      buttonBorderRadius: "md",
+      hoverVariant: "secondaryAccent",
+      buttonTexts: {
+        default: [
+          "Why is this a must-have?",
+          "How does it fit?",
+          "What pairs well with this?",
+          "Any special care instructions?",
+        ],
+      },
+      animationSpeed: "standard",
+    } satisfies SuggestionBarWidgetV2Config,
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "filled",
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "modells-logo-tiny.png",
+        customerQuery: "asked what are other fans buying?",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What makes this a hit?",
+          "What gear should I choose?",
+          "What are your top gifts?",
+          "What will level up my game?",
+          "What’s trending right now? ",
+        ],
+        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: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "horizontal",
+        logoName: "modells-logo-tiny.png",
+        customerQuery: "asked for help picking the perfect fan gear.",
+        headerTitle: "Shopping Assistant",
+        suggestionButtonStrings: [
+          "What makes this a great fit?",
+          "Why do fans love this?",
+          "What are others pairing with it?",
+          "What are the benefits?",
+          "How will it level up my game?",
+        ],
+        staticImageIndex: 0,
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+  },
+  mountingConfigs: {
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: "#product-grid",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_4,
+      style: {
+        paddingBottom: "8px",
+        borderTop: `solid 1px ${modellsColors[ColorNames.BorderLight]}`,
+        borderBottom: `solid 1px ${modellsColors[ColorNames.BorderLight]}`,
+        width: "400px",
+        flex: "1 0 100%",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: ".product__description",
+        insertionType: DOMInsertionType.APPEND_CHILD,
+      },
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_TESTID,
+      insertionPoint: {
+        selector: ".main__price",
+        insertionType: DOMInsertionType.AFTER,
+      },
+    },
+  },
+});
+
+const modellsOrgInfo = {
+  shortName: OrgShortName.Modells,
+  name: "Mo’s AI",
+  domain: "modells.com",
+  defaultProductId: "basketball-jersey",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: modellsOrgUIConfig,
+  orgColors: () => modellsColors,
+  orgPageConfig: modellsPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { modellsOrgInfo, modellsOrgUIConfig, modellsColors, modellsPageConfig };