feat: add stickers collection
This commit is contained in:
@@ -5,6 +5,7 @@ import Link from "next/link";
|
|||||||
import { usePathname, useRouter } from "next/navigation";
|
import { usePathname, useRouter } from "next/navigation";
|
||||||
import {
|
import {
|
||||||
Flag,
|
Flag,
|
||||||
|
Gift,
|
||||||
Megaphone,
|
Megaphone,
|
||||||
FolderClosed,
|
FolderClosed,
|
||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
@@ -28,6 +29,7 @@ const NAV = [
|
|||||||
{ href: "/feedback", label: "Feedback", icon: MessageSquare },
|
{ href: "/feedback", label: "Feedback", icon: MessageSquare },
|
||||||
{ href: "/reports", label: "Reports", icon: Flag },
|
{ href: "/reports", label: "Reports", icon: Flag },
|
||||||
{ href: "/broadcasts", label: "Announcements", icon: Megaphone },
|
{ href: "/broadcasts", label: "Announcements", icon: Megaphone },
|
||||||
|
{ href: "/reward-gifts", label: "Gifts", icon: Gift },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function DashboardLayout({
|
export default function DashboardLayout({
|
||||||
|
|||||||
@@ -0,0 +1,108 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* /reward-gifts — hand a sticker to everyone, outside the streak.
|
||||||
|
*
|
||||||
|
* These arrive wrapped: each devotee sees a blurred tile in their rewards
|
||||||
|
* gallery, and opening it plays the same celebration a streak reward does.
|
||||||
|
* Nothing is required of them to earn it.
|
||||||
|
*
|
||||||
|
* Sending is idempotent — a repeat reaches only accounts that don't already
|
||||||
|
* hold the sticker — so a double click tops up rather than duplicating.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { rewardGifts, type GiftableReward } from "@/lib/api";
|
||||||
|
|
||||||
|
export default function RewardGiftsPage() {
|
||||||
|
const [catalog, setCatalog] = useState<GiftableReward[] | null>(null);
|
||||||
|
const [sending, setSending] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
rewardGifts
|
||||||
|
.catalog()
|
||||||
|
.then(setCatalog)
|
||||||
|
.catch(() => {
|
||||||
|
toast.error("Could not load the reward catalog");
|
||||||
|
setCatalog([]);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const send = async (reward: GiftableReward) => {
|
||||||
|
if (
|
||||||
|
!window.confirm(
|
||||||
|
`Send “${reward.name}” to every devotee? They'll see it wrapped in their gallery.`,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSending(reward.key);
|
||||||
|
try {
|
||||||
|
const { granted } = await rewardGifts.send(reward.key);
|
||||||
|
toast.success(
|
||||||
|
granted === 0
|
||||||
|
? "Everyone already has this one"
|
||||||
|
: `Sent to ${granted} ${granted === 1 ? "devotee" : "devotees"}`,
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
toast.error(err instanceof Error ? err.message : "Could not send the gift");
|
||||||
|
} finally {
|
||||||
|
setSending(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<header>
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">
|
||||||
|
Occasional gifts
|
||||||
|
</h1>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground">
|
||||||
|
Send a sticker to everyone, no streak required. It arrives wrapped
|
||||||
|
and opens with a celebration.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{catalog === null ? (
|
||||||
|
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||||
|
) : catalog.length === 0 ? (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
The reward catalog is empty.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
||||||
|
{catalog.map((r) => (
|
||||||
|
<li
|
||||||
|
key={r.key}
|
||||||
|
className="flex flex-col items-center gap-2 rounded-xl border border-border p-3 text-center"
|
||||||
|
>
|
||||||
|
<div className="relative aspect-square w-full">
|
||||||
|
<Image
|
||||||
|
src={r.image_url}
|
||||||
|
alt={r.name}
|
||||||
|
fill
|
||||||
|
sizes="160px"
|
||||||
|
className="object-contain p-1"
|
||||||
|
unoptimized
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="line-clamp-2 text-sm font-medium text-foreground">
|
||||||
|
{r.name}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={sending !== null}
|
||||||
|
onClick={() => send(r)}
|
||||||
|
className="w-full rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{sending === r.key ? "Sending…" : "Send to everyone"}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+23
@@ -436,3 +436,26 @@ export const broadcasts = {
|
|||||||
{ method: "POST", body: JSON.stringify({ content_type: contentType }) },
|
{ method: "POST", body: JSON.stringify({ content_type: contentType }) },
|
||||||
).then((r) => r.data),
|
).then((r) => r.data),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ─── Reward gifts ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** A sticker from the sādhana catalog, sendable as an occasional gift. */
|
||||||
|
export type GiftableReward = {
|
||||||
|
id: string;
|
||||||
|
key: string;
|
||||||
|
name: string;
|
||||||
|
meaning: string;
|
||||||
|
image_url: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const rewardGifts = {
|
||||||
|
catalog: () => call<GiftableReward[]>("/admin/reward-gifts/catalog").then((r) => r.data),
|
||||||
|
|
||||||
|
/** Hand a reward to every account, unopened. Idempotent — a repeat only
|
||||||
|
* reaches people who don't already have it. */
|
||||||
|
send: (rewardKey: string) =>
|
||||||
|
call<{ granted: number }>("/admin/reward-gifts", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ reward_key: rewardKey }),
|
||||||
|
}).then((r) => r.data),
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user