feature/WNPT-395 #5
7 changed files with 226 additions and 61 deletions
|
|
@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import { Cafe } from "../services/campaignApi";
|
||||
import { chargePageUrl, createCharge } from "../services/ipgApi";
|
||||
import { fetchWalletBalances } from "../services/walletApi";
|
||||
import { formatPersianNumber } from "../utils/formatNumber";
|
||||
import { toEnglishDigits, toPersianDigits, formatPersianNumber } from "../utils/formatNumber";
|
||||
import { toE164 } from "../utils/phone";
|
||||
import { setPendingReservation } from "../utils/pendingReservation";
|
||||
import { getUserPhone } from "../utils/userPhone";
|
||||
|
|
@ -16,6 +16,7 @@ interface ReservationModalProps {
|
|||
cafe: Cafe;
|
||||
ticketPrice: number;
|
||||
cafeMatchScheduleUuid: string;
|
||||
remainingTickets: number;
|
||||
}
|
||||
|
||||
// TODO: there's no "get the logged-in customer's own wallet uuid" endpoint yet —
|
||||
|
|
@ -69,17 +70,32 @@ export default function ReservationModal({
|
|||
cafe,
|
||||
ticketPrice,
|
||||
cafeMatchScheduleUuid,
|
||||
remainingTickets,
|
||||
}: ReservationModalProps) {
|
||||
const navigate = useNavigate();
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [phone, setPhone] = useState(() => getUserPhone() ?? "");
|
||||
const [count, setCount] = useState(1);
|
||||
const [walletBalance, setWalletBalance] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
|
||||
const [payError, setPayError] = useState("");
|
||||
|
||||
const clearFieldError = (field: string) =>
|
||||
setFieldErrors((prev) => {
|
||||
if (!prev[field]) return prev;
|
||||
const next = { ...prev };
|
||||
delete next[field];
|
||||
return next;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
setFullName("");
|
||||
setPhone(getUserPhone() ?? "");
|
||||
setCount(1);
|
||||
setFieldErrors({});
|
||||
setPayError("");
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
|
|
@ -98,12 +114,16 @@ export default function ReservationModal({
|
|||
|
||||
const reservationAmount = ticketPrice * count;
|
||||
const payableAmount = Math.max(0, reservationAmount - walletBalance);
|
||||
const atMaxCount = remainingTickets > 0 && count >= remainingTickets;
|
||||
|
||||
const handlePay = async () => {
|
||||
setError("");
|
||||
setPayError("");
|
||||
|
||||
if (!fullName.trim()) {
|
||||
setError("لطفاً نام و نام خانوادگی را وارد کنید.");
|
||||
const errors: Record<string, string> = {};
|
||||
if (!fullName.trim()) errors.name = "نام و نام خانوادگی را وارد کنید";
|
||||
if (phone.length !== 11) errors.phone = "شماره تلفن باید ۱۱ رقم باشد";
|
||||
if (Object.keys(errors).length > 0) {
|
||||
setFieldErrors(errors);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +133,7 @@ export default function ReservationModal({
|
|||
cafe_match_schedule_uuid: cafeMatchScheduleUuid,
|
||||
people_count: count,
|
||||
full_name: fullName,
|
||||
phone_number: toE164(getUserPhone() ?? ""),
|
||||
phone_number: toE164(phone),
|
||||
};
|
||||
|
||||
try {
|
||||
|
|
@ -134,7 +154,7 @@ export default function ReservationModal({
|
|||
navigate("/payment/success?state=20");
|
||||
}
|
||||
} catch {
|
||||
setError(
|
||||
setPayError(
|
||||
"اتصال به درگاه پرداخت با خطا مواجه شد. لطفاً دوباره تلاش کنید.",
|
||||
);
|
||||
setIsSubmitting(false);
|
||||
|
|
@ -162,10 +182,15 @@ export default function ReservationModal({
|
|||
<input
|
||||
type="text"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
onChange={(e) => { setFullName(e.target.value); clearFieldError("name"); }}
|
||||
placeholder="نام و نام خانوادگی"
|
||||
className="w-full rounded-2xl border border-gray-200 px-4 py-3 text-right placeholder:font-light placeholder:text-[#999999]"
|
||||
className={`w-full rounded-2xl border px-4 py-3 text-right placeholder:font-light placeholder:text-[#999999] ${
|
||||
fieldErrors.name ? "border-red-400" : "border-gray-200"
|
||||
}`}
|
||||
/>
|
||||
{fieldErrors.name && (
|
||||
<p className="mt-1 text-right text-sm text-red-500">{fieldErrors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
|
|
@ -174,11 +199,22 @@ export default function ReservationModal({
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getUserPhone() ?? ""}
|
||||
readOnly
|
||||
dir="ltr"
|
||||
inputMode="numeric"
|
||||
value={phone}
|
||||
onChange={(e) => {
|
||||
const digits = toEnglishDigits(e.target.value).replace(/\D/g, "").slice(0, 11);
|
||||
setPhone(toPersianDigits(digits));
|
||||
clearFieldError("phone");
|
||||
}}
|
||||
placeholder="مثال: ۰۹۱۲۳۴۵۶۷۸۹"
|
||||
className="w-full rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-right placeholder:font-light placeholder:text-[#999999]"
|
||||
className={`w-full rounded-2xl border px-4 py-3 text-right placeholder:font-light placeholder:text-[#999999] ${
|
||||
fieldErrors.phone ? "border-red-400" : "border-gray-200"
|
||||
}`}
|
||||
/>
|
||||
{fieldErrors.phone && (
|
||||
<p className="mt-1 text-right text-sm text-red-500">{fieldErrors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
|
|
@ -206,12 +242,20 @@ export default function ReservationModal({
|
|||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCount((prev) => prev + 1)}
|
||||
className="flex h-6 w-6 items-center justify-center text-[#223D5D]"
|
||||
onClick={() => setCount((prev) => Math.min(remainingTickets, prev + 1))}
|
||||
disabled={atMaxCount}
|
||||
className={`flex h-6 w-6 items-center justify-center ${
|
||||
atMaxCount ? "cursor-not-allowed text-[#999999]" : "text-[#223D5D]"
|
||||
}`}
|
||||
>
|
||||
<Icon name="plus" className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
{remainingTickets > 0 && (
|
||||
<p className="mt-1 text-right text-sm text-gray-400">
|
||||
حداکثر {formatPersianNumber(remainingTickets)} نفر
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="mt-4 mb-3 text-right font-semibold text-gray-900">
|
||||
|
|
@ -243,8 +287,8 @@ export default function ReservationModal({
|
|||
</div>
|
||||
|
||||
<div className="sticky inset-x-0 bottom-0 bg-white px-5 pt-3 pb-6">
|
||||
{error && (
|
||||
<p className="mb-2 text-center text-sm text-red-500">{error}</p>
|
||||
{payError && (
|
||||
<p className="mb-2 text-center text-sm text-red-500">{payError}</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -21,11 +21,13 @@ function MatchSelect({
|
|||
options,
|
||||
now,
|
||||
onChange,
|
||||
error,
|
||||
}: {
|
||||
value: string
|
||||
options: MatchEvent[]
|
||||
now: Date
|
||||
onChange: (uuid: string) => void
|
||||
error?: string
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const selectedMatch = options.find((match) => match.uuid === value)
|
||||
|
|
@ -38,7 +40,7 @@ function MatchSelect({
|
|||
type="button"
|
||||
disabled={!hasMatches}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="flex h-14 w-full items-center justify-between rounded-2xl border border-gray-200 px-4 text-right disabled:opacity-50"
|
||||
className={`flex h-14 w-full items-center justify-between rounded-2xl border px-4 text-right disabled:opacity-50 ${error ? 'border-red-400' : 'border-gray-200'}`}
|
||||
>
|
||||
<span className={selectedMatch ? 'text-gray-900' : 'font-light text-[#999999]'}>
|
||||
{selectedMatch
|
||||
|
|
@ -70,6 +72,7 @@ function MatchSelect({
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
{error && <p className="mt-1 text-right text-sm text-red-500">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -171,8 +174,24 @@ export default function AddEvent() {
|
|||
const [entryFee, setEntryFee] = useState(100000)
|
||||
const [description, setDescription] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
|
||||
|
||||
const clearFieldError = (field: string) =>
|
||||
setFieldErrors((prev) => {
|
||||
if (!prev[field]) return prev
|
||||
const next = { ...prev }
|
||||
delete next[field]
|
||||
return next
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Record<string, string> = {}
|
||||
if (!selectedMatchUuid) errors.match = 'بازی را انتخاب کنید'
|
||||
if (Object.keys(errors).length > 0) {
|
||||
setFieldErrors(errors)
|
||||
return
|
||||
}
|
||||
setFieldErrors({})
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
await createCafeSchedule(getCafeUuid() ?? '', {
|
||||
|
|
@ -199,7 +218,13 @@ export default function AddEvent() {
|
|||
</button>
|
||||
|
||||
<div className="px-4">
|
||||
<MatchSelect value={selectedMatchUuid} options={matches} now={now} onChange={setSelectedMatchUuid} />
|
||||
<MatchSelect
|
||||
value={selectedMatchUuid}
|
||||
options={matches}
|
||||
now={now}
|
||||
onChange={(uuid) => { setSelectedMatchUuid(uuid); clearFieldError('match') }}
|
||||
error={fieldErrors.match}
|
||||
/>
|
||||
|
||||
<div className="mt-5">
|
||||
<label className="mb-3 block text-right text-lg font-normal text-gray-900">ظرفیت</label>
|
||||
|
|
|
|||
|
|
@ -399,6 +399,7 @@ export default function CafeDetail() {
|
|||
cafe={cafe}
|
||||
ticketPrice={schedule ? Number(schedule.ticket_price) : 0}
|
||||
cafeMatchScheduleUuid={schedule?.schedule_uuid ?? ""}
|
||||
remainingTickets={schedule?.remaining_tickets ?? 0}
|
||||
/>
|
||||
<NavigationSheet
|
||||
isOpen={isNavigationOpen}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ function FormField({
|
|||
value,
|
||||
onChange,
|
||||
inputDir = "ltr",
|
||||
error,
|
||||
}: {
|
||||
label: string;
|
||||
placeholder: string;
|
||||
|
|
@ -43,6 +44,7 @@ function FormField({
|
|||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
inputDir?: "ltr" | "rtl";
|
||||
error?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="mt-5">
|
||||
|
|
@ -55,11 +57,14 @@ function FormField({
|
|||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full rounded-2xl border border-gray-200 px-4 py-3 text-right h-14 placeholder:font-light placeholder:text-[#999999]"
|
||||
className={`w-full rounded-2xl border px-4 py-3 text-right h-14 placeholder:font-light placeholder:text-[#999999] ${
|
||||
error ? "border-red-400" : "border-gray-200"
|
||||
}`}
|
||||
/>
|
||||
{hint && (
|
||||
<p className="mt-1 text-right text-sm text-gray-500">{hint}</p>
|
||||
)}
|
||||
{error
|
||||
? <p className="mt-1 text-right text-sm text-red-500">{error}</p>
|
||||
: hint && <p className="mt-1 text-right text-sm text-gray-500">{hint}</p>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -253,10 +258,12 @@ function PhotoUpload({
|
|||
photos,
|
||||
onAdd,
|
||||
onRemove,
|
||||
error,
|
||||
}: {
|
||||
photos: UploadedPhoto[];
|
||||
onAdd: (files: File[]) => void;
|
||||
onRemove: (id: string) => void;
|
||||
error?: string;
|
||||
}) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -351,6 +358,7 @@ function PhotoUpload({
|
|||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
{error && <p className="mt-1 text-right text-sm text-red-500">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -359,10 +367,12 @@ function DocumentUpload({
|
|||
doc,
|
||||
onAdd,
|
||||
onRemove,
|
||||
error,
|
||||
}: {
|
||||
doc: UploadedDocument | null;
|
||||
onAdd: (file: File) => void;
|
||||
onRemove: () => void;
|
||||
error?: string;
|
||||
}) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -442,6 +452,7 @@ function DocumentUpload({
|
|||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
{error && <p className="mt-1 text-right text-sm text-red-500">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -494,7 +505,16 @@ export default function CafeOwnerRegister() {
|
|||
const [photos, setPhotos] = useState<UploadedPhoto[]>([]);
|
||||
const [licenseDoc, setLicenseDoc] = useState<UploadedDocument | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
|
||||
const [submitError, setSubmitError] = useState("");
|
||||
|
||||
const clearFieldError = (field: string) =>
|
||||
setFieldErrors((prev) => {
|
||||
if (!prev[field]) return prev;
|
||||
const next = { ...prev };
|
||||
delete next[field];
|
||||
return next;
|
||||
});
|
||||
|
||||
// keep refs so the unmount cleanup can revoke any remaining object URLs
|
||||
const photosRef = useRef(photos);
|
||||
|
|
@ -662,24 +682,33 @@ export default function CafeOwnerRegister() {
|
|||
};
|
||||
|
||||
const handleContinue = async () => {
|
||||
const errors: Record<string, string> = {};
|
||||
|
||||
if (!cafeName.trim()) errors.cafeName = "نام کافه الزامی است";
|
||||
if (!address.trim()) errors.address = "آدرس الزامی است";
|
||||
if (!cafePhone.trim()) errors.cafePhone = "شماره تماس الزامی است";
|
||||
if (selectedFeatures.length === 0) errors.features = "حداقل یک ویژگی انتخاب کنید";
|
||||
|
||||
const stillUploading =
|
||||
photos.some((p) => p.status === "uploading") ||
|
||||
licenseDoc?.status === "uploading";
|
||||
|
||||
if (stillUploading) {
|
||||
setError("لطفاً منتظر بمانید تا آپلود فایلها کامل شود.");
|
||||
errors.photos = "لطفاً منتظر بمانید تا آپلود فایلها کامل شود";
|
||||
} else {
|
||||
if (!photos.some((p) => p.status === "done"))
|
||||
errors.photos = "حداقل یک تصویر از کافه الزامی است";
|
||||
if (!licenseDoc || licenseDoc.status !== "done")
|
||||
errors.licenseDoc = "تصویر مجوز کسب و کار الزامی است";
|
||||
}
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
setFieldErrors(errors);
|
||||
return;
|
||||
}
|
||||
if (!isEditMode) {
|
||||
if (!photos.some((p) => p.status === "done")) {
|
||||
setError("لطفاً حداقل یک تصویر برای کافه آپلود کنید.");
|
||||
return;
|
||||
}
|
||||
if (!licenseDoc || licenseDoc.status !== "done") {
|
||||
setError("لطفاً تصویر مجوز کسب و کار را آپلود کنید.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setError("");
|
||||
|
||||
setFieldErrors({});
|
||||
setSubmitError("");
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const mediaItems: CafeMediaItem[] = [
|
||||
|
|
@ -719,7 +748,7 @@ export default function CafeOwnerRegister() {
|
|||
if (!isEditMode) {
|
||||
navigate("/owner/register/fail");
|
||||
} else {
|
||||
setError("ذخیره تغییرات با خطا مواجه شد. لطفاً دوباره تلاش کنید.");
|
||||
setSubmitError("ذخیره تغییرات با خطا مواجه شد. لطفاً دوباره تلاش کنید.");
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
|
|
@ -735,7 +764,8 @@ export default function CafeOwnerRegister() {
|
|||
label="نام کافه"
|
||||
placeholder="نام کافه را وارد کنید"
|
||||
value={cafeName}
|
||||
onChange={setCafeName}
|
||||
onChange={(v) => { setCafeName(v); clearFieldError("cafeName"); }}
|
||||
error={fieldErrors.cafeName}
|
||||
/>
|
||||
<CitySelectField
|
||||
value={effectiveCityUuid}
|
||||
|
|
@ -746,7 +776,8 @@ export default function CafeOwnerRegister() {
|
|||
label="آدرس"
|
||||
placeholder="موقعیت کافه را با جزئیات وارد کنید"
|
||||
value={address}
|
||||
onChange={setAddress}
|
||||
onChange={(v) => { setAddress(v); clearFieldError("address"); }}
|
||||
error={fieldErrors.address}
|
||||
/>
|
||||
<CafeLocationMap
|
||||
label="موقعیت روی نقشه"
|
||||
|
|
@ -758,18 +789,21 @@ export default function CafeOwnerRegister() {
|
|||
placeholder={`\u2066۰۲۱-۱۲۳۴۵۶۷۸\u2069 :مثال`}
|
||||
hint="شماره را همراه با پیششماره شهر وارد کنید."
|
||||
value={cafePhone}
|
||||
onChange={setCafePhone}
|
||||
onChange={(v) => { setCafePhone(v); clearFieldError("cafePhone"); }}
|
||||
inputDir="ltr"
|
||||
error={fieldErrors.cafePhone}
|
||||
/>
|
||||
<PhotoUpload
|
||||
photos={photos}
|
||||
onAdd={handleAddPhotos}
|
||||
onAdd={(files) => { clearFieldError("photos"); handleAddPhotos(files); }}
|
||||
onRemove={handleRemovePhoto}
|
||||
error={fieldErrors.photos}
|
||||
/>
|
||||
<DocumentUpload
|
||||
doc={licenseDoc}
|
||||
onAdd={handleAddLicense}
|
||||
onAdd={(file) => { clearFieldError("licenseDoc"); handleAddLicense(file); }}
|
||||
onRemove={handleRemoveLicense}
|
||||
error={fieldErrors.licenseDoc}
|
||||
/>
|
||||
|
||||
<div className="mt-5">
|
||||
|
|
@ -782,14 +816,17 @@ export default function CafeOwnerRegister() {
|
|||
key={feature.uuid}
|
||||
label={feature.name}
|
||||
checked={selectedFeatures.includes(feature.uuid)}
|
||||
onToggle={() => toggleFeature(feature.uuid)}
|
||||
onToggle={() => { toggleFeature(feature.uuid); clearFieldError("features"); }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{fieldErrors.features && (
|
||||
<p className="mt-1 text-right text-sm text-red-500">{fieldErrors.features}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mt-4 text-right text-sm text-red-500">{error}</p>
|
||||
{submitError && (
|
||||
<p className="mt-4 text-right text-sm text-red-500">{submitError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,21 @@ import { useEffect, useState } from "react";
|
|||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import Icon from "../components/Icon";
|
||||
import { requestOtp } from "../services/authApi";
|
||||
import { toPersianDigits } from "../utils/formatNumber";
|
||||
import { toEnglishDigits, toPersianDigits } from "../utils/formatNumber";
|
||||
import { toE164 } from "../utils/phone";
|
||||
import { setUserRole } from "../utils/role";
|
||||
|
||||
interface ApiErrorResponse {
|
||||
status_message?: string;
|
||||
details?: { message?: Record<string, string[]> };
|
||||
}
|
||||
|
||||
function extractApiError(error: unknown): string {
|
||||
const data = (error as { response?: { data?: ApiErrorResponse } })?.response?.data;
|
||||
if (data?.status_message) return data.status_message;
|
||||
return "ارسال کد با خطا مواجه شد. لطفاً دوباره تلاش کنید.";
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
|
@ -21,16 +32,20 @@ export default function Login() {
|
|||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const canContinue = phone.trim().length > 0 && acceptedTerms && !isSubmitting;
|
||||
const canContinue = phone.length === 11 && acceptedTerms && !isSubmitting;
|
||||
|
||||
const handleContinue = async () => {
|
||||
setError("");
|
||||
if (phone.length !== 11) {
|
||||
setError("شماره تلفن باید ۱۱ رقم باشد.");
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const { ttl } = await requestOtp(toE164(phone));
|
||||
navigate("/login/otp", { state: { phone, ttl, role: isOwnerFlow ? "cafe_owner" : "customer" } });
|
||||
} catch {
|
||||
setError("ارسال کد با خطا مواجه شد. لطفاً دوباره تلاش کنید.");
|
||||
} catch (err) {
|
||||
setError(extractApiError(err));
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
|
|
@ -58,7 +73,8 @@ export default function Login() {
|
|||
enterKeyHint="go"
|
||||
value={phone}
|
||||
onChange={(e) => {
|
||||
setPhone(toPersianDigits(e.target.value));
|
||||
const digits = toEnglishDigits(e.target.value).replace(/\D/g, "").slice(0, 11);
|
||||
setPhone(toPersianDigits(digits));
|
||||
setError("");
|
||||
}}
|
||||
placeholder="مثال: ۰۹۱۲۳۴۵۶۷۸۹"
|
||||
|
|
|
|||
|
|
@ -2,10 +2,15 @@ import { useEffect, useRef, useState } from 'react'
|
|||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import Icon from '../components/Icon'
|
||||
import PaymentFailModal from '../components/PaymentFailModal'
|
||||
import { createReservation, ReservationResult } from '../services/campaignApi'
|
||||
import {
|
||||
createReservation,
|
||||
fetchMyReservationByUuid,
|
||||
MyReservation,
|
||||
} from '../services/campaignApi'
|
||||
import { formatPersianNumber } from '../utils/formatNumber'
|
||||
import { fromE164 } from '../utils/phone'
|
||||
import { takePendingReservation } from '../utils/pendingReservation'
|
||||
import { formatMatchDatetime } from '../utils/iranDate'
|
||||
|
||||
// the IPG gateway redirects back here as `/payment/success?state=<code>` regardless of
|
||||
// whether the charge actually succeeded — `20` is the only code confirmed as "succeeded" so far
|
||||
|
|
@ -13,9 +18,9 @@ const SUCCESS_STATE = '20'
|
|||
|
||||
function DetailRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-gray-500">{label}</span>
|
||||
<span className="font-medium text-gray-900">{value}</span>
|
||||
<div className="flex items-start justify-between gap-4 py-2">
|
||||
<span dir="ltr" className="text-left font-medium text-gray-900 shrink-0">{value}</span>
|
||||
<span className="text-right text-gray-500 shrink-0">{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -24,10 +29,8 @@ export default function PaymentSuccess() {
|
|||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const isSuccess = searchParams.get('state') === SUCCESS_STATE
|
||||
const [reservation, setReservation] = useState<ReservationResult | null>(null)
|
||||
const [reservation, setReservation] = useState<MyReservation | null>(null)
|
||||
const [hasError, setHasError] = useState(false)
|
||||
// gateway-reported failure, or a successful payment whose reservation couldn't be created —
|
||||
// both land on the same fail modal
|
||||
const isFail = !isSuccess || hasError
|
||||
|
||||
// React 18 StrictMode double-invokes effects; the ref persists across the simulated
|
||||
|
|
@ -44,7 +47,24 @@ export default function PaymentSuccess() {
|
|||
return
|
||||
}
|
||||
createReservation(pending)
|
||||
.then((result) =>
|
||||
fetchMyReservationByUuid(result.uuid)
|
||||
.then(setReservation)
|
||||
.catch(() => {
|
||||
// full detail fetch failed — synthesise what we have from the create response
|
||||
setReservation({
|
||||
uuid: result.uuid,
|
||||
reservation_code: result.reserve_code,
|
||||
ticket_count: result.people_count,
|
||||
full_name: result.full_name,
|
||||
phone_number: result.phone_number,
|
||||
cafe_name: '',
|
||||
event_title: '',
|
||||
event_datetime: '',
|
||||
status: result.status,
|
||||
})
|
||||
}),
|
||||
)
|
||||
.catch(() => setHasError(true))
|
||||
}, [isSuccess])
|
||||
|
||||
|
|
@ -58,11 +78,20 @@ export default function PaymentSuccess() {
|
|||
{reservation ? (
|
||||
<>
|
||||
<h2 className="mt-6 text-right font-bold text-gray-900">جزئیات رزرو</h2>
|
||||
<div className="mt-2">
|
||||
<DetailRow label="تعداد" value={`${formatPersianNumber(reservation.people_count)} نفر`} />
|
||||
<div className="mt-2 divide-y divide-gray-100">
|
||||
<DetailRow label="تعداد" value={`${formatPersianNumber(reservation.ticket_count)} نفر`} />
|
||||
<DetailRow label="به نام" value={reservation.full_name} />
|
||||
<DetailRow label="شماره تماس" value={fromE164(reservation.phone_number)} />
|
||||
<DetailRow label="کد رزرو" value={reservation.reserve_code} />
|
||||
{reservation.cafe_name && (
|
||||
<DetailRow label="کافه" value={reservation.cafe_name} />
|
||||
)}
|
||||
{reservation.event_title && (
|
||||
<DetailRow label="بازی" value={reservation.event_title} />
|
||||
)}
|
||||
{reservation.event_datetime && (
|
||||
<DetailRow label="تاریخ و ساعت" value={formatMatchDatetime(reservation.event_datetime)} />
|
||||
)}
|
||||
<DetailRow label="کد رزرو" value={reservation.reservation_code} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-end gap-2 rounded-2xl bg-[#ECF2F8] px-4 py-3">
|
||||
|
|
|
|||
|
|
@ -66,3 +66,16 @@ export function formatIranKickoffTime(matchDatetimeIso: string): string {
|
|||
})
|
||||
return toPersianDigits(time)
|
||||
}
|
||||
|
||||
// e.g. "پنجشنبه ۲۷ خرداد - ساعت ۲:۰۰"
|
||||
export function formatMatchDatetime(datetimeIso: string): string {
|
||||
const date = new Date(datetimeIso)
|
||||
const weekday = new Intl.DateTimeFormat('fa-IR', {
|
||||
timeZone: IRAN_TIME_ZONE,
|
||||
weekday: 'long',
|
||||
}).format(date)
|
||||
const { month, day } = getIranJalaliParts(date)
|
||||
const monthName = PERSIAN_MONTHS[month - 1] ?? ''
|
||||
const time = formatIranKickoffTime(datetimeIso)
|
||||
return `${weekday} ${toPersianDigits(String(day))} ${monthName} - ساعت ${time}`
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue