feat(frontend): friendly upgrade to pro message
This commit is contained in:
parent
946644675a
commit
8e427fc7e5
|
|
@ -18,7 +18,8 @@ import {
|
||||||
DialogActions,
|
DialogActions,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogContentText,
|
DialogContentText,
|
||||||
Button
|
Button,
|
||||||
|
Link
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
|
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
|
||||||
import { alpha } from '@mui/material/styles';
|
import { alpha } from '@mui/material/styles';
|
||||||
|
|
@ -27,6 +28,7 @@ import { AccountPopover } from './account-popover';
|
||||||
import { useAuth } from 'src/hooks/use-auth';
|
import { useAuth } from 'src/hooks/use-auth';
|
||||||
import { WsContext } from 'src/contexts/socketio-context';
|
import { WsContext } from 'src/contexts/socketio-context';
|
||||||
import { useContext, useEffect } from 'react';
|
import { useContext, useEffect } from 'react';
|
||||||
|
import CurrencyDollarIcon from '@heroicons/react/24/outline/CurrencyDollarIcon';
|
||||||
|
|
||||||
const SIDE_NAV_WIDTH = 280;
|
const SIDE_NAV_WIDTH = 280;
|
||||||
const TOP_NAV_HEIGHT = 64;
|
const TOP_NAV_HEIGHT = 64;
|
||||||
|
|
@ -91,13 +93,22 @@ export const TopNav = (props) => {
|
||||||
direction="row"
|
direction="row"
|
||||||
spacing={2}
|
spacing={2}
|
||||||
>
|
>
|
||||||
{/*<Tooltip title="Contacts">
|
{/* <Tooltip title="Contacts">
|
||||||
<IconButton>
|
<IconButton>
|
||||||
<SvgIcon fontSize="small">
|
<SvgIcon fontSize="small">
|
||||||
<UsersIcon />
|
<UsersIcon />
|
||||||
</SvgIcon>
|
</SvgIcon>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>*/}
|
</Tooltip> */}
|
||||||
|
<Link href='https://www.oktopus.app.br/pricing' underline="none" target='_blank'>
|
||||||
|
<Tooltip title="Upgrade to Pro">
|
||||||
|
<IconButton>
|
||||||
|
<SvgIcon fontSize="small">
|
||||||
|
<CurrencyDollarIcon/>
|
||||||
|
</SvgIcon>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Link>
|
||||||
{/*<Tooltip title="Notifications">
|
{/*<Tooltip title="Notifications">
|
||||||
<IconButton>
|
<IconButton>
|
||||||
<Badge
|
<Badge
|
||||||
|
|
|
||||||
|
|
@ -75,21 +75,21 @@ const Page = () => {
|
||||||
justifyContent:'center',
|
justifyContent:'center',
|
||||||
}}>
|
}}>
|
||||||
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
|
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><WifiIcon/></SvgIcon>}
|
icon={<SvgIcon><WifiIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Wi-Fi"
|
label="Wi-Fi"
|
||||||
value={"wifi"}
|
value={"wifi"}
|
||||||
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><SignalIcon/></SvgIcon>}
|
icon={<SvgIcon><SignalIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Site Survey"
|
label="Site Survey"
|
||||||
value={"site-survey"}
|
value={"site-survey"}
|
||||||
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>}
|
icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
@ -97,42 +97,42 @@ const Page = () => {
|
||||||
style={{opacity:"0.5", cursor:"default"}}
|
style={{opacity:"0.5", cursor:"default"}}
|
||||||
value={"connected-devices"}
|
value={"connected-devices"}
|
||||||
/></Tooltip>
|
/></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>}
|
icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Diagnostic"
|
label="Diagnostic"
|
||||||
value={"diagnostic"}
|
value={"diagnostic"}
|
||||||
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><ServerStackIcon/></SvgIcon>}
|
icon={<SvgIcon><ServerStackIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Ports"
|
label="Ports"
|
||||||
style={{opacity:"0.5", cursor:"default"}}
|
style={{opacity:"0.5", cursor:"default"}}
|
||||||
value={"ports"} /></Tooltip>
|
value={"ports"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><ArrowTrendingUpIcon/></SvgIcon>}
|
icon={<SvgIcon><ArrowTrendingUpIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Historic"
|
label="Historic"
|
||||||
value={"historic"}
|
value={"historic"}
|
||||||
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><CommandLineIcon/></SvgIcon>}
|
icon={<SvgIcon><CommandLineIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Actions"
|
label="Actions"
|
||||||
style={{opacity:"0.5", cursor:"default"}}
|
style={{opacity:"0.5", cursor:"default"}}
|
||||||
value={"actions"} /></Tooltip>
|
value={"actions"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><DocumentTextIcon/></SvgIcon>}
|
icon={<SvgIcon><DocumentTextIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Logs"
|
label="Logs"
|
||||||
style={{opacity:"0.5", cursor:"default"}}
|
style={{opacity:"0.5", cursor:"default"}}
|
||||||
value={"logs"} /></Tooltip>
|
value={"logs"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><MapPinIcon/></SvgIcon>}
|
icon={<SvgIcon><MapPinIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ const Page = () => {
|
||||||
justifyContent:'center'
|
justifyContent:'center'
|
||||||
}}>
|
}}>
|
||||||
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
|
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><WifiIcon/></SvgIcon>}
|
icon={<SvgIcon><WifiIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
@ -85,7 +85,7 @@ const Page = () => {
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"wifi"}/>
|
value={"wifi"}/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><SignalIcon/></SvgIcon>}
|
icon={<SvgIcon><SignalIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
@ -94,7 +94,7 @@ const Page = () => {
|
||||||
value={"site-survey"}
|
value={"site-survey"}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>}
|
icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
@ -103,42 +103,42 @@ const Page = () => {
|
||||||
value={"connected-devices"}
|
value={"connected-devices"}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>}
|
icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Diagnostic"
|
label="Diagnostic"
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"diagnostic"} /></Tooltip>
|
value={"diagnostic"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><ServerStackIcon/></SvgIcon>}
|
icon={<SvgIcon><ServerStackIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Ports"
|
label="Ports"
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"ports"} /></Tooltip>
|
value={"ports"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><ArrowTrendingUp/></SvgIcon>}
|
icon={<SvgIcon><ArrowTrendingUp/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Historic"
|
label="Historic"
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"historic"} /></Tooltip>
|
value={"historic"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><CubeTransparentIcon/></SvgIcon>}
|
icon={<SvgIcon><CubeTransparentIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="LCM"
|
label="LCM"
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"lcm"} /></Tooltip>
|
value={"lcm"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><MapPin/></SvgIcon>}
|
icon={<SvgIcon><MapPin/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
label="Location"
|
label="Location"
|
||||||
style={{cursor:"default", opacity: 0.5}}
|
style={{cursor:"default", opacity: 0.5}}
|
||||||
value={"location"} /></Tooltip>
|
value={"location"} /></Tooltip>
|
||||||
<Tooltip title="Upgrade to Business Plan" placement="bottom">
|
<Tooltip placement="bottom">
|
||||||
<Tab
|
<Tab
|
||||||
icon={<SvgIcon><CommandLineIcon/></SvgIcon>}
|
icon={<SvgIcon><CommandLineIcon/></SvgIcon>}
|
||||||
iconPosition={"end"}
|
iconPosition={"end"}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user