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,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>
+  );
+}