Merge pull request #2019 from breatheco-de/main

Merge main into dev

Author: tommygonzaleza

bun.lock

@@ -86,6 +86,7 @@
     "js-md5": "^0.8.3",
     "katex": "^0.16.8",
     "markdown-to-jsx": "7.2.0",
+    "mermaid": "^11.6.0",
     "next": "^13.4.1",
     "next-redux-wrapper": "8.1.0",
     "next-remove-imports": "^1.0.11",

package.json

@@ -110,7 +110,7 @@
   },
   "build-connector": {
     "what-you-will": "Learn by building",
-    "description": "When learning to code at your own pace, having access to video tutorials, code examples, and continuous, real-time feedback is crucial to succeed. The tasks you'll tackle will closely resemble those encountered in a real-world tech position. Here's a glimpse of what you'll be working on:",
+    "description": "When learning at your own pace, having access to video tutorials, code examples, and continuous, real-time feedback is crucial to succeed. The tasks you'll tackle will closely resemble those encountered in a real-world tech position. Here's a glimpse of what you'll be working on:",
     "build": "real-life projects"
   },
   "why-learn-4geeks-connector": {
@@ -394,9 +394,9 @@
   },
   "job-section": {
     "image": "/static/images/happy-male-with-laptop.png",
-    "title": "Get prepared for a new career",
+    "title": "Get an exclusive 30% discount on Beyond the Resume",
     "subtitle": "Improve your CV, portfolio, GitHub profile, and social media profiles.",
-    "description": "Get access to exercises that simulate real-life interviews curated from the companies actively hiring. At no additional cost to you and without deducting anything from the salary of the job offer you get.",
+    "description": "Earn an exclusive discount on Beyond the Resume after completing the course, a program designed to help you with career topics, from optimizing your professional profile to excelling in interviews.",
     "button": "Join now!",
     "button-link": "#pricing"
   }

public/locales/en/course.json

@@ -1,5 +1,5 @@
 {
-  "course-content-text": "Prepárate para obtener un trabajo con nuestro syllabus",
+  "course-content-text": "Prepárate para obtener un trabajo con nuestro curriculum",
   "course-content-description": "Hemos ajustado nuestro contenido del curso con cientos de posiciones laborales para prepararte para una entrada exitosa en el mundo de la tecnología.",
   "students-enrolled-count": "+{{count}} estudiantes inscritos",
   "students-enrolled": "cientos de estudiantes inscritos",
@@ -110,7 +110,7 @@
   },
   "build-connector": {
     "what-you-will": "Aprende construyendo",
-    "description": "Cuando aprendes a programar a tu propio ritmo, tener acceso a tutoriales en video, ejemplos de código y retroalimentación continua en tiempo real es crucial para tener éxito. Las tareas que abordarás se asemejarán estrechamente a las encontradas en una posición tecnológica del mundo real. Aquí tienes un vistazo de en qué estarás trabajando:",
+    "description": "Cuando aprendes a tu propio ritmo, tener acceso a tutoriales en video, ejemplos de código y retroalimentación continua en tiempo real es crucial para tener éxito. Las tareas que abordarás se asemejarán estrechamente a las encontradas en una posición tecnológica del mundo real. Aquí tienes un vistazo de en qué estarás trabajando:",
     "build": "proyectos de la vida real",
     "link": "#pricing"
   },
@@ -329,19 +329,16 @@
       {
         "type": "lesson",
         "title": "Lecturas",
-        "qty": 45,
         "icon": "book"
       },
       {
         "type": "exercise",
         "title": "Ejercicios interactivos",
-        "qty": 584,
         "icon": "strength"
       },
       {
         "type": "project",
         "title": "Proyectos interactivos",
-        "qty": 28,
         "icon": "laptop-code"
       },
       {
@@ -385,7 +382,7 @@
     "image": "/static/images/certificate-preview.webp",
     "title": "Certifícate en tu tecnología favorita",
     "description": "Tu certificado de 4Geeks abrirá puertas a oportunidades profesionales con nuestra extensa red de empresas en todo el mundo. Respaldado por instituciones internacionales, representa un estándar reconocido a nivel global, desbloqueando diversos caminos profesionales.",
-    "button": "Ver precios",
+    "button": "Empieza ahora",
     "button-link": "#pricing"
   },
   "havent-decided": {
@@ -398,10 +395,10 @@
   },
   "job-section": {
     "image": "/static/images/happy-male-with-laptop.png",
-    "title": "Prepárate para una carrera nueva",
+    "title": "Obtén un descuento exclusivo de 30% en Beyond the Resume",
     "subtitle": "Mejora tu CV, portafolio, perfil de GitHub, y el perfil de tus redes sociales.",
-    "description": "Obtén acceso a ejercicios que simulan entrevistas de la vida real, obtenidas de empresas que están contratando activamente. Por ningún costo adicional para ti y sin quitarte nada del salario de la oferta de trabajo que obtengas.",
-    "button": "Únete ahora",
+    "description": "Obtén un descuento exclusivo en Beyond the Resume al completar el curso, un programa diseñado para ayudarte con temas de carrera, desde optimizar tu perfil profesional hasta destacar en entrevistas.",
+    "button": "Empieza ahora",
     "button-link": "#pricing"
   }
 }

public/locales/es/course.json

@@ -270,7 +270,10 @@ function PaymentInfo({ setShowPaymentDetails }) {
   };
 
   const handleSubmit = async (actions, values) => {
-    const resp = await bc.payment().addCard(values);
+    const resp = await bc.payment().addCard({
+      ...values,
+      academy: selectedPlanCheckoutData?.owner?.id,
+    });
     const data = await resp.json();
     setIsSubmittingCard(false);
 

src/components/Checkout/PaymentInfo.jsx

@@ -166,7 +166,7 @@ function ServiceSummary({ service }) {
         },
       });
     }
-    const resp = await bc.payment().addCard(values);
+    const resp = await bc.payment().addCard({ ...values, academy: service.academy.id });
     const data = await resp.json();
     setIsSubmittingCard(false);
     if (resp.ok) {

src/components/Checkout/ServiceSummary.jsx

@@ -1,22 +1,20 @@
 import PropTypes from 'prop-types';
 import { Flex } from '@chakra-ui/react';
-import useTranslation from 'next-translate/useTranslation';
 import Heading from './Heading';
 import useStyle from '../hooks/useStyle';
 import Text from './Text';
 import AcordionList from './AcordionList';
 
-function CourseContent({ data, ...rest }) {
+function CourseContent({ data, courseContentText, courseContentDescription, ...rest }) {
   const { hexColor } = useStyle();
-  const { t } = useTranslation('course');
 
   return (
     <Flex gridGap="12px" flexDirection="column">
       <Heading as="h2" size={{ base: '20px', md: '34px' }}>
-        {t('course-content-text')}
+        {courseContentText}
       </Heading>
       <Text size={{ base: '16px', md: '18px' }} color={hexColor.fontColor2}>
-        {t('course-content-description')}
+        {courseContentDescription}
       </Text>
 
       <AcordionList defaultIndex={0} list={data} {...rest} />
@@ -25,8 +23,12 @@ function CourseContent({ data, ...rest }) {
 }
 CourseContent.propTypes = {
   data: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])),
+  courseContentText: PropTypes.string,
+  courseContentDescription: PropTypes.string,
 };
 CourseContent.defaultProps = {
   data: {},
+  courseContentText: '',
+  courseContentDescription: '',
 };
 export default CourseContent;

src/components/CourseContent.jsx

@@ -13,6 +13,7 @@ import tomorrow from '../syntaxHighlighter/tomorrow';
 import { slugify } from '../../../utils';
 import Text from '../../Text';
 import Image from '../../Image';
+import MermaidRenderer from '../MermaidRenderer';
 
 export function generateId(children) {
   const text = children ? children
@@ -87,6 +88,13 @@ export function MDLink({ children, href }) {
 export function Code({ inline, showLineNumbers, showInlineLineNumbers, className, children }) {
   const match = /language-(\w+)/.exec(className || '');
 
+  console.log('LENGUAGE ', match);
+
+  if (match && match.includes('mermaid')) {
+    console.log(children, 'Children');
+    return <MermaidRenderer code={children[0]} />;
+  }
+
   return !inline && match ? (
     <SyntaxHighlighter
       showLineNumbers={showLineNumbers}

src/components/MarkDownParser/MDComponents/index.jsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import mermaid from 'mermaid';
+import PropTypes from 'prop-types';
+
+function MermaidRenderer({ code }) {
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: true });
+    mermaid.contentLoaded();
+  }, []);
+
+  return <div className="mermaid">{code}</div>;
+}
+
+MermaidRenderer.propTypes = {
+  code: PropTypes.string.isRequired,
+};
+export default MermaidRenderer;

src/components/MarkDownParser/MermaidRenderer.jsx

@@ -35,7 +35,7 @@ import { getAllMySubscriptions } from '../../handlers/subscriptions';
 
 function Navbar({ translations, pageProps }) {
   const [uniqueLanguages, setUniqueLanguages] = useState([]);
-  const { location } = useSession();
+  const { location, isLoadingLocation } = useSession();
   const { isAuthenticated, isLoading, user, logout, cohorts } = useAuth();
   const [navbarItems, setNavbarItems] = useState([]);
   const [mktCourses, setMktCourses] = useState([]);
@@ -135,8 +135,10 @@ function Navbar({ translations, pageProps }) {
   };
 
   useEffect(() => {
-    fetchMktCourses();
-  }, [locale]);
+    if (!isLoadingLocation) {
+      fetchMktCourses();
+    }
+  }, [locale, isLoadingLocation]);
 
   useEffect(() => {
     if (pageProps?.existsWhiteLabel) {