@sonordev/site-kit 2.5.7 → 2.5.9

package/dist/{chunk-TA2RGEE3.js → chunk-JPVTQNIS.js}

@@ -6470,7 +6470,8 @@ function EventsWidget({
       ] })
     ] });
   }
-  const displayEvents = effectiveView === "list" || effectiveView === "grid" ? events.slice(0, limit) : events;
+  const groupedList = groupEventsByOffering(events).slice(0, limit);
+  const displayEvents = effectiveView === "grid" ? events.slice(0, limit) : events;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
     (title || subtitle || showViewToggle) && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -6583,16 +6584,31 @@ function EventsWidget({
       }
     ),
     effectiveView === "list" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-list ${listClassName}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: displayEvents.map((eventItem, index) => {
-        const nextSchedule = eventItem.next_schedule || eventItem.schedules?.[0];
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            .sk-date-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+            .sk-date-select-wrap { display: none; }
+            @media (max-width: 640px) {
+              .sk-date-pills { display: none; }
+              .sk-date-select-wrap { display: block; }
+              .site-kit-event-card { flex-direction: column !important; }
+              .site-kit-event-card-image { width: 100% !important; min-width: 0 !important; min-height: 140px !important; }
+            }
+          ` }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: groupedList.map(({ event: eventItem, schedules: allSchedules }) => {
+        const schedules = allSchedules.length > 0 ? allSchedules : eventItem.next_schedule ? [eventItem.next_schedule] : [];
+        const isMulti = schedules.length > 1;
+        const primarySchedule = schedules[0] || eventItem.next_schedule || eventItem.schedules?.[0];
         const isFree = !eventItem.price || eventItem.price === 0;
         const imageUrl = eventItem.featured_image_url;
-        const uniqueKey = nextSchedule ? `${eventItem.id}-${nextSchedule.id}` : `${eventItem.id}-${index}`;
+        const uniqueKey = eventItem.id;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: `site-kit-event-card ${eventCardClassName}`,
-            onClick: () => nextSchedule && handleEventClick(eventItem, nextSchedule),
+            onClick: (e) => {
+              if (e.target.closest("[data-sk-date-selector]")) return;
+              if (!isMulti && primarySchedule) handleEventClick(eventItem, primarySchedule);
+            },
             style: {
               display: "flex",
               flexDirection: "row",
@@ -6601,12 +6617,12 @@ function EventsWidget({
               background: "var(--sk-bg)",
               border: "1px solid var(--sk-border)",
               borderRadius: "0.75rem",
-              cursor: nextSchedule ? "pointer" : "default",
+              cursor: !isMulti && primarySchedule ? "pointer" : "default",
               transition: "all 150ms",
               overflow: "hidden"
             },
             onMouseEnter: (e) => {
-              if (nextSchedule) {
+              if (!isMulti && primarySchedule) {
                 e.currentTarget.style.borderColor = "var(--sk-primary)";
                 e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
               }
@@ -6616,7 +6632,7 @@ function EventsWidget({
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-event-card-image", style: {
                 width: "160px",
                 minWidth: "160px",
                 flexShrink: 0,
@@ -6676,23 +6692,142 @@ function EventsWidget({
                     whiteSpace: "nowrap"
                   }, children: isFree ? "Free" : formatPrice(eventItem.price ?? 0, eventItem.currency) })
                 ] }),
-                nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
+                !isMulti && primarySchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "var(--sk-text-secondary)" }, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
-                    formatDate(nextSchedule.starts_at)
+                    formatDate(primarySchedule.starts_at)
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, {}),
-                    formatTime(nextSchedule.starts_at)
+                    formatTime(primarySchedule.starts_at)
                   ] }),
                   eventItem.location && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
                     eventItem.location
                   ] }),
-                  nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                    color: nextSchedule.spots_remaining < 5 ? "var(--sk-error)" : "var(--sk-text-secondary)",
-                    fontWeight: nextSchedule.spots_remaining < 5 ? 500 : 400
-                  }, children: nextSchedule.spots_remaining === 0 ? "Sold Out" : `${nextSchedule.spots_remaining} spots left` })
+                  primarySchedule.spots_remaining !== null && primarySchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                    color: primarySchedule.spots_remaining < 5 ? "var(--sk-error)" : "var(--sk-text-secondary)",
+                    fontWeight: primarySchedule.spots_remaining < 5 ? 500 : 400
+                  }, children: primarySchedule.spots_remaining === 0 ? "Sold Out" : `${primarySchedule.spots_remaining} spots left` })
+                ] }),
+                isMulti && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sk-date-selector": true, onClick: (e) => e.stopPropagation(), children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "var(--sk-text-secondary)", marginBottom: "0.625rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem", fontWeight: 500, color: "var(--sk-text-primary)" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
+                      schedules.length,
+                      " dates available"
+                    ] }),
+                    eventItem.location && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
+                      eventItem.location
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                      formatDate(schedules[0].starts_at),
+                      " \u2013 ",
+                      formatDate(schedules[schedules.length - 1].starts_at)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-date-pills", children: schedules.map((s) => {
+                    const soldOut = s.spots_remaining === 0;
+                    const low = !soldOut && s.spots_remaining !== null && s.spots_remaining !== void 0 && s.spots_remaining < 5;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => !soldOut && handleEventClick(eventItem, s),
+                        disabled: soldOut,
+                        title: `${formatDate(s.starts_at)} \u2022 ${formatTime(s.starts_at)}${soldOut ? " (Sold Out)" : low ? ` (${s.spots_remaining} left)` : ""}`,
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "0.375rem",
+                          padding: "0.5rem 0.875rem",
+                          borderRadius: "9999px",
+                          border: "1.5px solid var(--sk-primary)",
+                          background: soldOut ? "var(--sk-surface)" : "var(--sk-bg)",
+                          color: soldOut ? "var(--sk-text-secondary)" : "var(--sk-primary)",
+                          fontSize: "0.8125rem",
+                          fontWeight: 600,
+                          letterSpacing: "0.01em",
+                          cursor: soldOut ? "not-allowed" : "pointer",
+                          textDecoration: soldOut ? "line-through" : "none",
+                          transition: "all 150ms ease",
+                          whiteSpace: "nowrap",
+                          boxShadow: soldOut ? "none" : "0 1px 2px rgba(0,0,0,0.04)"
+                        },
+                        onMouseEnter: (e) => {
+                          if (!soldOut) {
+                            e.currentTarget.style.background = "var(--sk-primary)";
+                            e.currentTarget.style.color = "var(--sk-bg)";
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow = "0 4px 10px -2px rgba(0,0,0,0.15)";
+                          }
+                        },
+                        onMouseLeave: (e) => {
+                          if (!soldOut) {
+                            e.currentTarget.style.background = "var(--sk-bg)";
+                            e.currentTarget.style.color = "var(--sk-primary)";
+                            e.currentTarget.style.transform = "none";
+                            e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.04)";
+                          }
+                        },
+                        children: [
+                          formatDate(s.starts_at),
+                          " \xB7 ",
+                          formatTime(s.starts_at),
+                          low && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
+                            marginLeft: "0.125rem",
+                            padding: "0.0625rem 0.375rem",
+                            borderRadius: "9999px",
+                            background: "var(--sk-error)",
+                            color: "var(--sk-bg)",
+                            fontWeight: 700,
+                            fontSize: "0.6875rem"
+                          }, children: [
+                            s.spots_remaining,
+                            " left"
+                          ] })
+                        ]
+                      },
+                      s.id
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-date-select-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "select",
+                    {
+                      defaultValue: "",
+                      onChange: (e) => {
+                        const scheduleId = e.target.value;
+                        const s = schedules.find((x) => x.id === scheduleId);
+                        if (s) handleEventClick(eventItem, s);
+                        e.currentTarget.value = "";
+                      },
+                      style: {
+                        width: "100%",
+                        padding: "0.625rem 0.75rem",
+                        border: "1px solid var(--sk-border)",
+                        borderRadius: "0.5rem",
+                        background: "var(--sk-bg)",
+                        color: "var(--sk-text-primary)",
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                        cursor: "pointer"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select a date to register\u2026" }),
+                        schedules.map((s) => {
+                          const soldOut = s.spots_remaining === 0;
+                          const low = !soldOut && s.spots_remaining !== null && s.spots_remaining !== void 0 && s.spots_remaining < 5;
+                          return /* @__PURE__ */ jsxRuntime.jsxs("option", { value: s.id, disabled: soldOut, children: [
+                            formatDate(s.starts_at),
+                            " \xB7 ",
+                            formatTime(s.starts_at),
+                            soldOut ? " \u2014 Sold Out" : low ? ` \u2014 ${s.spots_remaining} left` : ""
+                          ] }, s.id);
+                        })
+                      ]
+                    }
+                  ) })
                 ] })
               ] })
             ]
@@ -6700,7 +6835,7 @@ function EventsWidget({
           uniqueKey
         );
       }) }),
-      showViewAll && events.length > limit && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      showViewAll && groupedList.length >= limit && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
           href: viewAllUrl,
@@ -6850,6 +6985,35 @@ function getApiKey2() {
   }
   return "";
 }
+function groupEventsByOffering(events) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const ev of events) {
+    const incoming = (ev.schedules || []).filter(Boolean);
+    const existing = groups.get(ev.id);
+    if (existing) {
+      for (const s of incoming) {
+        if (!existing.schedules.some((x) => x.id === s.id)) {
+          existing.schedules.push(s);
+        }
+      }
+    } else {
+      groups.set(ev.id, { event: ev, schedules: [...incoming] });
+    }
+  }
+  for (const g of groups.values()) {
+    g.schedules.sort(
+      (a, b) => new Date(a.starts_at).getTime() - new Date(b.starts_at).getTime()
+    );
+  }
+  return Array.from(groups.values()).sort((a, b) => {
+    const aFirst = a.schedules[0]?.starts_at;
+    const bFirst = b.schedules[0]?.starts_at;
+    if (!aFirst && !bFirst) return 0;
+    if (!aFirst) return 1;
+    if (!bFirst) return -1;
+    return new Date(aFirst).getTime() - new Date(bFirst).getTime();
+  });
+}
 
 exports.CalendarView = CalendarView;
 exports.CheckoutForm = CheckoutForm;
@@ -6895,5 +7059,5 @@ exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
 exports.validateAddress = validateAddress;
 exports.validateDiscountCode = validateDiscountCode;
-//# sourceMappingURL=chunk-TA2RGEE3.js.map
-//# sourceMappingURL=chunk-TA2RGEE3.js.map
+//# sourceMappingURL=chunk-JPVTQNIS.js.map
+//# sourceMappingURL=chunk-JPVTQNIS.js.map