feat(appointment): implement service-based booking flow with service selection and slot adaptation

2026-07-15 23:48:40 +03:30
parent d5845bf84d
commit 165a0a2240
11 changed files with 337 additions and 33 deletions
@@ -0,0 +1,89 @@
+"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;