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

redesign: inline delete confirmation on web — expands in place instead of modal/sheet

Browse Source
This commit is contained in:
c0mrade
2026-03-24 19:11:48 +03:00
parent 93fa435ff7
commit 324aaa1f33
1 changed files with 64 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/Subscription.tsx
View File

@@ -4,14 +4,6 @@ import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router';
import { subscriptionApi } from '../api/subscription';
import { WebBackButton } from '../components/WebBackButton';
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
} from '../components/primitives/Sheet';
import { useDestructiveConfirm } from '../platform/hooks/useNativeDialog';
import { usePlatform } from '../platform';
import TrafficProgressBar from '../components/dashboard/TrafficProgressBar';
@@ -1280,11 +1272,11 @@ export default function Subscription() {
{/* Delete expired subscription */}
{isMultiTariff && subscription && !subscription.is_active && !subscription.is_trial && (
<>
<div className="space-y-3">
{!showDeleteSheet ? (
<button
onClick={async () => {
if (platform === 'telegram') {
// Telegram: native destructive popup
const confirmed = await destructiveConfirm(
t(
'subscription.deleteWarning',
@@ -1303,7 +1295,6 @@ export default function Subscription() {
setDeleteLoading(false);
}
} else {
// Web: show Sheet
setShowDeleteSheet(true);
}
}}
@@ -1323,24 +1314,23 @@ export default function Subscription() {
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
{deleteLoading
? t('common.processing', 'Удаление...')
: t('subscription.delete', 'Удалить подписку')}
{t('subscription.delete', 'Удалить подписку')}
</button>
{/* Web: Sheet confirmation */}
<Sheet open={showDeleteSheet} onOpenChange={setShowDeleteSheet}>
<SheetContent className="sm:inset-x-auto sm:left-1/2 sm:right-auto sm:mb-4 sm:max-w-md sm:-translate-x-1/2 sm:rounded-2xl">
<SheetHeader>
<SheetTitle>{t('subscription.deleteTitle', 'Удалить подписку?')}</SheetTitle>
<SheetDescription>
) : (
<div
className="rounded-2xl border border-red-400/20 p-4"
style={{ background: 'rgba(255,59,92,0.04)' }}
>
<div className="mb-3 text-sm font-semibold text-red-400">
{t('subscription.deleteTitle', 'Удалить подписку?')}
</div>
<div className="mb-4 text-xs" style={{ color: g.textSecondary }}>
{t(
'subscription.deleteWarning',
'Подписка будет удалена безвозвратно. Все данные, устройства и настройки будут потеряны. Это действие нельзя отменить.',
)}
</SheetDescription>
</SheetHeader>
<SheetFooter>
</div>
<div className="flex gap-2">
<button
onClick={async () => {
setDeleteLoading(true);
@@ -1354,7 +1344,7 @@ export default function Subscription() {
}
}}
disabled={deleteLoading}
className="w-full rounded-xl bg-red-500 py-3 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:opacity-50"
className="flex-1 rounded-xl bg-red-500 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:opacity-50"
>
{deleteLoading
? t('common.processing', 'Удаление...')
@@ -1362,14 +1352,15 @@ export default function Subscription() {
</button>
<button
onClick={() => setShowDeleteSheet(false)}
className="w-full rounded-xl border border-dark-700 bg-dark-800 py-3 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-700"
className="flex-1 rounded-xl border border-dark-700 py-2.5 text-sm font-medium transition-colors hover:bg-dark-700"
style={{ color: g.textSecondary }}
>
{t('common.cancel', 'Отмена')}
</button>
</SheetFooter>
</SheetContent>
</Sheet>
</>
</div>
</div>
)}
</div>
)}
{/* Additional Options (Buy Devices) */}