diff --git a/src/api/wheel.ts b/src/api/wheel.ts index d8bac9b..dd47f82 100644 --- a/src/api/wheel.ts +++ b/src/api/wheel.ts @@ -8,6 +8,12 @@ export interface WheelPrize { prize_type: string; } +export interface EligibleSubscription { + id: number; + tariff_name: string | null; + days_left: number; +} + export interface WheelConfig { is_enabled: boolean; name: string; @@ -25,6 +31,7 @@ export interface WheelConfig { user_balance_kopeks: number; required_balance_kopeks: number; has_subscription: boolean; + eligible_subscriptions: EligibleSubscription[] | null; } export interface SpinAvailability { @@ -187,9 +194,13 @@ export const wheelApi = { return response.data; }, - spin: async (paymentType: 'telegram_stars' | 'subscription_days'): Promise => { + spin: async ( + paymentType: 'telegram_stars' | 'subscription_days', + subscriptionId?: number, + ): Promise => { const response = await apiClient.post('/cabinet/wheel/spin', { payment_type: paymentType, + ...(subscriptionId != null && { subscription_id: subscriptionId }), }); return response.data; }, diff --git a/src/pages/Wheel.tsx b/src/pages/Wheel.tsx index 737b05b..979d141 100644 --- a/src/pages/Wheel.tsx +++ b/src/pages/Wheel.tsx @@ -107,6 +107,7 @@ export default function Wheel() { const [isPayingStars, setIsPayingStars] = useState(false); const [historyExpanded, setHistoryExpanded] = useState(false); const [showStarsConfirm, setShowStarsConfirm] = useState(false); + const [selectedSubscriptionId, setSelectedSubscriptionId] = useState(null); const paymentTypeInitialized = useRef(false); const { @@ -136,6 +137,11 @@ export default function Wheel() { } else if (daysEnabled) { setPaymentType('subscription_days'); } + + // Auto-select subscription if only one eligible + if (config.eligible_subscriptions?.length === 1) { + setSelectedSubscriptionId(config.eligible_subscriptions[0].id); + } }, [config]); // Function to poll for new spin result after Stars payment @@ -368,7 +374,7 @@ export default function Wheel() { }; const spinMutation = useMutation({ - mutationFn: () => wheelApi.spin(paymentType), + mutationFn: () => wheelApi.spin(paymentType, selectedSubscriptionId ?? undefined), onSuccess: (result) => { if (result.success) { setTargetRotation(result.rotation_degrees); @@ -506,11 +512,18 @@ export default function Wheel() { // Stars via Telegram invoice don't require ruble balance, so only check daily limit const dailyLimitReached = config.daily_limit > 0 && config.user_spins_today >= config.daily_limit; const noSubscription = !config.has_subscription; + const needsSubscriptionPick = + paymentType === 'subscription_days' && + config.eligible_subscriptions && + config.eligible_subscriptions.length > 1 && + !selectedSubscriptionId; + const spinDisabled = isSpinning || isPayingStars || dailyLimitReached || noSubscription || + needsSubscriptionPick || (paymentType === 'telegram_stars' ? !starsEnabled : !config.can_spin); return ( @@ -582,6 +595,38 @@ export default function Wheel() { )} + {/* Subscription selector for days payment in multi-tariff */} + {paymentType === 'subscription_days' && + config.eligible_subscriptions && + config.eligible_subscriptions.length > 1 && ( +
+

+ {t('wheel.selectSubscription', 'Выберите подписку')} +

+
+ {config.eligible_subscriptions.map((sub) => ( + + ))} +
+
+ )} + {/* Stars confirmation panel */} {showStarsConfirm && !isSpinning && !isPayingStars ? (