Order Card

1// Member plan-order row — pure UI for the "My plans" screen. Renders only fields the Order object
2// actually returns (planName, status, start/end dates); for anything else (amount paid, next-billing)
3// look it up in the Orders API reference (wix-docs) — never invent it. Styled with base44 design
4// tokens (shadcn Tailwind classes).
5
6const STATUS_BG = {
7  ACTIVE: "bg-primary",
8  PAUSED: "bg-muted",
9  ENDED: "bg-muted",
10  CANCELED: "bg-destructive",
11};
12
13export default function OrderCard({ order }) {
14  return (
15    <li className="list-none flex flex-wrap items-center gap-3 bg-card text-foreground border border-border rounded-lg shadow-sm p-4">
16      <span className="font-display font-semibold flex-1">{order.planName}</span>
17      <span className={`text-[13px] font-semibold px-2.5 py-0.5 rounded-full text-primary-foreground ${STATUS_BG[order.status] || "bg-muted"}`}>{order.status}</span>
18      {order.startDate && (
19        <span className="text-muted-foreground text-[13px]">
20          from {new Date(order.startDate).toLocaleDateString()}
21        </span>
22      )}
23      {order.endDate && (
24        <span className="text-muted-foreground text-[13px]">
25          until {new Date(order.endDate).toLocaleDateString()}
26        </span>
27      )}
28    </li>
29  );
30}