@elyx-code/editor-ui 0.0.2

package/src/pages/NewPaymentMethodCallback.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import './auth.css';
+import { getAccessToken } from '../auth';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../config';
+import { useWorkspaceStore } from '../store/workspace';
+
+const NewPaymentMethodCallback: React.FC = () => {
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const completePaymentMethodCreation = async () => {
+		try {
+			const session_id = new URL(window.location.href).searchParams.get(
+				'session_id'
+			);
+			const token = await getAccessToken();
+
+			const response = await axios.post(
+				`${envConfig.API_BASE_URL}/pricing-service/v1/complete-add-payment-method-session?session_id=${session_id}`,
+				{},
+				{
+					headers: {
+						Authorization: `Bearer ${token}`,
+					},
+				}
+			);
+
+			const success = response.data;
+
+			if (success.process === 'publish-project') {
+				navigate(`/ws/${activeWorkspace?.slug}/editor/${success.projectId}/main/latest/publication/preview`);
+			} else {
+				navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+			}
+		} catch (error) {
+			// TODO: handle error
+			Logger.error('error: ', error);
+			navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+		}
+	};
+
+	useEffect(() => {
+		completePaymentMethodCreation();
+	}, []);
+
+	return <div className='auth-page'></div>;
+};
+
+export default NewPaymentMethodCallback;

package/src/pages/NotFoundPage.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Typography, Button, Paper } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
+
+const NotFoundPage: React.FC = () => {
+	const navigate = useNavigate();
+
+	const handleGoHome = () => {
+		navigate('/gallery');
+	};
+
+	return (
+		<Box
+			sx={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				justifyContent: 'center',
+				minHeight: '100vh',
+				width: '100vw',
+				background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
+				color: '#111827',
+				p: 4,
+				overflow: 'hidden',
+				position: 'relative'
+			}}
+		>
+			{/* Decorative background elements */}
+			<Box
+				sx={{
+					position: 'absolute',
+					top: '-10%',
+					left: '-5%',
+					width: '40vw',
+					height: '40vw',
+					borderRadius: '50%',
+					background: 'radial-gradient(circle, rgba(139,92,246,0.15) 0%, rgba(255,255,255,0) 70%)',
+					filter: 'blur(60px)',
+					zIndex: 0,
+				}}
+			/>
+			<Box
+				sx={{
+					position: 'absolute',
+					bottom: '-10%',
+					right: '-5%',
+					width: '50vw',
+					height: '50vw',
+					borderRadius: '50%',
+					background: 'radial-gradient(circle, rgba(139,92,246,0.1) 0%, rgba(255,255,255,0) 70%)',
+					filter: 'blur(80px)',
+					zIndex: 0,
+				}}
+			/>
+
+			<Paper
+				elevation={24}
+				sx={{
+					p: { xs: 4, md: 6 },
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					maxWidth: 650,
+					width: '100%',
+					textAlign: 'center',
+					borderRadius: 4,
+					background: '#ffffff',
+					zIndex: 1,
+					boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
+				}}
+			>
+				<Typography 
+					variant="h1" 
+					sx={{ 
+						fontWeight: 900, 
+						fontSize: { xs: '6rem', md: '8rem' },
+						background: 'linear-gradient(to right, #8B5CF6, #3B82F6)',
+						WebkitBackgroundClip: 'text',
+						WebkitTextFillColor: 'transparent',
+						lineHeight: 1,
+						mb: 2
+					}}
+				>
+					404
+				</Typography>
+				
+				<Typography variant="h4" gutterBottom sx={{ fontWeight: 800, letterSpacing: '-0.5px', color: '#111827' }}>
+					Page Not Found
+				</Typography>
+				
+				<Typography variant="h6" sx={{ mb: 4, color: '#4B5563', fontWeight: 400, lineHeight: 1.6 }}>
+					The page you are looking for doesn't exist, has been moved, or is temporarily unavailable.
+				</Typography>
+				
+				<Box sx={{ display: 'flex', gap: 3, flexDirection: { xs: 'column', sm: 'row' }, width: '100%', justifyContent: 'center' }}>
+					<Button 
+						variant="contained" 
+						size="large"
+						startIcon={<HomeIcon />}
+						onClick={handleGoHome}
+						sx={{ 
+							background: '#8B5CF6',
+							color: '#ffffff',
+							fontWeight: 600,
+							px: 4,
+							py: 1.5,
+							borderRadius: 3,
+							textTransform: 'none',
+							fontSize: '1.1rem',
+							boxShadow: '0 4px 14px 0 rgba(139, 92, 246, 0.39)',
+							'&:hover': {
+								background: '#7C3AED',
+								boxShadow: '0 6px 20px rgba(139, 92, 246, 0.4)',
+							}
+						}}
+					>
+						Back to Gallery
+					</Button>
+				</Box>
+			</Paper>
+		</Box>
+	);
+};
+
+export default NotFoundPage;

package/src/pages/PricingPlans.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IUser } from '@elyx-code/definitions';
+import { CircularProgress } from '@mui/material';
+import Logo from '../assets/logo-full-word-white.png';
+import { getCurrentUserOrLogoutRedirect } from '../auth';
+import { envConfig } from '../config';
+
+const PricingPlans: React.FC = () => {
+	const [user, setUser] = useState<IUser>();
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			const currentUser = await getCurrentUserOrLogoutRedirect();
+			setUser(currentUser);
+
+			// Load the Stripe Pricing Table script dynamically
+			const script = document.createElement('script');
+			script.src = 'https://js.stripe.com/v3/pricing-table.js';
+			script.async = true;
+			document.body.appendChild(script);
+		};
+		fetchUser();
+	}, []);
+
+	// Sleek, centered loading state
+	if (!user || !user.workspace) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					height: '100vh',
+					width: '100%',
+				}}
+			>
+				<CircularProgress sx={{ color: 'var(--color-main-primary)' }} />
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className='pricing-page'
+			style={{
+				minHeight: '100vh',
+				width: '100%',
+				padding: '40px 20px',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				// If your app uses a dark theme, change this to a dark hex like #111827.
+				// If light, a subtle off-white/gray like #f8f9fc makes the white cards pop.
+				backgroundColor: 'var(--color-main-primary, transparent)',
+			}}
+		>
+			{/* Header Section */}
+			<div
+				style={{
+					width: '100%',
+					maxWidth: '1200px',
+					position: 'relative',
+					marginBottom: '48px',
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
+			>
+				{/* Absolute positioned back button so it doesn't offset the centered title */}
+				<button
+					onClick={() => navigate(-1)}
+					style={{
+						position: 'absolute',
+						left: 0,
+						background: 'none',
+						border: 'none',
+						cursor: 'pointer',
+						fontSize: '1rem',
+						color: 'white',
+						display: 'flex',
+						alignItems: 'center',
+						gap: '8px',
+						fontWeight: 600,
+						padding: '8px 16px',
+						borderRadius: '8px',
+						transition: 'opacity 0.2s ease',
+					}}
+					onMouseOver={(e) => (e.currentTarget.style.opacity = '0.7')}
+					onMouseOut={(e) => (e.currentTarget.style.opacity = '1')}
+				>
+					<i className='fa-solid fa-arrow-left'></i> Back
+				</button>
+
+				<div style={{ textAlign: 'center', color: 'white' }}>
+					<h1
+						style={{ margin: '0 0 8px 0', fontSize: '2.5rem', fontWeight: 700 }}
+					>
+						Choose your plan
+					</h1>
+					<p style={{ margin: 0, fontSize: '1.1rem', opacity: 0.7 }}>
+						Select the perfect montly plan for your workspace needs.
+					</p>
+				</div>
+			</div>
+
+			{/* Pricing Table Wrapper */}
+			<div
+				style={{
+					width: '100%',
+					maxWidth: '1200px',
+					// Optional: Add a subtle shadow to lift the table off the background
+					// boxShadow:
+					// 	'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+					borderRadius: '16px',
+					overflow: 'hidden', // Keeps the rounded corners crisp
+				}}
+			>
+				{/* @ts-ignore - Custom Web Component */}
+				<stripe-pricing-table
+					client-reference-id={user.workspace.id}
+					customer-email={user.email}
+					// @ts-ignore
+					pricing-table-id={envConfig.stripe_pricing_table_id}
+					// @ts-ignore
+					publishable-key={envConfig.stripe_publishable_key} // Note: Swapped to pk_test for safety!
+				>
+					{/* @ts-ignore */}
+				</stripe-pricing-table>
+			</div>
+			<a
+				href='/'
+				onClick={(e) => {
+					e.preventDefault();
+					navigate('/');
+				}}
+			>
+				<img
+					style={{
+						position: 'absolute',
+						bottom: '20px',
+						height: '40px',
+						cursor: 'pointer',
+						transform: 'translateX(-50%)',
+					}}
+					src={Logo}
+					alt='Logo'
+				/>
+			</a>
+		</div>
+	);
+};
+
+export default PricingPlans;

package/src/pages/auth.css

@@ -0,0 +1,304 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+.auth-page {
+  background: #f6f5f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: 'Montserrat', sans-serif;
+  height: 100vh;
+}
+
+.google-social-sign-in-button {
+  width: 175px;
+  height: 44px;
+}
+
+.auth-page-logo {
+  position: absolute;
+  bottom: 20px;
+  height: 25px;
+  cursor: pointer;
+  transform: translateX(-50%);
+}
+
+#resend-password-recovery {
+  display: none;
+}
+
+#resend-password-recovery.active {
+  display: unset;
+}
+
+.auth-centered-card-content h1 {
+  font-weight: bold;
+  margin: 0;
+}
+
+.auth-centered-card-content h2 {
+  text-align: center;
+}
+
+.auth-centered-card-content p {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+}
+
+.auth-centered-card-content p.auth-form-error-messages {
+  margin: 0px;
+  color: var(--color-main-error);
+  white-space: pre-wrap;
+}
+
+.auth-centered-card-content span {
+  font-size: 12px;
+}
+
+.auth-centered-card-content a {
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
+  margin: 15px 0;
+}
+
+.auth-centered-card-content button:not(.input-button),
+.overlay-panel button {
+  border-radius: 20px;
+  border: 1px solid #A543E1;
+  background-color: #A543E1;
+  color: #FFFFFF;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  transition: transform 80ms ease-in;
+  cursor: pointer;
+}
+
+.auth-centered-card-content button:not(.input-button):hover,
+.overlay-panel button:hover {
+  transform: scale(1.05);
+}
+
+.auth-centered-card-content button:not(.input-button):active,
+.overlay-panel button:active {
+  transform: scale(0.95);
+}
+
+.auth-centered-card-content button:not(.input-button):focus,
+.overlay-panel button:focus {
+  outline: none;
+}
+
+.auth-centered-card-content button:not(.input-button).ghost,
+.overlay-panel button.ghost {
+  background-color: transparent;
+  border-color: #FFFFFF;
+}
+
+.auth-centered-card-content {
+  background-color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 50px;
+  height: 100%;
+  text-align: center;
+}
+
+.auth-centered-card-content input {
+  background-color: #eee;
+  border: none;
+  padding: 12px 15px;
+  margin: 8px 0;
+  width: 100%;
+}
+
+.container {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
+    0 10px 10px rgba(0, 0, 0, 0.22);
+  position: relative;
+  overflow: hidden;
+  width: 768px;
+  max-width: 100%;
+  min-height: 480px;
+}
+
+.content-container {
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  height: 100%;
+  transition: all 0.6s ease-in-out;
+  width: 50%;
+  left: 0;
+}
+
+/* .left-content-container {
+  left: 0;
+  z-index: 2;
+} */
+
+.container.right-panel-active .content-container:not(.right-content-container) {
+  transform: translateX(100%);
+  visibility: none;
+  opacity: 0;
+  animation: all 0.6s ease-in-out;
+}
+
+/* .right-content-container {
+  left: 0;
+  z-index: 1;
+} */
+
+.content-container.active-content {
+  /* display: block; */
+  visibility: visible;
+  opacity: 1;
+}
+
+.overlay-container .active-content {
+  /* display: flex; */
+  visibility: visible;
+  opacity: 1;
+}
+
+.container.right-panel-active .content-container.right-content-container {
+  transform: translateX(100%);
+  z-index: 5;
+  animation: show 0.6s, transform 0.6s ease-in-out;
+}
+
+@keyframes show {
+  0%,
+  49.99% {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 1;
+  }
+
+  50%,
+  100% {
+    visibility: visible;
+    opacity: 1;
+    z-index: 5;
+  }
+}
+
+.overlay-container {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  transition: transform 0.6s ease-in-out;
+  z-index: 100;
+}
+
+.container.right-panel-active .overlay-container {
+  transform: translateX(-100%);
+}
+
+.overlay {
+  background: #6F36FF;
+  background: -webkit-linear-gradient(to right, #A543E1, #6F36FF);
+  background: linear-gradient(to right, #A543E1, #6F36FF);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 0 0;
+  color: #FFFFFF;
+  position: relative;
+  left: -100%;
+  height: 100%;
+  width: 200%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.container.right-panel-active .overlay {
+  transform: translateX(50%);
+}
+
+.overlay-panel {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 40px;
+  text-align: center;
+  visibility: hidden;
+  opacity: 0;
+  top: 0;
+  height: 100%;
+  width: 50%;
+  transform: translateX(0);
+  transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+  transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+  transform: translateX(0);
+}
+
+.overlay-right {
+  right: 0;
+  transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+  transform: translateX(20%);
+}
+
+.social-container {
+  margin: 20px 0;
+}
+
+.social-container a {
+  border: 1px solid #DDDDDD;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  height: 40px;
+  width: 40px;
+}
+
+footer {
+  background-color: #222;
+  color: #fff;
+  font-size: 14px;
+  bottom: 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  text-align: center;
+  z-index: 999;
+}
+
+footer p {
+  margin: 10px 0;
+}
+
+footer i {
+  color: red;
+}
+
+footer a {
+  color: #3c97bf;
+  text-decoration: none;
+}