✨ page to schedule mentorship

i18n.js

@@ -25,6 +25,7 @@ module.exports = {
     '/syllabus/[cohortSlug]/[lesson]/[lessonSlug]': ['syllabus', 'dashboard', 'projects', 'assignments'],
     '/survey/[surveyId]': ['survey'],
     '/mentorship': ['mentorship'],
+    '/mentorship/schedule': ['mentorship', 'dashboard'],
     '/how-to': ['how-to'],
     '/pricing': ['pricing', 'signup'],
     '/how-to/[slug]': ['how-to'],

public/locales/en/dashboard.json

@@ -3,6 +3,7 @@
     "title": "Dashboard"
   },
   "title": "Your News",
+  "back-to-dashboard": "Back to dashboard",
   "backToChooseProgram": "Back to choose program",
   "moduleMap": "Module map",
   "progressText": "progress in the program",
@@ -14,9 +15,9 @@
     "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.",
     "cta-button": "Review plan",
-    "join-next-cohort":"Join next cohort",
-    "start-course":"Start this course",
-    "join-more":"Join more than 100 people taking this course right now",
+    "join-next-cohort": "Join next cohort",
+    "start-course": "Start this course",
+    "join-more": "Join more than 100 people taking this course right now",
     "preview-description": "You are reviewing this cohort dashboard on \"preview mode\", in order to start learning and interact with the materials please join the cohort."
   },
   "already-have-this-cohort": "You are already a member of this cohort",
@@ -104,7 +105,16 @@
     "get-unlimited-mentorship": "and get unlimited mentorship",
     "you-have": "You have",
     "available-sessions": "available sessions",
-    "tooltip": "Mentorships reload every week"
+    "tooltip": "Mentorships reload every week",
+    "mentor-sessions-available": "mentoring sessions available",
+    "action": "Schedule session",
+    "no-available": "No services available",
+    "no-available-for-teacher": "No services available for"
+  },
+  "schedule-steps": {
+    "select-mentorship": "First select a type of mentorship",
+    "select-mentor": "Now search for a mentor",
+    "schedule": "Schedule the session"
   },
   "deliverProject": {
     "title": "Deliver assignment",

public/locales/es/dashboard.json

@@ -4,6 +4,7 @@
   },
   "title": "Tus noticias",
   "moduleMap": "Mapa de módulos",
+  "back-to-dashboard": "Volver al dashboard",
   "backToChooseProgram": "Volver a elegir programa",
   "progressText": "Progreso en el programa",
   "whiteLabeledText": "Este curso es traído a ti gracias a nuestra alianza con esta universidad.",
@@ -15,9 +16,9 @@
     "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.",
     "cta-button": "Revisar plan",
-    "join-next-cohort":"Únete a la cohorte",
-    "start-course":"Empezar este curso",
-    "join-more":"Únete a más de 100 personas que toman este curso ahora mismo",
+    "join-next-cohort": "Únete a la cohorte",
+    "start-course": "Empezar este curso",
+    "join-more": "Únete a más de 100 personas que toman este curso ahora mismo",
     "preview-description": "Estás revisando esta cohorte en \"modo de vista previa\". Para comenzar a aprender e interactuar con el material, únete a la cohorte."
   },
   "modules": {
@@ -72,17 +73,17 @@
     "no-mentors": "No hay mentores disponibles",
     "no-mentor-link": "No hay enlace para crear sesión con este mentor",
     "search-mentor": "Buscar mentor por nombre",
-    "start-mentorship": "Para comenzar, seleccione un tipo de tutoría",
+    "start-mentorship": "Para comenzar, seleccione un tipo de mentoría",
     "mentoring-label": "Mentoría",
-    "mentoring": "Programe una sesión de tutoría 1-1.",
-    "select-type": "Seleccione un tipo de tutoría",
-    "mentoring-available": "Tutorías disponibles",
-    "no-mentoring-available": "No tienes tutorías disponibles.",
+    "mentoring": "Programe una sesión de mentoría 1-1.",
+    "select-type": "Seleccione un tipo de mentoría",
+    "mentoring-available": "Mentorías disponibles",
+    "no-mentoring-available": "No tienes mentorías disponibles.",
     "create-session-text": "Agendar ahora",
     "learn-more": "Aprender mas.",
     "learn-more-link": "https://4geeks.com/es/docs/knowledge-base-4geeks/sesiones-de-tutoria",
     "get-more-mentorships": "Consigue más mentorías",
-    "schedule-button": "Programar una sesión de tutoría",
+    "schedule-button": "Programar una sesión de mentoría",
     "mentors-available": "+{{count}} Mentores disponibles",
     "actionButtons": [
       {
@@ -100,11 +101,20 @@
     ]
   },
   "mentorship": {
-    "no-mentorship": "Se ha quedado sin tutorías, pero no se preocupe, puede obtener más con unos pocos clics.",
-    "get-unlimited-mentorship": "y obtén tutoría ilimitada",
+    "no-mentorship": "Se ha quedado sin mentorías, pero no se preocupe, puede obtener más con unos pocos clics.",
+    "get-unlimited-mentorship": "y obtén mentorías ilimitadas",
     "you-have": "Tienes",
     "available-sessions": "sesiones disponibles",
-    "tooltip": "Las tutorías se recargan cada semana"
+    "tooltip": "Las mentorías se recargan cada semana",
+    "mentor-sessions-available": "sesiones de mentoria disponibles",
+    "action": "Reservar mentoria",
+    "no-available": "No hay servicios disponibles",
+    "no-available-for-teacher": "No hay servicios disponibles para"
+  },
+  "schedule-steps": {
+    "select-mentorship": "Primero selecciona un tipo de mentoría",
+    "select-mentor": "Ahora busca un mentor",
+    "schedule": "Agenda la sesión"
   },
   "deliverProject": {
     "title": "Entregar tarea",

src/pages/mentorship/schedule.jsx

@@ -0,0 +1,224 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useColorModeValue, Container, Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import useTranslation from 'next-translate/useTranslation';
+import { reportDatalayer } from '../../utils/requests';
+import useSubscriptionsHandler from '../../common/store/actions/subscriptionAction';
+import useAuth from '../../common/hooks/useAuth';
+import Icon from '../../common/components/Icon';
+import Link from '../../common/components/NextChakraLink';
+import bc from '../../common/services/breathecode';
+import MentoringConsumables from '../../common/components/SupportSidebar/MentoringConsumables';
+
+function MentorshipSchedule() {
+  let isTabletOrPhone = false;
+  if (typeof window !== 'undefined') {
+    isTabletOrPhone = window.innerWidth < 780;
+  }
+  const router = useRouter();
+  const { t } = useTranslation('dashboard');
+  const { fetchSubscriptions } = useSubscriptionsHandler();
+  const { service, mentor } = router.query;
+  const { isLoading, user, isAuthenticated } = useAuth();
+  const [mentorshipServices, setMentorshipServices] = useState({ isLoading: true, data: [] });
+  const [searchProps, setSearchProps] = useState({ serviceSearch: '', mentorSearch: '' });
+  const [mentoryProps, setMentoryProps] = useState({});
+  const [admissions, setAdmissions] = useState({});
+  const [consumables, setConsumables] = useState([]);
+  const [allMentorsAvailable, setAllMentorsAvailable] = useState([]);
+  const [mentorsByService, setMentorsByService] = useState([]);
+  const [subscriptionData, setSubscriptionData] = useState([]);
+
+  const getServices = async (userRoles) => {
+    if (userRoles?.length > 0) {
+      const mentorshipPromises = await userRoles.map((role) => bc.mentorship({ academy: role?.academy?.id }, true).getService()
+        .then((resp) => {
+          const data = resp?.data;
+          if (data !== undefined && data.length > 0) {
+            return data.map((serv) => ({
+              ...serv,
+              academy: {
+                id: role?.academy.id,
+                available_as_saas: role?.academy?.available_as_saas,
+              },
+            }));
+          }
+          return [];
+        }));
+      const mentorshipResults = await Promise.all(mentorshipPromises);
+      const recopilatedServices = mentorshipResults.flat();
+
+      setMentorshipServices({
+        isLoading: false,
+        data: recopilatedServices,
+      });
+    }
+  };
+
+  const getAdmissionsData = async () => {
+    try {
+      const response = await bc.admissions().me();
+      const admissionsFromDB = response.data;
+      setAdmissions(response.data);
+      getServices(admissionsFromDB.roles);
+    } catch (error) {
+      console.error('Error fetching admissions data:', error);
+    }
+  };
+
+  useEffect(() => {
+    const checkAuthAndFetchData = async () => {
+      if (!isLoading && !isAuthenticated) {
+        router.push('/login');
+      } else if (isAuthenticated) {
+        await getAdmissionsData();
+      }
+    };
+
+    checkAuthAndFetchData();
+  }, [isLoading, isAuthenticated]);
+
+  const allSyllabus = useMemo(() => {
+    const allCohorts = admissions?.cohorts || [];
+    const syllabus = [...new Set(allCohorts.map(({ cohort }) => cohort.syllabus_version.slug))];
+    return syllabus;
+  }, [admissions]);
+
+  const getAllMentorsAvailable = async () => {
+    const servicesSlugs = mentorshipServices.data.map(({ slug }) => slug);
+
+    const academies = mentorshipServices.data.reduce((acc, { academy, ...restOfService }) => {
+      if (!acc[academy.id]) {
+        acc[academy.id] = { services: [] };
+      }
+      acc[academy.id].services.push(restOfService);
+      return acc;
+    }, {});
+
+    const academyData = Object.entries(academies).map(([id, { services }]) => ({
+      id: Number(id),
+      services,
+    }));
+
+    const getMentorsForAcademy = async (academy) => {
+      const res = await bc.mentorship({
+        services: academy.services.map((s) => s.slug).join(','),
+        status: 'ACTIVE',
+        syllabus: allSyllabus?.join(',') || undefined,
+        academy: academy.id,
+      }).getMentor();
+
+      return res?.data || [];
+    };
+
+    if (servicesSlugs.length > 0 || allSyllabus.length > 0) {
+      const mentorsPromises = academyData.map(getMentorsForAcademy);
+      const mentorsList = (await Promise.all(mentorsPromises)).flat();
+      return mentorsList;
+    }
+
+    return [];
+  };
+
+  const getMentorsAndConsumables = async () => {
+    const mentors = await getAllMentorsAvailable();
+    const reqConsumables = await bc.payment().service().consumable()
+      .then((res) => res?.data?.mentorship_service_sets.map((mentorshipServiceSet) => bc.mentorship()
+        .getServiceSet(mentorshipServiceSet?.id)
+        .then((rs) => ({
+          ...rs?.data,
+          ...mentorshipServiceSet,
+        }))));
+
+    const allConsumables = await Promise.all(reqConsumables);
+
+    setConsumables(allConsumables);
+    setAllMentorsAvailable(mentors);
+  };
+
+  useEffect(() => {
+    if (!mentorshipServices.isLoading && mentorshipServices?.data.length > 0) {
+      getMentorsAndConsumables();
+    }
+  }, [mentorshipServices]);
+
+  const mentorsFiltered = mentorsByService.filter(
+    (ment) => {
+      const fullName = `${ment.user.first_name} ${ment.user.last_name}`.toLowerCase();
+      return (
+        fullName.includes(searchProps.mentorSearch)
+        && ment.services.some((sv) => sv.status === 'ACTIVE' && sv.slug === mentoryProps?.service?.slug)
+      );
+    },
+  );
+
+  const filterServices = () => {
+    if (subscriptionData?.selected_mentorship_service_set?.mentorship_services?.length > 0) {
+      return subscriptionData?.selected_mentorship_service_set?.mentorship_services?.filter(
+        (l) => l.name.toLowerCase().includes(searchProps.serviceSearch),
+      );
+    }
+    if (mentorshipServices.data.length > 0) {
+      return mentorshipServices.data?.filter(
+        (l) => l.name.toLowerCase().includes(searchProps.serviceSearch),
+      );
+    }
+
+    return [];
+  };
+  const suscriptionServicesFiltered = filterServices();
+
+  useEffect(() => {
+    if (mentoryProps.serviceSelected) {
+      fetchSubscriptions()
+        .then((data) => {
+          setSubscriptionData(data);
+          reportDatalayer({
+            dataLayer: {
+              event: 'subscriptions_load',
+              method: 'native',
+              plan_financings: data?.plan_financings?.filter((s) => s.status === 'ACTIVE').map((s) => s.plans.filter((p) => p.status === 'ACTIVE').map((p) => p.slug).join(',')).join(','),
+              subscriptions: data?.subscriptions?.filter((s) => s.status === 'ACTIVE').map((s) => s.plans.filter((p) => p.status === 'ACTIVE').map((p) => p.slug).join(',')).join(','),
+            },
+          });
+        });
+    }
+  }, [mentoryProps.serviceSelected]);
+
+  return !isLoading && user && !mentorshipServices.isLoading && (
+    <Container as="div" height="100%" maxWidth="full" minHeight="87.5vh" display="flex" flexDirection="column" padding={0} background={() => useColorModeValue('#f9f9f9', '#171f2a')} overflow="hidden">
+      <Link href="/choose-program" color="#0196d1" display="inline-block" letterSpacing="0.05em" fontWeight="700" width="fit-content" padding="3rem 0 0.6rem 1rem">
+        <Box display="flex" alignItems="center" justifyContent="center" gap="5px">
+          <Icon icon="arrowLeft2" color="#0196d1" width="15px" height="15px" />
+          <Box as="span">{`${t('back-to-dashboard')}`}</Box>
+        </Box>
+      </Link>
+      <Container as="div" display="flex" flexDirection="column" justifyContent="center" alignItems="center" marginTop="2.5rem" textAlign="center" padding="0px" borderRadius="10px">
+        <Box textAlign="start">
+          <MentoringConsumables
+            {...{
+              mentoryProps,
+              width: !isTabletOrPhone ? '650px' : '350px',
+              titleSize: !isTabletOrPhone && '30px',
+              consumables,
+              setMentoryProps,
+              programServices: mentorshipServices.data,
+              servicesFiltered: suscriptionServicesFiltered,
+              searchProps,
+              setSearchProps,
+              setProgramMentors: setMentorsByService,
+              mentorsFiltered,
+              allMentorsAvailable,
+              subscriptionData,
+              allSubscriptions: subscriptionData.subscriptions,
+              queryService: service,
+              queryMentor: mentor,
+            }}
+          />
+        </Box>
+      </Container>
+    </Container>
+  );
+}
+
+export default MentorshipSchedule;