Enhance documentation, implement Twilio OTP delivery, and update payment gateway methods. Updated AGENTS.md and README.md for clarity on ExecPlans and architecture. Added Twilio as a dependency and implemented capture/refund methods in MoyasarGateway. Improved frontend routing with react-router-dom and added authentication context. Updated styles and localization files for better user experience.

2026-02-28 15:33:50 +03:00
parent 86fd07c778
commit a1da918f95
37 changed files with 1645 additions and 277 deletions
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { apiGet } from "../api/client";
+
+export default function SalonDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const [salon, setSalon] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!id) return;
+    apiGet(`/salons/${id}/`)
+      .then(setSalon)
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <p>{t("results.loading")}</p>;
+  if (error) return <p className="error">{error}</p>;
+  if (!salon) return null;
+
+  return (
+    <section className="salon-detail">
+      <h1>{salon.name}</h1>
+      <p>{salon.description || t("card.noDescription")}</p>
+      <div className="meta">
+        <span>{salon.city}</span>
+        <span>{salon.phone_number || t("card.phoneUnavailable")}</span>
+      </div>
+
+      <h2>{t("salon.services")}</h2>
+      <ul className="service-list">
+        {salon.services?.map((s) => (
+          <li key={s.id}>
+            {s.name} – {s.duration_minutes} min, {s.price_amount} {s.currency}
+          </li>
+        ))}
+      </ul>
+
+      <h2>{t("salon.staff")}</h2>
+      <ul className="staff-list">
+        {salon.staff?.map((s) => (
+          <li key={s.id}>{s.name || s.title || `Staff ${s.id}`}</li>
+        ))}
+      </ul>
+
+      <Link to={`/book?salon=${salon.id}`} className="book-cta">
+        {t("book.cta")}
+      </Link>
+    </section>
+  );
+}