Merge pull request #1761 from breatheco-de/development

Development

.env.example

@@ -13,7 +13,7 @@ KV_REST_API_URL=ffffffffffffffffffffffffff
 SYLLABUS="full-stack,web-development"
 
 # Users will by this plan if no other has been specified
-BASE_PLAN=sample-plan
+BASE_PLAN=basic
 
 TAG_MANAGER_KEY=GTM-XXXXXXX
 GOOGLE_GEO_KEY=A101012nEx4MpL3k3Y011010

package.json

@@ -82,6 +82,7 @@
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.2.0",
+    "js-md5": "^0.8.3",
     "katex": "^0.16.8",
     "markdown-to-jsx": "7.2.0",
     "next": "^13.4.1",
@@ -125,7 +126,7 @@
     "remark-react": "9.0.1",
     "remark-toc": "8.0.1",
     "remark-variables": "1.4.9",
-    "rigobot-chat-bubble": "^0.0.59",
+    "rigobot-chat-bubble": "^0.0.63",
     "sharp": "^0.32.1",
     "socket.io-client": "^4.6.1",
     "styled-components": "5.3.10",

public/locales/en/common.json

@@ -144,11 +144,16 @@
   "see-instructions": "See instructions",
   "taskStatus": {
     "project-approved": "Project approved",
+    "pending-subtasks": "Take me there",
     "update-project-delivery": "Update project delivery",
     "send-project": "Send project",
     "mark-as-done": "Mark as done",
     "mark-as-not-done": "Mark as not done"
   },
+  "external":{
+    "title": "This is an external exercise",
+    "description": "<strong>\"{{projectName}}\"</strong> is an external exercise you will redirected to a new tab to do it; choose one of the following options to start working on the project:"
+  },
   "learnpack": {
     "title": "This is a Learnpack interactive exercise",
     "choose-open": "Choose how to open this project",

public/locales/en/course.json

@@ -38,7 +38,8 @@
     "description": "4Geeks.com is the first platform designed to maximize learning at your own pace. Join live sessions whenever you can, get help immediately with AI, and ask for one-on-one mentorships. All our content is fully interactive and video-enabled.",
     "button": "Try Rigobot for free",
     "link": "https://codespaces.new/breatheco-de/exercise-postcard",
-    "message": "Is there anything you want to know about the {{title}} program?"
+    "message": "Is there anything you want to know about the {{title}} program?",
+    "payment-methods": "- Credit Card. - Contact support for other options"
   },
   "featured-bullets": [
     {

public/locales/en/profile.json

@@ -99,13 +99,16 @@
       "active": "Active",
       "expired": "Expired",
       "cancelled": "Cancelled",
-      "completed": "Completed"
+      "completed": "Completed",
+      "error": "Error"
     },
     "cancel": "Cancel subscription",
     "upgrade": "Upgrade subscription",
     "upgrade-plan": "Upgrade financing plan",
     "payment-up-to-date": "Payments are up to date",
     "reactivate-subscription": "Reactivate subscription",
+    "contact-support": "Chat with support",
+    "manage-subscription": "Manage subscription",
     "duration-cancelled": "Duration: Cancelled",
     "upgrade-modal": {
       "choose_your_plan": "Choose your plan",

public/locales/en/program-card.json

@@ -25,7 +25,8 @@
     "active": "Active",
     "expired": "Expired",
     "cancelled": "Cancelled",
-    "completed": "Completed"
+    "completed": "Completed",
+    "error": "Error"
   },
   "prework-message": "You will have access to this cohort as soon as it starts!",
   "learn-more": "Learn more",

public/locales/en/syllabus.json

@@ -36,6 +36,7 @@
   "no-content-found": "No content found",
   "no-content-found-description": ">Unfortunately, the content you are looking for is not available at the specified path. We are constantly working on improvements and appreciate your understanding. If you need assistance or have additional questions, please do not hesitate to contact us. We are committed to providing you with the best service. Thank you for your patience and understanding.",
   "previous-page": "Previous",
+  "wait-a-sec": "Hey, wait a second!",
   "ask-to-done": "Would you like to mark this \"{{taskType}}\" as done before moving on?",
   "mark-later": "Mark as done later",
   "blank-page": "This content cannot be visualized inside of <a href='/'>4Geeks.com</a>, please <a href='{{url}}' target='_blank' rel='noopener noreferrer'>Click here</a> to open it on a new window",

public/locales/es/common.json

@@ -141,11 +141,16 @@
   "see-instructions": "Ver instrucciones",
   "taskStatus": {
     "project-approved": "Proyecto aprobado",
+    "pending-subtasks": "Llévame allí",
     "update-project-delivery": "Actualizar entrega de proyecto",
     "send-project": "Enviar proyecto",
     "mark-as-done": "Marcar como hecho",
     "mark-as-not-done": "Marcar como no hecho"
   },
+  "external":{
+    "title": "Este es un ejercicio externo",
+    "description": "<strong>\"{{projectName}}\"</strong> es un ejercicio externo, serás redireccionado a una nueva pestaña para hacerlo; elige una de las siguientes opciones para comenzar a trabajar en el proyecto:"
+  },
   "learnpack": {
     "title": "Este es un ejercicio interactivo de Learnpack",
     "choose-open": "Escoge como quieres abrir este proyecto",
@@ -158,6 +163,7 @@
       "project": "proyecto",
       "exercise": "ejercicio"
     },
+    "start-exercise": "Empezar ejercicio",
     "recommended": "Recomendado",
     "open-in-learnpack-button": {
       "text": "Abrir en la nube",

public/locales/es/course.json

@@ -39,7 +39,8 @@
     "description": "4Geeks.com es la primera plataforma diseñada para maximizar el aprendizaje a tu propio ritmo. Únete a sesiones en vivo cuando tu puedas, obtén ayuda de forma inmediata con IA y pide mentorías uno a uno. Todo nuestro contenido es totalmente interactivo y con videos.",
     "button": "Prueba Rigobot gratis",
     "link": "https://codespaces.new/breatheco-de/exercise-postcard",
-    "message": "¿Hay algo que quieras saber sobre el programa {{title}}?"
+    "message": "¿Hay algo que quieras saber sobre el programa {{title}}?",
+    "payment-methods": "- Tarjeta de crédito. - Contacta a soporte para mas opciones"
   },
   "featured-bullets": [
     {

public/locales/es/profile.json

@@ -99,13 +99,16 @@
       "active": "Activo",
       "expired": "Expirado",
       "cancelled": "Cancelado",
-      "completed": "Completado"
+      "completed": "Completado",
+      "error": "Error"
     },
     "cancel": "Cancelar suscripción",
     "upgrade": "Actualizar suscripción",
     "upgrade-plan": "Actualizar plan de financiación",
     "payment-up-to-date": "Los pagos están al día",
     "reactivate-subscription": "Reactivar suscripción",
+    "manage-subscription": "Administrar suscripción",
+    "contact-support": "Chatea con soporte",
     "duration-cancelled": "Duración: Cancelada",
     "upgrade-modal": {
       "choose_your_plan": "Elige tu plan",

public/locales/es/program-card.json

@@ -25,7 +25,8 @@
     "active": "Activo",
     "expired": "Expirado",
     "cancelled": "Cancelado",
-    "completed": "Completado"
+    "completed": "Completado",
+    "error": "Error"
   },
   "prework-message": "¡Tendrá acceso a esta cohorte tan pronto como comience!",
   "learn-more": "Ver curso",

public/locales/es/syllabus.json

@@ -36,6 +36,7 @@
   "no-content-found": "No se encontró contenido",
   "no-content-found-description": ">Lamentablemente, el contenido que buscas no está disponible en la ruta especificada. Estamos trabajando en mejoras continuas y valoramos tu comprensión. Si necesitas asistencia o tienes preguntas adicionales, no dudes en comunicarte con nosotros. Estamos comprometidos a brindarte el mejor servicio. Gracias por tu paciencia y comprensión.",
   "previous-page": "Anterior",
+  "wait-a-sec": "Hey, espera un segundo!",
   "ask-to-done": "¿Te gustaría marcar este \"{{taskType}}\" como completado antes de continuar?",
   "mark-later": "Marcar luego",
   "blank-page": "Este contenido no se puede visualizar dentro de <a href='/'>4Geeks.com</a>, please <a href='{{url}}' target='_blank' rel='noopener noreferrer'>Haga clic aquí</a> para abrirlo en una nueva ventana",

src/common/components/MarkDownParser/MDComponents/index.jsx

@@ -4,6 +4,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { Box, Checkbox, Link, useColorModeValue, Flex } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation';
 import ReactDOMServer from 'react-dom/server';
 import BeforeAfterSlider from '../../BeforeAfterSlider';
 import Heading from '../../Heading';
@@ -341,7 +342,7 @@ export function BeforeAfter({ before, after }) {
           setDelimerPercentPosition(currentPosition);
         });
       }
-      await doWithDelay(1000, () => {});
+      await doWithDelay(1000, () => { });
       for (let i = 1; i <= PARTS; i += 1) {
         await doWithDelay(timeout, () => {
           currentPosition += delta;
@@ -354,7 +355,7 @@ export function BeforeAfter({ before, after }) {
           setDelimerPercentPosition(currentPosition);
         });
       }
-      await doWithDelay(1000, () => {});
+      await doWithDelay(1000, () => { });
       for (let i = 1; i <= PARTS; i += 1) {
         await doWithDelay(timeout, () => {
           currentPosition -= delta;
@@ -436,12 +437,15 @@ export function DOMComponent({ children }) {
 }
 
 export function MDCheckbox({
-  index, children, subTasks, subTasksLoaded, newSubTasks, setNewSubTasks, updateSubTask,
+  index, children, subTasks, newSubTasks, setNewSubTasks, updateSubTask, subtaskFirstLoad, currentTask,
 }) {
-  const childrenData = children[1]?.props?.children || children;
   const [isChecked, setIsChecked] = useState(false);
+  const { lang } = useTranslation();
+  const taskStatus = { true: 'DONE', false: 'PENDING' };
+  const childrenData = children[1]?.props?.children || children;
 
   const cleanedChildren = childrenData.length > 0 && childrenData.filter((l) => l.type !== 'input');
+
   const domElement = <DOMComponent>{cleanedChildren}</DOMComponent>;
 
   const renderToStringClient = () => {
@@ -458,54 +462,61 @@ export function MDCheckbox({
   const text = renderToStringClient();
 
   const slug = typeof text === 'string' && slugify(text);
-  const currentSubTask = subTasks.find((task) => task?.id === slug);
+  const currentSubTask = subTasks.find((task) => slugify(task?.label) === slug);
 
   useEffect(() => {
-    // load checked tasks
-    const taskChecked = subTasks.some((task) => task?.id === slug && task?.status !== 'PENDING');
-    if (taskChecked) {
-      setIsChecked(true);
-    }
+    const subtaskCheked = subTasks.some((subtask) => subtask?.id === currentSubTask?.id && subtask?.status !== 'PENDING');
+    if (subtaskCheked) setIsChecked(true);
   }, [subTasks]);
 
-  const taskStatus = {
-    true: 'DONE',
-    false: 'PENDING',
-  };
-
   useEffect(() => {
-    if (subTasksLoaded) {
-      if (
-        newSubTasks?.length > 0 && newSubTasks.find((l) => l?.id === slug)
-      ) { return () => {}; }
-
-      if (currentSubTask) {
-        setNewSubTasks((prev) => {
-          const content = [...prev];
-          if (!content.some((subTask) => subTask.id === currentSubTask.id)) content.push(currentSubTask);
-          return content;
-        });
-      } else {
-        setNewSubTasks((prev) => {
-          const task = {
-            id: slug,
-            status: 'PENDING',
-            label: text,
-          };
-          const content = [...prev];
-          if (!content.some((subTask) => subTask.id === task.id)) content.push(task);
-          return content;
-        });
+    if (newSubTasks?.length > 0 && newSubTasks.find((l) => l?.id === slug)) return;
+    const prevSubtasks = localStorage.getItem(`prevSubtasks_${currentTask?.associated_slug}`);
+
+    if (prevSubtasks) {
+      try {
+        const prevParsedSubtasks = JSON.parse(prevSubtasks);
+        if (Array.isArray(prevParsedSubtasks)) {
+          setNewSubTasks((prev) => {
+            const content = [...prev];
+            const prevSubtask = prevParsedSubtasks.find((subtask) => subtask.position === content.length);
+            const task = {
+              id: slug,
+              position: content.length,
+              lang,
+              status: prevSubtask?.status || 'PENDING',
+              label: text,
+            };
+            if (!content.some((subTask) => subTask.id === task.id)) content.push(task);
+            return content;
+          });
+        }
+      } catch (error) {
+        console.error('Error al parsear prevSubtasks:', error);
       }
     }
-    return () => {};
-  }, [subTasksLoaded]);
+
+    setNewSubTasks((prev) => {
+      const content = [...prev];
+      const task = {
+        id: slug,
+        position: content.length,
+        lang,
+        status: 'PENDING',
+        label: text,
+      };
+      if (!content.some((subTask) => subTask.id === task.id)) content.push(task);
+      return content;
+    });
+  }, [subtaskFirstLoad]);
 
   const handleChecked = async () => {
     setIsChecked(!isChecked);
     const taskProps = {
-      id: slug,
+      id: currentSubTask.id,
       label: text,
+      lang: currentSubTask.lang,
+      position: currentSubTask.position,
       status: taskStatus[!isChecked],
     };
     if (subTasks?.length > 0) {
@@ -586,18 +597,19 @@ MDCheckbox.propTypes = {
   children: PropTypes.node.isRequired,
   index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   subTasks: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
-  subTasksLoaded: PropTypes.bool,
+  currentTask: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  subtaskFirstLoad: PropTypes.bool.isRequired,
   newSubTasks: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
   setNewSubTasks: PropTypes.func,
   updateSubTask: PropTypes.func,
 };
 MDCheckbox.defaultProps = {
   index: 0,
   subTasks: [],
-  subTasksLoaded: false,
   newSubTasks: [],
-  setNewSubTasks: () => {},
-  updateSubTask: () => {},
+  currentTask: {},
+  setNewSubTasks: () => { },
+  updateSubTask: () => { },
 };
 
 // MDText.propTypes = {