diff --git a/public/assets/icons/caution-red-icon.svg b/public/assets/icons/caution-red-icon.svg new file mode 100644 index 0000000..c5fde25 --- /dev/null +++ b/public/assets/icons/caution-red-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/lock-icon.svg b/public/assets/icons/lock-icon.svg new file mode 100644 index 0000000..cdd4f79 --- /dev/null +++ b/public/assets/icons/lock-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/lock-white-icon.svg b/public/assets/icons/lock-white-icon.svg new file mode 100644 index 0000000..6543210 --- /dev/null +++ b/public/assets/icons/lock-white-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/shield-check-icon.svg b/public/assets/icons/shield-check-icon.svg new file mode 100644 index 0000000..fe1b1a8 --- /dev/null +++ b/public/assets/icons/shield-check-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/tick-circle-icon.svg b/public/assets/icons/tick-circle-icon.svg index 8173a38..d4c9515 100644 --- a/public/assets/icons/tick-circle-icon.svg +++ b/public/assets/icons/tick-circle-icon.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/app/(agent)/agent/settings/billings/checkout/page.tsx b/src/app/(agent)/agent/settings/billings/checkout/page.tsx new file mode 100644 index 0000000..55ed673 --- /dev/null +++ b/src/app/(agent)/agent/settings/billings/checkout/page.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { SettingsSidebar } from '@/components/settings'; +import { PaymentCheckoutForm } from '@/components/settings/PaymentCheckoutForm'; + +export default function CheckoutPage() { + return ( +
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ +
+
+ ); +} diff --git a/src/components/settings/PaymentCheckoutForm.tsx b/src/components/settings/PaymentCheckoutForm.tsx new file mode 100644 index 0000000..76b3c21 --- /dev/null +++ b/src/components/settings/PaymentCheckoutForm.tsx @@ -0,0 +1,200 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; + +interface CheckoutFeature { + label: string; +} + +const CHECKOUT_FEATURES: CheckoutFeature[] = [ + { label: 'Unlimited Property Reports' }, + { label: 'Priority 24/7 Concierge Support' }, + { label: 'Advanced Lead Generation Tools' }, +]; + +export function PaymentCheckoutForm() { + const [isProcessing, setIsProcessing] = useState(false); + + const handlePayNow = async () => { + setIsProcessing(true); + // TODO: Integrate with payment gateway + setTimeout(() => setIsProcessing(false), 2000); + }; + + return ( + <> + {/* Page Title */} +
+

+ Payments +

+

+ Manage Your billing cycles , upgrade your plan , or boost individual listings +

+
+ + {/* Checkout Card */} +
+
+ {/* Left Side - Order Summary */} +
+ {/* Order Summary Header */} +

+ Order Summary +

+ + {/* Divider */} +
+ + {/* Annual Subscription Badge */} +
+ + Annual Subscription + +
+ + {/* Plan Name */} +

+ Professional Premium Plan +

+ + {/* Plan Description */} +

+ Empower your real estate business with full access to our unified solutions platform. Designed specifically for professional Lenders & Agents seeking seamless transaction management for 12 months. +

+ + {/* Features */} +
+ {CHECKOUT_FEATURES.map((feature) => ( +
+ + + {feature.label} + +
+ ))} +
+
+ + {/* Right Side - Payment Details */} +
+ {/* Trust Badges */} +
+
+ Verified + + Verified User + +
+
+ Secure + + Secure Checkout + +
+
+ + {/* Line Items */} +
+
+ + Annual Subscription + + + $499 .00 + +
+
+ + One-Time Setup Fee + + + Free + +
+
+ + Tax + + + $00 .00 + +
+
+ + {/* Divider */} +
+ + {/* Total */} +
+ + Total Amount + +
+
+ $499 + / + Year +
+
+
+
+ + Billed Annually + +
+ + {/* Divider */} +
+ + {/* Security Notice */} +
+ Notice +

+ You will be redirected to our secure payment gateway after clicking "Pay Now" to enter your payment details safely. +

+
+ + {/* Pay Now Button */} + +
+
+
+ + ); +} diff --git a/src/components/settings/SubscriptionForm.tsx b/src/components/settings/SubscriptionForm.tsx index a70008a..0a2de0e 100644 --- a/src/components/settings/SubscriptionForm.tsx +++ b/src/components/settings/SubscriptionForm.tsx @@ -2,6 +2,7 @@ import Image from 'next/image'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; interface PlanFeature { icon: string; @@ -16,6 +17,8 @@ const PLAN_FEATURES: PlanFeature[] = [ ]; export function SubscriptionForm() { + const router = useRouter(); + return ( <> {/* Page Title */} @@ -71,7 +74,10 @@ export function SubscriptionForm() {
{/* CTA Button */} -
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts index 1493c3d..19a3271 100644 --- a/src/components/settings/index.ts +++ b/src/components/settings/index.ts @@ -6,3 +6,4 @@ export { NotificationsForm } from './NotificationsForm'; export { PrivacyForm } from './PrivacyForm'; export { TwoFactorSettings } from './TwoFactorSettings'; export { SubscriptionForm } from './SubscriptionForm'; +export { PaymentCheckoutForm } from './PaymentCheckoutForm';