fix(PDYE-1248): nuevo link mas eventos proximos (#716)

JaviMunita · JavieraMunitaEclass · web-flow · commit 8f6ff750a60e · 2025-05-28T09:53:06.000-04:00
Co-authored-by: Javiera Munita &lt;javiera.munita@eclass.cl&gt;
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx
@@ -20,7 +20,7 @@ export const CalendarDropdownContainer = ({
   m,
 }: ICalendarDropdown): JSX.Element => {
   const [isMobile] = useMediaQuery('(max-width: 577px)')
-  const { closeAndMarkSeen, empty, hasNew, ...all } = useParseEvents(events, now)
+  const { closeAndMarkSeen, empty, hasNew, hasMoreNext, ...all } = useParseEvents(events, now)
 
   const [isTooltipDisabled, setTooltipDisabled] = useState(false)
   const [isMenuOpen, setMenuOpen] = useState(false)
@@ -136,7 +136,7 @@ export const CalendarDropdownContainer = ({
           fontWeight: '700',
           lineHeight: '31px',
           margin: '32px 0 0',
-          padding: '0 0 8px 24px',
+          padding: '0 0 8px 16px',
         },
         '.react-ripples': {
           width: 'inherit',
@@ -164,6 +164,7 @@ export const CalendarDropdownContainer = ({
                   <Empty text={text?.empty ?? 'Aún no tienes eventos en tu calendario'} />
                 ) : (
                   <Events
+                    hasMoreNext={hasMoreNext}
                     colors={courseColors}
                     events={all}
                     text={text}
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.tsx
@@ -15,6 +15,7 @@ interface IEventsProps {
   redirecToCalendar: () => void
   isMobile: boolean
   colors?: Record<string, string>
+  hasMoreNext?: boolean
 }
 
 export const Events = ({
@@ -23,8 +24,10 @@ export const Events = ({
   redirecToCalendar,
   isMobile,
   colors,
+  hasMoreNext,
 }: IEventsProps): JSX.Element => {
   const { today, tomorrow, next } = events
+
   return (
     <Box
       borderRadius="10px"
@@ -50,7 +53,7 @@ export const Events = ({
             },
           }}
         >
-          <BtnPrimary onClick={redirecToCalendar} m="72px 0 0 24px" id="RedirectButton">
+          <BtnPrimary onClick={redirecToCalendar} m="72px 0 0 16px" id="RedirectButton">
             {text?.buttonCalendar ?? 'Ir a Mi Calendario'}
           </BtnPrimary>
         </Box>
@@ -68,10 +71,14 @@ export const Events = ({
         events={tomorrow}
       />
       <EventsGroup
+        hasMoreNext={hasMoreNext}
         colors={colors}
+        textSeeMore={text?.seeMore.see ?? 'Ver más fechas en'}
+        textLinkMore={text?.seeMore.link ?? 'Mi calendario'}
         text={text?.course ?? ''}
         title={text?.events?.next ?? 'Próximos'}
         events={next}
+        redirect={redirecToCalendar}
       />
     </Box>
   )
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx
@@ -1,3 +1,4 @@
+import { BtnLink } from '@/molecules'
 import { EventsList } from '@/organisms/Calendar'
 import { Box, MenuGroup } from '@chakra-ui/react'
 import { vars } from '@theme'
@@ -7,63 +8,88 @@ interface IEventsGroupProps {
   title: string
   events: Event[]
   text: string
+  textSeeMore?: string
+  textLinkMore?: string
   colors?: Record<string, string>
+  redirect?: () => void
+  hasMoreNext?: boolean
 }
 
-export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps): JSX.Element => {
+export const EventsGroup = ({
+  title,
+  events,
+  text,
+  textSeeMore,
+  textLinkMore,
+  colors,
+  redirect,
+  hasMoreNext,
+}: IEventsGroupProps): JSX.Element => {
   if (!events || (events && events.length === 0)) return <></>
   return (
-    <Box
-      className="calendar-events-group"
-      _focus={{
-        background: 'none !important',
-        border: `1px solid ${vars('colors-icon-deepSkyBlue') ?? '#0189FF'}`,
-      }}
-      sx={{
-        '.chakra-menu__menuitem > div': {
-          w: '100%',
-        },
-      }}
-    >
-      <MenuGroup title={title}>
-        {events.map((event: Event) => {
-          return (
-            // Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
-            <Box
-              bg={vars('colors-neutral-white') ?? '#FFFFFF'}
-              border="none"
-              cursor="default"
-              padding="0"
-              key={event.id}
-              _hover={{
-                boxShadow: 'none !important',
-                cursor: 'default !important',
-                bg: 'none !important',
-              }}
-              _focus={{
-                background: 'none !important',
-                boxShadow: 'none !important',
-              }}
-            >
-              <EventsList
+    <>
+      <Box
+        className="calendar-events-group"
+        _focus={{
+          background: 'none !important',
+          border: `1px solid ${vars('colors-icon-deepSkyBlue') ?? '#0189FF'}`,
+        }}
+        sx={{
+          '.chakra-menu__menuitem > div': {
+            w: '100%',
+          },
+        }}
+      >
+        <MenuGroup title={title}>
+          {events.map((event: Event) => {
+            return (
+              // Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
+              <Box
+                bg={vars('colors-neutral-white') ?? '#FFFFFF'}
+                border="none"
+                cursor="default"
+                padding="0"
                 key={event.id}
-                name={event.associated_resource.name || ''}
-                courseName={event.course.name}
-                day={event.formatedDate.day}
-                date={event.formatedDate.date}
-                time={event.formatedDate.time}
-                color={
-                  event.course_id && colors?.[event.course_id] ? colors[event.course_id] : '#82504A'
-                }
-                text={text}
-                type={event.type}
-                hasNotification={event.isNew}
-                showCourse
-              />
-            </Box>
-          )
-        })}
-      </MenuGroup>
-    </Box>
+                _hover={{
+                  boxShadow: 'none !important',
+                  cursor: 'default !important',
+                  bg: 'none !important',
+                }}
+                _focus={{
+                  background: 'none !important',
+                  boxShadow: 'none !important',
+                }}
+              >
+                <EventsList
+                  key={event.id}
+                  name={event.associated_resource.name || ''}
+                  courseName={event.course.name}
+                  day={event.formatedDate.day}
+                  date={event.formatedDate.date}
+                  time={event.formatedDate.time}
+                  color={
+                    event.course_id && colors?.[event.course_id]
+                      ? colors[event.course_id]
+                      : '#82504A'
+                  }
+                  text={text}
+                  type={event.type}
+                  hasNotification={event.isNew}
+                  showCourse
+                />
+              </Box>
+            )
+          })}
+        </MenuGroup>
+      </Box>
+      {hasMoreNext && (
+        <Box display="flex" alignItems="center" padding="16px 0 0 16px">
+          <Box as="span" fontSize="14px">
+            {textSeeMore}
+          </Box>{' '}
+          <BtnLink onClick={redirect}>{textLinkMore}</BtnLink>
+        </Box>
+      )}
+    </>
   )
 }
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/services/parseEvents.ts b/src/organisms/Calendar/Dropdown/CalendarDropdown/services/parseEvents.ts
@@ -15,11 +15,13 @@ export const useParseEvents = (
   hasNew: boolean
   closeAndMarkSeen: () => void
   empty: boolean
+  hasMoreNext: boolean
 } => {
   const [todayEvents, setTodayEvents] = useState<any[]>([])
   const [tomorrowEvents, setTomorrowEvents] = useState<any[]>([])
   const [nextEvents, setNextEvents] = useState<any[]>([])
   const [hasNew, setHasNew] = useState(false)
+  const [hasMoreNext, setHasMoreNext] = useState(false)
 
   useEffect(() => {
     const parseNow = parseISO(now)
@@ -57,6 +59,7 @@ export const useParseEvents = (
 
     let next = [...nextList]
     if (nextList.length > 5) {
+      setHasMoreNext(true)
       next = next.slice(0, 5)
     }
     setNextEvents(next)
@@ -91,5 +94,6 @@ export const useParseEvents = (
     hasNew,
     closeAndMarkSeen,
     empty,
+    hasMoreNext,
   }
 }
diff --git a/src/organisms/Calendar/Dropdown/types.d.ts b/src/organisms/Calendar/Dropdown/types.d.ts
@@ -39,6 +39,10 @@ export interface Text {
   }
   header: string
   loading: string
+  seeMore: {
+    see: string
+    link: string
+  }
   tooltip: string
 }
 
diff --git a/src/organisms/Calendar/EventsList/EventsList.tsx b/src/organisms/Calendar/EventsList/EventsList.tsx
@@ -57,7 +57,7 @@ export const EventsList = ({
   }
 
   return (
-    <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">
+    <Box className="eventsList" borderTop={border} p="16px" display="flex" gap="12px">
       <Box
         bg={color}
         minW="80px"

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,10 @@ export interface Text {`
`39`	`39`	`}`
`40`	`40`	`header: string`
`41`	`41`	`loading: string`
	`42`	`+ seeMore: {`
	`43`	`+ see: string`
	`44`	`+ link: string`
	`45`	`+ }`
`42`	`46`	`tooltip: string`
`43`	`47`	`}`
`44`	`48`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export const EventsList = ({`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`return (`
`60`		`- <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">`
	`60`	`+ <Box className="eventsList" borderTop={border} p="16px" display="flex" gap="12px">`
`61`	`61`	`<Box`
`62`	`62`	`bg={color}`
`63`	`63`	`minW="80px"`