@envive-ai/react-hooks 0.1.0

package/src/merchants/spanx/spanxStaging.ts

@@ -0,0 +1,942 @@
+import {
+  PageVisitCategory,
+  SupportedEventProductCategory,
+} from "@spiffy-ai/commerce-api-client";
+import {
+  BOTTOM_SUGGESTION_BAR_PDP_TESTID,
+  TOP_SUGGESTION_BAR_PDP_TESTID,
+} from "src/config/locators";
+import {
+  BOTTOM_IMAGE_BANNER_PLP_TESTID,
+  TOP_IMAGE_BANNER_PLP_TESTID,
+} from "src/config/locators/components/chat/entrypoints";
+import {
+  CHAT_PREVIEW_PDP_TESTID,
+  CHAT_PREVIEW_PLP_TESTID,
+} from "src/config/locators/components/chat/preview";
+import { GrClose } from "react-icons/gr";
+import { OrgShortName, BasicOrgInfoType } from "src/application/models";
+import { ChatElementDisplayLocation } from "src/application/models/chatElementDisplayLocation";
+import { FeatureGates } from "src/application/models/featureGates";
+import { CdnService } from "src/application/service/cdnService";
+import {
+  CustomerServiceIntegrationMode,
+  CustomerServiceType,
+} from "src/application/service/customerService/types";
+import { GridInsertionType } from "src/application/service/domMutations/GridInsertionService";
+import { DOMInsertionType } from "src/application/service/domMutations/domInsertionService";
+import {
+  BOTTOM_PLP_IMAGE_BANNER_ID,
+  BOTTOM_REVIEWS_BAR_ID,
+  CHAT_PREVIEW_CONTAINER_ID,
+  TOP_PLP_IMAGE_BANNER_ID,
+  TOP_SUGGESTION_BAR_PDP_ID,
+} from "src/config/divIds";
+import { defaultOrgUIConfig } from "src/merchants/default";
+import { SuggestionBarLocationForMetrics } from "src/types/suggestionBarV2-types";
+import {
+  CategoryExtractorType,
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  ImageBannerWidgetConfig,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  SuggestionBarWidgetV2Config,
+  WidgetType,
+} from "src/contexts/types";
+import { ChatState } from "src/types/custservice-types";
+
+const spanxPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "shapewearPLPWithImageBanner",
+      variantType: "plp",
+      plpIdExtractor: "shopify-collection-id",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPLP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.Shapewear,
+        },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsImageBannerEnabled,
+        },
+      ],
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "shapewearChatPreviewPLP",
+        },
+        {
+          mountingConfigId: "topImageBannerPLP",
+          widgetConfigId: "ImageBannerShapewearPLP",
+        },
+        {
+          mountingConfigId: "bottomImageBannerPLP",
+          widgetConfigId: "ImageBannerShapewearPLP",
+        },
+      ],
+    },
+    {
+      variantId: "plp",
+      variantType: "plp",
+      plpIdExtractor: "shopify-collection-id",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPLP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.Shapewear,
+        },
+      ],
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "shapewearChatPreviewPLP",
+        },
+        {
+          mountingConfigId: "bottomImageBannerPLP",
+          widgetConfigId: "ImageBannerShapewearPLP",
+        },
+      ],
+    },
+    {
+      variantId: "nonShapewearPLPWithImageBanner",
+      variantType: "plp",
+      plpIdExtractor: "shopify-collection-id",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPLP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.NonShapewear,
+        },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsNonShapewearEnabled,
+        },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsImageBannerEnabled,
+        },
+      ],
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "nonShapewearChatPreviewPLP",
+        },
+        {
+          mountingConfigId: "topImageBannerPLP",
+          widgetConfigId: "ImageBannerNonShapewearPLP",
+        },
+        {
+          mountingConfigId: "bottomImageBannerPLP",
+          widgetConfigId: "ImageBannerNonShapewearPLP",
+        },
+      ],
+    },
+    {
+      variantId: "nonShapewearPLP",
+      variantType: "plp",
+      plpIdExtractor: "shopify-collection-id",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPLP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.NonShapewear,
+        },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsNonShapewearEnabled,
+        },
+      ],
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLP",
+          widgetConfigId: "nonShapewearChatPreviewPLP",
+        },
+        {
+          mountingConfigId: "bottomImageBannerPLP",
+          widgetConfigId: "ImageBannerNonShapewearPLP",
+        },
+      ],
+    },
+    {
+      variantId: "pdp",
+      variantType: "pdp",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPDP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.Shapewear,
+        },
+      ],
+      productIdExtractor: "shopify-product-variant-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "shapewearChatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          widgetConfigId: "topSuggestionBarPDP",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionBarPDP",
+        },
+      ],
+    },
+    {
+      variantId: "nonShapewearPDP",
+      variantType: "pdp",
+      variantTests: [
+        {
+          testType: PageVariantTestType.ShopifyPDP,
+        },
+        {
+          testType: PageVariantTestType.CatalogCategory,
+          category: SupportedEventProductCategory.NonShapewear,
+        },
+        {
+          testType: PageVariantTestType.FeatureGate,
+          featureGate: FeatureGates.IsNonShapewearEnabled,
+        },
+      ],
+      productIdExtractor: "shopify-product-variant-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          widgetConfigId: "chatPreviewPDP",
+        },
+        {
+          mountingConfigId: "topSuggestionBarPDP",
+          widgetConfigId: "topSuggestionBarPDP",
+        },
+        {
+          mountingConfigId: "bottomSuggestionBarPDP",
+          widgetConfigId: "bottomSuggestionBarPDP",
+        },
+      ],
+    },
+    {
+      variantId: "supportPages",
+      variantType: "page_visit",
+      variantTests: [
+        {
+          testType: PageVariantTestType.PageCategory,
+          extractor: {
+            type: CategoryExtractorType.VisitCategoryMap,
+            map: {
+              [PageVisitCategory.Help]: [
+                "/pages/help",
+                "/apps/returns",
+                "/pages/return-policy-instructions",
+              ],
+            },
+          },
+        },
+      ],
+      // support pages only render the floating button which is currently rendered by FloatingChat
+      widgetMounting: [],
+    },
+  ],
+  widgetConfigs: {
+    ImageBannerShapewearPLP: {
+      widgetConfigId: "ImageBannerShapewearPLP",
+      type: WidgetType.ImageBanner,
+      imageSrc: "plp_quiz_banner_image.png",
+      title: "Need help? We're here.",
+      subtitle: "Chat with Spanx AI Assistant",
+      assistantMessage: "Can you help me choose the right shapewear?",
+    } satisfies ImageBannerWidgetConfig,
+    ImageBannerNonShapewearPLP: {
+      widgetConfigId: "ImageBannerNonShapewearPLP",
+      type: WidgetType.ImageBanner,
+      imageSrc: "default_banner_image.webp",
+      title: "Need help? We're here.",
+      subtitle: "Chat with Spanx AI Assistant",
+      assistantMessage: "Give me product recommendations",
+    } satisfies ImageBannerWidgetConfig,
+    nonShapewearChatPreviewPLP: {
+      widgetConfigId: "nonShapewearChatPreviewPLP",
+      variant: "outlined",
+      type: WidgetType.ChatPreview,
+      socialProofConfig: {
+        logoName: "spanx-logo.svg",
+        customerQuery:
+          "asked which styles are the most comfortable for everyday wear...",
+        headerTitle: "Assistant",
+        suggestionButtonStrings: [
+          "Which styles do reviewers suggest?",
+          "Which styles have the most reviews?",
+          "Which styles are best for my body shape?",
+          "Which styles are most popular?",
+          "How does Spanx source its products?",
+        ],
+        staticPLPImageNames: [
+          "default_plp_embedded_1.webp",
+          "default_plp_embedded_2.webp",
+          "default_plp_embedded_3.webp",
+          "default_plp_embedded_4.webp",
+        ],
+        suggestionButtonVariantDefault: "outlined",
+        suggestionButtonVariantAccent: "outlined",
+        staticPLPImagesLayout: "horizontal",
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    shapewearChatPreviewPLP: {
+      widgetConfigId: "shapewearChatPreviewPLP",
+      variant: "outlined",
+      type: WidgetType.ChatPreview,
+      socialProofConfig: {
+        logoName: "spanx-logo.svg",
+        customerQuery: "are looking for shapewear for tummy control...",
+        headerTitle: "Assistant",
+        suggestionButtonStrings: [
+          "What do reviewers think?",
+          "Best shapewear for dresses",
+          "Styles with the strongest compression",
+          "Comfortable for all-day wear",
+          "Shapewear that won't show through clothes",
+        ],
+        staticPLPImageNames: [
+          "shapewear_plp_embedded_1.png",
+          "shapewear_plp_embedded_2.png",
+          "shapewear_plp_embedded_3.png",
+          "shapewear_plp_embedded_4.png",
+        ],
+        suggestionButtonVariantDefault: "outlined",
+        suggestionButtonVariantAccent: "outlined",
+        staticPLPImagesLayout: "horizontal",
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    shapewearChatPreviewPDP: {
+      widgetConfigId: "shapewearChatPreviewPDP",
+      variant: "outlined",
+      type: WidgetType.ChatPreview,
+      socialProofConfig: {
+        logoName: "spanx-logo.svg",
+        customerQuery: "asked if it shows under clothes...",
+        headerTitle: "Assistant",
+        suggestionButtonStrings: [
+          "What do reviewers think?",
+          "Is it easy to wash?",
+          "Is it good for curvy figures?",
+          "What did reviewers like the best?",
+          "Is it comfortable?",
+          "What size should I choose?",
+          "Is it good for all body shapes?",
+        ],
+        suggestionButtonVariantDefault: "outlined",
+        suggestionButtonVariantAccent: "outlined",
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      variant: "outlined",
+      type: WidgetType.ChatPreview,
+      socialProofConfig: {
+        logoName: "spanx-logo.svg",
+        customerQuery: "asked if it's comfortable...",
+        headerTitle: "Assistant",
+        suggestionButtonStrings: [
+          "What do reviewers think?",
+          "Is it easy to wash?",
+          "Is it good for curvy figures?",
+          "What did reviewers like the best?",
+          "Is it comfortable?",
+          "What size should I choose?",
+          "Is it good for all body shapes?",
+        ],
+        suggestionButtonVariantDefault: "outlined",
+        suggestionButtonVariantAccent: "outlined",
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    topSuggestionBarPDP: {
+      widgetConfigId: "topSuggestionBarPDP",
+      contentId: "spiffy-top-suggestion-bar-contents",
+      type: WidgetType.SuggestionBarV2,
+      metricDisplayLocation: ChatElementDisplayLocation.TOP_REVIEWS_SNIPPET,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+      variant: "outlined",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Do reviewers find these effective?",
+          "Do these boost reviewers' confidence?",
+          "What do reviews say about comfort?",
+          "Do reviewers like these for under a dress?",
+        ],
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "none",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+    bottomSuggestionBarPDP: {
+      widgetConfigId: "bottomSuggestionBarPDP",
+      metricDisplayLocation: ChatElementDisplayLocation.BOTTOM_REVIEWS_SNIPPET,
+
+      contentId: "spiffy-bottom-suggestion-bar-contents",
+      type: WidgetType.SuggestionBarV2,
+      location: SuggestionBarLocationForMetrics.SUGGESTION_BAR_BOTTOM,
+      variant: "outlinedLight",
+      hoverVariant: "secondaryDark",
+      buttonTexts: {
+        default: [
+          "Summarize the reviews",
+          "Do reviewers find these effective?",
+          "Do these boost reviewers' confidence?",
+          "What do reviews say about comfort?",
+          "Do reviewers like these for under a dress?",
+        ],
+      },
+      boldFirstButton: true,
+      twoRowsOnMobile: false,
+      animationSpeed: "none",
+      buttonBorderRadius: "md",
+    } satisfies SuggestionBarWidgetV2Config,
+  },
+  mountingConfigs: {
+    topImageBannerPLP: {
+      mountingConfigId: "topImageBannerPLP",
+      containerId: TOP_PLP_IMAGE_BANNER_ID,
+      testId: TOP_IMAGE_BANNER_PLP_TESTID,
+      insertionPoint: {
+        selector: 'nav[aria-label="breadcrumb"]',
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      style: {
+        marginTop: "30px",
+      },
+    },
+    bottomImageBannerPLP: {
+      mountingConfigId: "bottomImageBannerPLP",
+      containerId: BOTTOM_PLP_IMAGE_BANNER_ID,
+      testId: BOTTOM_IMAGE_BANNER_PLP_TESTID,
+      insertionPoint: {
+        selector: "main > section.order-last",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_BEGIN,
+      },
+      style: {
+        marginBottom: "30px",
+      },
+    },
+    chatPreviewPLP: {
+      mountingConfigId: "chatPreviewPLP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_PLP_TESTID,
+      gridInsertionType: GridInsertionType.ROW_2,
+      insertionPoint: {
+        selector: ".grid .grid-flow-row-dense",
+        insertionType: DOMInsertionType.ADJACENT_AFTER_END,
+      },
+      style: {
+        marginInline: "8px",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_PDP_TESTID,
+      insertionPoint: {
+        selector: ".content-start .divide-y",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      className: "grid",
+    },
+    topSuggestionBarPDP: {
+      mountingConfigId: "topSuggestionBarPDP",
+      containerId: TOP_SUGGESTION_BAR_PDP_ID,
+      testId: TOP_SUGGESTION_BAR_PDP_TESTID,
+      insertionPoint: {
+        selector: "main section div.grid.gap-2.bg-white",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      className: "grid",
+      style: {
+        marginTop: "20px",
+      },
+    },
+    bottomSuggestionBarPDP: {
+      mountingConfigId: "bottomSuggestionBarPDP",
+      containerId: BOTTOM_REVIEWS_BAR_ID,
+      testId: BOTTOM_SUGGESTION_BAR_PDP_TESTID,
+      insertionPoint: {
+        selector: "#reviews > div.w-full.gap-8",
+        insertionType: DOMInsertionType.APPEND_CHILD,
+      },
+      style: {
+        maxWidth: "92vw",
+        marginInline: "auto",
+        marginTop: "15px",
+        marginBottom: "-25px",
+      },
+    },
+  },
+});
+
+const spanxColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#02081C",
+  [ColorNames.TextSecondary]: "#4F586F",
+  [ColorNames.TextAccent]: "#5F0F23",
+  [ColorNames.TextLink]: "#001846",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#02081C",
+  [ColorNames.BackgroundSecondary]: "#FFFFFF",
+  [ColorNames.BackgroundSecondaryDark]: "#F4F4F6",
+  [ColorNames.BackgroundTertiary]: "#4F586F",
+  [ColorNames.BackgroundDark]: "#02081C",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#FFF1DF",
+  [ColorNames.BorderLight]: "#CDCFD6",
+  [ColorNames.BorderMedium]: "#B3B7C1",
+  [ColorNames.BorderDark]: "#687083",
+  [ColorNames.BorderOutline]: "#E6E7EA",
+  [ColorNames.AccentPrimary]: "#FF002B",
+  [ColorNames.AccentSecondary]: "#02081C",
+};
+
+const spanxOrgUIConfig = (): OrgUIConfig => {
+  const defaultSpanxOrgConfig = defaultOrgUIConfig(OrgShortName.SpanxStaging);
+  return {
+    ...defaultSpanxOrgConfig,
+    partialViewConfig: {
+      maxHeight: 89,
+      borderRadius: "0px",
+    },
+    chatMessageConfig: {
+      ...defaultSpanxOrgConfig.chatMessageConfig!,
+      assistantChatTitle: "Spanx AI Assistant",
+      variant: "premium",
+      productLink: {
+        ...defaultSpanxOrgConfig.chatMessageConfig.productLink,
+        iconVariant: "backgroundPrimary",
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultSpanxOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      position: "bottom-right",
+    },
+    welcomeSectionConfig: {
+      ...defaultSpanxOrgConfig.welcomeSectionConfig!,
+      variant: "outlined",
+      colorVariant: "accent",
+      title: "Welcome to SPANX!",
+      iconName: "sparkles",
+      subtitle:
+        "Ask our AI anything to get instant help with everything from product specifics and details, shipping, returns, and more. Need more help? Please click the SPANX Support button above.",
+    },
+    chatPreviewConfig: {
+      ...defaultSpanxOrgConfig.chatPreviewConfig!,
+      topMargin: 0,
+      largeProductComparison: true,
+      iconFillColor: colorVar(ColorNames.TextPrimary),
+      buttonTextSecondaryColor: colorVar(ColorNames.TextPrimary),
+      buttonTextHoverColor: colorVar(ColorNames.TextPrimary),
+      buttonBackgroundColor: colorVar(ColorNames.BackgroundDark),
+      buttonBackgroundHoverColor: colorVar(ColorNames.AccentPrimary),
+      headerConfig: {
+        ...defaultSpanxOrgConfig.chatPreviewConfig!.headerConfig!,
+        imageSrc: CdnService.getAssetURL(
+          "spanx-logo.svg",
+          OrgShortName.SpanxStaging
+        ),
+        imageHeight: 16,
+        title: "AI Assistant",
+        sparklesColor: colorVar(ColorNames.AccentPrimary),
+        iconWidth: "16px",
+        iconHeight: "16px",
+      },
+      footerConfig: {
+        ...defaultSpanxOrgConfig.chatPreviewConfig!.footerConfig!,
+        hasFade: false,
+        suggestionButtonVariant: "light",
+        replyButtonIcon: "thinMagnifyingGlass",
+        replyInputHasShadow: false,
+        replyInputHasBorder: true,
+        backgroundColor: colorVar(ColorNames.BackgroundSecondaryDark),
+      },
+      copies: {
+        pdp: [
+          "what reviewers think about the comfort?",
+          "what body areas this targets?",
+          "if this will show through clothes?",
+        ],
+        plp: [
+          "something to wear under a strapless dress to a wedding?",
+          "the best shapewear for tummy control?",
+          "the right shapewear with a pencil skirt for work?",
+        ],
+      },
+      staticSuggestionCopies: {
+        pdp: [
+          "Is it easy to wash?",
+          "Is it good for curvy figures?",
+          "What did reviewers like the best?",
+          "Is it comfortable?",
+          "What size should I choose?",
+          "Is it good for all body shapes?",
+        ],
+        plp: [
+          "Which styles have the most reviews?",
+          "Which styles are best for my body shape?",
+          "Which styles are most popular?",
+          "How does Spanx source its products?",
+        ],
+      },
+      staticPLPImages: [
+        "default_plp_embedded_1.webp",
+        "default_plp_embedded_2.webp",
+        "default_plp_embedded_3.webp",
+        "default_plp_embedded_4.webp",
+      ],
+    },
+    customerServiceIntegration: {
+      ...defaultSpanxOrgConfig.customerServiceIntegration,
+      integrationMode: CustomerServiceIntegrationMode.full,
+      provider: CustomerServiceType.kustomer,
+      welcomeTitle: "Chat with a Spanx Stylist",
+      showNameInput: true,
+      showWelcomeOnForm: true,
+      showAISuggestionsWithinBusinessHours: false,
+      chatEnabledDuringBusinessHours: true,
+      waitingMessagePosition: "BEFORE_MESSAGES",
+      formAiName: "Spanx AI Assistant...",
+      legalMessage:
+        'This session will be transcribed for quality purposes. Please see our terms of use within the US <a href="https://spanx.com/pages/interactive-services-consent-and-disclaimers" target="_blank">here</a> and CA <a href="https://spanx.ca/pages/interactive-services-consent-and-disclaimers" target="_blank">here</a>',
+      welcomeDescription:
+        "Our stylists look forward to assisting you Mon- Fri between 9:30AM to 7:30PM ET, and Sat-Sun 9:30AM to 6:00PM ET!",
+      getCustomWaitingMessage: (name?: string) =>
+        `Hold tight${name ? ` ${name}` : ""}, your stylist is almost here`,
+      withinBusinessHoursMessage:
+        "👋 Hi there! We're here to help with any questions or support you need—whether you're tracking an order, finding the perfect product, or anything in between. To keep things quick, some responses might come from AI, but if you'd rather chat with a real person, just let us know—we've got you! <br /><br />Click “send a message” below to get started 💬",
+      withinBusinessHoursWaitingMessage:
+        "A Spanx Stylist will be with you within 5 minutes. Thanks for your patience.<br /><br />In the meantime, can you give us a little information about yourself?",
+      withinBusinessHoursFormMessage:
+        "👋 Hi there! We're here to help with any questions or support you need—whether you're tracking an order, finding the perfect product, or anything in between. To keep things quick, some responses might come from AI, but if you'd rather chat with a real person, just let us know—we've got you! <br /><br />Fill out your information and click “send a message” below to get started 💬",
+      outsideBusinessHoursMessage:
+        "👋 Hi, we’re sorry but this is outside of our service hours.<br /><br />You can leave a message and a stylist will get back to your within 24 hours. If you need an answer right away, ask your Spanx AI shopping assistant for help.",
+      outsideBusinessHoursFormMessage:
+        "👋 Hi, we’re sorry but this is outside of our service hours.<br /><br />You can leave a message and a stylist will get back to your within 24 hours. If you need an answer right away, ask your Spanx AI shopping assistant for help.",
+      outsideBusinessHoursWaitingMessage:
+        "⚡⚡ You're all set! A stylist will get back to you within 24 hours with an answer to your question. In the meantime, feel free to use our SPANX AI Shopping Assistant.",
+      suggestedAIQuestions: [
+        "How can I return or exchange my order?",
+        "Where is my order?",
+        "My item is damaged what can I do?",
+        "Where can I find my order number?",
+      ],
+      businessHoursStartUTC: "9:30AM",
+      businessHoursEndUTC: "7:30PM",
+      businessHoursTimezone: "-05:00", // ET
+      withinBusinessHoursInitialState: ChatState.INITIAL,
+      outsideBusinessHoursInitialState: ChatState.INITIAL,
+      withinBusinessHoursButtontext: "Send a message",
+      outsideBusinessHoursButtontext: "Leave a message",
+    },
+    productReviewConfig: {
+      ...defaultSpanxOrgConfig.productReviewConfig!,
+      styleVariant: "bordered",
+      colorVariant: "neutral",
+    },
+    pageCardConfig: {
+      ...defaultSpanxOrgConfig.pageCardConfig!,
+      variant: "outlined",
+      hoverVariant: "shadow",
+      iconVariant: "primary",
+    },
+    productCardConfig: {
+      ...defaultSpanxOrgConfig.productCardConfig!,
+      variant: "transparentBordered",
+    },
+    chatHeader: {
+      ...defaultSpanxOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "spanx-logo.svg",
+        OrgShortName.SpanxStaging
+      ),
+      collapsedColor: colorVar(ColorNames.BackgroundSecondaryDark),
+      expandedColor: colorVar(ColorNames.BackgroundLight),
+      chevronColor: colorVar(ColorNames.BackgroundDark),
+      borderBottom: `1px solid ${colorVar(ColorNames.BorderLight)}`,
+      closeIcon: GrClose,
+      customerSupportSwitchConfig: {
+        ...defaultSpanxOrgConfig.chatHeader.customerSupportSwitchConfig!,
+        variant: "detached",
+        supportTitle: "Support",
+        spiffyTitle: "AI Assistant",
+        spiffyTitleHasLogo: true,
+        borderColor: colorVar(ColorNames.TextPrimary),
+        selectedTextColor: colorVar(ColorNames.TextLight),
+        backgroundColor: colorVar(ColorNames.TextPrimary),
+        selectedBackgroundColor: colorVar(ColorNames.TextPrimary),
+        unselectedBackgroundColor: colorVar(ColorNames.BackgroundSecondaryDark),
+        unselectedTextColor: colorVar(ColorNames.TextPrimary),
+      },
+    },
+    floatingChatConfig: {
+      ...defaultSpanxOrgConfig.floatingChatConfig,
+      neverShowSingleProductCards: false,
+      termsAndConditionsConfig: {
+        copy: "This session will be transcribed for quality purposes. Please see our terms of use for",
+        link: "https://spanx.com/pages/terms-of-use",
+        linkText: "SPANX.com here.",
+      },
+      replyInputConfig: {
+        size: "lg",
+        sendIcon: "arrowUp",
+      },
+
+      suggestionButtonConfig: {
+        variant: "outlined",
+        hoverVariant: "dark",
+        answerVariant: "outlined",
+      },
+    },
+    conversationalSearch: {
+      enabled: true,
+      suggestions: [
+        "Shapewear that won’t show through clothes",
+        "Styles with the strongest compression",
+        "Comfortable styles for all day wear",
+        "Best shapewear for tummy control",
+      ],
+      entrypointBtnColor: "linear-gradient(to right, #004EA2, #6941C6)",
+      entrypointBtnTextColor: "#004EA2",
+      entrypointBtnBorderColor: "#004EA2",
+      // TODO: Migrate it to the new mount point structure.
+      entrypointContainer: "id|shopify-section-header",
+      productGridContainer: "id|MainContentWrapper",
+      entrypointTrigger: "id|search-input",
+      generalSearchBtn: "query|button.header-search__button",
+      pageContent: "id|MainContent",
+      searchContent: "id|search-content",
+      sortingFont: "ivypresto-headline, serif",
+      optionsFont: "Inter",
+    },
+
+    merchantVariantSettings: {
+      dynamicVariants: {
+        enabled: true,
+        refreshInterval: 500,
+      },
+    },
+    merchantOverrideCss: `
+      .spiffy-product-review-card-container {
+        background: var(--spiffy-colors-background-light) !important;
+      }
+      .spiffy-star-rating-container {
+        background: var(--spiffy-colors-background-secondary-dark) !important;
+      }
+      .spiffy-star-rating-star {
+        fill: var(--spiffy-colors-text-primary) !important;
+      }
+      .spiffy-product-review-header-reviewer {
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+      .spiffy-mini-verified-buyer-icon {
+        fill: var(--spiffy-colors-text-primary) !important;
+      }
+      
+      #spiffy-product-review-card-read-more-container {
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+
+      #spiffy-ai-chat-preview-contents h1, h2, h3, h4, h5, h6 {
+        --chakra-fonts-heading: 'inter', 'Poppins', sans-serif;
+      }
+
+      #spiffy-chat-preview-user-query-button {
+        margin-top: 8px;
+      }
+      #spiffy-ai-floating-button {
+        z-index: 2147483001 !important;
+      }
+
+      /* SuggestionBarV2 CSS */
+      #spiffy-top-suggestion-bar-contents button{
+        border-radius: 24px !important;
+      }
+
+      #spiffy-top-suggestion-bar-contents button span{
+        font-size: 14px !important;
+        font-weight: 500;
+      }
+
+      #spiffy-top-suggestion-bar-contents button svg{
+        width: 14px;
+        height: 14px;
+      }
+
+      #spiffy-bottom-suggestion-bar-contents button {
+        border-color: var(--spiffy-colors-border-outline) !important;
+      }
+
+      #spiffy-bottom-suggestion-bar-contents button:hover {
+        background-color: var(--spiffy-colors-border-light) !important;
+        border-color:var(--spiffy-colors-border-light) !important;
+      }
+
+      #spiffy-bottom-suggestion-bar-contents button span{
+        font-size: 14px !important;
+        font-weight: 500;
+      }
+
+      #spiffy-bottom-suggestion-bar-contents button svg{
+        width: 14px;
+        height: 14px;
+      }
+
+      .spiffy-chat-header-container {
+        padding-block: 8px;
+        border-bottom: 1px solid ${colorVar(ColorNames.BorderLight)};
+        background-color: white;
+      }
+
+      .spiffy-chat-header-close-button {
+        background-color: var(--spiffy-colors-text-light);
+        color: var(--spiffy-colors-background-primary);
+      }
+
+      .spiffy-suggestion-bar-button {
+        border: 1px solid ${colorVar(ColorNames.BorderOutline)};
+        border-radius: 24px;
+      }
+
+      .spiffy-suggestion-button-answer-class {
+        border: 1px solid ${colorVar(ColorNames.TextPrimary)} !important;
+      }
+
+      .spiffy-suggestion-button-answer-class:hover {
+        background-color: ${colorVar(
+          ColorNames.BackgroundSecondaryDark
+        )} !important;
+        border-color: ${colorVar(
+          ColorNames.BackgroundSecondaryDark
+        )} !important;
+        color: ${colorVar(ColorNames.TextLink)} !important;
+      }
+
+      .spiffy-suggestion-button-question-class {
+        border: 1px solid ${colorVar(ColorNames.BorderLight)} !important;
+        border-radius: 4px;
+      }
+
+      .spiffy-suggestion-button-question-class:hover {
+        border-color: ${colorVar(
+          ColorNames.BackgroundSecondaryDark
+        )} !important;
+        background-color: ${colorVar(
+          ColorNames.BackgroundSecondaryDark
+        )} !important;
+        color: ${colorVar(ColorNames.TextPrimary)} !important;
+        fill: ${colorVar(ColorNames.TextPrimary)} !important;
+        stroke: ${colorVar(ColorNames.TextPrimary)} !important;
+      }
+
+      .spiffy-suggestion-button-text-class {
+        font-size: 13px;
+      }
+
+      .spiffy-social-proof-content-image {
+        border-radius: 0px;
+        box-shadow: none;
+      }
+
+      .spiffy-user-query-button {
+        font-size: 12px;
+      }
+
+      .spiffy-image-banner-subtitle {
+        text-transform: uppercase;
+      }
+      .spiffy-customer-service-legal-message a {
+        text-decoration-line: underline;
+      }
+      .spiffy-customer-service-legal-message a:hover {
+        color: var(--spiffy-colors-text-link);
+      }
+      .spiffy-tag-pill-text {
+        color: var(--spiffy-colors-text-light);
+      }
+      .spiffy-product-card-title {
+        font-family: var(--chakra-fonts-heading);
+        color: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-product-card-text-color {
+        color: var(--spiffy-colors-text-secondary);
+      }
+      .spiffy-product-card-rating-star-color {
+        fill: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-switch-to-agent-button-unselected-text-color {
+        color: var(--spiffy-colors-text-primary);
+      } 
+      .spiffy-switch-to-agent-button-selected-text-color {
+        color: var(--spiffy-colors-text-light);
+      }
+      .spiffy-switch-to-agent-button-selected-background-color {
+        background-color: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-switch-to-agent-button-unselected-background-color {
+        background-color: var(--spiffy-colors-background-secondary-dark);
+      }
+      .spiffy-switch-to-agent-button-border-color {
+        border-color: var(--spiffy-colors-text-primary);
+      } 
+      .spiffy-switch-to-agent-button-background-color {
+        background-color: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-switch-to-agent-button-hover-background-color:hover {
+        background-color: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-switch-to-agent-button-hover-text-color:hover {
+        color: var(--spiffy-colors-text-light);
+      }
+      .spiffy-switch-to-agent-button-selected-fill-color {
+        fill: var(--spiffy-colors-text-light);
+      }
+      .spiffy-switch-to-agent-button-unselected-fill-color {
+        fill: var(--spiffy-colors-text-primary);
+      }
+      .spiffy-chat-preview-footer-background-color {
+        background-color: var(--spiffy-colors-background-secondary-dark);
+      }
+      .spiffy-message-content-container {
+        font-size: 15px !important;
+        font-weight: 300 !important;
+        line-height: 160%;
+      }
+    `,
+  };
+};
+
+const spanxOrgInfo = {
+  shortName: "spanx-staging",
+  name: "SPANX",
+  domain: "01jxznkpym6bz8d72xmaps77w3-c47748467f607d4067fe.myshopify.dev",
+  defaultProductId: "39773580984531",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: spanxOrgUIConfig,
+  orgColors: () => spanxColors,
+  orgPageConfig: spanxPageConfig,
+} satisfies BasicOrgInfoType;
+
+export { spanxOrgInfo };