@elyx-code/editor-ui 0.0.2

package/src/components/project-configuration/ProjectConfigurationDialog.tsx

@@ -0,0 +1,972 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { IDialogProps } from '../../lib/dialog/Dialog';
+import Button from '../../lib/button/Button';
+import { getAccessToken, getCurrentUserOrLogoutRedirect } from '../../auth';
+import CircularImageUpload from '../circular-image-upload/CircularImageUpload';
+import ProjectDataForm from './ProjectDataForm';
+import './project-configuration-content.css';
+import DeleteProjectConfirmationDialog from './DeleteProjectConfirmationDialog';
+import UnpublishProjectConfirmationDialog from './UnpublishProjectConfirmationDialog';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import { EditorService } from '../../services/editor';
+import axios from 'axios';
+import { IRichProjectRoleDTO, IUser, UserProjectRole } from '@elyx-code/definitions';
+import UserChip from '../user/UserChip';
+import { capitalizeFirstLetter } from '@elyx-code/project-logic-tree';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../config';
+import { ProPlanChip } from '../ProPlanChip';
+import { popupNotification } from '../../popup-notification';
+import Popup from '../../lib/popup/Popup';
+import { useWorkspaceStore } from '../../store/workspace';
+
+interface IProjectConfigurationDialogProps extends IDialogProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+// --- MOCK DATA FOR PAYWALL OVERLAY ---
+const MOCK_ROLES: IRichProjectRoleDTO[] = [
+	// @ts-ignore
+	{
+		id: 'mock_1',
+		role: UserProjectRole.Owner,
+		user: {
+			id: 'u1',
+			name: 'Sophie',
+			email: 'sophie@example.com',
+			picture: 'https://i.pravatar.cc/150?u=sophie',
+		} as any,
+	},
+	// @ts-ignore
+	{
+		id: 'mock_2',
+		role: UserProjectRole.Editor,
+		user: {
+			id: 'u2',
+			name: 'Mike Smith',
+			email: 'mike@example.com',
+			picture: 'https://i.pravatar.cc/150?u=mike',
+		} as any,
+	},
+	// @ts-ignore
+	{
+		id: 'mock_3',
+		role: UserProjectRole.Viewer,
+		user: {
+			id: 'u3',
+			name: 'Helen',
+			email: 'helen@example.com',
+			picture: 'https://i.pravatar.cc/150?u=helen',
+		} as any,
+	},
+];
+
+const ProjectConfigurationDialog: React.FC<
+	Omit<IProjectConfigurationDialogProps, 'children'>
+> = ({ onClose, project, ready }) => {
+	const [
+		isDeleteProjectConfirmationDialogOpen,
+		setIsDeleteProjectConfirmationDialogOpen,
+	] = useState(false);
+	const [
+		isUnpublishProjectConfirmationDialogOpen,
+		setIsUnpublishProjectConfirmationDialogOpen,
+	] = useState(false);
+	const [liveVersion, setLiveVersion] = useState<any | null>(null);
+	const [projectRoles, setProjectRoles] = useState<
+		IRichProjectRoleDTO[] | null
+	>(null);
+	const [media, setMedia] = useState<any[]>([]);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	// User & Entitlement State
+	const [currentUser, setCurrentUser] = useState<IUser | null>(null);
+	const [isUserLoaded, setIsUserLoaded] = useState(false);
+
+	// Invite Form State
+	const [inviteEmail, setInviteEmail] = useState('');
+	const [inviteRole, setInviteRole] = useState('role_editor');
+	const [isInviting, setIsInviting] = useState(false);
+
+	// Role Management State
+	const [openRoleMenuId, setOpenRoleMenuId] = useState<string | null>(null);
+	const [isUpdatingRole, setIsUpdatingRole] = useState<string | null>(null);
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	useEffect(() => {
+		const init = async () => {
+			try {
+				const user = await getCurrentUserOrLogoutRedirect();
+
+				// if (activeWorkspace?.features?.liveCollaboration !== undefined) {
+				// 	// for testing
+				// 	activeWorkspace.features.liveCollaboration = false;
+				// }
+
+				setCurrentUser(user);
+				setIsUserLoaded(true);
+
+				const [_liveVersion, _media] = await Promise.all([
+					getLiveVersion(),
+					getProjectMedia(),
+				]);
+
+				setLiveVersion(_liveVersion);
+				setMedia(_media);
+			} catch (error) {
+				Logger.error('Init error', error);
+				setIsUserLoaded(true);
+			}
+		};
+
+		init();
+	}, []);
+
+	useEffect(() => {
+		if (!project) {
+			return;
+		}
+
+		const init = async () => {
+			try {
+				const [_projectRoles] = await Promise.all([project.getProjectRoles()]);
+
+				setProjectRoles(_projectRoles);
+			} catch (error) {
+				Logger.error('Init error', error);
+				setProjectRoles([]);
+			}
+		};
+
+		init();
+	}, [!!project]);
+
+	const hasLiveCollaboration =
+		activeWorkspace?.features?.liveCollaboration === true;
+
+	const hasCollabLimit =
+		activeWorkspace?.limits?.maxUsersPerProject !== undefined &&
+		activeWorkspace?.limits?.maxUsersPerProject !== null &&
+		activeWorkspace?.limits?.maxUsersPerProject !== -1;
+
+	const hasReachedMaxCollaborators =
+		hasCollabLimit &&
+		activeWorkspace?.limits?.maxUsersPerProject <= (projectRoles?.length || 0);
+
+	// RBAC Calculations
+	const currentUserProjectRole = projectRoles?.find(
+		(r) => r.user.id === currentUser?.id,
+	)?.role as any as 'role_viewer' | 'role_editor' | 'role_owner' | undefined;
+	const isViewer =
+		currentUserProjectRole === 'role_viewer' ||
+		// @ts-ignore
+		currentUserProjectRole === 'viewer';
+	const isEditor =
+		currentUserProjectRole === 'role_editor' ||
+		// @ts-ignore
+		currentUserProjectRole === 'editor';
+	const isOwner =
+		currentUserProjectRole === 'role_owner' ||
+		// @ts-ignore
+		currentUserProjectRole === 'owner';
+
+	// Count owners to prevent removing the last one
+	const ownerCount =
+		projectRoles?.filter(
+			(r) =>
+				r.role ===
+					// @ts-ignore
+					'role_owner' || r.role === 'owner',
+		).length || 0;
+
+	const getLiveVersion = async () => {
+		const token = await getAccessToken();
+		try {
+			const response = await axios.get(
+				`${envConfig.API_BASE_URL}/publishing-service/v1/live-version/${projectId}`,
+				{
+					headers: { Authorization: 'Bearer ' + token },
+				},
+			);
+			return response.data.data;
+		} catch (error) {
+			Logger.log("Error getting the project's live version: ", error);
+		}
+	};
+
+	const getProjectMedia = async () => {
+		const response = await axios.get(
+			`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/media`,
+			{
+				headers: { Authorization: 'Bearer ' + (await getAccessToken()) },
+			},
+		);
+		return response?.data?.items;
+	};
+
+	const updateIcon = async (files: File[]) => {
+		const file: File = files[0];
+		const arrayBufferFileContent = await file.arrayBuffer();
+		const arrayBufferAsArray = Array.from(
+			new Uint8Array(arrayBufferFileContent),
+		);
+
+		const response = await axios.patch(
+			`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/media`,
+			{
+				files: [
+					{
+						...file,
+						contentType: file.type,
+						name: file.name,
+						arrayBuffer: arrayBufferAsArray,
+						lastModified: file.lastModified,
+						lastModifiedDate: (file as any).lastModifiedDate,
+					},
+				],
+				mediaType: 'icon',
+			},
+			{ headers: { Authorization: 'Bearer ' + (await getAccessToken()) } },
+		);
+
+		const updatedMedia = [...media];
+		const iconMediaItemIndex = updatedMedia.findIndex((m) => m.type === 'icon');
+		if (iconMediaItemIndex !== -1)
+			updatedMedia[iconMediaItemIndex] = response.data.data;
+		else updatedMedia.push(response.data.data);
+		setMedia(updatedMedia);
+	};
+
+	const updateCoverPicture = async (files: File[]) => {
+		const file: File = files[0];
+		const arrayBufferFileContent = await file.arrayBuffer();
+		const arrayBufferAsArray = Array.from(
+			new Uint8Array(arrayBufferFileContent),
+		);
+
+		const response = await axios.patch(
+			`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/media`,
+			{
+				files: [
+					{
+						...file,
+						contentType: file.type,
+						name: file.name,
+						arrayBuffer: arrayBufferAsArray,
+						lastModified: file.lastModified,
+						lastModifiedDate: (file as any).lastModifiedDate,
+					},
+				],
+				mediaType: 'cover',
+			},
+			{ headers: { Authorization: 'Bearer ' + (await getAccessToken()) } },
+		);
+
+		const updatedMedia = [...media];
+		const coverMediaItemIndex = updatedMedia.findIndex(
+			(m) => m.type === 'cover',
+		);
+		if (coverMediaItemIndex !== -1)
+			updatedMedia[coverMediaItemIndex] = response.data.data;
+		else updatedMedia.push(response.data.data);
+		setMedia(updatedMedia);
+	};
+
+	const handleInvite = async (e: React.FormEvent) => {
+		e.preventDefault();
+		if (!inviteEmail) return;
+		setIsInviting(true);
+
+		try {
+			const token = await getAccessToken();
+			// Adjust this endpoint path depending on where you implemented the new B2B role bindings logic!
+			await axios.post(
+				`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/role`,
+				{ email: inviteEmail, role: inviteRole },
+				{ headers: { Authorization: 'Bearer ' + token } },
+			);
+
+			popupNotification({ text: `Invited ${inviteEmail}`, color: 'success' });
+			setInviteEmail('');
+
+			// Refresh the list
+			const updatedRoles = await project.getProjectRoles();
+			setProjectRoles(updatedRoles);
+		} catch (error: any) {
+			Logger.error('Failed to invite user', error);
+			popupNotification({
+				text: error?.response?.data?.message || 'Failed to invite user',
+				color: 'error',
+			});
+		} finally {
+			setIsInviting(false);
+		}
+	};
+
+	const handleUpdateRole = async (userId: string, newRole: string) => {
+		setIsUpdatingRole(userId);
+		try {
+			const token = await getAccessToken();
+			await axios.post(
+				`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/role`,
+				{ userId, role: newRole }, // Using the userId fallback we added to the backend!
+				{ headers: { Authorization: 'Bearer ' + token } },
+			);
+			popupNotification({
+				text: `Role updated successfully`,
+				color: 'success',
+			});
+			setProjectRoles(await project.getProjectRoles());
+		} catch (error: any) {
+			Logger.error('Failed to update role', error);
+			popupNotification({
+				text: error?.response?.data?.message || 'Failed to update role',
+				color: 'error',
+			});
+		} finally {
+			setIsUpdatingRole(null);
+			setOpenRoleMenuId(null);
+		}
+	};
+
+	const handleRemoveRole = async (userId: string) => {
+		setIsUpdatingRole(userId);
+		try {
+			const token = await getAccessToken();
+			await axios.delete(
+				`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}/role/${userId}`,
+				{ headers: { Authorization: 'Bearer ' + token } },
+			);
+			popupNotification({
+				text: `User removed from project`,
+				color: 'success',
+			});
+			setProjectRoles(await project.getProjectRoles());
+		} catch (error: any) {
+			Logger.error('Failed to remove user', error);
+			popupNotification({
+				text: error?.response?.data?.message || 'Failed to remove user',
+				color: 'error',
+			});
+		} finally {
+			setIsUpdatingRole(null);
+			setOpenRoleMenuId(null);
+		}
+	};
+
+	const coverImageUrl = media.find((m) => m.type === 'cover')?.url;
+	const iconImageUrl = media.find((m) => m.type === 'icon')?.url;
+
+	const displayRoles = !isUserLoaded
+		? []
+		: hasLiveCollaboration
+			? projectRoles || []
+			: MOCK_ROLES;
+
+	const trimmedEmail = inviteEmail.trim();
+	let inviteError = '';
+
+	if (trimmedEmail) {
+		// 1. Regex check for valid email format
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(trimmedEmail)) {
+			inviteError = 'Please enter a valid email address.';
+		}
+		// 2. Check if user is already in the project
+		else if (
+			projectRoles?.some(
+				(r) => r.user.email?.toLowerCase() === trimmedEmail.toLowerCase(),
+			)
+		) {
+			inviteError = 'This user is already in the project.';
+		}
+	}
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+			<div
+				style={{
+					backgroundColor: 'lightgray',
+					borderRadius: '8px 8px 0 0',
+					height: '210px',
+					backgroundImage: `url(${coverImageUrl})`,
+					backgroundSize: 'cover',
+					backgroundPosition: 'center',
+					position: 'absolute',
+					width: '100%',
+				}}
+			>
+				<input
+					className='hidden-project-cover-picture-input'
+					id='project-cover-picture-input'
+					type='file'
+					accept='image/*'
+					onChange={(e) => {
+						const files = e.target.files;
+						if (files) updateCoverPicture(Array.from(files));
+					}}
+				/>
+			</div>
+
+			<div
+				style={{
+					padding: '40px',
+					display: 'flex',
+					alignItems: 'center',
+					zIndex: 0,
+					gap: '16px',
+				}}
+			>
+				<button className='dialog_back_button' onClick={onClose}>
+					<i className='fa-solid fa-arrow-left' />
+				</button>
+				<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+					Project details
+				</h1>
+			</div>
+
+			<div style={{ flex: 1, margin: '16px 42px', marginTop: '16px' }}>
+				<div
+					className='user-profile-content'
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '32px',
+						minHeight: '80%',
+						height: '100%',
+					}}
+				>
+					<section
+						style={{
+							display: 'flex',
+							gap: '10px',
+							flexDirection: 'column',
+							marginTop: '10px',
+						}}
+					>
+						<div
+							style={{
+								display: 'flex',
+								gap: '10px',
+								justifyContent: 'space-between',
+							}}
+						>
+							<CircularImageUpload
+								src={iconImageUrl}
+								onChange={updateIcon}
+								hoverLabel='Change project icon'
+							/>
+							<span>
+								<Button
+									iconStart='fa-solid fa-images'
+									style={{ marginTop: '20px' }}
+									id='change-project-cover-image-button'
+									onClick={() => {
+										document
+											.getElementById('project-cover-picture-input')
+											?.click();
+									}}
+								/>
+								<Tooltip
+									anchorQuerySelector='#change-project-cover-image-button'
+									placement='left'
+								>
+									Change cover image
+								</Tooltip>
+							</span>
+						</div>
+						<ProjectDataForm project={project} ready={ready} />
+					</section>
+
+					{/* ROLES & COLLABORATION SECTION */}
+					<section>
+						<div
+							style={{
+								display: 'flex',
+								justifyContent: 'space-between',
+								alignItems: 'center',
+								marginBottom: '6px',
+							}}
+						>
+							<h3
+								style={{
+									margin: 0,
+									fontWeight: 500,
+									fontSize: '18px',
+									color: '#111827',
+								}}
+							>
+								Project roles
+							</h3>
+						</div>
+						<p
+							style={{
+								margin: 0,
+								fontSize: '13px',
+								color: '#6b7280',
+								marginBottom: '16px',
+							}}
+						>
+							Manage who has access to view or edit this project.
+						</p>
+
+						<div className='project-roles-wrapper'>
+							{/* If they HAVE access and are NOT just a viewer, show the invite form */}
+							{hasLiveCollaboration && !isViewer && (
+								<form
+									onSubmit={handleInvite}
+									className='project-roles-invite-form'
+									style={{ flexDirection: 'column', alignItems: 'flex-start' }} // Stack vertically
+								>
+									<div style={{ display: 'flex', gap: '8px', width: '100%' }}>
+										<input
+											type='email'
+											placeholder='Email address'
+											value={inviteEmail}
+											onChange={(e) => setInviteEmail(e.target.value)}
+											required
+											disabled={hasReachedMaxCollaborators}
+											className={`project-roles-input ${inviteError ? 'has-error' : ''}`}
+											style={{
+												borderColor: inviteError ? '#ef4444' : undefined,
+											}} // Turn red on error
+										/>
+										<select
+											value={inviteRole}
+											onChange={(e) => setInviteRole(e.target.value)}
+											className='project-roles-select'
+											disabled={hasReachedMaxCollaborators}
+										>
+											<option value='role_viewer'>Viewer</option>
+											<option value='role_editor'>Editor</option>
+											{isOwner && <option value='role_owner'>Owner</option>}
+										</select>
+										<Button
+											type='submit'
+											loading={isInviting}
+											disabled={
+												!trimmedEmail ||
+												!!inviteError ||
+												hasReachedMaxCollaborators
+											} // Disable if empty or invalid
+											size='small'
+											variant='contained'
+										>
+											Invite
+										</Button>
+									</div>
+
+									{/* Display the validation error */}
+									{(inviteError || hasReachedMaxCollaborators) && (
+										<span
+											style={{
+												color: '#ef4444',
+												fontSize: '11.5px',
+												marginTop: '4px',
+												marginLeft: '2px',
+											}}
+										>
+											{hasReachedMaxCollaborators ? (
+												<span>
+													Maximum number of collaborators reached.
+													<br />
+													<strong>
+														Upgrate to an organization plan to collaborate with
+														your team
+													</strong>
+												</span>
+											) : (
+												inviteError
+											)}
+										</span>
+									)}
+								</form>
+							)}
+
+							{/* The List of Roles (Blurred if no access) */}
+							<div
+								className='project-roles-list'
+								style={{
+									opacity: hasLiveCollaboration ? 1 : 0.4,
+									// Disable clicks on content, but keep 'all' or default so scrolling behaviour remains active!
+									pointerEvents: hasLiveCollaboration ? 'auto' : 'all',
+									userSelect: hasLiveCollaboration ? 'auto' : 'none',
+									// Bumping the blur slightly for a better tease as requested.
+									filter: hasLiveCollaboration ? 'none' : 'blur(1.5px)',
+									paddingBottom: !hasLiveCollaboration ? '100px' : '',
+								}}
+							>
+								{!isUserLoaded || (hasLiveCollaboration && !projectRoles) ? (
+									<div
+										style={{
+											padding: '20px',
+											textAlign: 'center',
+											color: '#6b7280',
+										}}
+									>
+										Loading roles...
+									</div>
+								) : (
+									displayRoles.map((role) => {
+										// Determine permissions for THIS specific row
+										const isTargetOwner =
+											role.role === 'role_owner' ||
+											// @ts-ignore
+											role.role === 'owner';
+										const canManageThisUser =
+											isOwner || (isEditor && !isTargetOwner);
+										const isThisUserTheLastOwner =
+											isTargetOwner && ownerCount <= 1;
+
+										return (
+											<div key={role.id} className='project-role-item'>
+												<div
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														gap: '12px',
+													}}
+												>
+													<UserChip
+														user={role.user}
+														labelStyles={{ color: '#374151', fontWeight: 500 }}
+													/>
+													<span style={{ color: '#6b7280', fontSize: '13px' }}>
+														{role.user.email}
+													</span>
+												</div>
+
+												<span
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														gap: '8px',
+													}}
+												>
+													<span
+														className={`project-role-badge role-${role.role.replace('role_', '')}`}
+													>
+														{capitalizeFirstLetter(
+															role.role.replace('role_', ''),
+														)}
+													</span>
+
+													{/* Only show menu if they have permissions to manage this specific user */}
+													{hasLiveCollaboration &&
+														(canManageThisUser ? (
+															<div className='role-menu-wrapper'>
+																<button
+																	id={`role-action-btn-${role.id}`}
+																	className='role-action-btn'
+																	onClick={() =>
+																		setOpenRoleMenuId(
+																			openRoleMenuId === role.id
+																				? null
+																				: role.id,
+																		)
+																	}
+																	disabled={isUpdatingRole === role.user.id}
+																>
+																	{isUpdatingRole === role.user.id ? (
+																		<i className='fa-solid fa-circle-notch fa-spin' />
+																	) : (
+																		<i className='fa-solid fa-ellipsis-vertical' />
+																	)}
+																</button>
+
+																{/* The Floating UI Popup */}
+																<Popup
+																	id={`role-popup-${role.id}`}
+																	anchorQuerySelector={`#role-action-btn-${role.id}`}
+																	placement='left'
+																	arrowClasses={['dropdown-menu-card-arrow']}
+																	containerClasses={[
+																		'role-dropdown-menu-container',
+																	]}
+																	arrowStyle={{
+																		borderTop: '1px solid #e5e7eb',
+																		borderRight: '1px solid #e5e7eb',
+
+																		/* Optional: slightly soften the very tip so it doesn't look too sharp */
+																		// borderTopRightRadius: '2px'
+																	}}
+																	open={openRoleMenuId === role.id}
+																	onClickAway={() => setOpenRoleMenuId(null)}
+																	// We offset it slightly so it looks perfectly aligned with the button
+																	offset={4}
+																>
+																	{/* Override the absolute positioning since the Popup container handles it */}
+																	<div
+																		className='role-dropdown-menu'
+																		style={{
+																			position: 'relative',
+																			top: 0,
+																			right: 0,
+																			boxShadow: 'none',
+																			border: 'none',
+																			minWidth: '140px',
+																		}}
+																	>
+																		<p className='role-dropdown-header'>
+																			Change role
+																		</p>
+																		{[
+																			'role_viewer',
+																			'role_editor',
+																			'role_owner',
+																		].map((r) => {
+																			// Check if this is the role they already have
+																			const isCurrentRole =
+																				`role_${role.role}` === r ||
+																				role.role === r;
+
+																			// If target is the last owner, disable downgrading them
+																			// ALSO disable clicking the role they already have
+																			const isDisabled =
+																				(isThisUserTheLastOwner &&
+																					r !== 'role_owner') ||
+																				isCurrentRole;
+
+																			// If current user is just an editor, they can't upgrade someone to owner
+																			if (r === 'role_owner' && !isOwner)
+																				return null;
+
+																			return (
+																				<button
+																					key={r}
+																					className={`role-dropdown-btn ${isCurrentRole ? 'active' : ''}`}
+																					disabled={isDisabled}
+																					style={{
+																						opacity: isDisabled ? 0.5 : 1,
+																						cursor: isDisabled
+																							? 'not-allowed'
+																							: 'pointer',
+																					}}
+																					onClick={() =>
+																						handleUpdateRole(role.user.id, r)
+																					}
+																				>
+																					<i
+																						className={`fa-solid ${isCurrentRole ? 'fa-check' : 'fa-minus'}`}
+																						style={{
+																							opacity: isCurrentRole ? 1 : 0,
+																							width: '12px',
+																						}}
+																					/>
+																					{capitalizeFirstLetter(
+																						r.startsWith('role_')
+																							? r.replace('role_', '')
+																							: r,
+																					)}
+																					{isCurrentRole && (
+																						<span
+																							style={{
+																								fontSize: '10px',
+																								marginLeft: 'auto',
+																								opacity: 0.7,
+																							}}
+																						>
+																							Current
+																						</span>
+																					)}
+																				</button>
+																			);
+																		})}
+																		<hr
+																			style={{
+																				margin: '4px 0',
+																				border: 'none',
+																				borderTop: '1px solid #e5e7eb',
+																			}}
+																		/>
+																		<button
+																			className='role-dropdown-btn danger'
+																			disabled={isThisUserTheLastOwner}
+																			style={{
+																				opacity: isThisUserTheLastOwner
+																					? 0.5
+																					: 1,
+																				cursor: isThisUserTheLastOwner
+																					? 'not-allowed'
+																					: 'pointer',
+																			}}
+																			onClick={() =>
+																				handleRemoveRole(role.user.id)
+																			}
+																		>
+																			<i
+																				className='fa-solid fa-user-xmark'
+																				style={{ width: '12px' }}
+																			/>{' '}
+																			Remove
+																		</button>
+																	</div>
+																</Popup>
+															</div>
+														) : (
+															// Placeholder invisble div to take the space of the menu button when it's not shown, to prevent layout shift
+															<div
+																style={{ width: '20px', height: '1px' }}
+															></div>
+														))}
+												</span>
+											</div>
+										);
+									})
+								)}
+							</div>
+
+							{/* 3. The Floating Overlay */}
+							{!hasLiveCollaboration && isUserLoaded && (
+								<div className='project-roles-upgrade-overlay'>
+									<div className='project-roles-upgrade-content'>
+										<ProPlanChip />
+										<h4
+											style={{
+												margin: '12px 0 4px 0',
+												color: '#111827',
+												fontSize: '15px',
+											}}
+										>
+											Unlock Team Collaboration
+										</h4>
+										<p
+											style={{
+												margin: 0,
+												fontSize: '13px',
+												color: '#6b7280',
+												marginBottom: '20px',
+												padding: '0 16px',
+												lineHeight: 1.4,
+											}}
+										>
+											Upgrade to Pro to invite team members, assign specific
+											roles, and build together in real-time.
+										</p>
+										<Button
+											variant='contained'
+											onClick={() => window.open('/pricing/plans', '_blank')}
+										>
+											Upgrade to Pro
+										</Button>
+									</div>
+								</div>
+							)}
+						</div>
+					</section>
+
+					{/* DANGER ZONE */}
+					<section>
+						<h3
+							style={{
+								margin: '0 0 6px 0',
+								fontWeight: 500,
+								fontSize: '18px',
+								color: '#ef4444',
+							}}
+						>
+							Danger zone
+						</h3>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '13px',
+								color: '#6b7280',
+								marginBottom: '16px',
+							}}
+						>
+							Actions here can have irreversible consequences on this project.
+						</p>
+						<div className='danger-zone-container'>
+							{liveVersion && (
+								<>
+									<div className='danger-zone-item'>
+										<p
+											style={{
+												margin: '0px',
+												fontSize: '13px',
+												color: '#374151',
+											}}
+										>
+											Remove this project from the cloud, hide it from your
+											users and stop paying for it. All generated data will be
+											lost.
+										</p>
+										<Button
+											variant='outlined'
+											color='error'
+											size='small'
+											onClick={() =>
+												setIsUnpublishProjectConfirmationDialogOpen(true)
+											}
+										>
+											Unpublish project
+										</Button>
+									</div>
+									<hr
+										style={{
+											border: 'none',
+											borderTop: '1px solid #e5e7eb',
+											margin: 0,
+										}}
+									/>
+								</>
+							)}
+							<div className='danger-zone-item'>
+								<p
+									style={{ margin: '0px', fontSize: '13px', color: '#374151' }}
+								>
+									Delete project, all of its logic and data. This action is
+									irreversible.
+								</p>
+								<Button
+									variant='outlined'
+									color='error'
+									size='small'
+									onClick={() => setIsDeleteProjectConfirmationDialogOpen(true)}
+								>
+									Delete project
+								</Button>
+							</div>
+						</div>
+					</section>
+
+					<section
+						style={{
+							alignSelf: 'flex-start',
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'flex-end',
+							width: '100%',
+							gap: '16px',
+						}}
+					>
+						<Button onClick={onClose} variant='text'>
+							Back
+						</Button>
+					</section>
+				</div>
+			</div>
+
+			{isDeleteProjectConfirmationDialogOpen && (
+				<DeleteProjectConfirmationDialog
+					onClose={() => setIsDeleteProjectConfirmationDialogOpen(false)}
+				/>
+			)}
+			{isUnpublishProjectConfirmationDialogOpen && (
+				<UnpublishProjectConfirmationDialog
+					onClose={() => setIsUnpublishProjectConfirmationDialogOpen(false)}
+					onUnpublish={() => {
+						setIsUnpublishProjectConfirmationDialogOpen(false);
+						setLiveVersion(null);
+					}}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default ProjectConfigurationDialog;