Merge main into dev

package.json

@@ -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",

public/locales/en/course.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/es/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"
   }
 }

src/components/Checkout/PaymentInfo.jsx

@@ -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/ServiceSummary.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/CourseContent.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/MarkDownParser/MDComponents/index.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/MermaidRenderer.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/Navbar/index.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) {

src/components/PhoneInput/index.jsx

@@ -48,11 +48,15 @@ function PhoneInput({
   const dropdownMenuRef = useRef();
   const [validStatus, setValidStatus] = useState({ valid: true });
   const regex = {
-    phone: /^(?!(\d{2,})\1+)(?!(\d+)\2{3,})(\+\d{1,3})?(\d{8,10})$/,
+    phone: /^(?!(\d{2,})\1+)(?!(\d+)\2{3,})(\+\d{1,3})?(\d{8,15})$/,
   };
   const highlightCountryIndex = 0;
 
   const getCountryPhoneMask = () => {
+    if (selectedCountry.dialCode === '54') {
+      // Argentina needs a longer mask with parentheses around area code
+      return `+${selectedCountry.dialCode} (99) 9999 9999 9999`;
+    }
     const getMask = countriesList.find(
       (mask) => mask.iso === selectedCountry?.iso2?.toUpperCase(),
     );
@@ -169,7 +173,7 @@ function PhoneInput({
     const prefixCode = prefix + selectedCountry.dialCode;
 
     // Gets the character of the formatted phone number
-    const formatOfCharacters = e.target.value.match(/[^A-Za-z0-9 ]/g);
+    const formatOfCharacters = e.target.value.match(/[^A-Za-z0-9 ]/g) || [];
     const prefixLength = selectedCountry.isAreaCode
       ? prefixCode.length + formatOfCharacters.length
       : prefixCode.length;
@@ -178,18 +182,37 @@ function PhoneInput({
     const input = e.target.value.substr(prefixLength);
     setPhoneNumber(prefixCode + input);
 
-    const cleanedPhoneInput = `+${(prefixCode + input).match(/\d+/g).join('')}`;
+    const cleanedPhoneInput = `+${(prefixCode + input).match(/\d+/g)?.join('') || ''}`;
 
-    isValid = required === false ? true : regex.phone.test(cleanedPhoneInput);
-    if (isValid !== validStatus) {
+    // Special handling for Argentina (country code 54)
+    if (selectedCountry.dialCode === '54') {
+      // Argentina phone numbers: +54 (area code) local number
+      const digitsOnly = cleanedPhoneInput.replace(/\D/g, '');
+      // Length limits: country code + area code + number
+      const MIN_LENGTH = 3; // At least country code + 1 digit
+      const MAX_LENGTH = 15; // Reasonable maximum for Argentine numbers
+      if (required === false) {
+        isValid = true;
+      } else if (digitsOnly.length <= 2) {
+        // Too short (just country code or less)
+        isValid = false;
+      } else if (digitsOnly.length > MAX_LENGTH) {
+        // Too long (unreasonable number)
+        isValid = false;
+      } else {
+        isValid = true;
+      }
+    } else {
+      isValid = required === false ? true : regex.phone.test(cleanedPhoneInput);
+    }
+    if (isValid !== validStatus.valid) {
       setValidStatus({
         valid: isValid,
         msg: isValid ? 'Ok' : errorMsg,
       });
     }
     setVal({
       ...formData,
-      // phone: { ...phoneFormValues, value: cleanedPhoneInput, valid: true },
       phone: cleanedPhoneInput,
     });
   };
@@ -241,14 +264,8 @@ function PhoneInput({
               value={phoneNumber}
               type="phone"
               id={id || 'phone'}
-              // mask="+1\(999) 999-9999"/
               mask={getCountryPhoneMask()}
               maskChar=""
-              // formatChars={{
-              //   "9": "[0-9]",
-              //   "a": "[A-Za-z]",
-              //   "*": "[A-Za-z0-9]"
-              // }}
             />
             <FormErrorMessage>{form.errors.phone}</FormErrorMessage>
           </FormControl>

src/components/ShowPrices.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Box, Button, Flex, Grid,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import useTranslation from 'next-translate/useTranslation';
 import Heading from './Heading';
@@ -13,7 +13,6 @@ import useStyle from '../hooks/useStyle';
 import Icon from './Icon';
 import MktTechnologies from './MktTechnologies';
 import { currenciesSymbols } from '../utils/variables';
-import { SessionContext } from '../context/SessionContext';
 
 function PlanButton({
   plan,
@@ -62,8 +61,6 @@ function ShowPrices({
   const router = useRouter();
   const { applyDiscountCouponsToPlans, state } = useSignup();
   const { selfAppliedCoupon } = state;
-  const { location } = useContext(SessionContext);
-  const isSpain = location?.country?.toLowerCase() === 'spain' || location?.country?.toLowerCase() === 'españa';
 
   const tiersTypes = {
     subscriptions: applyDiscountCouponsToPlans(list, selfAppliedCoupon) || data?.pricing.list || [],
@@ -93,14 +90,6 @@ function ShowPrices({
     return '';
   };
 
-  const getSpanishPrice = (plan, priceType) => {
-    if (plan.period === 'MONTH' && priceType === 'price') return '99.99€';
-    if (plan.period === 'MONTH' && priceType === 'lastPrice') return '199.99€';
-    if (plan.period === 'YEAR' && priceType === 'price') return '749.99€';
-    if (plan.period === 'YEAR' && priceType === 'lastPrice') return '1499.99€';
-    return '749.99€';
-  };
-
   const getPlanLabel = (plan) => {
     switch (plan.period) {
       case 'YEAR':
@@ -310,7 +299,7 @@ function ShowPrices({
                   fontWeight="bold"
                   fontFamily="Space Grotesk Variable"
                 >
-                  {isSpain ? getSpanishPrice(selectedPlan, 'price') : selectedPlan.priceText}
+                  {selectedPlan.priceText}
 
                   {selectedPlan.period !== 'FINANCING' && selectedPlan.period !== 'ONE_TIME' && (
                     <Text as="span" style={{ fontSize: '12px', fontWeight: 'normal' }}>
@@ -321,7 +310,7 @@ function ShowPrices({
                 </Text>
                 <Flex gap="10px" alignItems="center" direction="column">
                   <Text as="span" fontSize="md" color="#01455E" textDecoration="line-through">
-                    {isSpain ? getSpanishPrice(selectedPlan, 'lastPrice') : selectedPlan.lastPrice}
+                    {selectedPlan.lastPrice}
                   </Text>
                   {selfAppliedCoupon && (
                     <Text as="span" fontSize="xs" color="#01455E">