Merge pull request #1748 from gustavomm19/rigo-context

Set rigobot context in bootcamp page

public/locales/en/dashboard.json

@@ -121,7 +121,7 @@
     "how-to-deliver": "How to deliver projects",
     "how-to-deliver-text": "Please submit a Github URL that points to your project as a Github repository. <a class='link' target='blank' href='{{link}}'>How to deliver projects</a>",
     "handler-text": "Deliver assignment",
-    "mandatory-message": "You have {{count}} mandatory projects to complete before graduation.",
+    "mandatory-message": "It looks like you need to complete at least {{count}} open projects before you can earn you certificate",
     "deliver-confirm": "I confirm that this submission is entirely my own work, and I understand the consequences of violating the academy terms and conditions.",
     "see-mandatory-projects": " See mandatory projects",
     "file-upload": "Upload one or more files with no more than 10MB in the following formats: ",

public/locales/es/dashboard.json

@@ -122,7 +122,7 @@
     "how-to-deliver": "Cómo entregar proyectos",
     "how-to-deliver-text": "Envíe una URL de Github que apunte a su proyecto como un repositorio de Github. <a class='link' target='blank' href='{{link}}'>Cómo entregar proyectos</a>",
     "handler-text": "Entregar proyecto",
-    "mandatory-message": "Tienes {{count}} proyectos obligatorios para completar antes de graduarte.",
+    "mandatory-message": "Parece que necesitas completar al menos {{count}} proyectos abiertos antes de poder obtener tu certificado.",
     "deliver-confirm": "Confirmo que esta entrega es completamente mi propio trabajo y entiendo las consecuencias de violar los términos y condiciones de la academia.",
     "see-mandatory-projects": " Ver proyectos obligatorios",
     "file-upload": "Sube uno o más archivos con un máximo de 10 MB en los siguientes formatos: ",

src/common/components/ShowPrices.jsx

@@ -10,7 +10,6 @@ import Heading from './Heading';
 import Text from './Text';
 import useSignup from '../store/actions/signupAction';
 import useStyle from '../hooks/useStyle';
-import useRigo from '../hooks/useRigo';
 
 function PlanCard({ item, handleSelect, selectedId, isCouponAvailable }) {
   const { hexColor, backgroundColor2 } = useStyle();
@@ -83,7 +82,6 @@ function ShowPrices({
   const { t } = useTranslation('profile');
   const { hexColor, fontColor, disabledColor, featuredColor } = useStyle();
   const router = useRouter();
-  const { isRigoInitialized, rigo } = useRigo();
   const { getPriceWithDiscount, state } = useSignup();
   const { selfAppliedCoupon } = state;
 
@@ -133,13 +131,6 @@ function ShowPrices({
     if (dataList.length === 1) {
       handleSelect(dataList[0]);
     }
-    if (isRigoInitialized) {
-      const context = document.body.innerText;
-
-      rigo.updateOptions({
-        context,
-      });
-    }
   }, []);
 
   const handleSelectFinance = (index) => {

src/pages/bootcamp/[course_slug].jsx

@@ -81,6 +81,11 @@ export async function getStaticProps({ locale, locales, params }) {
     };
   }
 
+  const syllabusSlug = data.syllabus[0]?.slug;
+
+  const respSyll = await axios.get(`${BREATHECODE_HOST}/v1/admissions/syllabus/version?slug=${syllabusSlug}`);
+  const syllabus = respSyll?.data[0];
+
   return {
     props: {
       seo: {
@@ -96,6 +101,7 @@ export async function getStaticProps({ locale, locales, params }) {
         card: 'default',
       },
       data,
+      syllabus,
     },
   };
 }
@@ -159,7 +165,7 @@ function CouponTopBar() {
   );
 }
 
-function CoursePage({ data }) {
+function CoursePage({ data, syllabus }) {
   const { state } = useSignup();
   const { selfAppliedCoupon } = state;
   const showBottomCTA = useRef(null);
@@ -271,16 +277,30 @@ function CoursePage({ data }) {
   const featuredBullets = getAlternativeTranslation('featured-bullets', { returnObjects: true }) || [];
 
   useEffect(() => {
-    if (isRigoInitialized && data.course_translation && !initialDataIsFetching) {
-      const context = document.body.innerText;
+    if (isRigoInitialized && data.course_translation && !initialDataIsFetching && planData?.slug) {
+      // const context = document.body.innerText;
+      const plansContext = planData.planList.map((plan) => `
+        - ${plan.title}
+        price: ${plan.priceText}
+        period: ${plan.period_label}
+      `);
+      const syllabusContext = syllabus?.json
+        ? syllabus.json.days
+          .map(({ label, description }) => `- Title: ${typeof label === 'object' ? (label[lang] || label.us) : label}, Description: ${typeof description === 'object' ? (description[lang] || description.us) : description}`)
+        : '';
+      const context = `
+        description: ${data.course_translation?.description}
+        ${syllabusContext ? `Modules: ${syllabusContext}` : ''}
+        plans: ${plansContext}
+      `;
 
       rigo.updateOptions({
         showBubble: false,
         completions,
         context,
       });
     }
-  }, [isRigoInitialized, lang, initialDataIsFetching]);
+  }, [isRigoInitialized, lang, initialDataIsFetching, planData]);
 
   const getElementTopOffset = (elem) => {
     if (elem && isWindow) {
@@ -484,6 +504,11 @@ function CoursePage({ data }) {
     getInitialData();
   }, [lang, pathname]);
 
+  useEffect(() => {
+    console.log('planData');
+    console.log(planData);
+  }, [planData]);
+
   useEffect(() => {
     if (isAuthenticated) {
       getAllMySubscriptions().then((subscriptions) => {
@@ -1024,10 +1049,12 @@ function CoursePage({ data }) {
 
 CoursePage.propTypes = {
   data: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array])),
+  syllabus: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])),
 };
 
 CoursePage.defaultProps = {
   data: {},
+  syllabus: null,
 };
 
 export default CoursePage;

src/pages/bootcamp/completion-jobs.json

@@ -1,29 +1,4 @@
 [
-  {
-    "prompt": "How much is the BootCamp?",
-    "answer": "The BootCamp price is $500, and currently we have a discount of 25% with a resulting price of 375$, and you can pay the BootCamp in 3 or 5 months with no interest.",
-    "DOMTarget": ""
-  },
-  {
-    "prompt": "Is there any discount for the BootCamp?",
-    "answer": "Currently there is a discount of 25% with a resulting price of 375$",
-    "DOMTarget": ""
-  },
-  {
-    "prompt": "Do you have financing plans?",
-    "answer": "Yes, you can pay the BootCamp in 3 or 5 months with no interest.",
-    "DOMTarget": ""
-  },
-  {
-    "prompt": "How long does it take to complete the BootCamp?",
-    "answer": "The BootCamp is self-paced and it should take between 4 and 8 months to complete",
-    "DOMTarget": ""
-  },
-  {
-    "prompt": "What will I be ready for after completing the program?",
-    "answer": "After completing the program you will have all the knowledge and experience to start an entry-level job in the tech industry",
-    "DOMTarget": ""
-  },
   {
     "prompt": "Will I get a certificate after finishing the program?",
     "answer": "Yes, if you finish the program and all the mandatory tasks have been accepted, then you will get a certificate that will help you a lot to get a job.",
@@ -36,7 +11,7 @@
   },
   {
     "prompt": "Who is helping me if I need help?",
-    "answer": "The program includes 4 one-on-one mentoring sessions with an expert, a chat support where a mentor will help you with your questions, and for instant feedback, you can get help from Rigobot which has been trained to help you, knowing what you've done at 4Geeks and what you are trying to learn, so it's very accurate.",
+    "answer": "It from 2 to 4 (depending on the program) one-on-one mentoring sessions with an expert, a chat support where a mentor will help you with your questions, and for instant feedback, you can get help from Rigobot which has been trained to help you, knowing what you've done at 4Geeks and what you are trying to learn, so it's very accurate.",
     "DOMTarget": ""
   }
 ]

src/pages/how-to/[slug]/index.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import getT from 'next-translate/getT';
 import Head from 'next/head';
 import Link from '../../../common/components/NextChakraLink';
-import MarkDownParser from '../../../common/components/MarkDownParser';
+import ArticleMarkdown from '../../../common/components/MarkDownParser/ArticleMarkdown';
 import getMarkDownContent from '../../../common/components/MarkDownParser/markdown';
 import { MDSkeleton } from '../../../common/components/Skeleton';
 import Heading from '../../../common/components/Heading';
@@ -265,7 +265,7 @@ export default function HowToSlug({ data, markdown }) {
             className={`markdown-body ${useColorModeValue('light', 'dark')}`}
           >
             {markdown ? (
-              <MarkDownParser assetData={data} content={markdownData.content} isPublic withToc={data.enable_table_of_content} />
+              <ArticleMarkdown assetData={data} content={markdownData.content} isPublic withToc={data.enable_table_of_content} />
             ) : (
               <MDSkeleton />
             )}

src/pages/technology/[slug].jsx

@@ -204,7 +204,7 @@ export const getStaticProps = async ({ params, locale, locales }) => {
 function LessonByTechnology({ assetData, technologyData, techsBySortPriority, count, coursesForTech, workShopsForTech, marketingInfo, isSortPriorityOne, featuredCourseSlug }) {
   const { t, lang } = useTranslation('technologies');
   const { isAuthenticated } = useAuth();
-  const { fontColor } = useStyle();
+  const { fontColor, colorMode } = useStyle();
   const [isDragging, setIsDragging] = useState(false);
   const [isAtEnd, setIsAtEnd] = useState(false);
   const [isAtStart, setIsAtStart] = useState(true);
@@ -314,7 +314,7 @@ function LessonByTechnology({ assetData, technologyData, techsBySortPriority, co
                 bottom="0"
                 width="100px"
                 pointerEvents="none"
-                background="linear-gradient(to right, white, rgba(255, 255, 255, 0))"
+                background={`linear-gradient(to right, ${colorMode}, rgba(255, 255, 255, 0))`}
                 zIndex="2"
               />
             )}
@@ -381,7 +381,7 @@ function LessonByTechnology({ assetData, technologyData, techsBySortPriority, co
                 bottom="0"
                 width="100px"
                 pointerEvents="none"
-                background="linear-gradient(to left, white, rgba(255, 255, 255, 0))"
+                background={`linear-gradient(to left, ${colorMode}, rgba(255, 255, 255, 0))`}
                 zIndex="2"
               />
             )}