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

@@ -82,6 +82,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: {
@@ -97,6 +102,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);
@@ -259,16 +265,30 @@ function CoursePage({ data }) {
   const featurePrice = getPlanPrice().toLocaleLowerCase();
 
   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) {
@@ -471,6 +491,11 @@ function CoursePage({ data }) {
     getInitialData();
   }, [lang, pathname]);
 
+  useEffect(() => {
+    console.log('planData');
+    console.log(planData);
+  }, [planData]);
+
   useEffect(() => {
     if (isAuthenticated) {
       getAllMySubscriptions().then((subscriptions) => {
@@ -1002,10 +1027,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/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"
               />
             )}