etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 17:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: hide info tabs by display mode visibility

Browse Source
This commit is contained in:
Boris Kovalskii
2026-06-11 09:17:05 +10:00
parent 0d6a85a4f9
commit 39758a18b0
1 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Info.tsx
View File

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCaretDown } from 'react-icons/pi'; import { PiCaretDown } from 'react-icons/pi';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { infoApi, FaqPage } from '../api/info'; import { infoApi, FaqPage, InfoVisibility } from '../api/info';
import { infoPagesApi } from '../api/infoPages'; import { infoPagesApi } from '../api/infoPages';
import { promoApi, LoyaltyTierInfo } from '../api/promo'; import { promoApi, LoyaltyTierInfo } from '../api/promo';
import type { FaqItem, ReplacesTab } from '../api/infoPages'; import type { FaqItem, ReplacesTab } from '../api/infoPages';
@@ -331,6 +331,12 @@ export default function Info() {
staleTime: 60_000, staleTime: 60_000,
}); });
const { data: visibility } = useQuery({
queryKey: ['info-visibility'],
queryFn: infoApi.getVisibility,
staleTime: 60_000,
});
// Filter to only pages that don't replace a built-in tab and don't collide with built-in IDs // Filter to only pages that don't replace a built-in tab and don't collide with built-in IDs
const extraPages = useMemo( const extraPages = useMemo(
() => (customPages ?? []).filter((p) => !p.replaces_tab && !BUILTIN_TABS.has(p.slug)), () => (customPages ?? []).filter((p) => !p.replaces_tab && !BUILTIN_TABS.has(p.slug)),
@@ -425,20 +431,36 @@ export default function Info() {
refetchOnMount: 'always', refetchOnMount: 'always',
}); });
const builtinTabs: Array<{ id: string; label: string; icon: React.FC; emoji?: string }> = [ const tabs = useMemo(() => {
{ id: 'faq', label: t('info.faq'), icon: QuestionIcon }, const builtinTabs: Array<{ id: string; label: string; icon: React.FC; emoji?: string }> = [
{ id: 'rules', label: t('info.rules'), icon: DocumentIcon }, { id: 'faq', label: t('info.faq'), icon: QuestionIcon },
{ id: 'privacy', label: t('info.privacy'), icon: ShieldIcon }, { id: 'rules', label: t('info.rules'), icon: DocumentIcon },
{ id: 'offer', label: t('info.offer'), icon: DocumentIcon }, { id: 'privacy', label: t('info.privacy'), icon: ShieldIcon },
{ id: 'loyalty', label: t('info.loyalty'), icon: StarIcon }, { id: 'offer', label: t('info.offer'), icon: DocumentIcon },
]; { id: 'loyalty', label: t('info.loyalty'), icon: StarIcon },
];
const customTabs = extraPages.map((p) => { const visibleBuiltinTabs = builtinTabs.filter((tab) => {
const label = p.title[locale] || p.title['ru'] || p.title['en'] || p.slug; if (tab.id === 'loyalty') return true;
return { id: p.slug, label, icon: DocumentIcon, emoji: p.icon ?? undefined }; if (tabReplacements?.[tab.id as ReplacesTab]) return true;
}); if (!visibility) return true;
return visibility[tab.id as keyof InfoVisibility];
});
const tabs = [...builtinTabs, ...customTabs]; const customTabs = extraPages.map((p) => {
const label = p.title[locale] || p.title['ru'] || p.title['en'] || p.slug;
return { id: p.slug, label, icon: DocumentIcon, emoji: p.icon ?? undefined };
});
return [...visibleBuiltinTabs, ...customTabs];
}, [visibility, tabReplacements, extraPages, locale, t]);
useEffect(() => {
if (tabs.length === 0) return;
if (!tabs.some((tab) => tab.id === activeTab)) {
setActiveTab(tabs[0].id);
}
}, [tabs, activeTab]);
const toggleFaq = useCallback((id: number) => { const toggleFaq = useCallback((id: number) => {
setExpandedFaq((prev) => (prev === id ? null : id)); setExpandedFaq((prev) => (prev === id ? null : id));