+ {clientPlan === 'estate' && (booking.status === 'completed' || booking.status === 'closed') ? (
+
+ ) : (
+
+ )}
عرض التفاصيل
diff --git a/app/client/profile/page.tsx b/app/client/profile/page.tsx
index 1d2132a..1e6b477 100644
--- a/app/client/profile/page.tsx
+++ b/app/client/profile/page.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import {
- LogOut, Pencil, Home, Wallet, BellRing, HelpCircle, FileText, ShoppingBag
+ LogOut, Pencil, Home, Wallet, BellRing, HelpCircle, FileText, ShoppingBag, Star
} from 'lucide-react'
import { useAuth } from '@/contexts/AuthContext'
import { createClient } from '@/lib/supabase/client'
@@ -13,6 +13,7 @@ import { SubPageLayout } from '@/components/ui/SubPageLayout'
import { StatCard } from '@/components/ui/profile/StatCard'
import { MenuGroup } from '@/components/ui/profile/MenuGroup'
import { MenuLink } from '@/components/ui/profile/MenuLink'
+import { getActiveSubscription, ClientSubscription } from '@/lib/supabase/subscriptions'
export default function ProfilePage() {
const { profile } = useAuth()
@@ -20,6 +21,7 @@ export default function ProfilePage() {
const router = useRouter()
const [orderCount, setOrderCount] = useState(0)
const [walletBalance, setWalletBalance] = useState(0)
+ const [subscription, setSubscription] = useState
(null)
useEffect(() => {
if (!profile?.id) return
@@ -34,6 +36,9 @@ export default function ProfilePage() {
if (profile.wallet_balance != null) {
setWalletBalance(profile.wallet_balance)
}
+
+ const sub = await getActiveSubscription(profile.id)
+ setSubscription(sub)
}
fetchData()
}, [profile, supabase])
@@ -50,6 +55,7 @@ export default function ProfilePage() {
{ title: 'تعديل الملف الشخصي', href: '/client/profile/edit', icon: Pencil, color: '#FF8A00', bg: '#1E1B15' },
{ title: 'العناوين المحفوظة', href: '/client/addresses', icon: Home, color: '#FFB800', bg: '#1A1813' },
{ title: 'طلباتي', href: '/client/orders', icon: ShoppingBag, color: '#FF8A00', bg: '#1E1B15' },
+ { title: 'اشتراكاتي', href: '/client/subscriptions', icon: Star, color: '#FFB800', bg: '#1A1813' },
]
},
{
@@ -112,6 +118,21 @@ export default function ProfilePage() {
/>
{menuGroups.map((group, i) => (
diff --git a/app/client/subscriptions/page.tsx b/app/client/subscriptions/page.tsx
new file mode 100644
index 0000000..fa07c54
--- /dev/null
+++ b/app/client/subscriptions/page.tsx
@@ -0,0 +1,211 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { SubPageLayout } from '@/components/ui/SubPageLayout';
+import { PageHeader } from '@/components/ui/PageHeader';
+import PricingCard from '@/components/subscriptions/PricingCard';
+import { getActiveSubscription, subscribeToPlan, PlanType, ClientSubscription } from '@/lib/supabase/subscriptions';
+import { useAuth } from '@/contexts/AuthContext';
+
+export default function SubscriptionsPage() {
+ const { profile } = useAuth();
+ const [activeSubscription, setActiveSubscription] = useState
(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [actionLoading, setActionLoading] = useState(null);
+ const [confirmPlan, setConfirmPlan] = useState(null);
+
+ useEffect(() => {
+ if (profile) {
+ loadSubscription();
+ }
+ }, [profile]);
+
+ const loadSubscription = async () => {
+ if (!profile) return;
+ setIsLoading(true);
+ const sub = await getActiveSubscription(profile.id);
+ setActiveSubscription(sub);
+ setIsLoading(false);
+ };
+
+ const handleSubscribeClick = (plan: PlanType) => {
+ setConfirmPlan(plan);
+ };
+
+ const executeSubscription = async () => {
+ if (!profile || !confirmPlan) return;
+
+ setActionLoading(confirmPlan);
+ const planToSubscribe = confirmPlan;
+ setConfirmPlan(null); // Close modal
+
+ const result = await subscribeToPlan(profile.id, planToSubscribe);
+ setActionLoading(null);
+
+ if (result.success) {
+ alert('تم الاشتراك بنجاح! شكراً لك.');
+ await loadSubscription(); // Refresh
+ } else {
+ alert(result.error || 'حدث خطأ أثناء الاشتراك');
+ }
+ };
+
+ const plans = [
+ {
+ type: 'free' as PlanType,
+ title: 'الباقة المجانية',
+ price: 0,
+ features: [
+ 'تسجيل الدخول والتصفح مجاناً',
+ 'حجز خدمات الصيانة العادية',
+ 'دعم فني عبر البريد الإلكتروني',
+ ],
+ },
+ {
+ type: 'care' as PlanType,
+ title: 'حرفة كير',
+ price: 49,
+ features: [
+ 'كل ميزات الباقة المجانية',
+ 'خصم 10% على إجمالي الفاتورة',
+ ],
+ },
+ {
+ type: 'shield' as PlanType,
+ title: 'حرفة شيلد',
+ price: 99,
+ isPopular: true,
+ features: [
+ 'خصم 10% على إجمالي الفاتورة',
+ 'بدون رسوم معاينة',
+ 'طلبات مميزة (أولوية قصوى للمندوب)',
+ ],
+ },
+ {
+ type: 'estate' as PlanType,
+ title: 'حرفة إستيت',
+ price: 299,
+ features: [
+ 'بدون رسوم معاينة',
+ 'طلبات مميزة (أولوية قصوى)',
+ 'مدير حساب شخصي مخصص (VIP)',
+ 'طلب ضمان للخدمات المكتملة',
+ ],
+ },
+ ];
+
+ return (
+
+
+
+ {/* Background Gradients */}
+
+
+
+
+ اختر الباقة المناسبة لاحتياجاتك
+
+
+ وفر أكثر مع باقات حرفة الشهرية والسنوية. استمتع بخصومات حصرية، فحوصات دورية، وأولوية في الخدمة.
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+ {plans.map((plan) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+ يمكنك ترقية أو إلغاء اشتراكك في أي وقت بسهولة وبدون رسوم خفية.
+
+
+
+
+
تأكيد الاشتراك والدفع
+
+ {(() => {
+ const selectedPlan = plans.find(p => p.type === confirmPlan);
+ const isFree = selectedPlan?.price === 0;
+ const endDate = new Date();
+ endDate.setDate(endDate.getDate() + 30);
+ const formatter = new Intl.DateTimeFormat('ar-EG', { year: 'numeric', month: 'long', day: 'numeric' });
+
+ return (
+
+
+
+ الباقة المختارة:
+ {selectedPlan?.title}
+
+ {!isFree && (
+
+ فترة الاشتراك:
+ حتى {formatter.format(endDate)}
+
+ )}
+
+
+ المبلغ المطلوب:
+ {isFree ? 'مجانًا' : `${selectedPlan?.price} ج.م`}
+
+
+
+ {!isFree ? (
+
+ سيتم خصم المبلغ من المحفظة أو البطاقة المحفوظة.
+
+ ) : (
+
+ العودة للباقة المجانية الافتراضية
+
+ )}
+
+
+
+
+
+
+ );
+ })()}
+
+