-
+
+
+ {link.icon ? (
+
+ ) : (
+
+ )}
-
- {link.name}
-
+
+
+ {link.name || 'بدون نام'}
+
+ {link.description && (
+
+ {link.description}
+
+ )}
+
+
+
+ {isModalAction ? (
+
+ ) : (
+
+ )}
+
)
}
diff --git a/src/layouts/explorer/components/explorer-popover-menu/explorer-popover-menu.tsx b/src/layouts/explorer/components/explorer-popover-menu/explorer-popover-menu.tsx
new file mode 100644
index 000000000..b96e41fa4
--- /dev/null
+++ b/src/layouts/explorer/components/explorer-popover-menu/explorer-popover-menu.tsx
@@ -0,0 +1,144 @@
+import { showToast } from '@/common/toast'
+import {
+ PopoverMenu,
+ PopoverMenuDivider,
+ PopoverMenuHeader,
+ PopoverMenuItem,
+} from '@/components/ui'
+import { Icon } from '@/icons'
+import type { CatalogItem } from '../../interfaces/catalog-item.interface'
+
+export interface ExplorerPopoverMenuProps {
+ isOpen: boolean
+ onClose: () => void
+ item: CatalogItem | null
+ triggerRef?: React.RefObject
+ position?: { x: number; y: number } | null
+}
+
+export function ExplorerPopoverMenu({
+ isOpen,
+ onClose,
+ item,
+ triggerRef,
+ position,
+}: ExplorerPopoverMenuProps) {
+ if (!item) return null
+
+ const meta = item.meta
+ const title = meta?.title || item.name
+ const menuItems = Array.isArray(meta?.menuItems) ? meta.menuItems : []
+ const promo = meta?.promo
+
+ const handleItemClick = (url: string) => {
+ if (!url) return
+ const targetUrl = url.startsWith('http') ? url : `https://${url}`
+ window.open(targetUrl, '_blank', 'noopener,noreferrer')
+ onClose()
+ }
+
+ const handleCopy = (code?: string) => {
+ if (!code) return
+ navigator.clipboard.writeText(code)
+ showToast(`کد تخفیف ${code} کپی شد`, 'success')
+ }
+
+ return (
+
+ {/* Header */}
+
+
+ {item.icon && (
+
+ )}
+
+ {title}
+
+
+ {meta.description}
+
+ )}
+
+ {menuItems.length ? : null}
+
+ {/* Dynamic Menu Items */}
+ {menuItems.map((mItem, idx) => (
+
+ {mItem.badge}
+
+ ) : undefined
+ }
+ icon={}
+ onClick={() => handleItemClick(mItem.url)}
+ />
+ ))}
+
+ {promo?.code && (
+ <>
+
+
+
+
+ {promo.title || 'کد تخفیف'}
+
+ {promo.discount && (
+
+ {promo.discount}
+
+ )}
+
+
+
+ {promo.code}
+
+
+
+
+ {/* Visual / Gallery Container */}
+ {gallery.length > 0 && (
+
+ }
+ />
+ )}
+
+
+
+
+ {item.icon && (
+
+ )}
+
+ {title}
+
+
+ {isSponsor && (
+
+ اسپانسر
+
+ )}
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ {highlights.length > 0 && (
+
+ {highlights.map((h, i) => (
+
+
+ {h}
+
+ ))}
+
+ )}
+
+ {promo && (
+
+
+
+ {promo.title || 'کد تخفیف اختصاصی'}
+
+ {promo.discount && (
+
+ {promo.discount}
+
+ )}
+
+ {promo.code && (
+
+
+ {promo.code}
+
+
+
+ )}
+
+ )}
+
+
+
+
+
+
- {[1, 2, 3, 4, 5, 6].map((i) => (
-
-
-
-
+
+ {[1, 2, 3].map((i) => (
+
+
-
- {[1, 2, 3, 4, 5, 6, 7, 8].map((j) => (
-
+
+
+ {[1, 2, 3, 4, 5, 6].map((j) => (
+
))}
@@ -33,134 +34,300 @@ function ExplorerSkeleton() {
export function ExplorerContent() {
const { data: catalogData, isLoading } = useGetContents()
const [activeCategory, setActiveCategory] = useState
(null)
- const categoryRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
+ const [searchQuery, setSearchQuery] = useState('')
+ const [selectedPromoItem, setSelectedPromoItem] = useState(null)
+ const [activePopover, setActivePopover] = useState<{
+ item: CatalogItem
+ position: { x: number; y: number } | null
+ } | null>(null)
+ const popoverTriggerRef = useRef(null)
+
+ const handleItemAction = useCallback((item: CatalogItem, triggerEl?: HTMLElement) => {
+ const meta = item.meta
+ const isPopover =
+ meta?.type === 'POPOVER_MENU' ||
+ meta?.action === 'OPEN_POPOVER' ||
+ Boolean(meta?.menuItems && meta.menuItems.length > 0)
+
+ if (isPopover) {
+ popoverTriggerRef.current = triggerEl || null
+ const rect = triggerEl?.getBoundingClientRect()
+ setActivePopover({
+ item,
+ position: rect ? { x: rect.left, y: rect.bottom + 6 } : null,
+ })
+ } else {
+ setSelectedPromoItem(item)
+ }
+ }, [])
+
+ const categoryRefs = useRef<{ [key: string]: HTMLElement | null }>({})
const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({})
const scrollContainerRef = useRef(null)
+ const isManualScrollRef = useRef(false)
+ const rafIdRef = useRef(null)
+
+ const contents = useMemo(() => {
+ return catalogData?.contents || []
+ }, [catalogData?.contents])
+
+ const categories = useMemo(() => {
+ return contents.filter((f) => f.links?.length)
+ }, [contents])
+
+ const filteredContents = useMemo(() => {
+ if (!searchQuery.trim()) return contents
+ const q = searchQuery.trim().toLowerCase()
+
+ return contents
+ .map((cat) => ({
+ ...cat,
+ links: cat.links.filter(
+ (link) =>
+ link.name?.toLowerCase().includes(q) ||
+ cat.category?.toLowerCase().includes(q) ||
+ link.badge?.toLowerCase().includes(q)
+ ),
+ }))
+ .filter((cat) => cat.links.length > 0)
+ }, [contents, searchQuery])
useEffect(() => {
- if (!catalogData?.contents || !scrollContainerRef.current) return
+ if (categories.length > 0 && !activeCategory) {
+ setActiveCategory(categories[0].id)
+ }
+ }, [categories, activeCategory])
+
+ const updateActiveCategoryOnScroll = useCallback(() => {
+ if (isManualScrollRef.current) return
+ const container = scrollContainerRef.current
+ if (!container) return
+
+ const visibleCategories = categories.filter((c) =>
+ filteredContents.some((fc) => fc.id === c.id)
+ )
+ if (visibleCategories.length === 0) return
+
+ if (container.scrollTop < 40) {
+ const firstCat = visibleCategories[0]
+ if (activeCategory !== firstCat.id) {
+ setActiveCategory(firstCat.id)
+ tabRefs.current[firstCat.id]?.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest',
+ })
+ }
+ return
+ }
+
+ const isAtBottom =
+ container.scrollHeight - container.scrollTop - container.clientHeight < 50
- const observerOptions = {
- root: scrollContainerRef.current,
- rootMargin: '0px 0px -40% 0px',
- threshold: 0.1,
+ if (isAtBottom && visibleCategories.length > 0) {
+ const lastCat = visibleCategories[visibleCategories.length - 1]
+ if (activeCategory !== lastCat.id) {
+ setActiveCategory(lastCat.id)
+ tabRefs.current[lastCat.id]?.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest',
+ })
+ }
+ return
}
- const observerCallback = (entries: IntersectionObserverEntry[]) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- setActiveCategory(entry.target.id)
- tabRefs.current[entry.target.id]?.scrollIntoView({
+ const containerTop = container.getBoundingClientRect().top
+
+ for (const cat of visibleCategories) {
+ const el = categoryRefs.current[cat.id]
+ if (!el) continue
+
+ const rect = el.getBoundingClientRect()
+ const relativeTop = rect.top - containerTop
+ const relativeBottom = rect.bottom - containerTop
+
+ if (relativeTop <= 110 && relativeBottom > 40) {
+ if (activeCategory !== cat.id) {
+ setActiveCategory(cat.id)
+ tabRefs.current[cat.id]?.scrollIntoView({
behavior: 'smooth',
inline: 'center',
block: 'nearest',
})
}
- })
+ break
+ }
}
+ }, [activeCategory, categories, filteredContents])
- const observer = new IntersectionObserver(observerCallback, observerOptions)
-
- const currentRefs = categoryRefs.current
- Object.values(currentRefs).forEach((div) => {
- if (div) observer.observe(div)
- })
+ const handleScroll = () => {
+ if (rafIdRef.current) {
+ cancelAnimationFrame(rafIdRef.current)
+ }
+ rafIdRef.current = requestAnimationFrame(updateActiveCategoryOnScroll)
+ }
- return () => observer.disconnect()
- }, [catalogData?.contents])
+ useEffect(() => {
+ return () => {
+ if (rafIdRef.current) {
+ cancelAnimationFrame(rafIdRef.current)
+ }
+ }
+ }, [])
const scrollToCategory = (id: string) => {
+ isManualScrollRef.current = true
setActiveCategory(id)
- const tabBtn = tabRefs.current[id]
- if (tabBtn) {
- tabBtn.scrollIntoView({
- behavior: 'smooth',
- inline: 'center',
- block: 'nearest',
- })
- }
+
+ tabRefs.current[id]?.scrollIntoView({
+ behavior: 'smooth',
+ inline: 'center',
+ block: 'nearest',
+ })
+
const element = categoryRefs.current[id]
- if (element) {
- element.scrollIntoView({
+ const container = scrollContainerRef.current
+
+ if (element && container) {
+ const containerRect = container.getBoundingClientRect()
+ const elementRect = element.getBoundingClientRect()
+ const targetScrollTop =
+ container.scrollTop + (elementRect.top - containerRect.top) - 12
+
+ container.scrollTo({
+ top: targetScrollTop,
behavior: 'smooth',
- block: 'start',
})
}
+
+ setTimeout(() => {
+ isManualScrollRef.current = false
+ }, 600)
+
Analytics.event('explorer_click_category')
}
- const contents = catalogData?.contents || []
- const categories = contents.filter((f) => !f.hideName && f.links.length)
-
return (
-
-
- {isLoading ? (
-
- {[1, 2, 3, 4, 5, 6].map((i) => (
-
- ))}
-
- ) : (
-
-
-
- {categories.map((cat: CategoryItem) => {
- const active = activeCategory === cat.id
-
- return (
-
- )
- })}
-
-
+
+
)
diff --git a/src/services/hooks/content/get-content.hook.ts b/src/services/hooks/content/get-content.hook.ts
index 8ec9b3f8b..6d4d100fe 100644
--- a/src/services/hooks/content/get-content.hook.ts
+++ b/src/services/hooks/content/get-content.hook.ts
@@ -8,10 +8,39 @@ export interface ExplorerCategoryBadge {
textColor?: string
url?: string
}
+export interface CatalogItemPromo {
+ title?: string
+ code?: string
+ discount?: string
+ badge?: string
+ expiresText?: string
+ targetUrl?: string
+ highlights?: string[]
+}
+
+export interface CatalogItemMenuItem {
+ id?: string
+ title: string
+ url: string
+ badge?: string
+ icon?: string
+ isExternal?: boolean
+}
+
+export interface CatalogItemMeta {
+ type?: 'POPOVER_MENU'
+ action?: 'OPEN_MODAL' | 'OPEN_POPOVER' | 'DIRECT_URL'
+ title?: string
+ description?: string
+ badge?: string
+ gallery?: string[]
+ promo?: CatalogItemPromo
+ menuItems?: CatalogItemMenuItem[]
+}
+
export interface FetchedContent {
id: string
category: string
- hideName?: boolean
icon?: string
banner?: string
links: {
@@ -24,16 +53,16 @@ export interface FetchedContent {
row?: number | null
}
height?: number
- hasBorder: boolean
isNew: boolean
badge?: string
badgeColor?: string
+ description?: string
backgroundSrc?: string
- badgeAnimate?: 'bounce' | 'pulse'
miniAppAuthRequired?: boolean
+ meta?: CatalogItemMeta
}[]
lockHeight?: boolean
- badges: ExplorerCategoryBadge[]
+
span?: {
col?: number | null
row?: number | null