etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Subscription.tsx

Browse Source
This commit is contained in:
Egor
2026-02-04 01:17:05 +03:00
committed by GitHub
parent 026cb47694
commit 6c8d2ad69e
1 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/Subscription.tsx
View File

@@ -3139,7 +3139,7 @@ export default function Subscription() {
> >
{displayDiscount && displayDiscount > 0 && ( {displayDiscount && displayDiscount > 0 && (
<div <div
className={`absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-xs font-medium text-white ${ className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500' hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
}`} }`}
> >
@@ -3147,7 +3147,7 @@ export default function Subscription() {
</div> </div>
)} )}
<div className="text-lg font-semibold text-dark-100">{period.label}</div> <div className="text-lg font-semibold text-dark-100">{period.label}</div>
<div className="flex items-center gap-2"> <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
<span className="font-medium text-accent-400"> <span className="font-medium text-accent-400">
{formatPrice(promoPeriod.price)} {formatPrice(promoPeriod.price)}
</span> </span>
@@ -3186,20 +3186,41 @@ export default function Subscription() {
: '' : ''
} ${!option.is_available ? 'cursor-not-allowed opacity-50' : ''}`} } ${!option.is_available ? 'cursor-not-allowed opacity-50' : ''}`}
> >
{promoTraffic.percent && ( {(() => {
<div className="absolute -right-2 -top-2 rounded-full bg-orange-500 px-2 py-0.5 text-xs font-medium text-white"> const trafficDisplayDiscount = hasExistingDiscount
-{promoTraffic.percent}% ? option.discount_percent
</div> : promoTraffic.percent;
)} const trafficDisplayOriginal = hasExistingDiscount
<div className="text-lg font-semibold text-dark-100">{option.label}</div> ? option.original_price_kopeks
<div className="flex items-center justify-center gap-2"> : promoTraffic.original;
<span className="text-accent-400">{formatPrice(promoTraffic.price)}</span> return (
{promoTraffic.original && ( <>
<span className="text-xs text-dark-500 line-through"> {trafficDisplayDiscount && trafficDisplayDiscount > 0 && (
{formatPrice(promoTraffic.original)} <div
</span> className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
)} hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
</div> }`}
>
-{trafficDisplayDiscount}%
</div>
)}
<div className="text-lg font-semibold text-dark-100">
{option.label}
</div>
<div className="mt-1 flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
<span className="text-accent-400">
{formatPrice(promoTraffic.price)}
</span>
{trafficDisplayOriginal &&
trafficDisplayOriginal > promoTraffic.price && (
<span className="text-xs text-dark-500 line-through">
{formatPrice(trafficDisplayOriginal)}
</span>
)}
</div>
</>
);
})()}
</button> </button>
); );
})} })}
@@ -3240,11 +3261,20 @@ export default function Subscription() {
: 'cursor-not-allowed border-dark-800/30 bg-dark-900/30 opacity-50' : 'cursor-not-allowed border-dark-800/30 bg-dark-900/30 opacity-50'
}`} }`}
> >
{promoServer.percent && ( {(() => {
<div className="absolute -right-2 -top-2 rounded-full bg-orange-500 px-2 py-0.5 text-xs font-medium text-white"> const serverDisplayDiscount = hasExistingDiscount
-{promoServer.percent}% ? server.discount_percent
</div> : promoServer.percent;
)} return serverDisplayDiscount && serverDisplayDiscount > 0 ? (
<div
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
}`}
>
-{serverDisplayDiscount}%
</div>
) : null;
})()}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div <div
className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2 ${ className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2 ${
@@ -3257,16 +3287,21 @@ export default function Subscription() {
</div> </div>
<div> <div>
<div className="font-medium text-dark-100">{server.name}</div> <div className="font-medium text-dark-100">{server.name}</div>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
<span className="text-sm text-accent-400"> <span className="text-sm text-accent-400">
{formatPrice(promoServer.price)} {formatPrice(promoServer.price)}
{t('subscription.perMonth')} {t('subscription.perMonth')}
</span> </span>
{promoServer.original && ( {(() => {
<span className="text-xs text-dark-500 line-through"> const serverOriginal = hasExistingDiscount
{formatPrice(promoServer.original)} ? server.original_price_kopeks
</span> : promoServer.original;
)} return serverOriginal && serverOriginal > promoServer.price ? (
<span className="text-xs text-dark-500 line-through">
{formatPrice(serverOriginal)}
</span>
) : null;
})()}
</div> </div>
</div> </div>
</div> </div>