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

fix(sbp-recurring): компактный layout СБП-блока на десктопе

Browse Source 
Кнопки растягивались w-full на всю ширину карточки подписки (~1600px на
десктопе) — гигантская плашка вместо контрола. Теперь заголовок и статус
слева, компактное действие справа — зеркально соседнему тогглу
«Автопродление»; на мобиле кнопка по-прежнему на всю ширину
(w-full sm:w-auto).
This commit is contained in:
Fringg
2026-07-24 17:45:11 +03:00
parent 6c6901db66
commit faf4c450b0
1 changed files with 95 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/Subscription.tsx
View File

@@ -1177,57 +1177,25 @@ export default function Subscription() {
border: `1px solid ${g.innerBorder}`,
}}
>
{/* Заголовок и статус слева, компактное действие справа —
зеркально соседнему тогглу «Автопродление». На мобиле
кнопка падает вниз на всю ширину (w-full sm:w-auto). */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0">
<div className="text-sm font-semibold text-dark-50">
{t('subscription.sbpRecurring.title')}
</div>
{sbpUiStateValue === 'off' && (
<>
<div className="mt-0.5 text-[11px] text-dark-50/30">
{t('subscription.sbpRecurring.autopayHint')}
</div>
<button
onClick={() => enableSbpMutation.mutate()}
disabled={enableSbpMutation.isPending}
className="mt-3 w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-medium text-on-accent transition-opacity disabled:opacity-50"
>
{enableSbpMutation.isPending ? (
<span className="mx-auto block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : (
t('subscription.sbpRecurring.connect')
)}
</button>
</>
)}
{sbpUiStateValue === 'pending' && (
<>
<div className="mt-0.5 text-[11px] text-dark-50/30">
{t('subscription.sbpRecurring.statusPending')}
</div>
{sbpInfo?.redirect_url && (
<button
onClick={() => {
if (sbpInfo.redirect_url) {
openPaymentUrl(sbpInfo.redirect_url, platform, openLink);
}
}}
className="mt-3 w-full rounded-xl bg-accent-500 px-4 py-2.5 text-sm font-medium text-on-accent transition-opacity"
>
{t('subscription.sbpRecurring.confirmInBank')}
</button>
)}
<button
onClick={handleCancelSbp}
disabled={cancelSbpMutation.isPending}
className="mt-2 text-[11px] font-medium transition-colors disabled:opacity-50"
style={{ color: 'rgb(var(--color-critical-500))' }}
>
{t('subscription.sbpRecurring.cancel')}
</button>
</>
)}
{sbpUiStateValue === 'active' && sbpInfo && (
<>
<div className="mt-0.5 text-[11px] text-dark-50/30">
@@ -1239,39 +1207,78 @@ export default function Subscription() {
{sbpInfo.next_charge_at && (
<div className="mt-0.5 text-[11px] text-dark-50/30">
{t('subscription.sbpRecurring.nextCharge', {
date: new Date(sbpInfo.next_charge_at).toLocaleDateString(uiLocale(), {
date: new Date(sbpInfo.next_charge_at).toLocaleDateString(
uiLocale(),
{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}),
},
),
})}
</div>
)}
</>
)}
{sbpUiStateValue === 'past_due' && (
<div className="mt-0.5 text-[11px] font-medium text-warning-400">
{t('subscription.sbpRecurring.statusPastDue')}
</div>
)}
</div>
<div className="flex shrink-0 flex-col gap-2 sm:items-end">
{sbpUiStateValue === 'off' && (
<button
onClick={() => enableSbpMutation.mutate()}
disabled={enableSbpMutation.isPending}
className="w-full whitespace-nowrap rounded-xl bg-accent-500 px-5 py-2.5 text-sm font-medium text-on-accent transition-opacity disabled:opacity-50 sm:w-auto"
>
{enableSbpMutation.isPending ? (
<span className="mx-auto block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : (
t('subscription.sbpRecurring.connect')
)}
</button>
)}
{sbpUiStateValue === 'pending' && (
<>
{sbpInfo?.redirect_url && (
<button
onClick={() => {
if (sbpInfo.redirect_url) {
openPaymentUrl(sbpInfo.redirect_url, platform, openLink);
}
}}
className="w-full whitespace-nowrap rounded-xl bg-accent-500 px-5 py-2.5 text-sm font-medium text-on-accent transition-opacity sm:w-auto"
>
{t('subscription.sbpRecurring.confirmInBank')}
</button>
)}
<button
onClick={handleCancelSbp}
disabled={cancelSbpMutation.isPending}
className="mt-3 w-full rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50"
className="text-[11px] font-medium transition-colors disabled:opacity-50 sm:text-right"
style={{ color: 'rgb(var(--color-critical-500))' }}
>
{t('subscription.sbpRecurring.cancel')}
</button>
</>
)}
{sbpUiStateValue === 'past_due' && (
<>
<div className="mt-0.5 text-[11px] font-medium text-warning-400">
{t('subscription.sbpRecurring.statusPastDue')}
</div>
{(sbpUiStateValue === 'active' || sbpUiStateValue === 'past_due') && (
<button
onClick={handleCancelSbp}
disabled={cancelSbpMutation.isPending}
className="mt-3 w-full rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50"
className="w-full whitespace-nowrap rounded-xl border border-error-500/30 bg-error-500/10 px-5 py-2.5 text-sm font-medium text-error-400 transition-colors hover:bg-error-500/20 disabled:opacity-50 sm:w-auto"
>
{t('subscription.sbpRecurring.cancel')}
</button>
</>
)}
</div>
</div>
</div>
)}
</div>
);