feat(egh): core instructor invite flow

apps/egghead/next.config.mjs

@@ -37,6 +37,11 @@ const config = {
 				hostname: 'neatly-diverse-goldfish.ngrok-free.app',
 				port: '',
 			},
+			{
+				protocol: 'https',
+				hostname: 'res.cloudinary.com',
+				port: '',
+			},
 		],
 	},
 	pageExtensions: ['mdx', 'ts', 'tsx'],

apps/egghead/src/app/(user)/invites/[inviteId]/_components/accept-invite-form.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Button, Input, Label, useToast } from '@coursebuilder/ui'
+
+import { acceptInstructorInvite } from '../actions'
+
+interface AcceptInviteFormProps {
+	inviteId: string
+	inviteEmail: string
+}
+
+export function AcceptInviteForm({
+	inviteId,
+	inviteEmail,
+}: AcceptInviteFormProps) {
+	const [email, setEmail] = useState(inviteEmail)
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const { toast } = useToast()
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault()
+		setIsSubmitting(true)
+
+		try {
+			await acceptInstructorInvite({ inviteId, email })
+		} catch (error) {
+			if ((error as Error).message === 'NEXT_REDIRECT') {
+				toast({
+					title: 'Invitation accepted!',
+					description: 'You will be redirected to complete your profile.',
+				})
+			} else {
+				toast({
+					title: 'Error',
+					description: 'Failed to accept invitation. Please try again.',
+					variant: 'destructive',
+				})
+			}
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	return (
+		<form onSubmit={onSubmit} className="space-y-6">
+			<div className="space-y-2">
+				<Label htmlFor="email">Email</Label>
+				<p className="text-sm text-gray-500">
+					Please enter the email address you would like to use as your
+					instructor account for egghead. We've pre-filled this with the email
+					address you were invited with.
+				</p>
+				<Input
+					id="email"
+					type="email"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					required
+					disabled={isSubmitting}
+				/>
+			</div>
+			<Button type="submit" disabled={isSubmitting}>
+				{isSubmitting ? 'Accepting...' : 'Accept Invitation'}
+			</Button>
+		</form>
+	)
+}

apps/egghead/src/app/(user)/invites/[inviteId]/actions.ts

@@ -0,0 +1,43 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+import { db } from '@/db'
+import { invites } from '@/db/schema'
+import { eq } from 'drizzle-orm'
+
+interface AcceptInstructorInviteParams {
+	inviteId: string
+	email: string
+}
+
+export async function acceptInstructorInvite({
+	inviteId,
+	email,
+}: AcceptInstructorInviteParams) {
+	const invite = await db.query.invites.findFirst({
+		where: eq(invites.id, inviteId),
+		columns: {
+			inviteEmail: true,
+			inviteState: true,
+		},
+	})
+
+	if (!invite) {
+		throw new Error('Invite not found')
+	}
+
+	if (invite.inviteState !== 'INITIATED') {
+		throw new Error('Invite has already been used or expired')
+	}
+
+	await db
+		.update(invites)
+		.set({
+			inviteState: 'VERIFIED',
+			acceptedEmail: email,
+			confirmedAt: new Date(),
+		})
+		.where(eq(invites.id, inviteId))
+
+	redirect(`/invites/${inviteId}/onboarding`)
+}

apps/egghead/src/app/(user)/invites/[inviteId]/onboarding/_components/cloudinary-profile-uploader.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React, { type Dispatch, type SetStateAction } from 'react'
+import Script from 'next/script'
+import { env } from '@/env.mjs'
+
+import { Button } from '@coursebuilder/ui'
+
+export const CloudinaryUploadButton: React.FC<{
+	dir: string
+	id: string
+	onImageUploadedAction: Dispatch<SetStateAction<string>>
+}> = ({ dir, id, onImageUploadedAction }) => {
+	const cloudinaryRef = React.useRef<any>(null)
+	const widgetRef = React.useRef<any>(null)
+	const containerRef = React.useRef<HTMLDivElement>(null)
+	React.useEffect(() => {
+		cloudinaryRef.current = (window as any).cloudinary
+	}, [])
+
+	return (
+		<div className="">
+			<Script
+				strategy="afterInteractive"
+				onLoad={() => {
+					cloudinaryRef.current = (window as any).cloudinary
+				}}
+				src="https://upload-widget.cloudinary.com/global/all.js"
+				type="text/javascript"
+			/>
+			<div className="w-fit p-5">
+				<span className="text-muted-foreground mb-2 block text-balance text-sm">
+					Upload a profile image for your instructor profile. A square 1000x1000
+					image works best.
+				</span>
+				<Button
+					type="button"
+					variant="outline"
+					className="flex w-full"
+					onClick={() => {
+						widgetRef.current = cloudinaryRef.current.createUploadWidget(
+							{
+								cloudName: env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+								uploadPreset: env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
+								// inline_container: '#cloudinary-upload-widget-container',
+								folder: `${dir}/${id}`,
+							},
+							(error: any, result: any) => {
+								if (!error && result && result.event === 'success') {
+									console.debug('Done! Here is the image info: ', result.info)
+									onImageUploadedAction(result.info.secure_url)
+								}
+							},
+						)
+						widgetRef.current.open()
+					}}
+				>
+					Upload Profile Image
+				</Button>
+			</div>
+			<div ref={containerRef} id="cloudinary-upload-widget-container" />
+		</div>
+	)
+}

apps/egghead/src/app/(user)/invites/[inviteId]/onboarding/_components/instructor-onboarding-form.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+
+import { Button, Input, Label, Textarea, useToast } from '@coursebuilder/ui'
+
+import { createInstructorProfile } from '../actions'
+import { CloudinaryUploadButton } from './cloudinary-profile-uploader'
+
+interface InstructorOnboardingFormProps {
+	inviteId: string
+	acceptedEmail: string
+}
+
+export function InstructorOnboardingForm({
+	inviteId,
+	acceptedEmail,
+}: InstructorOnboardingFormProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const [imageUrl, setImageUrl] = useState(
+		'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1566948117/transcript-images/Eggo_Notext.png',
+	)
+	const { toast } = useToast()
+
+	async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsSubmitting(true)
+
+		const formData = new FormData(e.currentTarget)
+
+		try {
+			await createInstructorProfile({
+				inviteId,
+				firstName: formData.get('firstName') as string,
+				lastName: formData.get('lastName') as string,
+				email: formData.get('email') as string,
+				twitter: formData.get('twitter') as string,
+				bluesky: formData.get('bluesky') as string,
+				website: formData.get('website') as string,
+				bio: formData.get('bio') as string,
+				profileImageUrl: imageUrl,
+			})
+		} catch (error) {
+			if ((error as Error).message === 'NEXT_REDIRECT') {
+				toast({
+					title: 'Invitation accepted!',
+					description: 'Your instructor profile has been created successfully.',
+				})
+			} else {
+				toast({
+					title: 'Error',
+					description: 'Failed to accept invitation. Please try again.',
+					variant: 'destructive',
+				})
+			}
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
+
+	return (
+		<form onSubmit={onSubmit} className="space-y-6">
+			<div className="space-y-4">
+				<div className="grid grid-cols-2 gap-4">
+					<div className="space-y-2">
+						<Label htmlFor="firstName">First name *</Label>
+						<Input
+							id="firstName"
+							name="firstName"
+							required
+							disabled={isSubmitting}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="lastName">Last name *</Label>
+						<Input
+							id="lastName"
+							name="lastName"
+							required
+							disabled={isSubmitting}
+						/>
+					</div>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="email">egghead.io User email *</Label>
+					<Input
+						id="email"
+						name="email"
+						type="email"
+						defaultValue={acceptedEmail}
+						required
+						disabled={true}
+					/>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="twitter">Twitter</Label>
+					<Input id="twitter" name="twitter" disabled={isSubmitting} />
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="bluesky">BlueSky</Label>
+					<Input id="bluesky" name="bluesky" disabled={isSubmitting} />
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="website">Website</Label>
+					<Input
+						id="website"
+						name="website"
+						type="url"
+						disabled={isSubmitting}
+					/>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="bio">Bio short</Label>
+					<Textarea
+						id="bio"
+						name="bio"
+						placeholder="Please tell us a bit about yourself. What do you like to do?"
+						className="h-32"
+						disabled={isSubmitting}
+					/>
+				</div>
+
+				<div className="flex w-full items-center gap-4">
+					<Image
+						src={imageUrl}
+						alt="Instructor profile image"
+						width={75}
+						height={75}
+					/>
+
+					<CloudinaryUploadButton
+						dir="instructor-images"
+						id={inviteId}
+						onImageUploadedAction={setImageUrl}
+					/>
+				</div>
+			</div>
+
+			<Button type="submit" disabled={isSubmitting}>
+				{isSubmitting ? 'Creating Profile...' : 'Create Profile'}
+			</Button>
+		</form>
+	)
+}

apps/egghead/src/app/(user)/invites/[inviteId]/onboarding/actions.ts

@@ -0,0 +1,52 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import { db } from '@/db'
+import { eggheadPgQuery } from '@/db/eggheadPostgres'
+import { accounts, invites, profiles, users } from '@/db/schema'
+import { INSTRUCTOR_INVITE_COMPLETED_EVENT } from '@/inngest/events/instructor-invite-completed'
+import { inngest } from '@/inngest/inngest.server'
+import { addRoleToUser } from '@/lib/users'
+import { eq } from 'drizzle-orm'
+
+interface CreateInstructorProfileParams {
+	inviteId: string
+	firstName: string
+	lastName: string
+	email: string
+	twitter?: string
+	website?: string
+	bio?: string
+	bluesky?: string
+	profileImageUrl?: string
+}
+
+export async function createInstructorProfile({
+	inviteId,
+	firstName,
+	lastName,
+	email,
+	twitter,
+	website,
+	bluesky,
+	bio,
+	profileImageUrl,
+}: CreateInstructorProfileParams) {
+	await inngest.send({
+		name: INSTRUCTOR_INVITE_COMPLETED_EVENT,
+		data: {
+			inviteId,
+			firstName,
+			lastName,
+			email,
+			twitter,
+			website,
+			bio,
+			bluesky,
+			profileImageUrl,
+		},
+	})
+
+	redirect(`/invites/${inviteId}/onboarding/completed`)
+}