Feat/chatbot lp

next/components/atoms/TypewriterConsole.js

@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef } from "react";
+import { Flex, Box } from "@chakra-ui/react";
+import ArrowIcon from "../../public/img/icons/arrowIcon";
+import Button from "../atoms/Button";
+import styles from "../../styles/typewriterConsole.module.css";
+
+export default function TypewriterConsole({
+  messages = [],
+  typingSpeed = 45,
+  deletingSpeed = 25,
+  pauseDuration = 2000,
+  maxWidth = "600px",
+  textBtn="",
+  onClickBtn=() => {},
+  isVariantBtn=false,
+  targetBtn="_self",
+  propsBtn={},
+}) {
+  const [displayText, setDisplayText] = useState("");
+  const messageIndexRef = useRef(0);
+  const isDeletingRef = useRef(false);
+  const charIndexRef = useRef(0);
+  const timeoutRef = useRef(null);
+
+  useEffect(() => {
+    if (!messages.length) return;
+
+    const tick = () => {
+      const currentMessage = messages[messageIndexRef.current];
+      const isDeleting = isDeletingRef.current;
+
+      if (!isDeleting) {
+        if (charIndexRef.current < currentMessage.length) {
+          charIndexRef.current += 1;
+          setDisplayText(currentMessage.slice(0, charIndexRef.current));
+          timeoutRef.current = setTimeout(tick, typingSpeed);
+        } else {
+          timeoutRef.current = setTimeout(() => {
+            isDeletingRef.current = true;
+            tick();
+          }, pauseDuration);
+        }
+      } else if (charIndexRef.current > 0) {
+        charIndexRef.current -= 1;
+        setDisplayText(currentMessage.slice(0, charIndexRef.current));
+        timeoutRef.current = setTimeout(tick, deletingSpeed);
+      } else {
+        isDeletingRef.current = false;
+        messageIndexRef.current = (messageIndexRef.current + 1) % messages.length;
+        timeoutRef.current = setTimeout(tick, typingSpeed);
+      }
+    };
+
+    timeoutRef.current = setTimeout(tick, typingSpeed);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [messages, typingSpeed, deletingSpeed, pauseDuration]);
+
+  return (
+    <Flex className={styles.console} maxWidth={maxWidth} aria-hidden="true">
+      <Box className={styles.text}>
+        {displayText}
+        <span className={styles.cursor} />
+      </Box>
+      <Button
+        target={targetBtn}
+        onClick={onClickBtn}
+        isVariant={isVariantBtn}
+        position="absolute"
+        bottom="24px"
+        right="24px"
+        marginLeft="8px"
+        color="#FFFFFF"
+        fill="#FFFFFF"
+        {...propsBtn}
+      >
+        {textBtn}
+        <ArrowIcon width="18px" height="18px" fill="currentColor" />
+      </Button>
+    </Flex>
+  );
+}

next/components/molecules/Footer.js

@@ -8,7 +8,7 @@ import Link from "../atoms/Link";
 import { isMobileMod } from "../../hooks/useCheckMobile.hook"
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-import { triggerGAEvent } from "../../utils";
+import { triggerGAEvent, trackNavigateToChatbotLp } from "../../utils";
 import Display from "../atoms/Text/Display";
 import LabelText from "../atoms/Text/LabelText";
 import BodyText from "../atoms/Text/BodyText";
@@ -54,18 +54,21 @@ function SocialLink({ href, icon }) {
   )
 }
 
-function FooterLink(props) {
+function FooterLink({ href, onClick, children, ...rest }) {
   return (
     <Link
       fontWeight="500"
       fontSize="16px"
       lineHeight="24px"
       color="#464A51"
-      target={props.href.startsWith("http") ? "_blank" : "_self"}
-      href={props.href}
+      target={href?.startsWith("http") ? "_blank" : "_self"}
+      href={href}
       _hover={{ opacity: 0.8 }}
-      {...props}
-    />
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </Link>
   )
 }
 
@@ -84,7 +87,8 @@ function TextFooterSimple({children, ...props}) {
 
 export default function Footer({ template, ocult = false }) {
   const { t } = useTranslation('common');
-  const { locale } = useRouter();
+  const { locale, pathname: pagePath } = useRouter();
+  const isMobile = isMobileMod();
 
   function handlerTriggerEvent(event, value) {
     triggerGAEvent(event, value)
@@ -216,6 +220,17 @@ export default function Footer({ template, ocult = false }) {
                                 "/bdpro"}>
                 {t('footer.products.DBPro')}
               </FooterLink>
+              <FooterLink
+                href="/chatbot-lp"
+                onClick={() => trackNavigateToChatbotLp({
+                  value: "footer",
+                  placement: "footer_products",
+                  pagePath,
+                  isMobile,
+                })}
+              >
+                {t('footer.products.chatbot')}
+              </FooterLink>
               {locale === 'pt' && (
                 <FooterLink href="https://info.basedosdados.org/bd-edu-cursos">
                   {t('footer.products.DBEdu')}
@@ -224,7 +239,7 @@ export default function Footer({ template, ocult = false }) {
             </SectionCategories>
 
             {locale === 'pt' && (
-              <SectionCategories title={t('footer.services.title')} marginBottom={isMobileMod() && "24px !important"}>
+              <SectionCategories title={t('footer.services.title')} marginBottom={isMobile && "24px !important"}>
                 <FooterLink
                   href="/services#diagnostico-de-maturidade"
                   onClick={() => handlerTriggerEvent("navigating_to_services", "footer")}
@@ -264,7 +279,7 @@ export default function Footer({ template, ocult = false }) {
               </SectionCategories>
             )}
 
-            <SectionCategories title={t('footer.resources.title')} marginBottom={isMobileMod() && "24px !important"}>
+            <SectionCategories title={t('footer.resources.title')} marginBottom={isMobile && "24px !important"}>
               <FooterLink href={
                             locale === "en" ? "/en/docs/home" :
                             locale === "es" ? "/es/docs/home" :
@@ -292,7 +307,7 @@ export default function Footer({ template, ocult = false }) {
               </FooterLink>
             </SectionCategories>
 
-            <SectionCategories title={t('footer.institutional.title')} marginBottom={isMobileMod() && "24px !important"}>
+            <SectionCategories title={t('footer.institutional.title')} marginBottom={isMobile && "24px !important"}>
               <FooterLink href="/about-us">
                 {t('footer.institutional.aboutUs')}
               </FooterLink>

next/components/molecules/Menu.js

@@ -32,7 +32,7 @@ import { ControlledInputSimple } from "../atoms/ControlledInput";
 import Link from "../atoms/Link";
 import Button from "../atoms/Button";
 import HelpWidget from "../atoms/HelpWidget";
-import { triggerGAEvent, triggerGAEventWithData, hasBDProSubscription, hasChatbotSubscription } from "../../utils";
+import { triggerGAEvent, triggerGAEventWithData, hasBDProSubscription, hasChatbotSubscription, trackNavigateToChatbotLp } from "../../utils";
 
 import LabelText from "../atoms/Text/LabelText";
 import BodyText from "../atoms/Text/BodyText";
@@ -68,13 +68,29 @@ function trackMenuOpenChatbot({
   });
 }
 
-function handleMenuLinkClick(href) {
+function navigateToChatbotLp(router, { menuPlacement, pagePath }) {
+  trackNavigateToChatbotLp({
+    value: "menu",
+    placement: menuPlacement,
+    pagePath,
+  });
+  router.push("/chatbot-lp");
+}
+
+function handleMenuLinkClick(href, { pagePath, placement } = {}) {
   if (href === "/services") {
     triggerGAEvent("navigating_to_services", "menu");
   }
   if (href === "/search") {
     triggerGAEvent("navigating_to_data", "menu");
   }
+  if (href === "/chatbot-lp") {
+    trackNavigateToChatbotLp({
+      value: "menu",
+      placement,
+      pagePath,
+    });
+  }
 }
 
 function MenuDrawer({ userData, isOpen, onClose, links, hasChatbotAccess, isUserPro }) {
@@ -157,7 +173,10 @@ function MenuDrawer({ userData, isOpen, onClose, links, hasChatbotAccess, isUser
                             letterSpacing="0.1px"
                             fontWeight="400"
                             href={c.href}
-                            onClick={() => handleMenuLinkClick(c.href)}
+                            onClick={() => handleMenuLinkClick(c.href, {
+                              pagePath,
+                              placement: "mobile_drawer_solutions",
+                            })}
                           >
                             {c.icon && c.icon} {c.name}
                           </Link>
@@ -176,7 +195,7 @@ function MenuDrawer({ userData, isOpen, onClose, links, hasChatbotAccess, isUser
                   letterSpacing="0.1px"
                   fontWeight="400"
                   href={elm}
-                  onClick={() => handleMenuLinkClick(elm)}
+                  onClick={() => handleMenuLinkClick(elm, { pagePath, placement: "mobile_drawer" })}
                 >
                   {key}
                 </Link>
@@ -203,8 +222,8 @@ function MenuDrawer({ userData, isOpen, onClose, links, hasChatbotAccess, isUser
             fontSize="20px"
             fontFamily="Roboto"
             fontWeight="400"
-            href={hasChatbotAccess ? "/chatbot" : "/prices"}
-            onClick={() => {
+            href={hasChatbotAccess ? "/chatbot" : "#"}
+            onClick={(e) => {
               onClose();
               if (hasChatbotAccess) {
                 trackMenuOpenChatbot({
@@ -214,6 +233,12 @@ function MenuDrawer({ userData, isOpen, onClose, links, hasChatbotAccess, isUser
                   isUserPro,
                   pagePath,
                 });
+              } else {
+                e.preventDefault();
+                navigateToChatbotLp(router, {
+                  menuPlacement: "mobile_drawer",
+                  pagePath,
+                });
               }
             }}
           >
@@ -391,8 +416,8 @@ function MenuDrawerUser({ userData, isOpen, onClose, isUserPro, haveInterprisePl
                 gap="6px"
                 color="#71757A"
                 fontWeight="400"
-                href={hasChatbotAccess ? "/chatbot" : "/prices"}
-                onClick={() => {
+                href={hasChatbotAccess ? "/chatbot" : "#"}
+                onClick={(e) => {
                   onClose()
                   if (hasChatbotAccess) {
                     trackMenuOpenChatbot({
@@ -402,6 +427,12 @@ function MenuDrawerUser({ userData, isOpen, onClose, isUserPro, haveInterprisePl
                       isUserPro,
                       pagePath,
                     })
+                  } else {
+                    e.preventDefault()
+                    navigateToChatbotLp(router, {
+                      menuPlacement: "mobile_drawer_user",
+                      pagePath,
+                    })
                   }
                 }}
               >
@@ -784,7 +815,10 @@ function DesktopLinks({
         href={url}
         padding="10px 0"
         gap="16px"
-        onClick={() => handleMenuLinkClick(url)}
+        onClick={() => handleMenuLinkClick(url, {
+          pagePath,
+          placement: "desktop_solutions_dropdown",
+        })}
         onMouseEnter={setFlag.on}
         onMouseLeave={setFlag.off}
       > 
@@ -867,7 +901,7 @@ function DesktopLinks({
               fontWeight="400"
               href={v}
               target={v.startsWith("https") ? "_blank" : null}
-              onClick={() => handleMenuLinkClick(v)}
+              onClick={() => handleMenuLinkClick(v, { pagePath, placement: "desktop" })}
             >
               {k}
             </Link>
@@ -991,7 +1025,10 @@ function DesktopLinks({
             : {
                 type: "button",
                 onClick: () => {
-                  router.push("/prices");
+                  navigateToChatbotLp(router, {
+                    menuPlacement: "desktop_header_right",
+                    pagePath,
+                  });
                 },
               })}
           minWidth="auto"
@@ -1152,6 +1189,10 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
           name: [t('exclusive_data')],
           href: "/bdpro"
         },
+        {
+          name: [t('chatbot_lp')],
+          href: "/chatbot-lp"
+        },
         {
           name: [t('courses')],
           href: "https://info.basedosdados.org/bd-edu-cursos"
@@ -1180,6 +1221,10 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
         {
           name: [t('exclusive_data')],
           href: "/en/bdpro"
+        },
+        {
+          name: [t('chatbot_lp')],
+          href: "/chatbot-lp"
         }
       ],
       [t('resources')]: [
@@ -1202,6 +1247,10 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
         {
           name: [t('exclusive_data')],
           href: "/es/bdpro"
+        },
+        {
+          name: [t('chatbot_lp')],
+          href: "/chatbot-lp"
         }
       ],
       [t('resources')]: [

next/components/organisms/componentsUserPage/PlansAndPayment.js

@@ -225,6 +225,17 @@ export default function PlansAndPayment ({ userData }) {
     }
   }, [plan, plans, userData, chatbotSubscriptionInfo])
 
+  useEffect(() => {
+    if (!plans || plan !== "") return
+    if (query.checkout !== "chatbot") return
+    if (hasChatbotSubscription(userData)) return
+
+    const planId = plans.bd_chatbot_year?._id
+    if (planId) {
+      setPlan(planId)
+    }
+  }, [query.checkout, plans, userData, plan])
+
   useEffect(() => {
     const planSelected = cookies.get('plan_selected');
     if (planSelected && plans) {

next/content/chatbot/FAQ/pt/available-data-chatbot.md

@@ -0,0 +1,9 @@
+---
+question: Quais dados estão disponíveis para consulta?
+categories: []
+keywords: []
+order: 3
+id: available-data-chatbot
+---
+
+O chatbot está conectado a mais de 740 tabelas que compõem o datalake público da BD. É uma fonte preciosa e em constante expansão, com dados sobre temas diversos: economia (CNPJ, RAIS, Caged), saúde (PNS, SINAN), educação (SAEB, Censo Educacional), demografia (Censo 2022, PNAD), meio ambiente e muito mais.

next/content/chatbot/FAQ/pt/chatbot-no-answer.md

@@ -0,0 +1,9 @@
+---
+question: O que fazer se o chatbot não encontrar uma resposta?
+categories: []
+keywords: []
+order: 9
+id: chatbot-no-answer
+---
+
+Para perguntas complexas, recomendamos dividir o pedido em perguntas menores e mais simples. Outra dica útil é mencionar o nome específico de uma coluna (como "município") ou pedir explicitamente para o chatbot buscar em um conjunto de dados que você já conheça.

next/content/chatbot/FAQ/pt/free-trial-chatbot.md

@@ -0,0 +1,9 @@
+---
+question: Posso testar o chatbot gratuitamente?
+categories: []
+keywords: []
+order: 5
+id: free-trial-chatbot
+---
+
+Sim. Oferecemos um período de teste gratuito de 7 dias para você conhecer a ferramenta. Após esse período, o chatbot faz parte de um plano de assinatura que garante perguntas ilimitadas e nos ajuda a manter nosso datalake público gratuito.