Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
2783305f07
commit
7d26eaa838
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, type FormEvent } from "react";
|
||||
import type { ApiComment } from "@/lib/api";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { SITE } from "@/lib/site";
|
||||
import { RichContent } from "./RichContent";
|
||||
|
||||
type Props = {
|
||||
productId: string;
|
||||
descriptionHtml?: string | null;
|
||||
comments: ApiComment[];
|
||||
};
|
||||
|
||||
type Tab = {
|
||||
id: "description" | "comments";
|
||||
fa: string;
|
||||
en: string;
|
||||
};
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{ id: "description", fa: "توضیحات محصول", en: "Description" },
|
||||
{ id: "comments", fa: "نظرات", en: "Comments" },
|
||||
];
|
||||
|
||||
function readToken() {
|
||||
if (typeof window === "undefined") return "";
|
||||
return (
|
||||
window.localStorage.getItem("accessToken") ||
|
||||
window.localStorage.getItem("meshkee_access_token") ||
|
||||
""
|
||||
);
|
||||
}
|
||||
|
||||
export function ProductTabs({ productId, descriptionHtml, comments: initialComments }: Props) {
|
||||
const [tab, setTab] = useState<"description" | "comments">("description");
|
||||
const [comments, setComments] = useState(initialComments);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [loggedIn, setLoggedIn] = useState(false);
|
||||
const authorName = "کاربر";
|
||||
|
||||
useEffect(() => {
|
||||
setLoggedIn(Boolean(readToken()));
|
||||
}, []);
|
||||
|
||||
async function onSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!loggedIn) return;
|
||||
const form = event.currentTarget;
|
||||
const text = String(new FormData(form).get("text") || "").trim();
|
||||
if (!text) return;
|
||||
setSending(true);
|
||||
try {
|
||||
const response = await fetch("/api/comments", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
entityType: "product",
|
||||
entityId: productId,
|
||||
authorName,
|
||||
text,
|
||||
}),
|
||||
});
|
||||
if (response.ok) {
|
||||
setSent(true);
|
||||
form.reset();
|
||||
setComments((current) => [
|
||||
{
|
||||
id: `local-${Date.now()}`,
|
||||
authorName,
|
||||
text,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
...current,
|
||||
]);
|
||||
}
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-10 rounded-2xl border border-black/5">
|
||||
<div className="flex justify-center gap-5 border-b border-black/5">
|
||||
{tabs.map((item) => {
|
||||
const active = tab === item.id;
|
||||
const label = item.id === "comments" && comments.length
|
||||
? `${item.fa} (${comments.length.toLocaleString("fa-IR")})`
|
||||
: item.fa;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => setTab(item.id)}
|
||||
className={`px-2 py-3 text-center ${
|
||||
active ? "border-b-2 border-brand text-brand" : "text-zinc-500"
|
||||
}`}
|
||||
>
|
||||
<span className={`block text-base leading-none ${active ? "font-bold" : ""}`}>{label}</span>
|
||||
<span dir="ltr" className="mt-0.5 block font-oswald text-[9px] font-normal leading-none tracking-[0.16em] uppercase opacity-70">
|
||||
{item.en}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="p-5 md:p-8">
|
||||
{tab === "description" ? (
|
||||
descriptionHtml ? (
|
||||
<RichContent html={descriptionHtml} />
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">توضیحی برای این محصول ثبت نشده است.</p>
|
||||
)
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
{comments.length ? (
|
||||
comments.map((comment) => (
|
||||
<article key={comment.id} className="rounded-xl bg-zinc-50 p-4">
|
||||
<div className="mb-2 flex items-center justify-between gap-3 text-xs text-zinc-400">
|
||||
<span className="font-bold text-ink">{comment.authorName || "کاربر"}</span>
|
||||
{comment.createdAt ? <time>{formatDate(comment.createdAt)}</time> : null}
|
||||
</div>
|
||||
<p className="text-sm leading-7 text-zinc-600">{comment.text}</p>
|
||||
</article>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">هنوز نظری ثبت نشده است.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loggedIn ? (
|
||||
<form onSubmit={onSubmit} className="rounded-xl border border-black/5 p-4">
|
||||
{sent ? (
|
||||
<p className="text-sm leading-7 text-zinc-600">نظر شما ثبت شد و پس از تایید نمایش داده میشود.</p>
|
||||
) : (
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
required
|
||||
name="text"
|
||||
placeholder="نظر خود را بنویسید..."
|
||||
className="min-w-0 flex-1 rounded-xl border border-black/5 bg-zinc-50 px-4 py-2.5 text-sm outline-none focus:border-brand"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={sending}
|
||||
className="shrink-0 rounded-xl bg-brand px-5 py-2.5 text-sm text-white disabled:opacity-60"
|
||||
>
|
||||
ارسال
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
) : (
|
||||
<div className="rounded-xl bg-zinc-50 px-4 py-5 text-center">
|
||||
<p className="text-sm text-zinc-600">برای ثبت نظر ابتدا وارد حساب کاربری شوید.</p>
|
||||
<a
|
||||
href={SITE.customerUrl}
|
||||
className="mt-3 inline-block text-sm text-brand"
|
||||
>
|
||||
ورود / ثبت نام
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user