feat(frontend): friendly upgrade to pro message

This commit is contained in:
leandrofars 2025-05-15 13:10:38 -03:00
parent 946644675a
commit 8e427fc7e5
3 changed files with 32 additions and 21 deletions

View File

@ -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;
@ -98,6 +100,15 @@ export const TopNav = (props) => {
</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

View File

@ -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"}

View File

@ -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"}