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,
}));