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,24 @@
+import { useTranslation } from "react-i18next";
+import { setLocale } from "../i18n";
+
+export default function LocaleSwitch() {
+  const { t, i18n } = useTranslation();
+  return (
+    <div className="locale-switch" aria-label={t("locale.label")}>
+      <button
+        type="button"
+        className={i18n.language === "ar-sa" ? "active" : ""}
+        onClick={() => setLocale("ar-sa")}
+      >
+        {t("locale.arabic")}
+      </button>
+      <button
+        type="button"
+        className={i18n.language === "en" ? "active" : ""}
+        onClick={() => setLocale("en")}
+      >
+        {t("locale.english")}
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,94 @@
+import { useTranslation } from "react-i18next";
+import { usePaymentForm } from "../hooks/usePaymentForm";
+
+export default function PaymentForm({ bookingId = "", token = "" }) {
+  const { t } = useTranslation();
+  const form = usePaymentForm(bookingId, token);
+
+  return (
+    <section className="payments">
+      <div className="payments-header">
+        <div>
+          <h2>{t("payment.title")}</h2>
+          <p className="payments-subtitle">{t("payment.subtitle")}</p>
+        </div>
+        <span className="payments-badge">{t("payment.badge")}</span>
+      </div>
+
+      <form
+        className="payments-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.submit();
+        }}
+      >
+        <label className="field">
+          <span>{t("payment.bookingId")}</span>
+          <input
+            type="number"
+            min="1"
+            value={form.bookingIdInput}
+            onChange={(e) => form.setBookingIdInput(e.target.value)}
+            placeholder="123"
+            required
+          />
+        </label>
+        <label className="field">
+          <span>{t("payment.accessToken")}</span>
+          <input
+            type="password"
+            value={form.tokenInput}
+            onChange={(e) => form.setTokenInput(e.target.value)}
+            placeholder={t("payment.accessTokenPlaceholder")}
+          />
+        </label>
+        <label className="field">
+          <span>{t("payment.sourceType")}</span>
+          <select
+            value={form.sourceType}
+            onChange={(e) => form.setSourceType(e.target.value)}
+          >
+            <option value="stcpay">{t("payment.sources.stcpay")}</option>
+            <option value="token">{t("payment.sources.token")}</option>
+            <option value="applepay">{t("payment.sources.applepay")}</option>
+          </select>
+        </label>
+        <label className="field">
+          <span>{t("payment.sourceValue")}</span>
+          <input
+            type="text"
+            value={form.sourceValue}
+            onChange={(e) => form.setSourceValue(e.target.value)}
+            placeholder={t("payment.sourceValuePlaceholder")}
+          />
+        </label>
+        <label className="field">
+          <span>{t("payment.callbackUrl")}</span>
+          <input
+            type="url"
+            value={form.callbackUrl}
+            onChange={(e) => form.setCallbackUrl(e.target.value)}
+            placeholder="https://example.com/payments/return"
+          />
+        </label>
+        <div className="payments-actions">
+          <button type="submit" disabled={form.status === "loading"}>
+            {form.status === "loading"
+              ? t("payment.processing")
+              : t("payment.payNow")}
+          </button>
+          <p className="helper">
+            {t("payment.idempotency")}: {form.idempotencyKey}
+          </p>
+        </div>
+      </form>
+
+      {form.status === "error" && form.error && (
+        <p className="error">{form.error}</p>
+      )}
+      {form.status === "ready" && form.result && (
+        <pre className="payment-result">{JSON.stringify(form.result, null, 2)}</pre>
+      )}
+    </section>
+  );
+}
@@ -0,0 +1,21 @@
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+
+export default function ProtectedRoute({ children }) {
+  const { isAuthenticated, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return (
+      <div className="auth-loading">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+}
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function SalonCard({ salon }) {
+  const { t } = useTranslation();
+  return (
+    <article className="card" data-testid="salon-card">
+      <div className="card-header">
+        <h3>{salon.name}</h3>
+        <span className="rating">{salon.rating_avg} / 5</span>
+      </div>
+      <p>{salon.description || t("card.noDescription")}</p>
+      <div className="meta">
+        <span>{salon.city}</span>
+        <span>{salon.phone_number || t("card.phoneUnavailable")}</span>
+      </div>
+      <Link to={`/salon/${salon.id}`} className="card-link">
+        {t("card.viewDetails")}
+      </Link>
+    </article>
+  );
+}
@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { useSalonSearch } from "../hooks/useSalonSearch";
+import SalonCard from "./SalonCard";
+
+export function SearchInput({ value, onChange }) {
+  const { t } = useTranslation();
+  return (
+    <div className="search">
+      <input
+        type="text"
+        placeholder={t("hero.searchPlaceholder")}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        aria-label={t("hero.searchPlaceholder")}
+      />
+    </div>
+  );
+}
+
+export default function SalonSearch({ query }) {
+  const { t } = useTranslation();
+  const { salons, status } = useSalonSearch(query);
+
+  return (
+    <section className="results">
+      <h2>{t("results.title")}</h2>
+      {status === "loading" && <p>{t("results.loading")}</p>}
+      {status === "error" && <p className="error">{t("results.error")}</p>}
+      {status === "ready" && salons.length === 0 && <p>{t("results.empty")}</p>}
+      <div className="grid">
+        {salons.map((salon) => (
+          <SalonCard key={salon.id} salon={salon} />
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,42 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
+import { BrowserRouter } from "react-router-dom";
+import SalonSearch from "./SalonSearch";
+import i18n from "../i18n";
+
+vi.mock("../api/client", () => ({
+  apiGet: vi.fn(),
+}));
+
+const { apiGet } = await import("../api/client");
+
+function renderWithRouter(ui) {
+  return render(<BrowserRouter>{ui}</BrowserRouter>);
+}
+
+describe("SalonSearch", () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    apiGet.mockResolvedValue([]);
+    await i18n.changeLanguage("en");
+  });
+
+  it("shows loading then empty when no results", async () => {
+    renderWithRouter(<SalonSearch query="test" />);
+    await waitFor(() => {
+      expect(apiGet).toHaveBeenCalledWith("/salons/?q=test");
+    });
+    expect(screen.getByText(/no salons found/i)).toBeInTheDocument();
+  });
+
+  it("shows salon cards when results returned", async () => {
+    apiGet.mockResolvedValue([
+      { id: 1, name: "Salon A", city: "Riyadh", rating_avg: 4.5, phone_number: "+966500000000" },
+    ]);
+    renderWithRouter(<SalonSearch query="salon" />);
+    await waitFor(() => {
+      expect(screen.getByText("Salon A")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Riyadh")).toBeInTheDocument();
+  });
+});