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

added a swicher on the properties
All checks were successful
Build frontend / build (push) Successful in 42s
Details

Browse Source
This commit is contained in:
mouazkh
2026-05-26 21:16:10 +03:00
parent 88884ed2d7
commit 3466d4715a
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/reservations/page.js
View File

@ -111,7 +111,8 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
const beds = propBeds(p);
const baths = propBaths(p);
const isOwnerConfirmed = STATUS_MAP[r.status] === 'ownerConfirmed';
const deadline = isOwnerConfirmed && r.ownerApprovalDate
const hasTimeWindow = r.ownerApprovalDate && r.allowedPaymentPeriod;
const deadline = hasTimeWindow
? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(r.allowedPaymentPeriod)
: null;
const isExpired = deadline ? Date.now() > deadline : false;
@ -143,12 +144,12 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
<div className="text-sm font-medium">{new Date(r.endDate).toLocaleDateString('ar')}</div>
</div>
</div>
{isOwnerConfirmed && <div className="bg-blue-50 p-3 rounded-xl mb-3">
{hasTimeWindow && <div className="bg-blue-50 p-3 rounded-xl mb-3">
<div className="flex items-center justify-between mb-1">
<span className="text-sm text-blue-800 font-medium flex items-center gap-1"><Timer className="w-4 h-4"/> متبقي للدفع:</span>
<CountdownTimer deadline={deadline} />
</div>
{r.allowedPaymentPeriod && <div className="text-xs text-blue-600">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>}
<div className="text-xs text-blue-600">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>
</div>}
<div className="flex gap-3 pt-3 border-t border-gray-100">
<button onClick={() => onViewDetails(r)}
@ -169,7 +170,8 @@ function DetailsModal({ r, isOpen, onClose, onPay, payingId }) {
if (!isOpen || !r) return null;
const p = r._prop;
const isOwnerConfirmed = STATUS_MAP[r.status] === 'ownerConfirmed';
const deadline = isOwnerConfirmed && r.ownerApprovalDate
const hasTimeWindow = r.ownerApprovalDate && r.allowedPaymentPeriod;
const deadline = hasTimeWindow
? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(r.allowedPaymentPeriod)
: null;
const isExpired = deadline ? Date.now() > deadline : false;
@ -209,12 +211,12 @@ function DetailsModal({ r, isOpen, onClose, onPay, payingId }) {
<h3 className="font-bold text-amber-700 mb-3 flex items-center gap-2"><DollarSign className="w-5 h-5"/> المعلومات المالية</h3>
<div className="flex justify-between font-bold"><span className="text-gray-900">الإجمالي</span><span className="text-amber-600 text-lg">{r.totalPrice?.toLocaleString()??'—'}</span></div>
</div>
{isOwnerConfirmed && <div className="bg-blue-50 p-4 rounded-xl">
{hasTimeWindow && <div className="bg-blue-50 p-4 rounded-xl">
<div className="flex items-center justify-between mb-2">
<span className="text-blue-800 font-medium flex items-center gap-2"><Timer className="w-5 h-5"/> متبقي للدفع:</span>
<CountdownTimer deadline={deadline} />
</div>
{r.allowedPaymentPeriod && <div className="text-xs text-blue-600 mb-3">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>}
<div className="text-xs text-blue-600 mb-3">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>
{!isExpired && <button onClick={() => { onPay(r); onClose(); }} disabled={isPaying}
className={`w-full py-2 rounded-xl font-medium transition-colors flex items-center justify-center gap-2 ${isPaying ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-amber-500 text-white hover:bg-amber-600'}`}>
{isPaying ? <Loader2 className="w-5 h-5 animate-spin"/> : <CreditCard className="w-5 h-5"/>} {isPaying ? 'جاري الدفع...' : 'ادفع الآن'}