feat: add success notification modal for balance and subscription events

- Add zustand store for global success notifications
- Create SuccessNotificationModal component with prominent UI
- Update WebSocketNotifications to show modal for important events:
  - balance.topup shows balance topped up modal
  - subscription.activated shows activation modal
  - subscription.renewed shows renewal modal
- Add translations for all locales (ru, en, zh, fa)
This commit is contained in:
c0mrade
2026-01-30 19:39:14 +03:00
parent ca227f3975
commit 175b5608b2
8 changed files with 439 additions and 54 deletions

View File

@@ -0,0 +1,39 @@
import { create } from 'zustand';
export type SuccessNotificationType =
| 'balance_topup'
| 'subscription_activated'
| 'subscription_renewed'
| 'subscription_purchased';
export interface SuccessNotificationData {
type: SuccessNotificationType;
/** Amount in kopeks (for balance or subscription price) */
amountKopeks?: number;
/** New balance in kopeks */
newBalanceKopeks?: number;
/** Subscription expiry date ISO string */
expiresAt?: string;
/** Tariff name */
tariffName?: string;
/** Custom title override */
title?: string;
/** Custom message override */
message?: string;
}
interface SuccessNotificationState {
isOpen: boolean;
data: SuccessNotificationData | null;
show: (data: SuccessNotificationData) => void;
hide: () => void;
}
export const useSuccessNotification = create<SuccessNotificationState>((set) => ({
isOpen: false,
data: null,
show: (data) => set({ isOpen: true, data }),
hide: () => set({ isOpen: false, data: null }),
}));