feat: add reset traffic toggle on tariff switch

- Add reset_traffic parameter to previewTariffSwitch and switchTariff API calls
- Add reset_traffic_available/reset_traffic_default fields to TariffSwitchPreview type
- Add toggle switch in tariff switch preview modal (shown when backend enables it)
- Initialize toggle from server default (reset_traffic_default)
- Pass reset_traffic flag on switch execution
- Add translations for all 4 locales (ru, en, zh, fa)
This commit is contained in:
Fringg
2026-02-27 09:48:28 +03:00
parent d2f02d605c
commit 49fff8e855
7 changed files with 64 additions and 6 deletions

View File

@@ -128,12 +128,14 @@ export default function SubscriptionPurchase() {
// Tariff switch
const [switchTariffId, setSwitchTariffId] = useState<number | null>(null);
const [resetTrafficOnSwitch, setResetTrafficOnSwitch] = useState(false);
// Auto-close all modals on success notification
const handleCloseAllModals = () => {
setShowPurchaseForm(false);
setShowTariffPurchase(false);
setSwitchTariffId(null);
setResetTrafficOnSwitch(false);
setSelectedTariff(null);
setSelectedTariffPeriod(null);
};
@@ -230,13 +232,21 @@ export default function SubscriptionPurchase() {
enabled: !!switchTariffId,
});
// Initialize reset traffic toggle from server default
useEffect(() => {
if (switchPreview?.reset_traffic_default !== undefined) {
setResetTrafficOnSwitch(switchPreview.reset_traffic_default);
}
}, [switchPreview?.reset_traffic_default]);
// Tariff switch mutation
const switchTariffMutation = useMutation({
mutationFn: (tariffId: number) => subscriptionApi.switchTariff(tariffId),
mutationFn: (tariffId: number) => subscriptionApi.switchTariff(tariffId, resetTrafficOnSwitch),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['subscription'] });
queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
setSwitchTariffId(null);
setResetTrafficOnSwitch(false);
navigate('/subscription', { replace: true });
},
onError: (error: unknown) => {
@@ -250,6 +260,7 @@ export default function SubscriptionPurchase() {
const targetTariff = tariffs.find((tariff) => tariff.id === switchTariffId);
if (targetTariff) {
setSwitchTariffId(null);
setResetTrafficOnSwitch(false);
setSelectedTariff(targetTariff);
setSelectedTariffPeriod(targetTariff.periods[0] || null);
setShowTariffPurchase(true);
@@ -598,6 +609,35 @@ export default function SubscriptionPurchase() {
</div>
</div>
{/* Reset traffic toggle */}
{switchPreview.reset_traffic_available && (
<label className="flex cursor-pointer items-center justify-between rounded-lg border border-dark-700/50 bg-dark-800/50 px-3 py-2.5">
<div>
<div className="text-sm font-medium text-dark-100">
{t('subscription.switchTariff.resetTraffic')}
</div>
<div className="text-xs text-dark-400">
{t('subscription.switchTariff.resetTrafficHint')}
</div>
</div>
<button
type="button"
role="switch"
aria-checked={resetTrafficOnSwitch}
onClick={() => setResetTrafficOnSwitch((prev) => !prev)}
className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors duration-200 ${
resetTrafficOnSwitch ? 'bg-accent-500' : 'bg-dark-600'
}`}
>
<span
className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 ${
resetTrafficOnSwitch ? 'translate-x-5' : 'translate-x-0'
}`}
/>
</button>
</label>
)}
{!switchPreview.has_enough_balance &&
switchPreview.upgrade_cost_kopeks > 0 && (
<InsufficientBalancePrompt