Merge pull request #1136 from ArielCalisaya/development

Updates for join cohort page
breatheco-de · Oct 5, 2023 · aaf044c · aaf044c
2 parents a0121b6 + 82d3285
commit aaf044c
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 57 deletions.
diff --git a/i18n.js b/i18n.js
@@ -22,7 +22,7 @@ module.exports = {
     '/interactive-coding-tutorials': ['projects'],
     '/interactive-coding-tutorials/technology/[technology]': ['projects'],
     '/interactive-exercise/[slug]': ['exercises', 'workshops'],
-    '/choose-program': ['choose-program', 'profile'],
+    '/choose-program': ['choose-program', 'dashboard', 'profile'],
     '/syllabus/[cohortSlug]/[lesson]/[lessonSlug]': ['syllabus', 'dashboard', 'projects'],
     '/survey/[surveyId]': ['survey'],
     '/mentorship': ['mentorship'],

diff --git a/public/locales/en/dashboard.json b/public/locales/en/dashboard.json
@@ -9,8 +9,14 @@
   "whiteLabeledText": "This course is brought to you thanks to our parnership with this university",
   "free-trial-msg": "You are currently on a free trial, some features might be limited. <a class='black-link' href='{{link}}'>Upgrade your plan</a> to have unlimited access!",
   "intro-video-title": "Welcome to coding introduction",
-  "join-next-cohort": "Join next cohort",
-  "join-cohort": "Join to {{cohortTitle}}",
+  "join-cohort-page": {
+    "seo-title": "Join to {{cohortTitle}}",
+    "cta-description": "Your current plan does not include access to this cohort, please upgrade to access the content.",
+    "cta-cohort-not-found": "This cohort does not exist or you don't have access to join it with your current plan.",
+    "cta-button": "Review plan",
+    "join-next-cohort":"Join next cohort"
+  },
+  "already-have-this-cohort": "Already have this cohort",
   "modules": {
     "read": "Read",
     "start": "Start",

diff --git a/public/locales/es/dashboard.json b/public/locales/es/dashboard.json
@@ -9,8 +9,14 @@
   "whiteLabeledText": "Este curso es traído a ti gracias a nuestra alianza con esta universidad.",
   "free-trial-msg": "Actualmente se encuentra en una prueba gratuita, algunas funciones pueden ser limitadas. ¡<a class='black-link' href='{{link}}'>Actualiza tu plan</a> para tener acceso ilimitado!",
   "intro-video-title": "Bienvenido a la introducción de codificación",
-  "join-next-cohort": "Únete a la cohorte",
-  "join-cohort": "Únete a {{cohortTitle}}",
+  "already-have-this-cohort": "Ya perteneces a esta cohorte",
+  "join-cohort-page": {
+    "seo-title": "Únete a {{cohortTitle}}",
+    "cta-description": "Tu plan actual no incluye acceso a esta cohorte, por favor actualiza para acceder al contenido.",
+    "cta-cohort-not-found": "Esta cohorte no existe o no tienes acceso para unirte con tu plan actual.",
+    "cta-button": "Revisar plan",
+    "join-next-cohort":"Únete a la cohorte"
+  },
   "modules": {
     "read": "Leer",
     "start": "Iniciar",

diff --git a/public/locales/es/footer.json b/public/locales/es/footer.json
@@ -16,7 +16,7 @@
     "items":[
       {
         "label": "NOSOTROS",
-        "href": "/about-us"
+        "href": "/es/sobre-nosotros"
       },
       {
         "label":"CONTACTO",

diff --git a/src/common/components/CallToAction.jsx b/src/common/components/CallToAction.jsx
@@ -7,7 +7,8 @@ import Text from './Text';
 
 function CallToAction({
   background, imageSrc, href, styleContainer, isExternalLink, title, text,
-  buttonText, width, onClick, margin, buttonsData, buttonStyle,
+  buttonText, width, onClick, margin, buttonsData, buttonStyle, fontSizeOfTitle,
+  isLoading,
 }) {
   return (
     <Box
@@ -44,7 +45,7 @@ function CallToAction({
       >
         <Box maxWidth="530px">
           {title && (
-          <Heading as="h5" fontSize="xsm" color="white" margin={0} marginBottom="11px">
+          <Heading as="h5" fontSize={fontSizeOfTitle} color="white" margin={0} marginBottom="11px">
             {title}
           </Heading>
           )}
@@ -70,7 +71,7 @@ function CallToAction({
           gridTemplateColumns={{ base: 'repeat(auto-fill, minmax(10rem, 1fr))', md: '' }}
         >
           {buttonText && (
-          <Button whiteSpace="wrap" as="a" style={buttonStyle} href={href} target={isExternalLink ? '_blank' : '_self'} padding="0.5rem 1rem" height="auto" marginY="auto" textTransform="uppercase" borderColor="white" color="white" variant="outline" onClick={onClick}>
+          <Button isLoading={isLoading} whiteSpace="wrap" as="a" style={buttonStyle} href={href} target={isExternalLink ? '_blank' : '_self'} padding="0.5rem 1rem" height="auto" marginY="auto" textTransform="uppercase" borderColor="white" color="white" variant="outline" onClick={onClick}>
             {buttonText}
           </Button>
           )}
@@ -81,6 +82,7 @@ function CallToAction({
               key={element.text}
               as="a"
               href={element.href}
+              isLoading={isLoading}
               target={element.isExternalLink ? '_blank' : '_self'}
               onClick={onClick}
               marginY="auto"
@@ -113,6 +115,8 @@ CallToAction.propTypes = {
   margin: PropTypes.string,
   onClick: PropTypes.func,
   buttonsData: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any]))),
+  fontSizeOfTitle: PropTypes.string,
+  isLoading: PropTypes.bool,
 };
 
 CallToAction.defaultProps = {
@@ -129,6 +133,8 @@ CallToAction.defaultProps = {
   margin: '0 auto',
   onClick: () => {},
   buttonsData: [],
+  fontSizeOfTitle: 'var(--heading-xsm)',
+  isLoading: false,
 };
 
 export default CallToAction;
diff --git a/src/common/components/LiveEvent/index.jsx b/src/common/components/LiveEvent/index.jsx
@@ -225,7 +225,7 @@ function LiveEvent({
           >
             {existsWhiteLabel ? (
               <Image
-                src={logoData?.logo_url}
+                src={logoData?.logo_url || '/static/images/4geeks.png'}
                 width={40}
                 height={40}
                 style={{

diff --git a/src/common/context/PrivateRouteWrapper.jsx b/src/common/context/PrivateRouteWrapper.jsx
@@ -7,6 +7,7 @@ export const withGuard = (PassedComponent) => {
     const { isAuthenticated, isLoading } = useAuth();
     const isNotAuthenticated = !isLoading && isWindow && !isAuthenticated;
     const tokenExists = isWindow && localStorage.getItem('accessToken');
+    const pageToRedirect = '/checkout';
 
     const query = isWindow && new URLSearchParams(window.location.search || '');
     const queryToken = isWindow && query.get('token')?.split('?')[0];
@@ -20,7 +21,7 @@ export const withGuard = (PassedComponent) => {
         if (typeof window !== 'undefined') {
           setStorageItem('redirect', window.location.pathname);
         }
-        window.location.href = '/login';
+        window.location.href = pageToRedirect;
       }, 150);
     };
 
@@ -31,7 +32,7 @@ export const withGuard = (PassedComponent) => {
         } else {
           localStorage.setItem('redirect', pathname);
         }
-        window.location.href = '/login';
+        window.location.href = pageToRedirect;
       }
       if (queryTokenExists && isWindow) {
         localStorage.setItem('accessToken', queryToken);

diff --git a/src/common/handlers/cohorts.js b/src/common/handlers/cohorts.js
@@ -6,7 +6,7 @@ import { error } from '../../utils/logging';
  * @param {Number | String} id Required id of the cohort
  * @returns {Promise<object>} Returns a cohort found
  */
-export const getCohort = (id) => bc.admissions().cohorts()
+export const getCohort = (id) => bc.admissions({ id }).cohorts()
   .then((resp) => {
     const cohortFinded = resp.data.find((cohort) => cohort?.id === id);
     return cohortFinded;

diff --git a/src/common/handlers/subscriptions.js b/src/common/handlers/subscriptions.js
@@ -2,6 +2,14 @@ import { slugToTitle, unSlugifyCapitalize } from '../../utils';
 import { BASE_PLAN } from '../../utils/variables';
 import bc from '../services/breathecode';
 
+export const SUBS_STATUS = {
+  ACTIVE: 'ACTIVE',
+  FREE_TRIAL: 'FREE_TRIAL',
+  FULLY_PAID: 'FULLY_PAID',
+  CANCELLED: 'CANCELLED',
+  PAYMENT_ISSUE: 'PAYMENT_ISSUE',
+};
+
 /**
  * Get translations for plan content.
  *
@@ -354,3 +362,24 @@ export const getSubscriptions = () => bc.payment({
 
     return allPlans;
   });
+
+/**
+ * This function requires the user to be logged in.
+ *
+ * @returns {Promise<object>} // List of subscriptions (Plan financing and subscriptions)
+ */
+export const getAllMySubscriptions = async () => {
+  try {
+    const resp = await bc.payment().subscriptions();
+    const data = resp?.data;
+
+    const planFinancings = data?.plan_financings?.length > 0 ? data?.plan_financings : [];
+    const subscriptions = data?.subscriptions?.length > 0 ? data?.subscriptions : [];
+    const allSubscriptions = [...planFinancings, ...subscriptions];
+
+    return allSubscriptions;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
diff --git a/src/js_modules/moduleMap/module.jsx b/src/js_modules/moduleMap/module.jsx
@@ -161,27 +161,7 @@ function Module({
   const langLink = lang !== 'en' ? `/${lang}` : '';
   const taskTranslations = lang === 'en' ? (data?.translations?.en || data?.translations?.us) : (data?.translations?.[lang] || {});
 
-  const generatePublicLinks = () => {
-    const taskSlug = taskTranslations?.slug || undefined;
-
-    if (data?.translations && taskSlug) {
-      if (data.task_type === 'LESSON') {
-        return `${langLink}/lesson/${taskSlug}`;
-      }
-      if (data.task_type === 'EXERCISE') {
-        return `${langLink}/interactive-exercise/${taskSlug}`;
-      }
-      if (data.task_type === 'PROJECT') {
-        return `${langLink}/interactive-coding-tutorial/${taskSlug}`;
-      }
-      if (data.task_type === 'QUIZ') {
-        return '#';
-      }
-    }
-    return '#';
-  };
-
-  const link = isDisabled ? generatePublicLinks() : `${langLink}/syllabus/${cohortSession.slug}/${data.type.toLowerCase()}/${taskTranslations?.slug || currentTask?.associated_slug}`;
+  const link = isDisabled ? '#' : `${langLink}/syllabus/${cohortSession.slug}/${data.type.toLowerCase()}/${taskTranslations?.slug || currentTask?.associated_slug}`;
   return (
     <>
       <ModuleComponent
@@ -190,6 +170,9 @@ function Module({
         textWithLink
         link={link}
         isDone={isDone}
+        leftContentStyle={isDisabled ? {
+          textDecoration: 'none',
+        } : {}}
         data={{
           type,
           title: taskTranslations?.title || title,

diff --git a/src/pages/choose-program/index.jsx b/src/pages/choose-program/index.jsx
@@ -237,20 +237,22 @@ function chooseProgram() {
     });
   }, []);
 
+  useEffect(() => {
+    if (dataQuery?.date_joined) {
+      const cohortUserDaysCalculated = calculateDifferenceDays(dataQuery?.date_joined);
+      if (cohortUserDaysCalculated?.isRemainingToExpire === false && cohortUserDaysCalculated?.result <= 2) {
+        setWelcomeModal(true);
+      }
+    }
+  }, [dataQuery]);
   useEffect(() => {
     if (userID !== undefined) {
       setCohortSession({
         selectedProgramSlug: '/choose-program',
         bc_id: userID,
       });
     }
-
     if (user?.id && !userLoading) {
-      const cohortUserDaysCalculated = calculateDifferenceDays(user?.date_joined);
-      if (cohortUserDaysCalculated?.isRemainingToExpire === false && cohortUserDaysCalculated?.result <= 2) {
-        setWelcomeModal(true);
-      }
-
       ldClient?.identify({
         kind: 'user',
         key: user?.id,
@@ -340,13 +342,13 @@ function chooseProgram() {
         maxWidth="45rem"
         borderRadius="13px"
         headerStyles={{ textAlign: 'center' }}
-        title={t('welcome-modal.title')}
+        title={t('dashboard:welcome-modal.title')}
         bodyStyles={{ padding: 0 }}
         closeOnOverlayClick={false}
       >
         <Box display="flex" flexDirection="column" gridGap="17px" padding="1.5rem 4%">
           <Text size="13px" textAlign="center" style={{ textWrap: 'balance' }}>
-            {t('welcome-modal.description')}
+            {t('dashboard:welcome-modal.description')}
           </Text>
         </Box>
         <Box padding="0 15px 15px">