hikmettan/ihaleist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: yıllık abonelik (varsayılan) — Stripe yıllık fiyatlar + periyot checkout'a geçiyor

Browse Source
This commit is contained in:
hikmettan
2026-08-29 11:58:46 +03:00
parent f04401031c
commit 8bb3d6ee48
3 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tools/Pricing.jsx
+22 -9
View File
@@ -8,7 +8,7 @@ export const Pricing = () => {
const [data, setData] = useState(null);
const [busy, setBusy] = useState(null);
const [error, setError] = useState(null);
const [yillik, setYillik] = useState(false);
const [yillik, setYillik] = useState(true); // yıllık varsayılan (indirimli)
useEffect(() => {
fetch('/api/billing/plans')
@@ -24,7 +24,7 @@ export const Pricing = () => {
const res = await fetch('/api/billing/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}` },
body: JSON.stringify({ planId }),
body: JSON.stringify({ planId, periyot: yillik ? 'yillik' : 'aylik' }),
});
const d = await res.json();
if (d.success && d.url) window.location.href = d.url;
@@ -37,7 +37,9 @@ export const Pricing = () => {
};
const plans = data?.plans || [];
const fiyatla = (p) => (yillik ? Math.round(p.fiyat * 12 * 0.83) : p.fiyat);
// Yıllık tutar Stripe'taki fiyatla birebir aynı olsun diye plandan gelir
const fiyatla = (p) => (yillik ? (p.fiyatYillik ?? Math.round(p.fiyat * 12 * 0.83)) : p.fiyat);
const aylikKarsiligi = (p) => (p.fiyatYillik ? Math.round(p.fiyatYillik / 12) : p.fiyat);
return (
<div className="space-y-6 animate-fade-in">
@@ -57,12 +59,12 @@ export const Pricing = () => {
{/* Aylık / Yıllık */}
<div className="flex justify-center">
<div className="bg-white border border-slate-200 rounded-xl p-1 inline-flex text-xs font-bold shadow-xs">
<button onClick={() => setYillik(false)} className={`px-4 py-2 rounded-lg transition-colors ${!yillik ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-50'}`}>
Aylık
</button>
<button onClick={() => setYillik(true)} className={`px-4 py-2 rounded-lg transition-colors flex items-center gap-1.5 ${yillik ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-50'}`}>
Yıllık <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${yillik ? 'bg-amber-400 text-slate-900' : 'bg-emerald-100 text-emerald-800'}`}>%17 indirim</span>
</button>
<button onClick={() => setYillik(false)} className={`px-4 py-2 rounded-lg transition-colors ${!yillik ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-50'}`}>
Aylık
</button>
</div>
</div>
@@ -106,7 +108,18 @@ export const Pricing = () => {
{p.fiyat === 0 ? 'Ücretsiz' : `₺${fiyatla(p).toLocaleString('tr-TR')}`}
</span>
{p.fiyat > 0 && <span className="text-xs text-slate-500 font-medium"> /{yillik ? 'yıl' : 'ay'}</span>}
{p.fiyat > 0 && <p className="text-[11px] text-slate-400 mt-0.5">KDV hariç</p>}
{p.fiyat > 0 && (
<p className="text-[11px] text-slate-400 mt-0.5">
KDV hariç
{yillik && (
<> · ayda ₺{aylikKarsiligi(p).toLocaleString('tr-TR')} · yılda{' '}
<span className="text-emerald-600 font-bold">
₺{(p.fiyat * 12 - fiyatla(p)).toLocaleString('tr-TR')} tasarruf
</span>
</>
)}
</p>
)}
</div>
<ul className="space-y-2 text-xs text-slate-700 flex-1">
@@ -125,8 +138,8 @@ export const Pricing = () => {
) : (
<button
onClick={() => upgrade(p.id)}
disabled={!p.satinAlinabilir || busy === p.id || !authUser}
title={!authUser ? 'Önce giriş yapın' : !p.satinAlinabilir ? 'Ödeme altyapısı bağlanmadı' : ''}
disabled={!(yillik ? p.satinAlinabilirYillik : p.satinAlinabilir) || busy === p.id || !authUser}
title={!authUser ? 'Önce giriş yapın' : !(yillik ? p.satinAlinabilirYillik : p.satinAlinabilir) ? 'Ödeme altyapısı bağlanmadı' : ''}
className={`w-full font-extrabold text-xs py-3 rounded-xl flex items-center justify-center gap-2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
p.vurgu ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-slate-900 hover:bg-slate-800 text-white'
}`}