@bearmenu/ui 0.1.1 → 0.5.1

package/src/components/place-card.test.tsx

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PlaceCard } from "./place-card";
+import type { PlaceCardLabels, PlacePreview } from "./place-types";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const LABELS: PlaceCardLabels = {
+  open: "Open",
+  closed: "Closed",
+  until: "until",
+  opensAt: "opens at",
+  currency: "RON",
+};
+
+function makePlace(overrides: Partial<PlacePreview> = {}): PlacePreview {
+  return {
+    id: "1",
+    slug: "test-place",
+    name: "Test Place",
+    ...overrides,
+  };
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("PlaceCard", () => {
+  // ─── Happy path ─────────────────────────────────────────────────────────────
+
+  it("renders place name", () => {
+    render(<PlaceCard place={makePlace()} labels={LABELS} />);
+    expect(screen.getByText("Test Place")).toBeInTheDocument();
+  });
+
+  it("renders rating when provided", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ rating: { rating: 4.5, count: 120 } })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("4.5")).toBeInTheDocument();
+    expect(screen.getByText("(120)")).toBeInTheDocument();
+  });
+
+  it("does not render rating when omitted", () => {
+    render(<PlaceCard place={makePlace()} labels={LABELS} />);
+    // No star-rating text should appear
+    expect(screen.queryByText(/^\d+\.\d+$/)).not.toBeInTheDocument();
+  });
+
+  // ─── onClick / interactive behaviour ────────────────────────────────────────
+
+  it("renders a <button> with cursor-pointer class when onClick is provided", () => {
+    const onClick = vi.fn();
+    render(<PlaceCard place={makePlace()} labels={LABELS} onClick={onClick} />);
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(button.className).toContain("cursor-pointer");
+  });
+
+  it("renders a <div> (no button role) when onClick is omitted", () => {
+    render(<PlaceCard place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("fires onClick with the place object when clicked", () => {
+    const onClick = vi.fn();
+    const place = makePlace({ name: "Clickable Place" });
+    render(<PlaceCard place={place} labels={LABELS} onClick={onClick} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledWith(place);
+  });
+
+  // ─── Thumbnail fallback ──────────────────────────────────────────────────────
+
+  it("renders UtensilsCrossed icon when thumbnail_url is missing", () => {
+    render(<PlaceCard place={makePlace()} labels={LABELS} />);
+    // The icon is aria-hidden but we can check that no <img> is rendered
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    // Verify the container still renders (icon placeholder)
+    const heading = screen.getByText("Test Place");
+    expect(heading).toBeInTheDocument();
+  });
+
+  it("renders image when thumbnail_url is provided", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ thumbnail_url: "https://example.com/thumb.jpg" })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+
+  it("falls back to UtensilsCrossed icon when image errors", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ thumbnail_url: "https://example.com/thumb.jpg" })}
+        labels={LABELS}
+      />
+    );
+    const img = screen.getByRole("img");
+    expect(img).toBeInTheDocument();
+
+    // Trigger the error handler
+    fireEvent.error(img);
+
+    // Image should be replaced by the fallback (no <img> in DOM)
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+
+  // ─── Open / Closed status labels ────────────────────────────────────────────
+
+  it("shows labels.open text when place.open_now is true", () => {
+    render(
+      <PlaceCard place={makePlace({ open_now: true })} labels={LABELS} />
+    );
+    expect(screen.getByText("Open")).toBeInTheDocument();
+  });
+
+  it("shows labels.closed text when place.open_now is false", () => {
+    render(
+      <PlaceCard place={makePlace({ open_now: false })} labels={LABELS} />
+    );
+    expect(screen.getByText("Closed")).toBeInTheDocument();
+  });
+
+  it("uses labels.until with closes_at hour when open_now is true", () => {
+    render(
+      <PlaceCard
+        place={makePlace({
+          open_now: true,
+          today_schedule: [{ opens_at: 9, closes_at: 22 }],
+        })}
+        labels={LABELS}
+      />
+    );
+    // Renders "· until 22:00"
+    expect(screen.getByText(/until 22:00/)).toBeInTheDocument();
+  });
+
+  it("uses labels.opensAt with opens_at hour when open_now is false", () => {
+    render(
+      <PlaceCard
+        place={makePlace({
+          open_now: false,
+          today_schedule: [{ opens_at: 9, closes_at: 22 }],
+        })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText(/opens at 09:00/)).toBeInTheDocument();
+  });
+
+  // ─── Schedule priority: today_schedule[0] over hours[0] ─────────────────────
+
+  it("prefers today_schedule[0] over hours[0] for schedule display", () => {
+    render(
+      <PlaceCard
+        place={makePlace({
+          open_now: false,
+          today_schedule: [{ opens_at: 11, closes_at: 23 }],
+          hours: [{ opens_at: 9, closes_at: 22 }],
+        })}
+        labels={LABELS}
+      />
+    );
+    // today_schedule says opens at 11, hours says 9 — expect 11
+    expect(screen.getByText(/opens at 11:00/)).toBeInTheDocument();
+    expect(screen.queryByText(/09:00/)).not.toBeInTheDocument();
+  });
+
+  it("falls back to hours[0] when today_schedule is absent", () => {
+    render(
+      <PlaceCard
+        place={makePlace({
+          open_now: false,
+          hours: [{ opens_at: 9, closes_at: 22 }],
+        })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText(/opens at 09:00/)).toBeInTheDocument();
+  });
+});

package/src/components/place-card.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { memo, useState } from "react";
+import { MapPin, Star, Clock, UtensilsCrossed, Wine } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Text } from "./text";
+import type { PlaceCardLabels, PlacePreview } from "./place-types";
+
+export interface PlaceCardProps {
+  place: PlacePreview;
+  labels: PlaceCardLabels;
+  /** Locale tag (e.g. `"en"`, `"ro"`). Reserved for future Intl number/distance formatting. */
+  locale?: string;
+  /** Optional click handler. When omitted the card renders as a non-interactive div. */
+  onClick?: (place: PlacePreview) => void;
+  className?: string;
+  /** Forwarded to the thumbnail's `loading` attribute (`"eager"` when true). */
+  priority?: boolean;
+}
+
+function formatDistance(meters?: number): string {
+  return meters ? `${(meters / 1000).toFixed(1)} km` : "—";
+}
+
+function formatRating(rating?: { rating: number; count: number }): string | null {
+  return rating?.rating ? rating.rating.toFixed(1) : null;
+}
+
+export const PlaceCard = memo(function PlaceCard({
+  place,
+  labels,
+  onClick,
+  className,
+  priority,
+}: PlaceCardProps) {
+  const [imgError, setImgError] = useState(false);
+
+  const ratingDisplay = formatRating(place.rating);
+  const reviewCount = place.review_count ?? place.rating?.count;
+  const showHeader = !!place.thumbnail_url && !imgError;
+  const distanceMeters = place.location?.distance?.meters;
+  const schedule = place.today_schedule?.[0] ?? place.hours?.[0];
+  const scheduleHour = place.open_now ? schedule?.closes_at : schedule?.opens_at;
+  const scheduleLabel = place.open_now ? labels.until : labels.opensAt;
+
+  const sharedClasses = cn(
+    "glass rounded-3xl border border-transparent bg-transparent p-0 text-left text-card-foreground transition-transform duration-300 ease-in-out hover:border-border/20 h-full flex flex-col w-full",
+    onClick &&
+      "cursor-pointer [@media(hover:hover)]:hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    className
+  );
+
+  const content = (
+    <div className="p-4 flex-1 flex flex-col">
+      {/* SECTION 1 — HEADER */}
+      <div className="flex items-start gap-3 mb-3">
+        <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center overflow-hidden flex-shrink-0">
+          {showHeader ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={place.thumbnail_url}
+              alt={place.name}
+              title={place.name}
+              width={48}
+              height={48}
+              loading={priority ? "eager" : "lazy"}
+              decoding="async"
+              className="w-full h-full object-cover"
+              onError={() => setImgError(true)}
+            />
+          ) : (
+            <UtensilsCrossed
+              className="w-6 h-6 text-primary/60"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <Text as="h3" weight="bold" leading="tight" color="default" className="text-lg mb-2">
+            {place.name}
+          </Text>
+          {ratingDisplay !== null && (
+            <div className="flex items-center gap-1">
+              <Star className="w-4 h-4 fill-primary text-primary" aria-hidden="true" />
+              <span className="font-medium text-sm">{ratingDisplay}</span>
+              {reviewCount !== undefined && reviewCount !== null && (
+                <span className="text-xs text-muted-foreground">({reviewCount})</span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* SECTION 2 — PRICE RANGES */}
+      {(place.price_dishes || place.price_drinks) && (
+        <div className="mb-3">
+          <div className="flex items-center gap-4 text-xs">
+            {place.price_dishes?.price_range_low != null &&
+              place.price_dishes?.price_range_high != null && (
+                <div className="flex items-center gap-1 text-primary">
+                  <UtensilsCrossed className="w-4 h-4" aria-hidden="true" />
+                  <span>
+                    {place.price_dishes.price_range_low}-{place.price_dishes.price_range_high}{" "}
+                    {labels.currency}
+                  </span>
+                </div>
+              )}
+            {place.price_drinks?.price_range_low != null &&
+              place.price_drinks?.price_range_high != null && (
+                <div className="flex items-center gap-1 text-primary">
+                  <Wine className="w-4 h-4" aria-hidden="true" />
+                  <span>
+                    {place.price_drinks.price_range_low}-{place.price_drinks.price_range_high}{" "}
+                    {labels.currency}
+                  </span>
+                </div>
+              )}
+          </div>
+        </div>
+      )}
+
+      {/* SECTION 3 — LOCATION & STATUS */}
+      <div className="mb-3">
+        <div className="flex items-center gap-2 text-sm text-primary">
+          {distanceMeters !== undefined && distanceMeters !== null && (
+            <>
+              <div className="flex items-center gap-1">
+                <MapPin className="w-3 h-3" aria-hidden="true" />
+                <span className="text-xs">{formatDistance(distanceMeters)}</span>
+              </div>
+              <span>·</span>
+            </>
+          )}
+          <div className="flex items-center gap-1">
+            <Clock
+              className={cn(
+                "w-3 h-3",
+                place.open_now ? "text-green-500" : "text-muted-foreground"
+              )}
+              aria-hidden="true"
+            />
+            <span
+              className={cn(
+                "text-xs",
+                place.open_now ? "text-green-500" : "text-muted-foreground"
+              )}
+            >
+              {place.open_now ? labels.open : labels.closed}
+            </span>
+            {scheduleHour != null && (
+              <span
+                className={cn(
+                  "text-xs",
+                  place.open_now ? "text-green-500" : "text-muted-foreground"
+                )}
+              >
+                {`· ${scheduleLabel} ${String(scheduleHour).padStart(2, "0")}:00`}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* SECTION 4 — DESCRIPTION */}
+      {place.description && (
+        <div className="mb-4">
+          <Text as="p" variant="caption" color="muted" className="line-clamp-2">
+            {place.description}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+
+  if (onClick) {
+    return (
+      <button type="button" className={sharedClasses} onClick={() => onClick(place)}>
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={sharedClasses}>{content}</div>;
+});
+
+PlaceCard.displayName = "PlaceCard";

package/src/components/place-details-mobile.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState } from "react";
+import {
+  CalendarDays,
+  Clock,
+  DollarSign,
+  Info,
+  MessageSquare,
+  Star,
+  UtensilsCrossed,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+import { Text } from "./text";
+import { PlaceAboutTab } from "./place-about-tab";
+import type { PlaceDetailsMobileLabels, PlaceHourBlock, PlacePreview } from "./place-types";
+
+export interface PlaceDetailsMobileProps {
+  place: PlacePreview;
+  labels: PlaceDetailsMobileLabels;
+  /** Pre-resolved cover image URL. When omitted or it 404s, an icon fallback renders. */
+  coverImageUrl?: string;
+  className?: string;
+}
+
+function formatHour(h: number): string {
+  return `${h.toString().padStart(2, "0")}:00`;
+}
+
+function formatRating(rating?: { rating: number; count: number }): string | null {
+  return rating?.rating ? rating.rating.toFixed(1) : null;
+}
+
+/** Mirror FE's price-level heuristic. Result is in 1..5 or null. */
+function priceLevelFromRanges(place: PlacePreview): number | null {
+  const dish = place.price_dishes?.price_range_high ?? place.price_dishes?.price_range_low ?? 0;
+  const drink = place.price_drinks?.price_range_high ?? place.price_drinks?.price_range_low ?? 0;
+  if (dish === 0 && drink === 0) return null;
+  const avg = dish > 0 && drink > 0 ? Math.round((dish + drink) / 2) : dish || drink;
+  return Math.max(1, Math.min(5, avg));
+}
+
+function getClosingHour(hours: PlaceHourBlock[], currentHour: number): number | null {
+  if (!hours.length) return null;
+  const active = hours.find((s) => s.opens_at <= currentHour && s.closes_at > currentHour);
+  if (active) return active.closes_at;
+  const last = hours[hours.length - 1];
+  return last ? last.closes_at : null;
+}
+
+function getNextOpeningToday(hours: PlaceHourBlock[], currentHour: number): number | null {
+  if (!hours.length) return null;
+  const later = hours.find((s) => s.opens_at > currentHour);
+  return later ? later.opens_at : null;
+}
+
+/**
+ * Read-only mobile preview of a place's details page with the About tab selected.
+ * Used in admin's live profile preview (inside `<PhoneFrame>`). Pure presentational
+ * — all i18n via `labels`, no router/analytics. Tabs are visual only.
+ */
+export function PlaceDetailsMobile({
+  place,
+  labels,
+  coverImageUrl,
+  className,
+}: PlaceDetailsMobileProps) {
+  const [imgError, setImgError] = useState(false);
+
+  const ratingDisplay = formatRating(place.rating);
+  const reviewCount = place.review_count ?? place.rating?.count;
+  const priceLevel = priceLevelFromRanges(place);
+  const hours = place.hours ?? [];
+  const currentHour = new Date().getHours();
+  const closingHour = place.open_now ? getClosingHour(hours, currentHour) : null;
+  const nextOpening = !place.open_now ? getNextOpeningToday(hours, currentHour) : null;
+  const showCover = !!coverImageUrl && !imgError;
+
+  return (
+    <div className={cn("flex flex-col bg-background", className)}>
+      <div className="px-4 pt-4">
+        <div className="rounded-[22px] overflow-hidden relative">
+          <div className="h-44 flex items-center justify-center relative overflow-hidden">
+            {/* Status badge — bottom right */}
+            <div className="absolute bottom-2 right-2 z-20 flex items-center gap-1.5 bg-surface border border-border px-2.5 h-7 rounded-[12px] text-[11px] font-medium text-foreground">
+              <span
+                className={cn(
+                  "w-1.5 h-1.5 rounded-full flex-shrink-0",
+                  place.open_now ? "bg-green-500" : "bg-muted-foreground"
+                )}
+              />
+              <span>
+                {place.open_now ? labels.statusBadge.openNow : labels.statusBadge.closed}
+                {place.open_now && closingHour != null && (
+                  <span className="text-muted-foreground">
+                    {" · "}
+                    {labels.statusBadge.closesAt} {formatHour(closingHour)}
+                  </span>
+                )}
+                {!place.open_now && nextOpening != null && (
+                  <span className="text-muted-foreground">
+                    {" · "}
+                    {labels.statusBadge.opensAt} {formatHour(nextOpening)}
+                  </span>
+                )}
+                {!place.open_now && nextOpening == null && hours[0] && (
+                  <span className="text-muted-foreground">
+                    {" · "}
+                    {labels.statusBadge.opensTomorrow} {formatHour(hours[0].opens_at)}
+                  </span>
+                )}
+              </span>
+            </div>
+
+            {showCover ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={coverImageUrl}
+                alt={place.name}
+                className="absolute inset-0 w-full h-full object-cover"
+                onError={() => setImgError(true)}
+              />
+            ) : (
+              <>
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5" />
+                <div className="relative z-10 flex flex-col items-center justify-center gap-2 h-full">
+                  <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
+                    <UtensilsCrossed
+                      className="w-8 h-8 text-primary"
+                      strokeWidth={1.5}
+                      aria-hidden
+                    />
+                  </div>
+                  <Text as="p" variant="caption" color="muted" weight="medium">
+                    {labels.noImageAvailable}
+                  </Text>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="pt-4 px-1">
+          <h1 className="text-[26px] leading-[1.05] font-bold tracking-tight text-foreground break-words">
+            {place.name}
+          </h1>
+
+          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12px] text-muted-foreground">
+            {ratingDisplay && (
+              <div className="flex items-center gap-1">
+                <Star className="w-3 h-3 text-primary fill-primary" aria-hidden />
+                <span className="text-foreground font-semibold">{ratingDisplay}</span>
+                {reviewCount != null && (
+                  <span className="text-muted-foreground">
+                    {labels.reviewCount(reviewCount)}
+                  </span>
+                )}
+              </div>
+            )}
+
+            {priceLevel != null && (
+              <div className="flex items-center -space-x-0.5" aria-label={`Price level ${priceLevel} of 5`}>
+                {Array.from({ length: 5 }, (_, i) => (
+                  <DollarSign
+                    key={i}
+                    className={cn(
+                      "w-3 h-3",
+                      i < priceLevel ? "text-foreground" : "text-muted-foreground/30"
+                    )}
+                    strokeWidth={2.5}
+                    aria-hidden
+                  />
+                ))}
+              </div>
+            )}
+
+            <div className="flex items-center gap-1">
+              <Clock className="w-3.5 h-3.5" aria-hidden />
+              <span
+                className={cn(
+                  place.open_now ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                )}
+              >
+                {place.open_now ? labels.statusBadge.openNow : labels.statusBadge.closed}
+              </span>
+            </div>
+          </div>
+
+          {place.cuisines && place.cuisines.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {place.cuisines.map((cuisine) => (
+                <Badge key={cuisine} variant="outline" className="capitalize text-[11px]">
+                  {cuisine.replace(/-/g, " ")}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Tab strip — visual mirror of FE's MenuTabs, About selected, non-interactive */}
+      <div className="mt-5 px-4">
+        <div className="border-b border-border">
+          <div className="flex w-full">
+            <MobileTabPlaceholder icon={<UtensilsCrossed className="w-3.5 h-3.5" />} label={labels.tabs.menu} />
+            <MobileTabPlaceholder
+              icon={<Info className="w-3.5 h-3.5" />}
+              label={labels.tabs.about}
+              active
+            />
+            <MobileTabPlaceholder icon={<MessageSquare className="w-3.5 h-3.5" />} label={labels.tabs.reviews} />
+            <MobileTabPlaceholder icon={<CalendarDays className="w-3.5 h-3.5" />} label={labels.tabs.events} />
+          </div>
+        </div>
+      </div>
+
+      {/* About content */}
+      <div className="pb-6">
+        <PlaceAboutTab place={place} labels={labels} />
+      </div>
+    </div>
+  );
+}
+
+function MobileTabPlaceholder({
+  icon,
+  label,
+  active,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  active?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 min-w-0 items-center justify-center gap-1 px-1 py-2.5 text-[12px] font-medium border-b-2 -mb-px",
+        active
+          ? "border-primary text-foreground"
+          : "border-transparent text-muted-foreground"
+      )}
+      aria-hidden
+    >
+      <span className="flex-shrink-0" aria-hidden>
+        {icon}
+      </span>
+      <span className="truncate">{label}</span>
+    </div>
+  );
+}