mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
feat(topup): direct-open payment page when method.open_url_direct is set
User asked for the gift-style seamless flow on balance top-up: provider checkout opens inside Telegram MiniApp WebView without a click-to-open link panel. Made it an admin per-method toggle so it can be enabled selectively. src/pages/TopUpAmount.tsx — on topup mutation success: * Move saveTopUpPendingInfo to BEFORE any redirect so /balance/top-up/result can still pick up the pending payment after the provider's return_url fires * If method?.open_url_direct === true AND the URL is not a t.me/ deep link (Stars/CryptoBot), window.location.href = redirectUrl and return early * Otherwise fall through to the existing setPaymentUrl panel — preserves current behavior for methods without the flag enabled The t.me/ guard is important: window.location.href to a Telegram deep link inside a MiniApp WebView is unreliable (native shell cant always intercept). Those URLs continue to go through openTelegramLink / openInvoice in the panel path. Stars never reaches topUpMutation.onSuccess anyway (handled by the separate starsPaymentMutation); the guard is defense-in-depth for CryptoBot and any future t.me-deep-link providers. src/pages/AdminPaymentMethodEdit.tsx — added Open URL directly toggle with the same slider styling as the is_enabled toggle. Defaults to off. src/types/index.ts * PaymentMethod.open_url_direct?: boolean (user-facing) * PaymentMethodConfig.open_url_direct: boolean (admin shape) Translations added for ru/en/zh/fa with a hint clarifying behavior and the t.me/ exemption.
This commit is contained in:
@@ -66,6 +66,7 @@ export default function AdminPaymentMethodEdit() {
|
||||
const [firstTopupFilter, setFirstTopupFilter] = useState<'any' | 'yes' | 'no'>('any');
|
||||
const [promoGroupFilterMode, setPromoGroupFilterMode] = useState<'all' | 'selected'>('all');
|
||||
const [selectedPromoGroupIds, setSelectedPromoGroupIds] = useState<number[]>([]);
|
||||
const [openUrlDirect, setOpenUrlDirect] = useState(false);
|
||||
|
||||
// Initialize state when config loads
|
||||
useEffect(() => {
|
||||
@@ -79,6 +80,7 @@ export default function AdminPaymentMethodEdit() {
|
||||
setFirstTopupFilter(config.first_topup_filter);
|
||||
setPromoGroupFilterMode(config.promo_group_filter_mode);
|
||||
setSelectedPromoGroupIds(config.allowed_promo_group_ids);
|
||||
setOpenUrlDirect(config.open_url_direct);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
@@ -100,6 +102,7 @@ export default function AdminPaymentMethodEdit() {
|
||||
first_topup_filter: firstTopupFilter,
|
||||
promo_group_filter_mode: promoGroupFilterMode,
|
||||
allowed_promo_group_ids: promoGroupFilterMode === 'selected' ? selectedPromoGroupIds : [],
|
||||
open_url_direct: openUrlDirect,
|
||||
};
|
||||
|
||||
// Display name
|
||||
@@ -215,6 +218,34 @@ export default function AdminPaymentMethodEdit() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Open URL directly toggle */}
|
||||
<div className="flex items-center justify-between border-t border-dark-800 pt-6">
|
||||
<div className="pr-4">
|
||||
<div className="text-sm font-medium text-dark-200">
|
||||
{t('admin.paymentMethods.openUrlDirect', 'Открывать страницу оплаты сразу')}
|
||||
</div>
|
||||
<div className="mt-0.5 text-xs text-dark-500">
|
||||
{t(
|
||||
'admin.paymentMethods.openUrlDirectHint',
|
||||
'Без панели со ссылкой — провайдер открывается внутри MiniApp/вкладки сразу после клика. После оплаты юзер возвращается на /balance/result.',
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setOpenUrlDirect(!openUrlDirect)}
|
||||
className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
|
||||
openUrlDirect ? 'bg-accent-500' : 'bg-dark-600'
|
||||
}`}
|
||||
aria-label="Toggle open URL directly"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
|
||||
openUrlDirect ? 'left-6' : 'left-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Display name */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-dark-300">
|
||||
|
||||
@@ -255,9 +255,8 @@ export default function TopUpAmount() {
|
||||
onSuccess: (data) => {
|
||||
const redirectUrl = data.payment_url || data.invoice_url;
|
||||
if (redirectUrl) {
|
||||
setPaymentUrl(redirectUrl);
|
||||
|
||||
// Save payment info for the result page
|
||||
// Save payment info for the result page (do BEFORE possible redirect,
|
||||
// иначе после window.location.href этот код не выполнится).
|
||||
if (method && data.payment_id) {
|
||||
const methodKey = method.id.toLowerCase().replace(/-/g, '_');
|
||||
const displayName =
|
||||
@@ -270,6 +269,22 @@ export default function TopUpAmount() {
|
||||
created_at: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
// open_url_direct: seamless флоу как при покупке подарка.
|
||||
// window.location.href внутри Telegram MiniApp WebView навигирует
|
||||
// в том же контейнере без открытия внешнего браузера. После
|
||||
// оплаты return_url возвращает на /balance/top-up/result.
|
||||
//
|
||||
// t.me/ URL (Telegram Stars, CryptoBot) — всегда через нативный
|
||||
// handler (openInvoice / openTelegramLink в setPaymentUrl-ветке).
|
||||
// Stars уже отбит раньше через starsPaymentMutation, здесь — защита
|
||||
// на случай CryptoBot и других Telegram-deep-link провайдеров.
|
||||
if (method?.open_url_direct && !redirectUrl.startsWith('https://t.me/')) {
|
||||
window.location.href = redirectUrl;
|
||||
return;
|
||||
}
|
||||
|
||||
setPaymentUrl(redirectUrl);
|
||||
}
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
|
||||
Reference in New Issue
Block a user