@colabcommerce/elements 0.0.4 → 0.9.1

package/src/components/CollapsibleStoreHours/index.jsx

@@ -0,0 +1,269 @@
+import * as React from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+export default function StoreHoursCollapsible({
+  hours,
+  openingSoonMinutes = 60,
+  closingSoonMinutes = 60,
+  className = "",
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+
+  const computed = React.useMemo(() => {
+    const safeHours = Array.isArray(hours) ? hours : [];
+    const storeTz =
+      safeHours.find((h) => h?.timezone)?.timezone ||
+      Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    const now = new Date();
+    const storeWeekdayIndex = getWeekdayIndexInTimeZone(now, storeTz); // 0..6
+    const today = safeHours.find((h) => h?.day === storeWeekdayIndex);
+
+    const status = computeStatus({
+      now,
+      today,
+      openingSoonMinutes,
+      closingSoonMinutes,
+      t,
+    });
+
+    // Display Monday..Sunday
+    const displayOrder = [1, 2, 3, 4, 5, 6, 0];
+    const byDay = new Map(safeHours.map((h) => [h.day, h]));
+    const rows = displayOrder.map((dayIdx) => {
+      const h = byDay.get(dayIdx);
+      const label = t(`default:${DAY_LABELS[dayIdx].toLowerCase()}`);
+      const isToday = dayIdx === storeWeekdayIndex;
+
+      let text = t("default:closed");
+      if (h?.open) {
+        const openDate = buildOpenDateForDisplay(h);
+        const closeDate = buildCloseDateForDisplay(h, openDate);
+        if (openDate && closeDate) {
+          text = `${formatTimeLocal(openDate)} - ${formatTimeLocal(closeDate)}`;
+        } else {
+          text = t("default:open");
+        }
+      }
+
+      return { dayIdx, label, text, isToday };
+    });
+
+    return {
+      statusLabel: t(`default:${status.label.toLowerCase().replace(" ", "_")}`), // "Closed" | "Opening Soon" | "Open" | "Closing Soon"
+      statusDetail: status.detail, // "Opens at 9am" | "Closes at 4:30pm" | ""
+      rows,
+    };
+  }, [hours, openingSoonMinutes, closingSoonMinutes]);
+
+  return (
+    <div className={className}>
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <Collapsible.Trigger asChild>
+          <button
+            type="button"
+            className={[
+              "group w-full flex items-center justify-between gap-3",
+              "rounded-lg bg-white py-2 px-3",
+              "text-sm text-muted-foreground",
+              "hover:bg-black/[0.02] active:bg-black/[0.04]",
+              "focus:outline-none",
+            ].join(" ")}
+            aria-expanded={open}
+          >
+            <div className="flex flex-col items-start">
+              <span className="text-muted-foreground leading-tight">{computed.statusLabel}</span>
+              {computed.statusDetail ? (
+                <span className="text-xs text-muted-foreground/80 leading-tight">
+                  {computed.statusDetail}
+                </span>
+              ) : null}
+            </div>
+
+            <ChevronDown
+              className={[
+                "h-4 w-4 text-black/60",
+                "transition-transform duration-200 ease-out",
+                open ? "rotate-180" : "rotate-0",
+              ].join(" ")}
+              aria-hidden="true"
+            />
+          </button>
+        </Collapsible.Trigger>
+
+        <Collapsible.Content
+          className={[
+            "mt-2 bg-white p-2",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
+          ].join(" ")}
+        >
+          <div className="grid gap-1.5">
+            {computed.rows.map((row) => (
+              <div
+                key={row.dayIdx}
+                className={[
+                  "flex items-center justify-between gap-3",
+                  "px-2.5 py-1 text-sm",
+                  row.isToday ? "text-primary font-semibold" : "border-black/5 bg-transparent",
+                ].join(" ")}
+                aria-current={row.isToday ? "date" : undefined}
+              >
+                <span>{row.label}</span>
+                <span>{row.text}</span>
+              </div>
+            ))}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  );
+}
+
+/**
+ * Toggle label logic based on today's schedule (store timezone for "today",
+ * comparisons against the user's current instant).
+ *
+ * Adds a detail line:
+ * - Closed / Opening Soon -> "Opens at X"
+ * - Open / Closing Soon -> "Closes at Y"
+ */
+function computeStatus({ now, today, openingSoonMinutes, closingSoonMinutes, t }) {
+  if (!today || !today.open) return { label: t('default:closed'), detail: "" };
+
+  const openDate = buildOpenDateForDisplay(today);
+  const closeDate = buildCloseDateForDisplay(today, openDate);
+
+  // If schedule incomplete, still show basic label
+  if (!openDate || !closeDate) return { label: t('default:open'), detail: "" };
+
+  const nowMs = now.getTime();
+  const openMs = openDate.getTime();
+  const closeMs = closeDate.getTime();
+
+  const openingSoonStart = openMs - openingSoonMinutes * 60 * 1000;
+  const closingSoonStart = closeMs - closingSoonMinutes * 60 * 1000;
+
+  const opensDetail = t('default:opens_at', { time: formatTimeLocal(openDate) });
+  const closesDetail = t('default:closes_at', { time: formatTimeLocal(closeDate) });
+
+  if (nowMs < openMs) {
+    if (nowMs >= openingSoonStart) return { label: t('default:opening_soon'), detail: opensDetail };
+    return { label: t('default:closed'), detail: opensDetail };
+  }
+
+  if (nowMs >= openMs && nowMs < closeMs) {
+    if (nowMs >= closingSoonStart) return { label: t('default:closing_soon'), detail: closesDetail };
+    return { label: t('default:open'), detail: closesDetail };
+  }
+
+  return { label: t('default:closed'), detail: opensDetail };
+}
+
+/** Returns weekday index (0=Sun..6=Sat) for a Date, as seen in `timeZone`. */
+function getWeekdayIndexInTimeZone(date, timeZone) {
+  const weekday = new Intl.DateTimeFormat("en-US", { weekday: "short", timeZone }).format(date);
+  switch (weekday) {
+    case "Sun":
+      return 0;
+    case "Mon":
+      return 1;
+    case "Tue":
+      return 2;
+    case "Wed":
+      return 3;
+    case "Thu":
+      return 4;
+    case "Fri":
+      return 5;
+    case "Sat":
+      return 6;
+    default:
+      return new Date(date).getDay();
+  }
+}
+
+/**
+ * Build "open" Date (instant) for display in user's local time.
+ * Prefer `open_at` because it encodes offset and is DST-correct for that date.
+ */
+function buildOpenDateForDisplay(h) {
+  if (!h) return null;
+
+  if (h.open_at) {
+    const d = new Date(h.open_at);
+    return isValidDate(d) ? d : null;
+  }
+
+  if (typeof h.open_at_hour === "number" && typeof h.open_at_minute === "number") {
+    return buildDateFromLocalStoreTime({
+      storeHour: h.open_at_hour,
+      storeMinute: h.open_at_minute,
+      utcOffsetMinute: h.utc_offset_minute,
+    });
+  }
+
+  return null;
+}
+
+/**
+ * Build "close" Date (instant). If close <= open, assume next day.
+ */
+function buildCloseDateForDisplay(h, openDate) {
+  if (!h) return null;
+
+  if (typeof h.close_at_hour !== "number" || typeof h.close_at_minute !== "number") return null;
+
+  let closeDate = buildDateFromLocalStoreTime({
+    storeHour: h.close_at_hour,
+    storeMinute: h.close_at_minute,
+    utcOffsetMinute: h.utc_offset_minute,
+    anchorDate: openDate || undefined,
+  });
+
+  if (!closeDate || !openDate) return closeDate;
+
+  if (closeDate.getTime() <= openDate.getTime()) {
+    closeDate = new Date(closeDate.getTime() + 24 * 60 * 60 * 1000);
+  }
+
+  return closeDate;
+}
+
+/**
+ * Build an instant from a store-local time-of-day plus a fixed UTC offset.
+ * storeLocal = UTC + offset => UTC = storeLocal - offset
+ */
+function buildDateFromLocalStoreTime({ storeHour, storeMinute, utcOffsetMinute, anchorDate }) {
+  const base = anchorDate ? new Date(anchorDate) : new Date();
+  const y = base.getFullYear();
+  const m = base.getMonth();
+  const d = base.getDate();
+
+  const utcMillis = Date.UTC(y, m, d, storeHour, storeMinute, 0) - utcOffsetMinute * 60 * 1000;
+  const out = new Date(utcMillis);
+
+  return isValidDate(out) ? out : null;
+}
+
+function isValidDate(d) {
+  return d instanceof Date && !Number.isNaN(d.getTime());
+}
+
+/** Format in user's local timezone as "9am" or "4:30pm". */
+function formatTimeLocal(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  })
+    .format(date)
+    .replace(":00", "")
+    .replace(" AM", "am")
+    .replace(" PM", "pm");
+}

package/src/components/HoursList/index.jsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+export default function HoursList({
+  hours,
+  openingSoonMinutes = 60,
+  closingSoonMinutes = 60,
+  className = "",
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+
+  const computed = React.useMemo(() => {
+    const safeHours = Array.isArray(hours) ? hours : [];
+    const storeTz =
+      safeHours.find((h) => h?.timezone)?.timezone ||
+      Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    const now = new Date();
+    const storeWeekdayIndex = getWeekdayIndexInTimeZone(now, storeTz); // 0..6
+    const today = safeHours.find((h) => h?.day === storeWeekdayIndex);
+
+    const status = computeStatus({
+      now,
+      today,
+      openingSoonMinutes,
+      closingSoonMinutes,
+      t,
+    });
+
+    // Display Monday..Sunday
+    const displayOrder = [1, 2, 3, 4, 5, 6, 0];
+    const byDay = new Map(safeHours.map((h) => [h.day, h]));
+    const rows = displayOrder.map((dayIdx) => {
+      const h = byDay.get(dayIdx);
+      const label = t(`default:${DAY_LABELS[dayIdx].toLowerCase()}`);
+      const isToday = dayIdx === storeWeekdayIndex;
+
+      let text = t("default:closed");
+      if (h?.open) {
+        const openDate = buildOpenDateForDisplay(h);
+        const closeDate = buildCloseDateForDisplay(h, openDate);
+        if (openDate && closeDate) {
+          text = `${formatTimeLocal(openDate)} - ${formatTimeLocal(closeDate)}`;
+        } else {
+          text = t("default:open");
+        }
+      }
+
+      return { dayIdx, label, text, isToday };
+    });
+
+    return {
+      statusLabel: t(`default:${status.label.toLowerCase().replace(" ", "_")}`), // "Closed" | "Opening Soon" | "Open" | "Closing Soon"
+      statusDetail: status.detail, // "Opens at 9am" | "Closes at 4:30pm" | ""
+      rows,
+    };
+  }, [hours, openingSoonMinutes, closingSoonMinutes]);
+
+  return (
+    <>
+      {computed.rows.map((row) => (
+        <>
+          <div
+            key={row.dayIdx}
+            className={`flex justify-between items-center py-2 ${row.isToday ? "bg-primary/5 -mx-4 px-4 rounded-lg" : ""
+              }`}
+          >
+            <span className={`font-medium ${row.isToday ? "text-primary" : ""}`}>
+              {row.label}
+              {row.isToday && <span className="ml-2 text-xs">(Today)</span>}
+            </span>
+            <span className="text-muted-foreground">{row.text}</span>
+          </div>
+        </>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Toggle label logic based on today's schedule (store timezone for "today",
+ * comparisons against the user's current instant).
+ *
+ * Adds a detail line:
+ * - Closed / Opening Soon -> "Opens at X"
+ * - Open / Closing Soon -> "Closes at Y"
+ */
+function computeStatus({ now, today, openingSoonMinutes, closingSoonMinutes, t }) {
+  if (!today || !today.open) return { label: t('default:closed'), detail: "" };
+
+  const openDate = buildOpenDateForDisplay(today);
+  const closeDate = buildCloseDateForDisplay(today, openDate);
+
+  // If schedule incomplete, still show basic label
+  if (!openDate || !closeDate) return { label: t('default:open'), detail: "" };
+
+  const nowMs = now.getTime();
+  const openMs = openDate.getTime();
+  const closeMs = closeDate.getTime();
+
+  const openingSoonStart = openMs - openingSoonMinutes * 60 * 1000;
+  const closingSoonStart = closeMs - closingSoonMinutes * 60 * 1000;
+
+  const opensDetail = t('default:opens_at', { time: formatTimeLocal(openDate) });
+  const closesDetail = t('default:closes_at', { time: formatTimeLocal(closeDate) });
+
+  if (nowMs < openMs) {
+    if (nowMs >= openingSoonStart) return { label: t('default:opening_soon'), detail: opensDetail };
+    return { label: t('default:closed'), detail: opensDetail };
+  }
+
+  if (nowMs >= openMs && nowMs < closeMs) {
+    if (nowMs >= closingSoonStart) return { label: t('default:closing_soon'), detail: closesDetail };
+    return { label: t('default:open'), detail: closesDetail };
+  }
+
+  return { label: t('default:closed'), detail: opensDetail };
+}
+
+/** Returns weekday index (0=Sun..6=Sat) for a Date, as seen in `timeZone`. */
+function getWeekdayIndexInTimeZone(date, timeZone) {
+  const weekday = new Intl.DateTimeFormat("en-US", { weekday: "short", timeZone }).format(date);
+  switch (weekday) {
+    case "Sun":
+      return 0;
+    case "Mon":
+      return 1;
+    case "Tue":
+      return 2;
+    case "Wed":
+      return 3;
+    case "Thu":
+      return 4;
+    case "Fri":
+      return 5;
+    case "Sat":
+      return 6;
+    default:
+      return new Date(date).getDay();
+  }
+}
+
+/**
+ * Build "open" Date (instant) for display in user's local time.
+ * Prefer `open_at` because it encodes offset and is DST-correct for that date.
+ */
+function buildOpenDateForDisplay(h) {
+  if (!h) return null;
+
+  if (h.open_at) {
+    const d = new Date(h.open_at);
+    return isValidDate(d) ? d : null;
+  }
+
+  if (typeof h.open_at_hour === "number" && typeof h.open_at_minute === "number") {
+    return buildDateFromLocalStoreTime({
+      storeHour: h.open_at_hour,
+      storeMinute: h.open_at_minute,
+      utcOffsetMinute: h.utc_offset_minute,
+    });
+  }
+
+  return null;
+}
+
+/**
+ * Build "close" Date (instant). If close <= open, assume next day.
+ */
+function buildCloseDateForDisplay(h, openDate) {
+  if (!h) return null;
+
+  if (typeof h.close_at_hour !== "number" || typeof h.close_at_minute !== "number") return null;
+
+  let closeDate = buildDateFromLocalStoreTime({
+    storeHour: h.close_at_hour,
+    storeMinute: h.close_at_minute,
+    utcOffsetMinute: h.utc_offset_minute,
+    anchorDate: openDate || undefined,
+  });
+
+  if (!closeDate || !openDate) return closeDate;
+
+  if (closeDate.getTime() <= openDate.getTime()) {
+    closeDate = new Date(closeDate.getTime() + 24 * 60 * 60 * 1000);
+  }
+
+  return closeDate;
+}
+
+/**
+ * Build an instant from a store-local time-of-day plus a fixed UTC offset.
+ * storeLocal = UTC + offset => UTC = storeLocal - offset
+ */
+function buildDateFromLocalStoreTime({ storeHour, storeMinute, utcOffsetMinute, anchorDate }) {
+  const base = anchorDate ? new Date(anchorDate) : new Date();
+  const y = base.getFullYear();
+  const m = base.getMonth();
+  const d = base.getDate();
+
+  const utcMillis = Date.UTC(y, m, d, storeHour, storeMinute, 0) - utcOffsetMinute * 60 * 1000;
+  const out = new Date(utcMillis);
+
+  return isValidDate(out) ? out : null;
+}
+
+function isValidDate(d) {
+  return d instanceof Date && !Number.isNaN(d.getTime());
+}
+
+/** Format in user's local timezone as "9am" or "4:30pm". */
+function formatTimeLocal(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  })
+    .format(date)
+    .replace(":00", "")
+    .replace(" AM", "am")
+    .replace(" PM", "pm");
+}