@eclass/ui-kit 1.52.10 → 1.52.11

package/dist/eclass-ui-kit.es.js

@@ -5762,6 +5762,7 @@ const useParseEvents = (events, now) => {
   const [tomorrowEvents, setTomorrowEvents] = useState([]);
   const [nextEvents, setNextEvents] = useState([]);
   const [hasNew, setHasNew] = useState(false);
+  const [hasMoreNext, setHasMoreNext] = useState(false);
   useEffect(() => {
     var _a, _b;
     const parseNow = parseISO(now);
@@ -5794,6 +5795,7 @@ const useParseEvents = (events, now) => {
     setTomorrowEvents(tomorrowList);
     let next = [...nextList];
     if (nextList.length > 5) {
+      setHasMoreNext(true);
       next = next.slice(0, 5);
     }
     setNextEvents(next);
@@ -5821,7 +5823,8 @@ const useParseEvents = (events, now) => {
     next: nextEvents,
     hasNew,
     closeAndMarkSeen,
-    empty
+    empty,
+    hasMoreNext
   };
 };
 const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
@@ -6059,55 +6062,73 @@ const EventsGroup = ({
   title,
   events,
   text,
-  colors: colors2
+  textSeeMore,
+  textLinkMore,
+  colors: colors2,
+  redirect,
+  hasMoreNext
 }) => {
   var _a;
   if (!events || events && events.length === 0)
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(Box, {
-    className: "calendar-events-group",
-    _focus: {
-      background: "none !important",
-      border: `1px solid ${(_a = vars("colors-icon-deepSkyBlue")) != null ? _a : "#0189FF"}`
-    },
-    sx: {
-      ".chakra-menu__menuitem > div": {
-        w: "100%"
-      }
-    },
-    children: /* @__PURE__ */ jsx(MenuGroup, {
-      title,
-      children: events.map((event) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(Box, {
-          bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
-          border: "none",
-          cursor: "default",
-          padding: "0",
-          _hover: {
-            boxShadow: "none !important",
-            cursor: "default !important",
-            bg: "none !important"
-          },
-          _focus: {
-            background: "none !important",
-            boxShadow: "none !important"
-          },
-          children: /* @__PURE__ */ jsx(EventsList, {
-            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 && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
-            text,
-            type: event.type,
-            hasNotification: event.isNew,
-            showCourse: true
-          }, event.id)
-        }, event.id);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Box, {
+      className: "calendar-events-group",
+      _focus: {
+        background: "none !important",
+        border: `1px solid ${(_a = vars("colors-icon-deepSkyBlue")) != null ? _a : "#0189FF"}`
+      },
+      sx: {
+        ".chakra-menu__menuitem > div": {
+          w: "100%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(MenuGroup, {
+        title,
+        children: events.map((event) => {
+          var _a2;
+          return /* @__PURE__ */ jsx(Box, {
+            bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
+            border: "none",
+            cursor: "default",
+            padding: "0",
+            _hover: {
+              boxShadow: "none !important",
+              cursor: "default !important",
+              bg: "none !important"
+            },
+            _focus: {
+              background: "none !important",
+              boxShadow: "none !important"
+            },
+            children: /* @__PURE__ */ jsx(EventsList, {
+              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 && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
+              text,
+              type: event.type,
+              hasNotification: event.isNew,
+              showCourse: true
+            }, event.id)
+          }, event.id);
+        })
       })
-    })
+    }), hasMoreNext && /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      padding: "16px 0 0 16px",
+      children: [/* @__PURE__ */ jsx(Box, {
+        as: "span",
+        fontSize: "14px",
+        children: textSeeMore
+      }), " ", /* @__PURE__ */ jsx(BtnLink, {
+        onClick: redirect,
+        children: textLinkMore
+      })]
+    })]
   });
 };
 const Events = ({
@@ -6115,9 +6136,10 @@ const Events = ({
   text,
   redirecToCalendar,
   isMobile,
-  colors: colors2
+  colors: colors2,
+  hasMoreNext
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const {
     today,
     tomorrow,
@@ -6146,7 +6168,7 @@ const Events = ({
       },
       children: /* @__PURE__ */ jsx(BtnPrimary, {
         onClick: redirecToCalendar,
-        m: "72px 0 0 24px",
+        m: "72px 0 0 16px",
         id: "RedirectButton",
         children: (_b = text == null ? void 0 : text.buttonCalendar) != null ? _b : "Ir a Mi Calendario"
       })
@@ -6161,10 +6183,14 @@ const Events = ({
       title: (_h = (_g = text == null ? void 0 : text.events) == null ? void 0 : _g.tomorrow) != null ? _h : "Ma\xF1ana",
       events: tomorrow
     }), /* @__PURE__ */ jsx(EventsGroup, {
+      hasMoreNext,
       colors: colors2,
-      text: (_i = text == null ? void 0 : text.course) != null ? _i : "",
-      title: (_k = (_j = text == null ? void 0 : text.events) == null ? void 0 : _j.next) != null ? _k : "Pr\xF3ximos",
-      events: next
+      textSeeMore: (_i = text == null ? void 0 : text.seeMore.see) != null ? _i : "Ver m\xE1s fechas en",
+      textLinkMore: (_j = text == null ? void 0 : text.seeMore.link) != null ? _j : "Mi calendario",
+      text: (_k = text == null ? void 0 : text.course) != null ? _k : "",
+      title: (_m = (_l = text == null ? void 0 : text.events) == null ? void 0 : _l.next) != null ? _m : "Pr\xF3ximos",
+      events: next,
+      redirect: redirecToCalendar
     })]
   });
 };
@@ -6184,6 +6210,7 @@ const CalendarDropdownContainer = ({
     closeAndMarkSeen,
     empty,
     hasNew,
+    hasMoreNext,
     ...all
   } = useParseEvents(events, now);
   const [isTooltipDisabled, setTooltipDisabled] = useState(false);
@@ -6283,7 +6310,7 @@ const CalendarDropdownContainer = ({
         fontWeight: "700",
         lineHeight: "31px",
         margin: "32px 0 0",
-        padding: "0 0 8px 24px"
+        padding: "0 0 8px 16px"
       },
       ".react-ripples": {
         width: "inherit"
@@ -6310,6 +6337,7 @@ const CalendarDropdownContainer = ({
             }) : events.length === 0 || empty ? /* @__PURE__ */ jsx(Empty, {
               text: (_g = text == null ? void 0 : text.empty) != null ? _g : "A\xFAn no tienes eventos en tu calendario"
             }) : /* @__PURE__ */ jsx(Events, {
+              hasMoreNext,
               colors: courseColors,
               events: all,
               text,
@@ -6398,7 +6426,7 @@ const EventsList = ({
   return /* @__PURE__ */ jsxs(Box, {
     className: "eventsList",
     borderTop: border,
-    p: "16px 24px",
+    p: "16px",
     display: "flex",
     gap: "12px",
     children: [/* @__PURE__ */ jsxs(Box, {