@elyx-code/editor-ui 0.0.2

package/src/components/user-profile/OwnUserProfileContent.tsx

@@ -0,0 +1,665 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+	getAccessToken,
+	getCurrentUserOrLogoutRedirect,
+	signOut,
+} from '../../auth';
+import Button from '../../lib/button/Button';
+import Chip from '../../lib/chip/Chip';
+import './user-profile-content.css';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import {
+	ADD_PAYMENT_METHOD_PROCESS,
+	startAddPaymentMethodSession,
+} from '../../payments';
+import ChangePasswordForm from './ChangePasswordForm';
+import UserDataForm from './UserDataForm';
+import SmallDialog from '../../lib/dialog/SmallDialog';
+import CircularImageUpload from '../circular-image-upload/CircularImageUpload';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import axios from 'axios';
+import { capitalizeFirstLetter } from '@elyx-code/project-logic-tree';
+import { envConfig } from '../../config';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { popupNotification } from '../../popup-notification';
+import { useWorkspaceStore } from '../../store/workspace';
+
+interface IOwnUserProfileContentProps {
+	user?: any;
+}
+
+const OwnUserProfileContent: React.FC<IOwnUserProfileContentProps> = ({
+	user: initialUser,
+}) => {
+	const [paymentMethods, setPaymentMethods] = useState<any[] | null>(null);
+	const [user, setUser] = useState<any | null>(initialUser);
+	const [billingSubscriptions, setBillingSubscriptions] = useState<any | null>(
+		null,
+	);
+	const [
+		deleteAccountConfirmationDialogOpen,
+		setDeleteAccountConfirmationDialogOpen,
+	] = useState<boolean>(false);
+	const [isDeletingAccount, setIsDeletingAccount] = useState<boolean>(false);
+	const { id: projectId, branch: branchIdentifier, version: projectVersion } = useParams<{ id?: string, branch?: string, version?: string }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	useEffect(() => {
+		const init = async () => {
+			const promises = [getPaymentMethods(), getBillingSubscriptions()];
+
+			if (!initialUser) {
+				promises.push(getCurrentUserOrLogoutRedirect());
+			}
+
+			const [paymentMethods, billingSubscriptions, user] =
+				await Promise.all(promises);
+
+			setPaymentMethods(paymentMethods);
+			setBillingSubscriptions(billingSubscriptions);
+
+			if (user) {
+				setUser(user);
+			}
+		};
+
+		init();
+	}, [initialUser]);
+
+	const getPaymentMethods = async () => {
+		const response = await axios.get(
+			`${envConfig.API_BASE_URL}/pricing-service/v1/${activeWorkspace?.id}/payment-methods`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+
+		return response.data?.items || [];
+	};
+
+	const getBillingSubscriptions = async () => {
+		const response = await axios.get(
+			`${envConfig.API_BASE_URL}/pricing-service/v1/subscriptions`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+
+		return response.data?.items || [];
+	};
+
+	const _startAddPaymentMethodSession = async () => {
+		const currentProcess = window.location.pathname.includes('gallery')
+			? ADD_PAYMENT_METHOD_PROCESS.GALLERY_PROFILE
+			: ADD_PAYMENT_METHOD_PROCESS.EDITOR_PROFILE;
+			
+		return startAddPaymentMethodSession({
+			projectId: projectId,
+			process: currentProcess,
+			workspaceId: activeWorkspace?.id,
+			workspaceSlug: activeWorkspace?.slug,
+			branchIdentifier: branchIdentifier,
+			projectVersion: projectVersion,
+		});
+	};
+
+	const deletePaymentMethod = async (paymentMethodId: string) => {
+		let hasDeletedDefault = false;
+
+		const currentPaymentMethods = paymentMethods || [];
+		const paymentMethodToDelete = currentPaymentMethods.find(
+			(pm) => pm.id === paymentMethodId,
+		);
+
+		if (paymentMethodToDelete?.isDefault) {
+			hasDeletedDefault = true;
+		}
+
+		const updatedPaymentMethods = currentPaymentMethods.filter(
+			(pm) => pm.id !== paymentMethodId,
+		);
+		setPaymentMethods(updatedPaymentMethods);
+
+		await axios.delete(
+			`${envConfig.API_BASE_URL}/pricing-service/v1/${activeWorkspace?.id}/payment-methods/${paymentMethodId}`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+
+		if (hasDeletedDefault) {
+			const paymentMethods = await getPaymentMethods();
+			setPaymentMethods(paymentMethods);
+		}
+	};
+
+	const makeDefaultPaymentMethod = async (paymentMethodId: string) => {
+		const currentPaymentMethods = paymentMethods || [];
+		const updatedPaymentMethods = currentPaymentMethods.map((pm) => ({
+			...pm,
+			isDefault: pm.id === paymentMethodId,
+		}));
+
+		setPaymentMethods(updatedPaymentMethods);
+
+		await axios.post(
+			`${envConfig.API_BASE_URL}/pricing-service/v1/${activeWorkspace?.id}/payment-methods/${paymentMethodId}/make-default`,
+			{},
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+	};
+
+	const deleteAccount = async () => {
+		setIsDeletingAccount(true);
+
+		await axios.delete(
+			`${envConfig.API_BASE_URL}/user-service/v1/user/${projectId}`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+
+		await signOut();
+		navigate('/');
+
+		setIsDeletingAccount(false);
+	};
+
+	const uploadProfilePicture = async (files: File[], lastPicture: string) => {
+		const file: File = files[0];
+		const arrayBufferFileContent = await file.arrayBuffer();
+		const arrayBufferAsArray = Array.from(
+			new Uint8Array(arrayBufferFileContent),
+		);
+
+		try {
+			const response = await axios.put(
+				`${envConfig.API_BASE_URL}/user-service/v1/user/${user?.id}/profile-picture`,
+				{
+					files: [
+						{
+							...file,
+							contentType: file.type,
+							name: file.name,
+							arrayBuffer: arrayBufferAsArray,
+							lastModified: file.lastModified,
+							// @ts-ignore
+							lastModifiedDate: file.lastModifiedDate,
+						},
+					],
+				},
+				{
+					headers: {
+						Authorization: 'Bearer ' + (await getAccessToken()),
+					},
+				},
+			);
+
+			setUser(response?.data?.data);
+		} catch (error) {
+			Logger.log('Error uploading profile picture: ', error);
+			// Try to extract more info from the error if it's an Axios error
+			let errorMessage = 'Error uploading profile picture';
+
+			if (axios.isAxiosError(error)) {
+				errorMessage += `: ${error.response?.status} ${error.response?.statusText}`;
+				if (error.response?.data?.message) {
+					errorMessage += ` - ${error.response.data.message}`;
+				}
+			}
+
+			Logger.log(errorMessage);
+			setUser({
+				...user,
+				picture: lastPicture,
+			});
+			popupNotification({
+				text: errorMessage,
+				color: 'error',
+			});
+		}
+	};
+
+	const cannotDeletePaymentMethods =
+		paymentMethods?.length <= 1 && billingSubscriptions?.length !== 0;
+
+	return (
+		<div
+			className='user-profile-content'
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: '26px',
+				minHeight: '80%',
+				height: '100%',
+			}}
+		>
+			<section
+				style={{
+					display: 'flex',
+					gap: '10px',
+					flexDirection: 'column',
+					marginTop: '10px',
+				}}
+			>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Public profile
+					</h3>
+				</span>
+				<div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>
+					<CircularImageUpload
+						src={user?.picture}
+						onChange={uploadProfilePicture}
+					/>
+					<UserDataForm user={user} />
+				</div>
+			</section>
+
+			<section>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Security
+					</h3>
+				</span>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+						}}
+					>
+						{user?.email}
+					</p>
+					{user?.identityProvider === 'cognito' ? (
+						<ChangePasswordForm />
+					) : (
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							You signed in with Google.
+							<br />
+							Your identity provider does not support changing your password.
+						</p>
+					)}
+				</div>
+			</section>
+
+			{/* <section>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Elyx Settings
+					</h3>
+				</span>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+						}}
+					>
+						Application language
+					</p>
+					<div style={{ marginLeft: '2px' }}>
+						<LanguagePicker
+							onChange={(language: string) => {
+								Logger.log('New language selected: ', language);
+							}}
+							selected='fr'
+						/>
+					</div>
+				</div>
+			</section> */}
+
+			<section style={{ marginTop: '16px' }}>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Payment methods
+					</h3>
+					<Button
+						variant='text'
+						iconStart='fa-solid fa-plus'
+						color='grey'
+						size='small'
+						id='add-payment-method-from-profile'
+						onClick={_startAddPaymentMethodSession}
+					>
+						Add payment method
+					</Button>
+					<Tooltip
+						anchorQuerySelector='#add-payment-method-from-profile'
+						placement='bottom'
+					>
+						Add a new payment method
+					</Tooltip>
+				</span>
+				{!paymentMethods ? (
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+						}}
+					>
+						Loading payment methods...
+					</p>
+				) : paymentMethods.length ? (
+					<ul
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: '8px',
+							marginTop: '10px',
+							paddingLeft: '0px',
+						}}
+					>
+						{paymentMethods.map((paymentMethod: any) => (
+							<li
+								key={paymentMethod.id}
+								style={{ display: 'flex', gap: '10px', alignItems: 'start' }}
+							>
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: '4px',
+									}}
+								>
+									<div
+										style={{
+											display: 'flex',
+											gap: '8px',
+											alignItems: 'center',
+										}}
+									>
+										<i
+											className='fa-regular fa-credit-card'
+											style={{ color: 'rgba(0,0,0,0.54)', fontSize: '14px' }}
+										/>
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+											}}
+										>
+											{capitalizeFirstLetter(paymentMethod.card.brand)} ending
+											in
+										</p>
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+											}}
+										>
+											{'****' + paymentMethod.card.last4}
+										</p>
+										{paymentMethod.isDefault && (
+											<Chip color='success'>Default</Chip>
+										)}
+										<Button
+											variant='text'
+											iconStart='fa-solid fa-ellipsis-vertical'
+											size='small'
+											color='grey'
+											id={'payment-method-button-' + paymentMethod.id}
+										/>
+										<DropdownMenuPopup
+											popupOptions={{
+												anchorQuerySelector:
+													'#payment-method-button-' + paymentMethod.id,
+												placement: 'right',
+											}}
+											options={[
+												{
+													onClick: async () => {
+														deletePaymentMethod(paymentMethod.id);
+													},
+													label: 'Delete',
+													color: 'error',
+													iconEnd: 'fa-solid fa-trash-can',
+													disabled: cannotDeletePaymentMethods,
+													tooltip: cannotDeletePaymentMethods
+														? 'Cannot delete the last payment method when you have an active billing subscription'
+														: undefined,
+												},
+												{
+													onClick: async () => {
+														makeDefaultPaymentMethod(paymentMethod.id);
+													},
+													label: 'Make default',
+													disabled: paymentMethod.isDefault,
+													tooltip: paymentMethod.isDefault
+														? 'Payment method is already default'
+														: undefined,
+												},
+											]}
+										/>
+									</div>
+								</div>
+							</li>
+						))}
+					</ul>
+				) : (
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+						}}
+					>
+						You don't have any payment method yet.
+						<br />
+						Add a payment method to be able to publish your project.
+					</p>
+				)}
+			</section>
+
+			<section style={{ marginTop: '16px' }}>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Danger zone
+					</h3>
+				</span>
+				<p
+					style={{
+						margin: '0px',
+						fontSize: '14px',
+						marginTop: '6px',
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					This section contains actions that can have irreversible consequences
+					on your account.
+				</p>
+				<div className='danger-zone-container'>
+					<div className='danger-zone-item'>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Delete your account, and all projects and data associated with it.
+						</p>
+						<Button
+							variant='outlined'
+							color='error'
+							size='small'
+							id='delete-project'
+							onClick={() => setDeleteAccountConfirmationDialogOpen(true)}
+						>
+							Delete account
+						</Button>
+					</div>
+				</div>
+			</section>
+
+			{deleteAccountConfirmationDialogOpen && (
+				<SmallDialog
+					onClose={() =>
+						!isDeletingAccount && setDeleteAccountConfirmationDialogOpen(false)
+					}
+				>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+							justifyContent: 'space-between',
+						}}
+					>
+						<div style={{ display: 'flex', flexDirection: 'column' }}>
+							<div
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									marginBottom: '10px',
+									gap: '16px',
+								}}
+							>
+								<button
+									className='dialog_back_button'
+									disabled={isDeletingAccount}
+									onClick={() =>
+										!isDeletingAccount &&
+										setDeleteAccountConfirmationDialogOpen(false)
+									}
+								>
+									<i className='fa-solid fa-arrow-left' />
+								</button>
+								<h2 style={{ margin: '0px', fontWeight: '500' }}>
+									Delete account
+								</h2>
+							</div>
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: '10px',
+									alignItems: 'center',
+									marginBottom: '16px',
+								}}
+							>
+								<p
+									style={{
+										margin: '0px',
+										marginTop: '6px',
+										color: 'rgba(0,0,0,0.54)',
+									}}
+								>
+									Are you sure you want to delete your account?
+								</p>
+								<p
+									style={{
+										margin: '0px',
+										marginTop: '6px',
+										color: 'rgba(0,0,0,0.54)',
+									}}
+								>
+									This action is irreversible and will delete all your projects
+									and data associated with your account.
+								</p>
+							</div>
+						</div>
+						<div
+							style={{
+								display: 'flex',
+								justifyContent: 'center',
+								flexDirection: 'column',
+								gap: '10px',
+								alignItems: 'center',
+							}}
+						>
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '10px',
+									color: 'rgba(0,0,0,0.54)',
+									textAlign: 'center',
+								}}
+							>
+								You will be logged out.
+								<br />
+								It might take a few seconds. Please wait.
+							</p>
+							<Button
+								color='error'
+								size='medium'
+								loading={isDeletingAccount}
+								onClick={deleteAccount}
+							>
+								Delete account
+							</Button>
+						</div>
+					</div>
+				</SmallDialog>
+			)}
+		</div>
+	);
+};
+
+export default OwnUserProfileContent;