177 lines
7.2 KiB
JavaScript
177 lines
7.2 KiB
JavaScript
// src/pages/SubscriptionHistory.jsx
|
|
import React from 'react';
|
|
import { ArrowBackIosNew, CalendarToday, AccessTime, CreditCard, Person, Visibility } from '@mui/icons-material';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { motion } from 'framer-motion';
|
|
import { CrownIcon } from 'lucide-react';
|
|
|
|
const subscriptions = [
|
|
{
|
|
id: "SUB722HSN",
|
|
plan: "Gold Plan",
|
|
profileCount: 150,
|
|
usedCount: 70,
|
|
billingCycle: "Monthly",
|
|
expireDate: "19/11/2025",
|
|
startDate: "19/10/2025",
|
|
startTime: "10:00 AM",
|
|
paymentMethod: "UPI Mode",
|
|
amount: 1800,
|
|
isActive: true
|
|
},
|
|
{
|
|
id: "SUB722HSN",
|
|
plan: "Gold Plan",
|
|
profileCount: 150,
|
|
usedCount: 70,
|
|
billingCycle: "Monthly",
|
|
expireDate: "19/11/2025",
|
|
startDate: "19/10/2025",
|
|
startTime: "10:00 AM",
|
|
paymentMethod: "UPI Mode",
|
|
amount: 1800,
|
|
isActive: false
|
|
},
|
|
|
|
{ id: "SUB722HSN",
|
|
plan: "Gold Plan",
|
|
profileCount: 150,
|
|
usedCount: 70,
|
|
billingCycle: "Monthly",
|
|
expireDate: "19/11/2025",
|
|
startDate: "19/10/2025",
|
|
startTime: "10:00 AM",
|
|
paymentMethod: "UPI Mode",
|
|
amount: 1800,
|
|
isActive: false
|
|
}
|
|
];
|
|
|
|
export default function SubscriptionHistory() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="min-h-screen ">
|
|
{/* Royal Header */}
|
|
<motion.header
|
|
initial={{ y: -100 }}
|
|
animate={{ y: 0 }}
|
|
className="bg-[#034E08] text-white shadow-2xl rounded-[10px]"
|
|
>
|
|
<div className="flex items-center justify-between px-5 py-8 safe-area-top relative">
|
|
|
|
<h1 className="text-2xl font-bold">Subscription History</h1>
|
|
<div className="w-12" />
|
|
</div>
|
|
</motion.header>
|
|
|
|
{/* Current Plan Title */}
|
|
<div className="px-6 pt-8">
|
|
<motion.h2
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="text-3xl font-bold text-gray-900 flex items-center gap-3"
|
|
>
|
|
<CrownIcon className="text-amber-500 text-4xl" />
|
|
Current Plan
|
|
</motion.h2>
|
|
</div>
|
|
|
|
<div className=''>
|
|
{/* Subscription Cards */}
|
|
<div className="px-2 py-8 pb-32 grid grid-cols-1 md:grid-cols-3 gap-2">
|
|
{subscriptions.map((sub, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.2 }}
|
|
className={`relative rounded-3xl overflow-hidden border border-1 border-gray-200 w-full max-w-md ${
|
|
sub.isActive
|
|
? 'border-amber-400 bg-gradient-to-br from-amber-50 to-pink-50'
|
|
: 'border-pink-200 bg-gradient-to-br from-pink-50 to-rose-50 opacity-90'
|
|
}`}
|
|
>
|
|
{/* Crown Badge */}
|
|
<div className={` text-[12px] absolute z-[999] -top-1 left-1/2 -translate-x-1/2 px-8 py-2 rounded-b-3xl font-bold text-white shadow-xl flex items-center gap-2 ${
|
|
sub.isActive ? 'bg-gradient-to-r from-amber-500 to-orange-600' : 'bg-gradient-to-r from-pink-500 to-rose-600'
|
|
}`}>
|
|
<CrownIcon className="text-[12px]" />
|
|
{sub.plan}
|
|
{sub.isActive && <span className="ml-2 text-[12px] bg-green-400 text-black px-3 py-1 rounded-full">ACTIVE</span>}
|
|
</div>
|
|
|
|
<div className="pt-14 pb-8 px-8">
|
|
{/* Subscription ID */}
|
|
<div className="text-center mb-6">
|
|
<p className="text-sm text-gray-600">Subscription ID</p>
|
|
<p className="text-[18px] font-bold text-gray-900">{sub.id}</p>
|
|
</div>
|
|
|
|
{/* Stats Row */}
|
|
<div className="grid grid-cols-2 gap-6 mb-4">
|
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
|
|
<Person className="text-4xl text-amber-600 mx-auto mb-2" />
|
|
<p className="text-[18px] font-bold text-gray-900">{sub.profileCount}</p>
|
|
<p className="text-sm text-gray-600">Profile Count</p>
|
|
</div>
|
|
<div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
|
|
<Visibility className="text-4xl text-green-600 mx-auto mb-2" />
|
|
<p className="text-[18px] font-bold text-gray-900">{sub.usedCount}</p>
|
|
<p className="text-sm text-gray-600">Used Count</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details Grid */}
|
|
<div className="space-y-2 text-lg">
|
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
|
<CalendarToday className="text-amber-600" /> Billing Cycle
|
|
</span>
|
|
<span className="font-bold text-gray-900 text-[14px]">{sub.billingCycle}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
|
<CalendarToday className="text-red-600" /> Expire Date
|
|
</span>
|
|
<span className="font-bold text-red-600 text-[14px]">{sub.expireDate}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
|
<AccessTime className="text-green-600" /> Start Date & Time
|
|
</span>
|
|
<span className="font-bold text-gray-900 text-[14px]">{sub.startDate} | {sub.startTime}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
|
|
<span className="flex items-center gap-3 text-gray-700 text-[14px]">
|
|
<CreditCard className="text-purple-600" /> Payment Method
|
|
</span>
|
|
<span className="font-bold text-purple-700 text-[14px]">{sub.paymentMethod}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Total Amount */}
|
|
<div className="mt-8 text-center flex gap-4 items-center justify-center flex-wrap">
|
|
<p className="text-lg text-gray-600">Total Plan Amount</p>
|
|
<p className="text-[18px] font-bold text-gray-900 bg-white/70 backdrop-blur px-4 py-2 rounded-[10px]">
|
|
₹{sub.amount.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* Final Message */}
|
|
{/* <motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.6 }}
|
|
className="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-red-600 to-rose-700 text-white py-8 text-center shadow-2xl"
|
|
>
|
|
<p className="text-xl font-bold">Your journey to forever is fully powered</p>
|
|
<p className="text-green-200 mt-2">Enjoy unlimited matches with your Gold Plan</p>
|
|
</motion.div> */}
|
|
</div>
|
|
);
|
|
} |