Wire payments UI and fix frontend tests

frontend/src/App.jsx

@@ -1,14 +1,33 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { apiGet } from "./api/client";
+import { apiGet, apiPost } from "./api/client";
 import { setLocale } from "./i18n";
 
 export default function App() {
   const [salons, setSalons] = useState([]);
   const [query, setQuery] = useState("");
   const [status, setStatus] = useState("idle");
+  const [paymentBookingId, setPaymentBookingId] = useState("");
+  const [paymentToken, setPaymentToken] = useState(() => localStorage.getItem("auth_token") || "");
+  const [paymentSourceType, setPaymentSourceType] = useState("stcpay");
+  const [paymentSourceValue, setPaymentSourceValue] = useState("");
+  const [paymentCallbackUrl, setPaymentCallbackUrl] = useState("");
+  const [paymentStatus, setPaymentStatus] = useState("idle");
+  const [paymentResult, setPaymentResult] = useState(null);
+  const [paymentError, setPaymentError] = useState("");
   const { t, i18n } = useTranslation();
 
+  const idempotencyKey = useMemo(() => {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return `id-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("auth_token", paymentToken);
+  }, [paymentToken]);
+
   useEffect(() => {
     let ignore = false;
 
@@ -33,6 +52,60 @@ export default function App() {
     };
   }, [query]);
 
+  async function handlePaymentSubmit(event) {
+    event.preventDefault();
+    setPaymentStatus("loading");
+    setPaymentError("");
+    setPaymentResult(null);
+
+    if (!paymentBookingId) {
+      setPaymentStatus("error");
+      setPaymentError(t("payment.errors.bookingRequired"));
+      return;
+    }
+
+    const source = { type: paymentSourceType };
+    if (paymentSourceType === "stcpay") {
+      if (!paymentSourceValue) {
+        setPaymentStatus("error");
+        setPaymentError(t("payment.errors.mobileRequired"));
+        return;
+      }
+      source.mobile = paymentSourceValue;
+    }
+    if (paymentSourceType === "token") {
+      if (!paymentSourceValue) {
+        setPaymentStatus("error");
+        setPaymentError(t("payment.errors.tokenRequired"));
+        return;
+      }
+      source.token = paymentSourceValue;
+    }
+
+    const payload = {
+      booking_id: Number(paymentBookingId),
+      provider: "moyasar",
+      idempotency_key: idempotencyKey,
+      source,
+    };
+
+    if (paymentCallbackUrl) {
+      payload.callback_url = paymentCallbackUrl;
+    }
+
+    try {
+      const data = await apiPost("/payments/", payload, paymentToken);
+      setPaymentResult(data);
+      setPaymentStatus("ready");
+      if (data?.redirect_url) {
+        window.location.assign(data.redirect_url);
+      }
+    } catch (error) {
+      setPaymentStatus("error");
+      setPaymentError(error.message || t("payment.errors.generic"));
+    }
+  }
+
   return (
     <div className="page">
       <header className="hero">
@@ -90,6 +163,83 @@ export default function App() {
           ))}
         </div>
       </section>
+
+      <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={handlePaymentSubmit}>
+          <label className="field">
+            <span>{t("payment.bookingId")}</span>
+            <input
+              type="number"
+              min="1"
+              value={paymentBookingId}
+              onChange={(event) => setPaymentBookingId(event.target.value)}
+              placeholder="123"
+              required
+            />
+          </label>
+          <label className="field">
+            <span>{t("payment.accessToken")}</span>
+            <input
+              type="password"
+              value={paymentToken}
+              onChange={(event) => setPaymentToken(event.target.value)}
+              placeholder={t("payment.accessTokenPlaceholder")}
+            />
+          </label>
+          <label className="field">
+            <span>{t("payment.sourceType")}</span>
+            <select
+              value={paymentSourceType}
+              onChange={(event) => setPaymentSourceType(event.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={paymentSourceValue}
+              onChange={(event) => setPaymentSourceValue(event.target.value)}
+              placeholder={t("payment.sourceValuePlaceholder")}
+            />
+          </label>
+          <label className="field">
+            <span>{t("payment.callbackUrl")}</span>
+            <input
+              type="url"
+              value={paymentCallbackUrl}
+              onChange={(event) => setPaymentCallbackUrl(event.target.value)}
+              placeholder="https://example.com/payments/return"
+            />
+          </label>
+          <div className="payments-actions">
+            <button type="submit" disabled={paymentStatus === "loading"}>
+              {paymentStatus === "loading" ? t("payment.processing") : t("payment.payNow")}
+            </button>
+            <p className="helper">
+              {t("payment.idempotency")}: {idempotencyKey}
+            </p>
+          </div>
+        </form>
+
+        {paymentStatus === "error" && paymentError && (
+          <p className="error">{paymentError}</p>
+        )}
+        {paymentStatus === "ready" && paymentResult && (
+          <pre className="payment-result">{JSON.stringify(paymentResult, null, 2)}</pre>
+        )}
+      </section>
     </div>
   );
 }