90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
function toToman(rials) {
|
||
if (!rials) return null;
|
||
return Math.round(rials / 10).toLocaleString("fa-IR");
|
||
}
|
||
|
||
// مرحلهٔ انتخاب سرویس (فقط حالت نوبتدهی سرویسی) — پیش از انتخاب روز.
|
||
function ServiceSelect({ services = [], onContinue }) {
|
||
const [draft, setDraft] = useState([]);
|
||
|
||
const toggle = (uuid) =>
|
||
setDraft((prev) =>
|
||
prev.includes(uuid) ? prev.filter((u) => u !== uuid) : [...prev, uuid]
|
||
);
|
||
|
||
const totalMinutes = services
|
||
.filter((s) => draft.includes(s.uuid))
|
||
.reduce((sum, s) => sum + (Number(s.duration_minutes) || 0), 0);
|
||
|
||
return (
|
||
<div className="w-full max-w-[520px] mx-auto">
|
||
<h2 className="text-[16px] font-bold text-[#3B3B3B] mb-4">۱. انتخاب سرویس</h2>
|
||
|
||
{services.length === 0 ? (
|
||
<p className="text-[14px] text-[#7A7A7A]">
|
||
در حال حاضر سرویسی برای نوبتدهی آنلاین تعریف نشده است.
|
||
</p>
|
||
) : (
|
||
<div className="flex flex-col gap-2">
|
||
{services.map((s) => {
|
||
const active = draft.includes(s.uuid);
|
||
const toman = toToman(s.price_rials);
|
||
return (
|
||
<button
|
||
key={s.uuid}
|
||
type="button"
|
||
onClick={() => toggle(s.uuid)}
|
||
className={`flex items-center justify-between gap-3 p-3 rounded-xl border text-right transition-colors ${
|
||
active
|
||
? "border-[#5559CE] bg-[#5559CE]/5"
|
||
: "border-gray-200 bg-white hover:border-[#5559CE]"
|
||
}`}
|
||
>
|
||
<span className="flex items-center gap-2 min-w-0">
|
||
<span
|
||
className={`w-4 h-4 rounded border shrink-0 grid place-items-center ${
|
||
active ? "border-[#5559CE] bg-[#5559CE]" : "border-gray-300"
|
||
}`}
|
||
>
|
||
{active && (
|
||
<span className="w-2 h-2 bg-white rounded-[2px]" />
|
||
)}
|
||
</span>
|
||
<span className="text-[14px] text-[#3B3B3B] truncate">
|
||
{s.name}
|
||
</span>
|
||
</span>
|
||
<span className="flex items-center gap-2 shrink-0 text-[12px] text-[#7A7A7A]">
|
||
{s.duration_minutes ? <span>{s.duration_minutes} دقیقه</span> : null}
|
||
{toman ? <span className="text-[#5559CE]">{toman} تومان</span> : null}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{draft.length > 0 && (
|
||
<div className="mt-4 text-[13px] text-[#7A7A7A]">
|
||
مدت کل: <b className="text-[#3B3B3B]">{totalMinutes} دقیقه</b>
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="button"
|
||
disabled={draft.length === 0}
|
||
onClick={() => onContinue(draft)}
|
||
className="mt-5 w-full h-[48px] rounded-xl bg-[#5559CE] text-white text-[15px] font-medium disabled:opacity-50"
|
||
>
|
||
انتخاب زمان
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ServiceSelect;
|