@envive-ai/react-hooks 0.1.0

package/src/merchants/kindredBravely/kindredBravely.ts

@@ -0,0 +1,529 @@
+import { CHAT_PREVIEW_TESTID } from "src/config/locators";
+import { OrgShortName, BasicOrgInfoType } from "src/application/models";
+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 } from "src/config/divIds";
+import { defaultOrgUIConfig } from "src/merchants/default";
+import {
+  ChatPreviewWidgetConfig,
+  ColorMapping,
+  ColorNames,
+  colorVar,
+  OrgPageConfig,
+  OrgUIConfig,
+  PageVariantTestType,
+  WidgetType,
+} from "src/contexts/types";
+
+const kindredBravelyColors: ColorMapping = {
+  [ColorNames.TextPrimary]: "#232323",
+  [ColorNames.TextSecondary]: "#393939",
+  [ColorNames.TextAccent]: "#A68F83",
+  [ColorNames.TextLink]: "#232323",
+  [ColorNames.TextLight]: "#FFFFFF",
+  [ColorNames.BackgroundPrimary]: "#C1AFA0",
+  [ColorNames.BackgroundSecondary]: "#E9E5DD",
+  [ColorNames.BackgroundSecondaryDark]: "#C1AFA0",
+  [ColorNames.BackgroundTertiary]: "#EBE3E1",
+  [ColorNames.BackgroundDark]: "#232323",
+  [ColorNames.BackgroundLight]: "#FFFFFF",
+  [ColorNames.BackgroundSaturated]: "#CCCCCC",
+  [ColorNames.BorderLight]: "#C7C7C7",
+  [ColorNames.BorderMedium]: "#C7C7C7",
+  [ColorNames.BorderDark]: "#232323",
+  [ColorNames.BorderOutline]: "#232323",
+  [ColorNames.AccentPrimary]: "#232323",
+  [ColorNames.AccentSecondary]: "#C1AFA0",
+};
+
+const kindredBravelyOrgUIConfig = (): OrgUIConfig => {
+  const defaultKindredBravelyOrgConfig = defaultOrgUIConfig(
+    OrgShortName.KindredBravely
+  );
+
+  return {
+    ...defaultKindredBravelyOrgConfig,
+    chatMessageConfig: {
+      ...defaultKindredBravelyOrgConfig.chatMessageConfig,
+      assistantChatTitle: "Kindred Bravely AI",
+    },
+    floatingChatConfig: {
+      ...defaultKindredBravelyOrgConfig.floatingChatConfig,
+      enableWatermark: false,
+      suggestionButtonConfig: {
+        ...defaultKindredBravelyOrgConfig.floatingChatConfig
+          .suggestionButtonConfig,
+        variant: "secondary",
+        hoverVariant: "secondaryDark",
+      },
+    },
+    chatHeader: {
+      ...defaultKindredBravelyOrgConfig.chatHeader,
+      imageSrc: CdnService.getAssetURL(
+        "kindred-bravely-logo.svg",
+        OrgShortName.KindredBravely
+      ),
+      collapsedColor: colorVar(ColorNames.BackgroundPrimary),
+      expandedColor: colorVar(ColorNames.BackgroundPrimary),
+      chevronColor: colorVar(ColorNames.BackgroundDark),
+    },
+    chatPreviewConfig: {
+      ...defaultKindredBravelyOrgConfig.chatPreviewConfig!,
+
+      headerConfig: {
+        ...defaultKindredBravelyOrgConfig.chatPreviewConfig!.headerConfig,
+        title: "Kindred Bravely AI",
+        imageHeight: 16,
+      },
+      footerConfig: {
+        ...defaultKindredBravelyOrgConfig.chatPreviewConfig!.footerConfig,
+      },
+    },
+    floatingEntrypointConfig: {
+      ...defaultKindredBravelyOrgConfig.floatingEntrypointConfig!,
+      showOption: "always",
+      expansionText: {
+        pdp: "Why is this the right style for you?",
+        plp: "Find your mom must-haves now",
+      },
+      minimizedColor: "#DBE0E6",
+      expandedColor: "#DBE0E6",
+      textColor: colorVar(ColorNames.TextPrimary),
+      iconFillColor: colorVar(ColorNames.BackgroundDark),
+      iconStrokeColor: colorVar(ColorNames.BackgroundDark),
+    },
+    productCardConfig: {
+      ...defaultKindredBravelyOrgConfig.productCardConfig!,
+    },
+
+    pageCardConfig: {
+      ...defaultKindredBravelyOrgConfig.pageCardConfig!,
+    },
+    productReviewConfig: {
+      ...defaultKindredBravelyOrgConfig.productReviewConfig!,
+      colorVariant: "brand",
+    },
+    welcomeSectionConfig: {
+      ...defaultKindredBravelyOrgConfig.welcomeSectionConfig!,
+      title: "Welcome to Kindred Bravely AI!",
+      subtitle:
+        "Need some help? Our mom-designed essentials are here to make your life easier, so you can focus on what matters most. Ask me a question and we’ll find your perfect fit in no time.",
+      variant: "standard",
+      colorVariant: "standard",
+    },
+    merchantOverrideCss: `
+      .spiffy-welcome-section-message-title {
+        font-weight: 500;
+      }
+
+      .spiffy-welcome-section-container {
+        background-color: var(--spiffy-colors-background-primary) !important;
+      }
+
+      #spiffy-product-review-card-read-more-container > span {
+        font-weight: 400;
+      }
+
+      .spiffy-floating-button-icon-container svg path {
+        stroke: var(--spiffy-colors-background-dark);
+        fill: var(--spiffy-colors-background-dark) !important;
+      }
+
+      .spiffy-floating-button-text {
+        font-weight: 500;
+      }
+
+      .spiffy-modal-sheet-footer .spiffy-suggestion-button-question-class svg {
+        display: none;
+      }
+
+      .spiffy-chat-header-close-button svg {
+        background-color: var(--spiffy-colors-background-dark) !important;
+        fill: var(--spiffy-colors-background-primary) !important;
+        stroke: var(--spiffy-colors-background-primary) !important;
+        border-radius: 50%;
+      }
+
+      .spiffy-chat-header-container {
+        background-color: var(--spiffy-colors-background-primary);
+
+        img { 
+          width: 140px !important;
+          height: auto !important;
+        }
+      }
+
+      .spiffy-social-proof-content-container {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 120%;
+        color: var(--spiffy-colors-text-primary) !important;
+      }
+
+      #spiffy-product-comparison-image-stack img {
+        z-index: 3 !important;
+      }
+
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-question-class:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark);
+      }
+      
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-container svg {
+        stroke: var(--spiffy-colors-accent-primary) !important;
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-social-proof-content-button svg {
+        stroke: var(--spiffy-colors-accent-primary) !important;
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-question-class:hover,
+      .spiffy-social-proof-content-button .spiffy-suggestion-button-question-class:hover,
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-container:hover {
+        background-color: var(--spiffy-colors-background-secondary-dark) !important;
+        color: var(--spiffy-colors-text-primary) !important;
+        
+        svg {
+          stroke: var(--spiffy-colors-accent-primary) !important;
+          fill: var(--spiffy-colors-accent-primary) !important;
+        }
+      }
+
+      .spiffy-social-proof-content-button .spiffy-suggestion-button-question-class,
+      .spiffy-chat-preview-footer-container .spiffy-suggestion-button-container  {
+        background-color: var(--spiffy-colors-background-secondary) !important;
+        color: var(--spiffy-colors-text-primary) !important;
+
+        svg {
+          stroke: var(--spiffy-colors-accent-primary) !important;
+          fill: var(--spiffy-colors-accent-primary) !important;
+        }
+      }
+
+      .spiffy-social-proof-suggestion-footer-title {
+        color: var(--spiffy-colors-text-secondary) !important;
+        font-weight: 500 !important;
+      }
+
+      .spiffy-social-proof-header h2 {
+        font-weight: 500 !important;
+      }
+
+      #spiffy-top-suggestion-bar-contents .spiffy-button-base-button svg, #spiffy-bottom-suggestion-bar-contents .spiffy-button-base-button svg {
+        stroke: var(--spiffy-colors-accent-primary) !important;
+        fill: var(--spiffy-colors-accent-primary) !important;
+      }
+
+      @media (max-width: 768px) {
+        .spiffy-logo-icon {
+          width: 179px;
+        }
+      }
+
+      /* Responsive chat preview mounting for Kindred Bravely PLP */
+      #${CHAT_PREVIEW_CONTAINER_ID}-desktop {
+        display: none !important;
+      }
+      #${CHAT_PREVIEW_CONTAINER_ID}-mobile {
+        display: block !important;
+      }
+      @media (min-width: 990px) {
+        #${CHAT_PREVIEW_CONTAINER_ID}-desktop {
+          display: block !important;
+        }
+        #${CHAT_PREVIEW_CONTAINER_ID}-mobile {
+          display: none !important;
+        }
+      }
+
+      .spiffy-chat-header-container > div > div {
+        width: fit-content !important;
+        gap: 0 !important;
+        button {
+          width: fit-content !important;
+        }
+        button:first-child {
+          border-radius: 4px 0 0 4px !important;
+        }
+        button:last-child {
+          border-radius: 0 4px 4px 0 !important;
+        }
+      }
+
+      .spiffy-switch-to-agent-button-selected-text-color {
+        color: var(--spiffy-colors-text-light) !important;
+      }
+
+      .spiffy-switch-to-agent-button-background-color {
+        background-color: var(--spiffy-colors-background-dark) !important;
+      }
+      
+      .spiffy-switch-to-agent-button-border-color {
+        border-color: var(--spiffy-colors-border-dark) !important;
+      }
+
+      .spiffy-switch-to-agent-button-unselected-text-color {
+        color: var(--spiffy-colors-text-secondary) !important;
+      }
+
+      .spiffy-switch-to-agent-button-unselected-background-color {
+        background-color: var(--spiffy-colors-background-primary) !important;  
+      }
+
+      .spiffy-switch-to-agent-button-unselected-border-color {
+        border-color: var(--spiffy-colors-border-light) !important;
+      }
+
+      .spiffy-headline,
+      .spiffy-body-text, 
+      .spiffy-chat-preview-body-description,
+      .spiffy-social-proof-suggestion-footer-title,
+      .spiffy-social-proof-content-container {
+        font-family: 'PF Das Grot', sans-serif !important;
+      }
+
+      #spiffy-ai-chat-preview-contents {
+        overflow: visible !important;
+      }
+
+      .spiffy-product-link-icon-container {
+        background-color: var(--spiffy-colors-background-dark) !important;
+      }
+    `,
+  };
+};
+
+const kindredBravelyPageConfig = (): OrgPageConfig => ({
+  pageVariants: [
+    {
+      variantId: "plpGiftCards",
+      variantType: "plp",
+      variantTests: [
+        { testType: PageVariantTestType.UrlResolver },
+        {
+          testType: PageVariantTestType.PlpId,
+          plpIdExtractor: "url-resolver-plp-id",
+          plpIds: ["gift-cards"],
+        },
+      ],
+      plpIdExtractor: "url-resolver-plp-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLPDesktopGiftCard",
+          widgetConfigId: "chatPreviewPLP",
+        },
+        {
+          mountingConfigId: "chatPreviewPLPMobile",
+          widgetConfigId: "chatPreviewPLP",
+        },
+      ],
+    },
+    {
+      variantId: "plp",
+      variantType: "plp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      plpIdExtractor: "url-resolver-plp-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPLPDesktop",
+          widgetConfigId: "chatPreviewPLP",
+        },
+        {
+          mountingConfigId: "chatPreviewPLPMobile",
+          widgetConfigId: "chatPreviewPLP",
+        },
+      ],
+    },
+    {
+      variantId: "pdpDefault",
+      variantType: "pdp",
+      variantTests: [{ testType: PageVariantTestType.UrlResolver }],
+      productIdExtractor: "url-resolver-product-id",
+      widgetMounting: [
+        {
+          mountingConfigId: "chatPreviewPDP",
+          mountingPointWidgets: [
+            {
+              tests: [
+                {
+                  testType: PageVariantTestType.HasMerchantTag,
+                  merchantTags: ["gift-card"],
+                },
+              ],
+              widgetConfigId: "chatPreviewPDPGiftCard",
+            },
+            {
+              tests: [{ testType: PageVariantTestType.Fallback }],
+              widgetConfigId: "chatPreviewPDP",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  widgetConfigs: {
+    chatPreviewPLP: {
+      widgetConfigId: "chatPreviewPLP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "kindred-bravely-logo.svg",
+        customerQuery: "asked what’s best for new moms?",
+        headerTitle: "",
+        suggestionButtonStrings: [
+          "What are other moms saying?",
+          "What bras will I need for breastfeeding?",
+          "What should I pack in my hospital bag?",
+          "What do I wear postpartum?",
+          "What’s an essential for a new mom?",
+          "What’s a good gift for a new mom?",
+        ],
+        staticPLPImageNames: [
+          "plp-image3.png",
+          "plp-image2.png",
+          "plp-image1.png",
+          "plp-image4.png",
+        ],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "What can I help you find?",
+          icon: "magnifyingGlass",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDP: {
+      widgetConfigId: "chatPreviewPDP",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "",
+        customerQuery: "asked how it fits.",
+        headerTitle: "Kindred Bravely AI",
+        suggestionButtonStrings: [
+          "What are moms saying?",
+          "What do moms love about this?",
+          "How does it fit?",
+          "What pairs well with this?",
+          "Does this work for pregnancy and postpartum?",
+          "What are the top features?",
+        ],
+        staticImageIndex: 0,
+        staticPLPImageNames: ["pdp-image1.png"],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+    chatPreviewPDPGiftCard: {
+      widgetConfigId: "chatPreviewPDPGiftCard",
+      type: WidgetType.ChatPreview,
+      variant: "flat",
+      addSeparators: true,
+      socialProofConfig: {
+        staticPLPImagesLayout: "grid",
+        logoName: "kindred-bravely-logo.svg",
+        customerQuery: "asked about gift ideas for new parents",
+        headerTitle: "",
+        suggestionButtonStrings: [
+          "What’s a popular gift for new parents?",
+          "Do you have gifts under $100?",
+          "How do I send a gift card?",
+          "Can I add a personal message?",
+          "How do I check my gift card balance?",
+        ],
+        staticImageIndex: 0,
+        staticPLPImageNames: ["pdp-image1.png"],
+        suggestionButtonVariantDefault: "secondary",
+        suggestionButtonVariantAccent: "primary",
+        userQueryButtonConfig: {
+          placeholderText: "Ask me anything",
+          icon: "send",
+        },
+      },
+    } satisfies ChatPreviewWidgetConfig,
+  },
+  mountingConfigs: {
+    chatPreviewPLPDesktop: {
+      mountingConfigId: "chatPreviewPLPDesktop",
+      containerId: `${CHAT_PREVIEW_CONTAINER_ID}-desktop`,
+      testId: `${CHAT_PREVIEW_TESTID}-desktop`,
+      insertionPoint: {
+        selector: ".product-grid",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+      gridInsertionType: GridInsertionType.FIXED_4,
+      style: {
+        width: "900px",
+        flex: "1 0 100%",
+        boxSizing: "border-box",
+      },
+    },
+    chatPreviewPLPDesktopGiftCard: {
+      mountingConfigId: "chatPreviewPLPDesktopGiftCard",
+      containerId: `${CHAT_PREVIEW_CONTAINER_ID}-desktop`,
+      testId: `${CHAT_PREVIEW_TESTID}-desktop`,
+      insertionPoint: {
+        selector: ".product-grid",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_4,
+      style: {
+        width: "900px",
+        flex: "1 0 100%",
+        boxSizing: "border-box",
+      },
+    },
+    chatPreviewPLPMobile: {
+      mountingConfigId: "chatPreviewPLPMobile",
+      containerId: `${CHAT_PREVIEW_CONTAINER_ID}-mobile`,
+      testId: `${CHAT_PREVIEW_TESTID}-mobile`,
+      insertionPoint: {
+        selector: "#product-grid",
+        insertionType: DOMInsertionType.AFTER,
+      },
+      gridInsertionType: GridInsertionType.FIXED_5,
+      style: {
+        width: "200px",
+        flex: "1 0 100%",
+        boxSizing: "border-box",
+      },
+    },
+    chatPreviewPDP: {
+      mountingConfigId: "chatPreviewPDP",
+      containerId: CHAT_PREVIEW_CONTAINER_ID,
+      testId: CHAT_PREVIEW_TESTID,
+      insertionPoint: {
+        selector: "#product-accordion",
+        insertionType: DOMInsertionType.BEFORE,
+      },
+    },
+  },
+});
+
+const kindredBravelyOrgInfo = {
+  shortName: OrgShortName.KindredBravely,
+  name: "Kindred Bravely AI",
+  domain: "kindredbravely.com",
+  defaultProductId: "bamboo-baby-pajamas-fawn-stripe",
+  alwaysEnabledMerchants: true,
+  orgUIConfig: kindredBravelyOrgUIConfig,
+  orgColors: () => kindredBravelyColors,
+  orgPageConfig: kindredBravelyPageConfig,
+} satisfies BasicOrgInfoType;
+
+export {
+  kindredBravelyOrgInfo,
+  kindredBravelyOrgUIConfig,
+  kindredBravelyColors,
+  kindredBravelyPageConfig,
+};