import { styled, Button, Typography } from '@mui/material'; import { IInstanceStatus, InstanceState } from 'interfaces/instance'; import { INSTANCE_STATUS_BAR_ID } from 'utils/testIds'; import { InfoOutlined, WarningAmber } from '@mui/icons-material'; import { useNavigate } from 'react-router-dom'; import { useContext } from 'react'; import AccessContext from 'contexts/AccessContext'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { calculateTrialDaysRemaining } from 'utils/billing'; interface IInstanceStatusBarProps { instanceStatus: IInstanceStatus; } export const InstanceStatusBar = ({ instanceStatus, }: IInstanceStatusBarProps) => { const { hasAccess } = useContext(AccessContext); const trialDaysRemaining = calculateTrialDaysRemaining(instanceStatus); if ( instanceStatus.state === InstanceState.TRIAL && typeof trialDaysRemaining === 'number' && trialDaysRemaining <= 0 ) { return ( ({ fontSize: theme.fontSizes.smallBody, })} > Warning! Your free {instanceStatus.plan}{' '} trial has expired. Upgrade trial otherwise your account will be deleted. } /> ); } if ( instanceStatus.state === InstanceState.TRIAL && typeof trialDaysRemaining === 'number' && trialDaysRemaining <= 10 ) { return ( ({ fontSize: theme.fontSizes.smallBody, })} > Heads up! You have{' '} {trialDaysRemaining} days left of your free{' '} {instanceStatus.plan} trial. } /> ); } return null; }; const UpgradeButton = () => { const navigate = useNavigate(); return ( navigate('/admin/billing')} variant="outlined" > Upgrade trial ); }; const StyledWarningBar = styled('aside')(({ theme }) => ({ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: theme.spacing(1), gap: theme.spacing(1), borderBottom: '1px solid', borderColor: theme.palette.warning.border, background: theme.palette.warning.light, color: theme.palette.warning.dark, })); const StyledInfoBar = styled('aside')(({ theme }) => ({ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: theme.spacing(1), gap: theme.spacing(1), borderBottom: '1px solid', borderColor: theme.palette.info.border, background: theme.palette.info.light, color: theme.palette.info.dark, })); const StyledButton = styled(Button)(({ theme }) => ({ whiteSpace: 'nowrap', minWidth: '8rem', marginLeft: theme.spacing(2), })); const StyledWarningIcon = styled(WarningAmber)(({ theme }) => ({ color: theme.palette.warning.main, })); const StyledInfoIcon = styled(InfoOutlined)(({ theme }) => ({ color: theme.palette.info.main, }));