@axos-web-dev/shared-components 2.0.0-dev.2-nav-1 → 2.0.0-dev.20

package/dist/Chatbot/ChatWindow.css.js

@@ -4,41 +4,41 @@ import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Chatbot.css'
 /* empty css                                    */
 /* empty css                           */
 /* empty css                              */
-var windowStyle = "_13n1jqk0";
-var windowOpenStyle = "_13n1jqk1";
-var windowBarStyle = "_13n1jqk2";
-var left_bar_section = "_13n1jqk3";
-var chat_title = "_13n1jqk4";
-var buttonss_section = "_13n1jqk5";
-var button_bar = "_13n1jqk6";
-var button_reset = "_13n1jqk7";
-var arrowFill = "_13n1jqk8";
-var inputStyle = "_13n1jqk9";
-var autoResize = "_13n1jqka";
-var sendButtonStyle = "_13n1jqkb";
-var messagesContainerStyle = "_13n1jqkc";
-var notificationStyle = "_13n1jqkd";
-var messageStyle = "_13n1jqke";
-var inline_button_wrapper = "_13n1jqkf";
-var inline_button = "_13n1jqkg";
-var endChatButtonStyle = "_13n1jqkh";
-var noAnswerButton = "_13n1jqki";
-var chatbotMenu = "_13n1jqkj";
-var chatbotMenuItem = "_13n1jqkk";
-var chatNetworkStatus = "_13n1jqkl";
-var chatEndDialogOverlay = "_13n1jqkm";
-var chatFinishDialog = "_13n1jqkn";
-var thankyou_overlay = "_13n1jqko";
-var thankyou_message = "_13n1jqkp";
-var thankyou_image = "_13n1jqkq";
-var chatEndCircle = "_13n1jqkr";
-var user_msg = "_13n1jqks";
-var agent_msg = "_13n1jqkt";
-var shimmerText = "_13n1jqkv";
-var tableMsg = "_13n1jqkw";
-var tableHead = "_13n1jqkx";
-var tableCell = "_13n1jqky";
-var trMortgageTable = "_13n1jqkz";
+var windowStyle = "_13n1jqk1";
+var windowOpenStyle = "_13n1jqk2";
+var windowBarStyle = "_13n1jqk3";
+var left_bar_section = "_13n1jqk4";
+var chat_title = "_13n1jqk5";
+var buttonss_section = "_13n1jqk6";
+var button_bar = "_13n1jqk7";
+var button_reset = "_13n1jqk8";
+var arrowFill = "_13n1jqk9";
+var inputStyle = "_13n1jqka";
+var autoResize = "_13n1jqkb";
+var sendButtonStyle = "_13n1jqkc";
+var messagesContainerStyle = "_13n1jqkd";
+var notificationStyle = "_13n1jqke";
+var messageStyle = "_13n1jqkf";
+var inline_button_wrapper = "_13n1jqkg";
+var inline_button = "_13n1jqkh";
+var endChatButtonStyle = "_13n1jqki";
+var noAnswerButton = "_13n1jqkj";
+var chatbotMenu = "_13n1jqkk";
+var chatbotMenuItem = "_13n1jqkl";
+var chatNetworkStatus = "_13n1jqkm";
+var chatEndDialogOverlay = "_13n1jqkn";
+var chatFinishDialog = "_13n1jqko";
+var thankyou_overlay = "_13n1jqkp";
+var thankyou_message = "_13n1jqkq";
+var thankyou_image = "_13n1jqkr";
+var chatEndCircle = "_13n1jqks";
+var user_msg = "_13n1jqkt";
+var agent_msg = "_13n1jqku";
+var shimmerText = "_13n1jqkw";
+var tableMsg = "_13n1jqkx";
+var tableHead = "_13n1jqky";
+var tableCell = "_13n1jqkz";
+var trMortgageTable = "_13n1jqk10";
 export {
   agent_msg,
   arrowFill,

package/dist/Chatbot/ChatWindow.js

@@ -43,7 +43,8 @@ const ChatWindow = ({
     toggleThankyouMessage,
     hasEscalated,
     isBlockedInput,
-    isOpen
+    isOpen,
+    hasOpenedOnce
   } = useOpenChat();
   const [mounted, setMounted] = React.useState(false);
   const [menuOpen, setMenuOpen] = React.useState(false);
@@ -398,7 +399,7 @@ const ChatWindow = ({
       }
     ) }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-      (status === "idle" || messages.length == 0) && /* @__PURE__ */ jsx(
+      (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__PURE__ */ jsx(
         "div",
         {
           className: clsx(),
@@ -425,23 +426,28 @@ const ChatWindow = ({
           )
         }
       ),
-      messages?.map((msg) => /* @__PURE__ */ jsx(
-        ChatbotMessage,
-        {
-          msg,
-          onSend,
-          showAvatar,
-          showName,
-          virtualAgent,
-          onCancelEndChat,
-          onEndChat: () => {
-            endChat();
-            onCloseAfterThankYou();
+      messages?.map((msg) => {
+        if (!hasOpenedOnce) {
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          ChatbotMessage,
+          {
+            msg,
+            onSend,
+            showAvatar,
+            showName,
+            virtualAgent,
+            onCancelEndChat,
+            onEndChat: () => {
+              endChat();
+              onCloseAfterThankYou();
+            },
+            inputRef
           },
-          inputRef
-        },
-        msg?.$index
-      )),
+          msg?.$index
+        );
+      }),
       showReconnect && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/Chatbot/Chatbot.d.ts

@@ -2,9 +2,17 @@ export type ChatbotProps = {
     project?: "axos" | "ufb";
     debug?: boolean;
 };
-export declare const Chatbot: ({ project, projectEnv, menuOption, debug, }: {
-    project?: "axos" | "ufb";
+type InitalizeChatbot = {
+    companyId: string;
+    tenantName: string;
+    host: string;
+    authUrl: string;
+};
+export declare const Chatbot: ({ project, projectEnv, menuOption, config, }: {
+    project?: "axos" | "ufb" | "Axos" | "Ufb";
     projectEnv?: "dev" | "qa" | "uat" | "stg" | "prod";
     menuOption?: "Support Virtual Agent" | string;
     debug?: boolean;
+    config: InitalizeChatbot;
 }) => false | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Chatbot/Chatbot.js

@@ -2,18 +2,27 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { useMount, useUnmount } from "react-use";
-import notificationSound from "../assets/incoming.mp3.js";
-import { authenticate } from "./authenticate.js";
+import notificationSound from "../assets/notification.mp3.js";
 import { Bubble } from "./Bubble.js";
-import { chatbotUFB, chatbotAXB } from "./Chatbot.css.js";
+import { chatbotAXB, chatbotUFB } from "./Chatbot.css.js";
 import { ChatWindow } from "./ChatWindow.js";
 import { useOpenChat } from "./store/chat.js";
 import { useMessages } from "./store/messages.js";
+if (typeof window !== "undefined") {
+  const OriginalAudio = window.Audio;
+  class PatchedAudio extends OriginalAudio {
+    constructor(src) {
+      const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
+      super(newSrc);
+    }
+  }
+  window.Audio = PatchedAudio;
+}
 const Chatbot = ({
   project = "axos",
   projectEnv = "dev",
   menuOption = "Support Virtual Agent",
-  debug = false
+  config
 }) => {
   const {
     hasOpenedOnce,
@@ -29,13 +38,11 @@ const Chatbot = ({
   const clientRef = useRef(null);
   const menuRef = useRef(null);
   const isMountedRef = useRef(false);
-  const hasLoadedBefore = useRef(true);
   const chatRef = useRef(null);
   const agent_virtual = useRef(null);
   const [status, setStatus] = useState("idle");
   const [hasStarted, setHasStarted] = useState(false);
   const [menusLoaded, setMenusLoaded] = useState(false);
-  const [pendingStart, setPendingStart] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const [scalationStarted, setScalationStarted] = useState(false);
   useEffect(() => {
@@ -90,6 +97,9 @@ const Chatbot = ({
       menuRef.current = await clientRef.current.getMenus();
       setMenusLoaded(true);
       console.log("menus:", menuRef.current);
+      if (menuRef.current !== null) {
+        await startChat();
+      }
     }
   };
   const onAuthenticatedHandler = async () => {
@@ -220,41 +230,37 @@ const Chatbot = ({
     clientRef.current?.off("chat.connected", onChatConnectedHandler);
   };
   const createClient = async () => {
-    const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
-    if (projectEnv !== "prod" || debug) {
-      Logger.addHandler(consoleLoggerHandler);
-    }
+    const { Client } = await import("@ujet/websdk-headless");
     if (clientRef.current) return;
     const client = new Client({
-      companyId: process.env.CCAI_COMPANY_ID || "",
-      tenant: process.env.CCAI_TENANT_NAME || "",
-      host: process.env.CCAI_HOST || "",
-      // or your region
-      // companyId: import.meta.env.VITE_COMPANY_ID || "",
-      // tenant: import.meta.env.VITE_TENANT_NAME || "",
-      // host: import.meta.env.VITE_HOST || "", // or your region
-      authenticate
+      companyId: config.companyId,
+      tenant: config.tenantName,
+      host: config.host,
+      authenticate: async () => {
+        const res = await fetch(config.authUrl, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        const data = await res.json();
+        return {
+          token: data.token
+        };
+      }
     });
     client?.on("ready", onReadyHandler);
     client?.on("authenticated", onAuthenticatedHandler);
     isMountedRef.current = true;
     clientRef.current = client;
     registerEventHandlers();
-    if (client) {
-      const OriginalAudio = window.Audio;
-      window.Audio = function(src) {
-        if (src === "https://websdk.ujet.co/v3/ping.mp3") {
-          src = notificationSound;
-        }
-        return new OriginalAudio(src);
-      };
-    }
     return;
   };
   const startChat = async () => {
-    console.log("Starting chat");
+    console.log("Starting chat", chatRef.current);
     const client = clientRef.current;
     if (!client) return;
+    if (hasStarted) return;
     if (!menuRef.current || !menuRef.current.menus) {
       let waited = 0;
       while ((!menuRef.current || !menuRef.current.menus) && waited < 5e3) {
@@ -267,19 +273,26 @@ const Chatbot = ({
       }
     }
     try {
+      console.log("menus: ->", menuRef.current);
       const ongoingChat = await client.loadOngoingChat();
+      console.log("theres a ongoing chat?: -->", ongoingChat);
       if (ongoingChat) {
         console.log("Ongoing chat found:", ongoingChat);
         console.log("Resuming chat:", ongoingChat.id);
-        chatRef.current = await client.resumeChat(ongoingChat.id);
+        chatRef.current = ongoingChat;
         agent_virtual.current = ongoingChat.agent;
         return;
       }
+      console.log("not ongoing chat ");
+      console.log(!!ongoingChat);
       const foundMenu = menuRef.current.menus.find(
         (menu) => menu.name === menuOption
       );
       const menuId = foundMenu && foundMenu.id;
       console.log("Creating new chat with menu ID:", menuId);
+      if (!foundMenu) {
+        throw new Error("Menu not found: " + menuOption);
+      }
       const newChat = await client.createChat(menuId, { custom_data });
       if (newChat !== null) {
         chatRef.current = newChat;
@@ -288,15 +301,23 @@ const Chatbot = ({
       }
     } catch (err) {
       console.error("Error creating chat:", err);
+    } finally {
+      setHasStarted(true);
+      if (clientRef?.current?.chat?.state?.status == "va_assigned") {
+        const OriginalAudio = window.Audio;
+        class PatchedAudio extends OriginalAudio {
+          constructor(src) {
+            const newSrc = src === "https://websdk.ujet.co/v3/ping.mp3" ? notificationSound : src;
+            super(newSrc);
+          }
+        }
+        window.Audio = PatchedAudio;
+      }
     }
   };
   const handleClick = async () => {
     toggle();
     if (hasStarted) return;
-    if (!menusLoaded) {
-      setPendingStart(true);
-      return;
-    }
     if (!hasOpenedOnce) {
       await startChat();
       setHasStarted(true);
@@ -337,17 +358,9 @@ const Chatbot = ({
     isMountedRef.current = true;
     await createClient();
   });
-  useEffect(() => {
-    if (menusLoaded && pendingStart && !hasStarted) {
-      startChat();
-      setPendingStart(false);
-    }
-  }, [menusLoaded, pendingStart, hasStarted]);
   useUnmount(() => {
     console.log("Chatbot unmounted");
     deregisterEventHandlers();
-    isMountedRef.current = false;
-    hasLoadedBefore.current = true;
     reset();
     setHasStarted(false);
     setStatus("idle");
@@ -360,9 +373,13 @@ const Chatbot = ({
   const onClose = () => {
     toggle();
   };
-  const onCloseAfterThankYou = () => {
+  const newChatSession = async () => {
+    console.log("create new session");
+  };
+  const onCloseAfterThankYou = async () => {
     reset();
     setHasStarted(false);
+    newChatSession();
   };
   const onPreviewTyping = async (msg) => {
     console.log("Preview typing message:", msg);
@@ -375,24 +392,30 @@ const Chatbot = ({
       console.error("Error sending preview message:", error);
     }
   };
-  return menusLoaded && /* @__PURE__ */ jsxs("div", { className: project === "ufb" ? chatbotUFB : chatbotAXB, children: [
-    /* @__PURE__ */ jsx(Bubble, { onClick: handleClick }),
-    /* @__PURE__ */ jsx(
-      ChatWindow,
-      {
-        status,
-        virtualAgent: agent_virtual.current,
-        messages,
-        onSend: onSendMessage,
-        endChat: onEndChat,
-        onClose,
-        onNewChat: onEndAndStartNewChat,
-        onCloseAfterThankYou,
-        previewTyping: onPreviewTyping,
-        isTyping
-      }
-    )
-  ] });
+  return menusLoaded && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["axos", "Axos"].includes(project) ? chatbotAXB : chatbotUFB,
+      children: [
+        /* @__PURE__ */ jsx(Bubble, { onClick: handleClick, project }),
+        /* @__PURE__ */ jsx(
+          ChatWindow,
+          {
+            status,
+            virtualAgent: agent_virtual.current,
+            messages,
+            onSend: onSendMessage,
+            endChat: onEndChat,
+            onClose,
+            onNewChat: onEndAndStartNewChat,
+            onCloseAfterThankYou,
+            previewTyping: onPreviewTyping,
+            isTyping
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   Chatbot

package/dist/Chatbot/useHeadlessChat.js

@@ -76,8 +76,7 @@ function useHeadlessChat({
     let chatTimeoutHandler;
     async function init() {
       setStatus("connecting");
-      const { Client, Logger, consoleLoggerHandler } = await import("@ujet/websdk-headless");
-      if (debug) Logger.addHandler(consoleLoggerHandler);
+      const { Client } = await import("@ujet/websdk-headless");
       try {
         clientRef.current = new Client({
           companyId,

package/dist/Chevron/index.js

@@ -2,21 +2,131 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import SvgArrowIcon from "../icons/ArrowIcon/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
+import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/Chatbot/ChatWindow.css';import '../assets/Chatbot/Bubble.css';import '../assets/Chatbot/Chatbot.css';import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/Insight/Insight.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/Modal/Modal.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/ufb.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css                                */
 /* empty css                                   */
 /* empty css                               */
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
-import { Interstitial } from "../Interstitial/Interstitial.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../AlertBanner/AlertBanner.css.js";
 import { getVariant } from "../utils/getVariant.js";
 import { useState } from "react";
+import "../Article/Article.css.js";
+import { Interstitial } from "../Interstitial/Interstitial.js";
+import { chevron, chevron_wrapper } from "./Chevron.css.js";
+/* empty css                                */
+import { useGlobalContext } from "../Modal/contextApi/store.js";
 import clsx from "clsx";
 import "../Button/Button.css.js";
 import "react-use";
-import { chevron, chevron_wrapper } from "./Chevron.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+import "../IconBillboard/IconBillboard.css.js";
+import "../Calculators/calculator.css.js";
+import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../Table/Table.css.js";
+import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+import "../Input/Dropdown.css.js";
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputAmount.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
+import "../Input/RadioButton.js";
+import "../Input/PercentageInput.js";
+import "react-hook-form";
+import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
+import "../Forms/SalesforceFieldsForm.js";
+/* empty css                                          */
+/* empty css                                          */
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Inputs/Input.css.js";
+/* empty css                                                         */
+import "../Hyperlink/Hyperlink.css.js";
+/* empty css                                                      */
+import "iframe-resizer";
+/* empty css                                                                                */
+import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
+/* empty css                                    */
+import "react-dom";
 /* empty css                                */
-import { useGlobalContext } from "../Modal/contextApi/store.js";
+import "../Auth/SignInPassword.js";
+/* empty css                                              */
+/* empty css                                          */
+/* empty css                                    */
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                   */
+/* empty css                                    */
+/* empty css                                   */
+import "../Chatbot/store/chat.js";
+import "../Chatbot/Chatbot.js";
+/* empty css                                       */
+import "../Chatbot/store/messages.js";
+/* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
+import "next/image.js";
+import "../HeroBanner/LargeBanner.css.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                          */
+/* empty css                                                         */
+/* empty css                                            */
+import "../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                        */
+/* empty css                                              */
+/* empty css                                                      */
+/* empty css                                            */
+import "../LandingPageHeader/LandingPageHeader.css.js";
+/* empty css                                                      */
+import "next/navigation.js";
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+import "next/link.js";
+/* empty css                                                   */
+/* empty css                                                      */
+/* empty css                                                       */
+/* empty css                                                   */
+/* empty css                                                     */
+import "../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                 */
+/* empty css                                          */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+/* empty css                                        */
+/* empty css                                */
+/* empty css                                                  */
+/* empty css                                                */
+/* empty css                                              */
 const Chevron = ({
   children,
   variant,