diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx index c879276..30dac97 100644 --- a/src/pages/Subscription.tsx +++ b/src/pages/Subscription.tsx @@ -1177,100 +1177,107 @@ export default function Subscription() { border: `1px solid ${g.innerBorder}`, }} > -
- {t('subscription.sbpRecurring.title')} -
- - {sbpUiStateValue === 'off' && ( - <> -
- {t('subscription.sbpRecurring.autopayHint')} + {/* Заголовок и статус слева, компактное действие справа — + зеркально соседнему тогглу «Автопродление». На мобиле + кнопка падает вниз на всю ширину (w-full sm:w-auto). */} +
+
+
+ {t('subscription.sbpRecurring.title')}
- - - )} - {sbpUiStateValue === 'pending' && ( - <> -
- {t('subscription.sbpRecurring.statusPending')} -
- {sbpInfo?.redirect_url && ( - - )} - - - )} - - {sbpUiStateValue === 'active' && sbpInfo && ( - <> -
- {t('subscription.sbpRecurring.amountPerInterval', { - amount: formatAmount((sbpInfo.amount_kopeks ?? 0) / 100), - interval: t(sbpIntervalLabelKey(sbpInfo.interval)), - })} -
- {sbpInfo.next_charge_at && ( + {sbpUiStateValue === 'off' && (
- {t('subscription.sbpRecurring.nextCharge', { - date: new Date(sbpInfo.next_charge_at).toLocaleDateString(uiLocale(), { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }), - })} + {t('subscription.sbpRecurring.autopayHint')}
)} - - - )} + {sbpUiStateValue === 'pending' && ( +
+ {t('subscription.sbpRecurring.statusPending')} +
+ )} + {sbpUiStateValue === 'active' && sbpInfo && ( + <> +
+ {t('subscription.sbpRecurring.amountPerInterval', { + amount: formatAmount((sbpInfo.amount_kopeks ?? 0) / 100), + interval: t(sbpIntervalLabelKey(sbpInfo.interval)), + })} +
+ {sbpInfo.next_charge_at && ( +
+ {t('subscription.sbpRecurring.nextCharge', { + date: new Date(sbpInfo.next_charge_at).toLocaleDateString( + uiLocale(), + { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }, + ), + })} +
+ )} + + )} + {sbpUiStateValue === 'past_due' && ( +
+ {t('subscription.sbpRecurring.statusPastDue')} +
+ )} +
- {sbpUiStateValue === 'past_due' && ( - <> -
- {t('subscription.sbpRecurring.statusPastDue')} -
- - - )} +
+ {sbpUiStateValue === 'off' && ( + + )} + + {sbpUiStateValue === 'pending' && ( + <> + {sbpInfo?.redirect_url && ( + + )} + + + )} + + {(sbpUiStateValue === 'active' || sbpUiStateValue === 'past_due') && ( + + )} +
+
)}