'use client';
import { FC, ReactNode, useCallback } from 'react';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { useVariables } from '@gitroom/react/helpers/variable.context';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
import { MenuItem } from '@gitroom/frontend/components/new-layout/menu-item';
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
import { AgentMediaModal } from '@gitroom/frontend/components/layout/agent.media.modal';
interface MenuItemInterface {
name: string;
icon: ReactNode;
path: string;
role?: string[];
hide?: boolean;
requireBilling?: boolean;
onClick?: () => void;
}
export const useMenuItem = () => {
const { isGeneral } = useVariables();
const t = useT();
const { openModal } = useModals();
const handleAgentMediaClick = useCallback(() => {
openModal({
title: t('agent_media_title', 'UGC videos by AgentMedia'),
closeOnClickOutside: true,
closeOnEscape: true,
children: ,
});
}, [openModal, t]);
const firstMenu = [
{
name: isGeneral ? t('calendar', 'Calendar') : t('launches', 'Launches'),
icon: (
),
path: '/launches',
},
{
name: 'Agent',
icon: (
),
path: '/agents',
},
{
name: t('analytics', 'Analytics'),
icon: (
),
path: '/analytics',
},
{
name: t('media', 'Media'),
icon: (
),
path: '/media',
},
{
name: t('plugs', 'Plugs'),
icon: (
),
path: '/plugs',
},
{
name: t('integrations', 'Integrations'),
icon: (
),
path: '/third-party',
},
] satisfies MenuItemInterface[] as MenuItemInterface[];
const secondMenu = [
{
name: t('UGC', 'UGC'),
icon: (
),
path: '#',
role: ['ADMIN', 'SUPERADMIN', 'USER'],
requireBilling: true,
onClick: handleAgentMediaClick,
},
{
name: t('affiliate', 'Affiliate'),
icon: (
),
path: 'https://affiliate.postiz.com',
role: ['ADMIN', 'SUPERADMIN', 'USER'],
requireBilling: true,
},
{
name: t('billing', 'Billing'),
icon: (
),
path: '/billing',
role: ['ADMIN', 'SUPERADMIN'],
requireBilling: true,
},
{
name: t('settings', 'Settings'),
icon: (
),
path: '/settings',
role: ['ADMIN', 'USER', 'SUPERADMIN'],
},
] satisfies MenuItemInterface[] as MenuItemInterface[];
return {
all: [...firstMenu, ...secondMenu],
firstMenu,
secondMenu,
};
};
export const TopMenu: FC = () => {
const user = useUser();
const { firstMenu, secondMenu } = useMenuItem();
const { isGeneral, billingEnabled } = useVariables();
return (
<>
{
// @ts-ignore
user?.orgId &&
// @ts-ignore
(user.tier !== 'FREE' || !isGeneral || !billingEnabled) &&
firstMenu
.filter((f) => {
if (f.hide) {
return false;
}
if (f.requireBilling && !billingEnabled) {
return false;
}
if (f.name === 'Billing' && user?.isLifetime) {
return false;
}
if (f.role) {
return f.role.includes(user?.role!);
}
return true;
})
.map((item, index) => (
))
}
{secondMenu
.filter((f) => {
if (f.hide) {
return false;
}
if (f.requireBilling && !billingEnabled) {
return false;
}
if (f.name === 'Billing' && user?.isLifetime) {
return false;
}
if (f.role) {
return f.role.includes(user?.role!);
}
return true;
})
.map((item, index) => (
))}
);
};