Skip to Content
SupportKpiPage

KpiPage

Summary

Renders the main Marketing KPI / PPC dashboard page, wiring date range, marketplace, and currency selection into the PPC dashboard view with feature-gated access. It serves as the entry point for users to analyze advertising metrics for a single marketplace within a given date range.

Responsibilities

  • Render the Marketing KPI page layout (header, title, selectors, and content area).
  • Connect KPI date range state and marketplace/currency state from global stores to the PPCdashboard component.
  • Enforce feature access to the Marketing & Statistics & Metrics Dashboard via BlurProtection, showing upgrade prompts when access is missing.
  • Render KPI selectors appropriate for a single-marketplace, marketing-focused dashboard.

Public API

  • KpiPage (component) — Top-level page component for the Marketing KPI / PPC dashboard in the marketing section. It should be used by Next.js routing for the /marketing/kpi route and is not intended to be embedded elsewhere.

Important state and props

  • dateRange (from useKpiStore) – currently-selected KPI date preset; used to determine if a custom range is active.
  • customDateRange (from useKpiStore) – object containing custom from/to dates; checked to identify valid custom ranges.
  • getDateParams (from useKpiStore) – function returning concrete dateFrom/dateTo parameters derived from dateRange/customDateRange (currently computed but not passed down here, may influence future data fetching).
  • marketplace (from useReturnsStore) – selected marketplace(s) used to scope the PPCdashboard; cast to Marketplace[] for the dashboard.
  • currency (from useReturnsStore) – active currency used by PPCdashboard for monetary values.
  • demoUser (from useDemoStore) – flag or object indicating demo mode, passed to KpiSelectors to adjust available options/behaviour.
  • hasFeature / isFeatureLoading (from useFeatureAccess) – feature-flag status for the Marketing & Statistics & Metrics Dashboard; isFeatureLoading gates rendering, and hasFeature is used inside BlurProtection to determine whether to blur/lock the content.

External dependencies

  • Page, PageContent, PageHeader, PageSection, PageTitle – shared layout components that provide consistent page structure and styling.
  • useTranslation (@/core/i18n/client) – i18n hook used to fetch localized page titles for desktop and mobile.
  • KpiSelectors (./KpiSelectors) – local selector bar component for date range, marketplace, and currency control; receives demoUser and some configuration flags.
  • useKpiStore (./kpiStore) – KPI-specific global store for managing date ranges and derived date parameters.
  • PPCdashboard (./(PPC)/(All Types)/PPCdashboard) – main PPC dashboard visualization component that consumes marketplace and currency.
  • Overlay (@/components/customUI/Overlay) – UI overlay component, used here for a right-aligned overlay on small screens.
  • useReturnsStore (../../(Inventory)/returns/returnStore) – inventory/returns-related global store reused to obtain marketplace and currency selections.
  • Marketplace (@/components/ui/fancy-box) – Marketplace type used for typing the marketplace prop passed to PPCdashboard.
  • useDemoStore (@/state/useDemoStore) – global store exposing demoUser state.
  • BlurProtection (@/components/blur-protection) – feature-gating wrapper that blurs content and shows upgrade messaging unless the required feature is available.
  • useFeatureAccess (@/hooks/useFeatureAccess) – hook that resolves feature entitlements and loading state.

Risks

  • Marketplace type casting – marketplace is cast as unknown as Marketplace[], which can hide type mismatches and lead to runtime errors inside PPCdashboard if the actual shape differs from expected.
  • Unused date parameters – dateFrom/dateTo and isCustomRange are computed but not passed down, which may cause confusing dead code or bugs if future developers assume that PPCdashboard is already scoped by date.
  • Feature loading handling – content is not rendered at all while isFeatureLoading is true, which may cause layout shifts or a blank area if loading periods are long and no fallback skeleton is provided.
  • Tight coupling to useReturnsStore – reusing the returns store for marketplace and currency ties marketing KPIs to inventory/returns domain logic; changes in that store’s shape or semantics could inadvertently break this page.
  • Mobile overlay behaviour – Overlay is only shown on small screens with little context here; misconfiguration could obscure important UI (e.g., selectors) on mobile if Overlay behaviour changes.

Docs to update

  • Marketing KPI / PPC Dashboard user guide – document that explains where metrics are shown, how date ranges and marketplaces are selected, and feature access requirements.
  • Feature access / subscription tiers documentation – section describing the ‘Marketing & Statistics & Metrics Dashboard’ feature gate and how it manifests in the UI via BlurProtection.
  • Global state and stores reference – documentation of useKpiStore, useReturnsStore, and useDemoStore, including how marketplace, currency, and date ranges are shared across dashboards.
  • Frontend routing and page layout conventions – section describing how marketing pages under app/[lng]/(main)/marketing/kpi are structured and how Page/PageHeader/PageSection should be used.
Last updated on
Advertising StatisticsContact