Feat: Add team e-mail changeablility

src/features/dashboard/team/change-email-dialog.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import * as React from 'react'
+import { useHookFormAction } from '@next-safe-action/adapter-react-hook-form/hooks'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/ui/primitives/dialog'
+import { Button } from '@/ui/primitives/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/ui/primitives/form'
+import { Input } from '@/ui/primitives/input'
+import { updateTeamEmailAction } from '@/server/team/team-actions'
+import {
+  toast,
+  defaultSuccessToast,
+  defaultErrorToast,
+} from '@/lib/hooks/use-toast'
+import { UpdateTeamEmailSchema } from '@/server/team/types'
+
+interface ChangeEmailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  teamId: string
+  currentEmail: string
+}
+
+export function ChangeEmailDialog({
+  open,
+  onOpenChange,
+  teamId,
+  currentEmail,
+}: ChangeEmailDialogProps) {
+  'use no memo'
+
+  const {
+    form,
+    resetFormAndAction,
+    handleSubmitWithAction,
+    action: { isExecuting },
+  } = useHookFormAction(
+    updateTeamEmailAction,
+    zodResolver(UpdateTeamEmailSchema),
+    {
+      formProps: {
+        defaultValues: {
+          teamId,
+          email: currentEmail,
+        },
+      },
+      actionProps: {
+        onSuccess: () => {
+          toast(defaultSuccessToast('Team email was updated.'))
+          handleDialogChange(false)
+        },
+        onError: () => {
+          toast(defaultErrorToast('Failed to update team email.'))
+        },
+      },
+    }
+  )
+
+  const handleDialogChange = (value: boolean) => {
+    onOpenChange(value)
+
+    if (value) return
+
+    resetFormAndAction()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogChange}>
+      <DialogContent className="max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Change Team E-Mail</DialogTitle>
+          <DialogDescription>
+            Update the e-mail address associated with this team.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={handleSubmitWithAction}>
+            <div className="flex flex-col gap-3 px-2 py-6">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Team E-Mail</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="email"
+                        placeholder="Enter team email"
+                        disabled={isExecuting}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleDialogChange(false)}
+                disabled={isExecuting}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isExecuting}
+                loading={isExecuting}
+              >
+                Update E-Mail
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/features/dashboard/team/info-card.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Input } from '@/ui/primitives/input'
 import { Skeleton } from '@/ui/primitives/skeleton'
 import { useSelectedTeam } from '@/lib/hooks/use-teams'
 import {
@@ -12,48 +11,69 @@ import {
 } from '@/ui/primitives/card'
 import { Badge } from '@/ui/primitives/badge'
 import CopyButton from '@/ui/copy-button'
+import { useState } from 'react'
+import { ChangeEmailDialog } from './change-email-dialog'
+import { Button } from '@/ui/primitives/button'
+import { Pencil } from 'lucide-react'
 
 interface InfoCardProps {
   className?: string
 }
 
 export function InfoCard({ className }: InfoCardProps) {
   const team = useSelectedTeam()
+  const [isEmailChangeDialogOpen, setIsEmailChangeDialogOpen] = useState(false)
 
   return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle>Information</CardTitle>
-        <CardDescription>
-          Additional information about this team.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        {team ? (
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Badge variant="accent">E-Mail</Badge>
-              <span>{team.email}</span>
-              <CopyButton
-                value={team.email}
-                variant="ghost"
-                className="size-5"
-              />
+    <>
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle>Information</CardTitle>
+          <CardDescription>
+            Additional information about this team.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {team ? (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <Badge variant="accent">E-Mail</Badge>
+                <span>{team.email}</span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-5"
+                  onClick={() => setIsEmailChangeDialogOpen(true)}
+                >
+                  <Pencil className="size-4" />
+                </Button>
+                <CopyButton
+                  value={team.email}
+                  variant="ghost"
+                  className="size-5"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="muted">Team ID</Badge>
+                <span className="text-fg-500">{team.id}</span>
+                <CopyButton
+                  value={team.id}
+                  variant="ghost"
+                  className="text-fg-500 size-5"
+                />
+              </div>
             </div>
-            <div className="flex items-center gap-2">
-              <Badge variant="muted">Team ID</Badge>
-              <span className="text-fg-500">{team.id}</span>
-              <CopyButton
-                value={team.id}
-                variant="ghost"
-                className="text-fg-500 size-5"
-              />
-            </div>
-          </div>
-        ) : (
-          <Skeleton className="h-10 w-[17rem]" />
-        )}
-      </CardContent>
-    </Card>
+          ) : (
+            <Skeleton className="h-10 w-[17rem]" />
+          )}
+        </CardContent>
+      </Card>
+      <ChangeEmailDialog
+        open={isEmailChangeDialogOpen}
+        onOpenChange={setIsEmailChangeDialogOpen}
+        teamId={team?.id ?? ''}
+        currentEmail={team?.email ?? ''}
+      />
+    </>
   )
 }

src/server/team/team-actions.ts

@@ -15,7 +15,11 @@ import { logWarning } from '@/lib/clients/logger'
 import { returnValidationErrors } from 'next-safe-action'
 import { getTeam } from './get-team'
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
-import { CreateTeamSchema, UpdateTeamNameSchema } from '@/server/team/types'
+import {
+  CreateTeamSchema,
+  UpdateTeamNameSchema,
+  UpdateTeamEmailSchema,
+} from '@/server/team/types'
 import { CreateTeamsResponse } from '@/types/billing'
 
 export const updateTeamNameAction = authActionClient
@@ -311,3 +315,30 @@ export const uploadTeamProfilePictureAction = authActionClient
 
     return data
   })
+
+export const updateTeamEmailAction = authActionClient
+  .schema(UpdateTeamEmailSchema)
+  .metadata({ actionName: 'updateTeamEmail' })
+  .action(async ({ parsedInput, ctx }) => {
+    const { teamId, email } = parsedInput
+    const { user } = ctx
+
+    const isAuthorized = await checkUserTeamAuthorization(user.id, teamId)
+
+    if (!isAuthorized) {
+      return returnServerError('User is not authorized to update this team')
+    }
+
+    const { data, error } = await supabaseAdmin
+      .from('teams')
+      .update({ email })
+      .eq('id', teamId)
+
+    if (error) {
+      throw error
+    }
+
+    revalidatePath('/dashboard', 'layout')
+
+    return data
+  })

src/server/team/types.ts

@@ -38,4 +38,9 @@ const CreateTeamSchema = z.object({
   name: TeamNameSchema,
 })
 
-export { UpdateTeamNameSchema, CreateTeamSchema }
+const UpdateTeamEmailSchema = z.object({
+  teamId: z.string().uuid(),
+  email: z.string().email({ message: 'Invalid email address' }),
+})
+
+export { UpdateTeamNameSchema, CreateTeamSchema, UpdateTeamEmailSchema }