import React, { Fragment, useState, useEffect } from 'react' import { Menu, Transition } from '@headlessui/react' import { ChevronDownIcon } from '@heroicons/react/20/solid' import classNames from 'classnames' import * as storage from '../../util/storage' import Conversions from './conversions' import Funnel from './funnel' import { FeatureSetupNotice } from '../../components/notice' const ACTIVE_CLASS = 'inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold active-prop-heading truncate text-left' const DEFAULT_CLASS = 'hover:text-indigo-600 cursor-pointer truncate text-left' export const CONVERSIONS = 'conversions' export const FUNNELS = 'funnels' export const PROPS = 'props' export const sectionTitles = { [CONVERSIONS]: 'Goal Conversions', [FUNNELS]: 'Funnels', [PROPS]: 'Custom Properties' } export default function Behaviours(props) { const site = props.site const adminAccess = ['owner', 'admin', 'super_admin'].includes(props.currentUserRole) const tabKey = `behavioursTab__${site.domain}` const funnelKey = `behavioursTabFunnel__${site.domain}` const [enabledModes, setEnabledModes] = useState(getEnabledModes()) const [mode, setMode] = useState(defaultMode()) const [funnelNames, _setFunnelNames] = useState(site.funnels.map(({ name }) => name)) const [selectedFunnel, setSelectedFunnel] = useState(storage.getItem(funnelKey)) useEffect(() => { setMode(defaultMode()) }, [enabledModes]) function disableMode(mode) { setEnabledModes(enabledModes.filter((m) => { return m !== mode })) } function setFunnel(selectedFunnel) { return () => { storage.setItem(tabKey, FUNNELS) storage.setItem(funnelKey, selectedFunnel) setMode(FUNNELS) setSelectedFunnel(selectedFunnel) } } function hasFunnels() { return site.funnels.length > 0 } function tabFunnelPicker() { return
Funnels
{funnelNames.map((funnelName) => { return ( {({ active }) => ( {funnelName} )} ) })}
} function tabSwitcher(toMode, displayName) { const className = classNames({ [ACTIVE_CLASS]: mode == toMode, [DEFAULT_CLASS]: mode !== toMode }) const setTab = () => { storage.setItem(tabKey, toMode) setMode(toMode) } return (
{displayName}
) } function tabs() { return (
{isEnabled(CONVERSIONS) && tabSwitcher(CONVERSIONS, 'Goals')} {isEnabled(FUNNELS) && (hasFunnels() ? tabFunnelPicker() : tabSwitcher(FUNNELS, 'Funnels'))} {isEnabled(PROPS) && tabSwitcher(PROPS, 'Properties')}
) } function renderConversions() { if (site.hasGoals) { return } else if (adminAccess) { return ( ) } else { return noDataYet() } } function renderFunnels() { if (selectedFunnel) { return } else if (adminAccess) { return ( ) } else { return noDataYet() } } function renderProps() { if (adminAccess) { return ( ) } else { return noDataYet() } } function noDataYet() { return (
No data yet
) } function onHideAction(mode) { return () => { disableMode(mode) } } function renderContent() { switch (mode) { case CONVERSIONS: return renderConversions() case FUNNELS: return renderFunnels() case PROPS: return renderProps() } } function defaultMode() { if (enabledModes.length === 0) { return null } const storedMode = storage.getItem(tabKey) if (storedMode && enabledModes.includes(storedMode)) { return storedMode } if (enabledModes.includes(CONVERSIONS)) { return CONVERSIONS } if (enabledModes.includes(FUNNELS)) { return FUNNELS } return PROPS } function getEnabledModes() { let enabledModes = [] if (site.conversionsEnabled) { enabledModes.push(CONVERSIONS) } if (site.funnelsEnabled && !isRealtime() && site.flags.funnels) { enabledModes.push(FUNNELS) } if (site.propsEnabled && !isRealtime() && site.flags.props) { enabledModes.push(PROPS) } return enabledModes } function isEnabled(mode) { return enabledModes.includes(mode) } function isRealtime() { return props.query.period === 'realtime' } if (mode) { return (

{sectionTitles[mode] + (isRealtime() ? ' (last 30min)' : '')}

{tabs()}
{renderContent()}
) } else { return null } }