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