Nuevo componente evento calendario

* fix(PDYE-1216): nuevo diseño componente evento y revert evento clickable

---------

Co-authored-by: Javiera Munita <javiera.munita@eclass.cl>

Author: JaviMunita

src/organisms/Calendar/Dropdown/CalendarDropdown.tsx

@@ -10,7 +10,6 @@ export const CalendarDropdown = ({
   loading,
   onlyToCalendar = false,
   m,
-  clickEvent,
 }: ICalendarDropdown): JSX.Element => {
   const date = new Date(now)
   const isoDate = date.toISOString()
@@ -25,7 +24,6 @@ export const CalendarDropdown = ({
       redirectToCalendar={redirectToCalendar}
       text={text}
       onlyToCalendar={onlyToCalendar}
-      clickEvent={clickEvent}
     />
   )
 }

src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx

@@ -18,7 +18,6 @@ export const CalendarDropdownContainer = ({
   courseColors,
   onlyToCalendar,
   m,
-  clickEvent,
 }: ICalendarDropdown): JSX.Element => {
   const [isMobile] = useMediaQuery('(max-width: 577px)')
   const { closeAndMarkSeen, empty, hasNew, ...all } = useParseEvents(events, now)
@@ -170,7 +169,6 @@ export const CalendarDropdownContainer = ({
                     text={text}
                     redirecToCalendar={redirectToCalendar}
                     isMobile={isMobile}
-                    clickEvent={clickEvent}
                   />
                 )}
               </Box>

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/Events.tsx

@@ -2,7 +2,7 @@ import { BtnSecondary } from '@/molecules'
 import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
 
-import { Text, Event, ICalendarDropdown } from '../../types'
+import { Text, Event } from '../../types'
 import { EventsGroup } from './EventsGroup'
 
 interface IEventsProps {
@@ -15,7 +15,6 @@ interface IEventsProps {
   redirecToCalendar: () => void
   isMobile: boolean
   colors?: Record<string, string>
-  clickEvent?: ICalendarDropdown['clickEvent']
 }
 
 export const Events = ({
@@ -24,7 +23,6 @@ export const Events = ({
   redirecToCalendar,
   isMobile,
   colors,
-  clickEvent,
 }: IEventsProps): JSX.Element => {
   const { today, tomorrow, next } = events
   return (
@@ -62,21 +60,18 @@ export const Events = ({
         text={text?.course ?? ''}
         title={text?.events?.today ?? 'Hoy'}
         events={today}
-        clickEvent={clickEvent}
       />
       <EventsGroup
         colors={colors}
         text={text?.course ?? ''}
         title={text?.events?.tomorrow ?? 'Mañana'}
         events={tomorrow}
-        clickEvent={clickEvent}
       />
       <EventsGroup
         colors={colors}
         text={text?.course ?? ''}
         title={text?.events?.next ?? 'Próximos'}
         events={next}
-        clickEvent={clickEvent}
       />
     </Box>
   )

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/EventsGroup.tsx

@@ -1,29 +1,17 @@
-import { Box, MenuGroup } from '@chakra-ui/react'
-
 import { EventsList } from '@/organisms/Calendar'
+import { Box, MenuGroup } from '@chakra-ui/react'
 import { vars } from '@theme'
-import { Event, ICalendarDropdown } from '../../types'
+import { Event } from '../../types'
 
 interface IEventsGroupProps {
   title: string
   events: Event[]
   text: string
   colors?: Record<string, string>
-  clickEvent?: ICalendarDropdown['clickEvent']
 }
 
-export const EventsGroup = ({
-  title,
-  events,
-  text,
-  colors,
-  clickEvent,
-}: IEventsGroupProps): JSX.Element => {
+export const EventsGroup = ({ title, events, text, colors }: IEventsGroupProps): JSX.Element => {
   if (!events || (events && events.length === 0)) return <></>
-
-  const handleClick = (event: Event): void => {
-    clickEvent?.(event)
-  }
   return (
     <Box
       className="calendar-events-group"
@@ -61,15 +49,16 @@ export const EventsGroup = ({
                 key={event.id}
                 name={event.associated_resource.name || ''}
                 courseName={event.course.name}
-                date={event.formatedDate.start}
-                hours={event.formatedDate.hours}
+                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}
-                isDropdown
-                clickEvent={() => handleClick(event)}
+                showsCourseName
               />
             </Box>
           )

src/organisms/Calendar/Dropdown/types.d.ts

@@ -9,8 +9,9 @@ interface Course {
 }
 
 interface FormattedDate {
-  start: string
-  hours: string
+  day: string
+  date: string
+  time: string
 }
 
 export interface Event {
@@ -22,6 +23,7 @@ export interface Event {
   course: Course
   formatedDate: FormattedDate
   isNew?: boolean
+  type: string
 }
 
 export type Events = Event[]
@@ -49,5 +51,4 @@ interface ICalendarDropdown {
   redirectToCalendar: () => void
   text?: Text
   onlyToCalendar?: boolean
-  clickEvent?: (event: Event) => void
 }

src/organisms/Calendar/EventsList/EventsList.tsx

@@ -1,105 +1,93 @@
 import { Box } from '@chakra-ui/react'
-
-import { Calendar } from '@/atoms/Icons/Calendar'
-import { Clock } from '@/atoms/Icons/Clock'
 import { vars } from '@theme'
+
 import { NotificationIcon } from './NotificationIcon'
-import { Ripples } from '@atoms'
 
 export interface IEventList {
-  hasNotification?: boolean
-  isDropdown?: boolean
-  name: string
   color?: string
   courseName?: string
-  text: string
+  day: string
   date: string
-  hours: string
-  clickEvent?: () => void
+  hasNotification?: boolean
+  showsCourseName?: boolean
+  time: string
+  name: string
+  text: string
+  type: string
 }
 
 export const EventsList = ({
-  hasNotification,
-  isDropdown,
-  name,
   courseName,
   color,
-  text,
+  day,
   date,
-  hours,
-  clickEvent,
+  hasNotification,
+  showsCourseName,
+  time,
+  name,
+  text,
+  type,
 }: IEventList): JSX.Element => {
   const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
 
-  const handleClick = (): void => clickEvent?.()
+  const initOrEnd = [
+    'end-course',
+    'init-course',
+    'init-course-flexible',
+    'end-course-flexible',
+  ].includes(type)
+
+  const dateTextStyle = {
+    fontSize: '18px',
+    fontWeight: '700',
+    color: vars('colors-neutral-white'),
+    lineHeight: '100%',
+  }
 
   return (
-    <Ripples>
+    <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">
       <Box
-        className="eventsList"
-        borderTop={border}
-        padding="16px 24px"
-        onClick={handleClick}
-        cursor="pointer"
-        bg={vars('colors-neutral-white') ?? '#fff'}
-        _hover={{
-          bg: vars('colors-neutral-cultured2') ?? '#F8F8F8',
-        }}
+        bg={color}
+        minW="80px"
+        minH="80px"
+        maxW="80px"
+        maxH="80px"
+        borderRadius="4px"
+        p="8px"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-around"
       >
-        <Box display="flex" flexDirection="column" gap="8px">
-          <Box
-            lineHeight="21px"
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            fontSize="16px"
-          >
-            {name} {hasNotification && <NotificationIcon />}
-          </Box>
-          <Box
-            display="flex"
-            lineHeight="19px"
-            fontSize="14px"
-            sx={{
-              svg: {
-                marginRight: '4px',
-              },
-              span: {
-                verticalAlign: 'middle',
-              },
-            }}
-          >
-            <Box paddingRight="8px" borderRight={border}>
-              <Calendar />
-              <span>{date}</span>
-            </Box>
-            <Box paddingLeft="8px">
-              <Clock />
-              <span>{hours}</span>
+        <Box as="span" sx={dateTextStyle}>
+          {day}
+        </Box>
+        <Box as="span" sx={dateTextStyle}>
+          {date}
+        </Box>
+        <Box as="span" fontSize="14px" fontWeight="700" color={vars('colors-neutral-white')}>
+          {time}
+        </Box>
+      </Box>
+
+      <Box display="flex" flexDirection="column" gap="8px">
+        <Box
+          lineHeight="21px"
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          fontSize="16px"
+          fontWeight="700"
+        >
+          {name} {hasNotification && <NotificationIcon />}
+        </Box>
+        {showsCourseName && !initOrEnd && (
+          <Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
+            <Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
+              <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
             </Box>
           </Box>
-          {isDropdown && (
-            <Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
-              <Box
-                alignSelf="flex-start"
-                bg={color}
-                borderRadius="50%"
-                display="block"
-                h="10px"
-                mt="4px"
-                maxH="10px"
-                maxW="10px"
-                minH="10px"
-                minW="10px"
-                w="10px"
-              />
-              <Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
-                <strong>{text ?? 'Curso'}:</strong> {courseName}
-              </Box>
-            </Box>
-          )}
-        </Box>
+        )}
       </Box>
-    </Ripples>
+    </Box>
   )
 }