amer2004/SweetHome
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edited the payment dialog
All checks were successful
Build frontend / build (push) Successful in 1m2s
Details

Browse Source
This commit is contained in:
mouazkh
2026-07-21 01:08:29 +03:00
parent 83a06e8007
commit 66db009562
1 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
app/reservations/page.js
View File

@ -687,7 +687,7 @@ function PaymentDialog({
const amount = reservation.depositAmount || reservation.totalPrice || 0;
const currencySign = reservation.currencySign || t("sypSymbol");
const selectedMethod = paymentMethods?.find(
(m) => (m?.id ?? m?.name) === selectedPayment
(m) => (m?.id ?? m?.name) === selectedPayment,
);
const isHaram = selectedMethod?.name?.toLowerCase?.() === "haram";
const canPay = payingId !== reservation.id && (!isHaram || !!receiptImage);
@ -854,55 +854,64 @@ function PaymentDialog({
</div>
{isHaram && (
<div className="px-6 py-5 border-b border-gray-100">
<p className="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
<ImageIcon className="w-4 h-4" />
{t("uploadReceipt", { defaultValue: "إيصال الدفع" })}
</p>
{receiptImage ? (
<div className="relative rounded-2xl overflow-hidden border-2 border-amber-200 bg-amber-50">
<img
src={URL.createObjectURL(receiptImage)}
alt="receipt"
className="w-full h-48 object-contain"
/>
<button
type="button"
onClick={() => onSetReceiptImage(null)}
className="absolute top-2 left-2 w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-md"
>
<X className="w-4 h-4" />
</button>
<div className="p-3 text-center">
<p className="text-xs text-gray-500 truncate">{receiptImage.name}</p>
</div>
<div className="px-6 py-5 border-b border-gray-100">
<p className="text-sm font-bold text-gray-700 mb-3 flex items-center gap-2">
<ImageIcon className="w-4 h-4" />
{t("uploadReceipt", { defaultValue: "إيصال الدفع" })}
</p>
{receiptImage ? (
<div className="relative rounded-2xl overflow-hidden border-2 border-amber-200 bg-amber-50">
<img
src={URL.createObjectURL(receiptImage)}
alt="receipt"
className="w-full h-48 object-contain"
/>
<button
type="button"
onClick={() => onSetReceiptImage(null)}
className="absolute top-2 left-2 w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-md"
>
<X className="w-4 h-4" />
</button>
<div className="p-3 text-center">
<p className="text-xs text-gray-500 truncate">
{receiptImage.name}
</p>
</div>
) : (
<label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-2xl bg-gray-50 hover:bg-gray-100 hover:border-amber-300 transition-all cursor-pointer">
<ImageIcon className="w-10 h-10 text-gray-400 mb-2" />
<p className="text-sm text-gray-500">
{t("tapToUploadReceipt", { defaultValue: "اضغط لرفع صورة الإيصال" })}
</p>
<p className="text-xs text-gray-400 mt-1">
JPG, PNG {t("maxSize", { defaultValue: "حد أقصى 5 ميجا" })}
</p>
<input
type="file"
accept="image/jpeg,image/png,image/jpg"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) {
toast.error(t("fileTooLarge", { defaultValue: "الصورة كبيرة جداً، الحد الأقصى 5 ميجا" }));
return;
}
onSetReceiptImage(file);
}}
/>
</label>
)}
</div>
</div>
) : (
<label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-300 rounded-2xl bg-gray-50 hover:bg-gray-100 hover:border-amber-300 transition-all cursor-pointer">
<ImageIcon className="w-10 h-10 text-gray-400 mb-2" />
<p className="text-sm text-gray-500">
{t("tapToUploadReceipt", {
defaultValue: "اضغط لرفع صورة الإيصال",
})}
</p>
<p className="text-xs text-gray-400 mt-1">
JPG, PNG {t("maxSize", { defaultValue: "حد أقصى 5 ميجا" })}
</p>
<input
type="file"
accept="image/jpeg,image/png,image/jpg"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) {
toast.error(
t("fileTooLarge", {
defaultValue:
"الصورة كبيرة جداً، الحد الأقصى 5 ميجا",
}),
);
return;
}
onSetReceiptImage(file);
}}
/>
</label>
)}
</div>
)}
<div className="px-6 py-5 border-b border-gray-100">
@ -1663,7 +1672,7 @@ export default function UserReservationsPage() {
await payDeposit({
reservationId: r.id,
paymentTypeId: selectedPayment,
transactionType: "",
transactionType: 1,
comment: null,
paymentImage: receiptImage || null,
});