feat: add ButtonsTab for per-section button style customization

Visual editor in admin settings for configuring Telegram button colors
and custom emoji IDs per menu section. Includes API client, draft state
management, save/reset, and translations for ru/en/fa/zh locales.
This commit is contained in:
Fringg
2026-02-12 23:16:08 +03:00
parent aa5113b8e3
commit b2898730b9
9 changed files with 413 additions and 0 deletions

66
src/api/buttonStyles.ts Normal file
View File

@@ -0,0 +1,66 @@
import apiClient from './client';
export interface ButtonSectionConfig {
style: 'primary' | 'success' | 'danger';
icon_custom_emoji_id: string;
}
export interface ButtonStylesConfig {
home: ButtonSectionConfig;
subscription: ButtonSectionConfig;
balance: ButtonSectionConfig;
referral: ButtonSectionConfig;
support: ButtonSectionConfig;
info: ButtonSectionConfig;
admin: ButtonSectionConfig;
}
export type ButtonStylesUpdate = {
[K in keyof ButtonStylesConfig]?: Partial<ButtonSectionConfig>;
};
export const BUTTON_SECTIONS = [
'home',
'subscription',
'balance',
'referral',
'support',
'info',
'admin',
] as const;
export type ButtonSection = (typeof BUTTON_SECTIONS)[number];
export const DEFAULT_BUTTON_STYLES: ButtonStylesConfig = {
home: { style: 'primary', icon_custom_emoji_id: '' },
subscription: { style: 'success', icon_custom_emoji_id: '' },
balance: { style: 'primary', icon_custom_emoji_id: '' },
referral: { style: 'success', icon_custom_emoji_id: '' },
support: { style: 'primary', icon_custom_emoji_id: '' },
info: { style: 'primary', icon_custom_emoji_id: '' },
admin: { style: 'danger', icon_custom_emoji_id: '' },
};
export const buttonStylesApi = {
getStyles: async (): Promise<ButtonStylesConfig> => {
try {
const response = await apiClient.get<ButtonStylesConfig>('/cabinet/admin/button-styles');
return response.data;
} catch {
return DEFAULT_BUTTON_STYLES;
}
},
updateStyles: async (update: ButtonStylesUpdate): Promise<ButtonStylesConfig> => {
const response = await apiClient.patch<ButtonStylesConfig>(
'/cabinet/admin/button-styles',
update,
);
return response.data;
},
resetStyles: async (): Promise<ButtonStylesConfig> => {
const response = await apiClient.post<ButtonStylesConfig>('/cabinet/admin/button-styles/reset');
return response.data;
},
};