B2B-88: add starter kit structure and elements

packages/features/team-accounts/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/team-accounts/node_modules/.bin/nanoid

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/nanoid@5.1.5/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../nanoid/bin/nanoid.js" "$@"
+else
+  exec node  "$basedir/../nanoid/bin/nanoid.js" "$@"
+fi

packages/features/team-accounts/node_modules/.bin/next

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/dist/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/dist/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/dist/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/dist/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../next/dist/bin/next" "$@"
+else
+  exec node  "$basedir/../next/dist/bin/next" "$@"
+fi

packages/features/team-accounts/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/tsc" "$@"
+fi

packages/features/team-accounts/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/typescript@5.8.3/node_modules:/Users/devmcee/dev/mountbirch/MRB2B/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/tsserver" "$@"
+fi

packages/features/team-accounts/node_modules/@hookform/resolvers

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@hookform+resolvers@5.0.1_react-hook-form@7.57.0_react@19.1.0_/node_modules/@hookform/resolvers

packages/features/team-accounts/node_modules/@kit/accounts

@@ -0,0 +1 @@
+../../../accounts

packages/features/team-accounts/node_modules/@kit/billing-gateway

@@ -0,0 +1 @@
+../../../../billing/gateway

packages/features/team-accounts/node_modules/@kit/email-templates

@@ -0,0 +1 @@
+../../../../email-templates

packages/features/team-accounts/node_modules/@kit/eslint-config

@@ -0,0 +1 @@
+../../../../../tooling/eslint

packages/features/team-accounts/node_modules/@kit/mailers

@@ -0,0 +1 @@
+../../../../mailers/core

packages/features/team-accounts/node_modules/@kit/monitoring

@@ -0,0 +1 @@
+../../../../monitoring/api

packages/features/team-accounts/node_modules/@kit/next

@@ -0,0 +1 @@
+../../../../next

packages/features/team-accounts/node_modules/@kit/otp

@@ -0,0 +1 @@
+../../../../otp

packages/features/team-accounts/node_modules/@kit/prettier-config

@@ -0,0 +1 @@
+../../../../../tooling/prettier

packages/features/team-accounts/node_modules/@kit/shared

@@ -0,0 +1 @@
+../../../../shared

packages/features/team-accounts/node_modules/@kit/supabase

@@ -0,0 +1 @@
+../../../../supabase

packages/features/team-accounts/node_modules/@kit/tsconfig

@@ -0,0 +1 @@
+../../../../../tooling/typescript

packages/features/team-accounts/node_modules/@kit/ui

@@ -0,0 +1 @@
+../../../../ui

packages/features/team-accounts/node_modules/@supabase/supabase-js

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@supabase+supabase-js@2.49.4/node_modules/@supabase/supabase-js

packages/features/team-accounts/node_modules/@tanstack/react-query

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@tanstack+react-query@5.76.1_react@19.1.0/node_modules/@tanstack/react-query

packages/features/team-accounts/node_modules/@tanstack/react-table

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@tanstack+react-table@8.21.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@tanstack/react-table

packages/features/team-accounts/node_modules/@types/react

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@types+react@19.1.4/node_modules/@types/react

packages/features/team-accounts/node_modules/@types/react-dom

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@types+react-dom@19.1.5_@types+react@19.1.4/node_modules/@types/react-dom

packages/features/team-accounts/node_modules/class-variance-authority

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority

packages/features/team-accounts/node_modules/date-fns

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns

packages/features/team-accounts/node_modules/lucide-react

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/lucide-react@0.510.0_react@19.1.0/node_modules/lucide-react

packages/features/team-accounts/node_modules/nanoid

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid

packages/features/team-accounts/node_modules/next

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/next@15.3.2_@babel+core@7.27.4_@opentelemetry+api@1.9.0_babel-plugin-react-compiler@19.1.0-rc_krzs4il3c2axvegn27goximifi/node_modules/next

packages/features/team-accounts/node_modules/react

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/react@19.1.0/node_modules/react

packages/features/team-accounts/node_modules/react-dom

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/react-dom@19.1.0_react@19.1.0/node_modules/react-dom

packages/features/team-accounts/node_modules/react-hook-form

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/react-hook-form@7.57.0_react@19.1.0/node_modules/react-hook-form

packages/features/team-accounts/node_modules/react-i18next

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/react-i18next@15.5.2_i18next@25.1.3_typescript@5.8.3__react-dom@19.1.0_react@19.1.0__react@19.1.0_typescript@5.8.3/node_modules/react-i18next

packages/features/team-accounts/node_modules/sonner

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/sonner@2.0.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/sonner

packages/features/team-accounts/node_modules/zod

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/zod@3.25.56/node_modules/zod

packages/features/team-accounts/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@kit/team-accounts",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "format": "prettier --check \"**/*.{ts,tsx}\"",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  },
+  "exports": {
+    "./api": "./src/server/api.ts",
+    "./components": "./src/components/index.ts",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./webhooks": "./src/server/services/webhooks/index.ts"
+  },
+  "dependencies": {
+    "nanoid": "^5.1.5"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@kit/accounts": "workspace:*",
+    "@kit/billing-gateway": "workspace:*",
+    "@kit/email-templates": "workspace:*",
+    "@kit/eslint-config": "workspace:*",
+    "@kit/mailers": "workspace:*",
+    "@kit/monitoring": "workspace:*",
+    "@kit/next": "workspace:*",
+    "@kit/otp": "workspace:*",
+    "@kit/prettier-config": "workspace:*",
+    "@kit/shared": "workspace:*",
+    "@kit/supabase": "workspace:*",
+    "@kit/tsconfig": "workspace:*",
+    "@kit/ui": "workspace:*",
+    "@supabase/supabase-js": "2.49.4",
+    "@tanstack/react-query": "5.76.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "19.1.4",
+    "@types/react-dom": "19.1.5",
+    "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.510.0",
+    "next": "15.3.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.56.3",
+    "react-i18next": "^15.5.1",
+    "sonner": "^2.0.3",
+    "zod": "^3.24.4"
+  },
+  "prettier": "@kit/prettier-config",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  }
+}

packages/features/team-accounts/src/components/create-team-account-dialog.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@kit/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import { Trans } from '@kit/ui/trans';
+
+import { CreateTeamSchema } from '../schema/create-team.schema';
+import { createTeamAccountAction } from '../server/actions/create-team-account-server-actions';
+
+export function CreateTeamAccountDialog(
+  props: React.PropsWithChildren<{
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+  }>,
+) {
+  return (
+    <Dialog open={props.isOpen} onOpenChange={props.setIsOpen}>
+      <DialogContent
+        onEscapeKeyDown={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'teams:createTeamModalHeading'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'teams:createTeamModalDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <CreateOrganizationAccountForm onClose={() => props.setIsOpen(false)} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CreateOrganizationAccountForm(props: { onClose: () => void }) {
+  const [error, setError] = useState<boolean>();
+  const [pending, startTransition] = useTransition();
+
+  const form = useForm<z.infer<typeof CreateTeamSchema>>({
+    defaultValues: {
+      name: '',
+    },
+    resolver: zodResolver(CreateTeamSchema),
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        data-test={'create-team-form'}
+        onSubmit={form.handleSubmit((data) => {
+          startTransition(async () => {
+            try {
+              const { error } = await createTeamAccountAction(data);
+
+              if (error) {
+                setError(true);
+              }
+            } catch (error) {
+              if (!isRedirectError(error)) {
+                setError(true);
+              }
+            }
+          });
+        })}
+      >
+        <div className={'flex flex-col space-y-4'}>
+          <If condition={error}>
+            <CreateOrganizationErrorAlert />
+          </If>
+
+          <FormField
+            name={'name'}
+            render={({ field }) => {
+              return (
+                <FormItem>
+                  <FormLabel>
+                    <Trans i18nKey={'teams:teamNameLabel'} />
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      data-test={'create-team-name-input'}
+                      required
+                      minLength={2}
+                      maxLength={50}
+                      placeholder={''}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans i18nKey={'teams:teamNameDescription'} />
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          <div className={'flex justify-end space-x-2'}>
+            <Button
+              variant={'outline'}
+              type={'button'}
+              disabled={pending}
+              onClick={props.onClose}
+            >
+              <Trans i18nKey={'common:cancel'} />
+            </Button>
+
+            <Button data-test={'confirm-create-team-button'} disabled={pending}>
+              {pending ? (
+                <Trans i18nKey={'teams:creatingTeam'} />
+              ) : (
+                <Trans i18nKey={'teams:createTeamSubmitLabel'} />
+              )}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+function CreateOrganizationErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:createTeamErrorHeading'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:createTeamErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './members/account-members-table';
+export * from './members/invite-members-dialog-container';
+export * from './settings/team-account-danger-zone';
+export * from './invitations/account-invitations-table';
+export * from './settings/team-account-settings-container';
+export * from './invitations/accept-invitation-container';
+export * from './create-team-account-dialog';
+export * from './team-account-workspace-context';

packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx

@@ -0,0 +1,93 @@
+import Image from 'next/image';
+
+import { Heading } from '@kit/ui/heading';
+import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
+import { Trans } from '@kit/ui/trans';
+
+import { acceptInvitationAction } from '../../server/actions/team-invitations-server-actions';
+import { InvitationSubmitButton } from './invitation-submit-button';
+import { SignOutInvitationButton } from './sign-out-invitation-button';
+
+export function AcceptInvitationContainer(props: {
+  inviteToken: string;
+  email: string;
+
+  invitation: {
+    id: string;
+
+    account: {
+      name: string;
+      id: string;
+      picture_url: string | null;
+    };
+  };
+
+  paths: {
+    signOutNext: string;
+    accountHome: string;
+  };
+}) {
+  return (
+    <div className={'flex flex-col items-center space-y-4'}>
+      <Heading className={'text-center'} level={4}>
+        <Trans
+          i18nKey={'teams:acceptInvitationHeading'}
+          values={{
+            accountName: props.invitation.account.name,
+          }}
+        />
+      </Heading>
+
+      <If condition={props.invitation.account.picture_url}>
+        {(url) => (
+          <Image
+            alt={`Logo`}
+            src={url}
+            width={64}
+            height={64}
+            className={'object-cover'}
+          />
+        )}
+      </If>
+
+      <div className={'text-muted-foreground text-center text-sm'}>
+        <Trans
+          i18nKey={'teams:acceptInvitationDescription'}
+          values={{
+            accountName: props.invitation.account.name,
+          }}
+        />
+      </div>
+
+      <div className={'flex flex-col space-y-4'}>
+        <form
+          data-test={'join-team-form'}
+          className={'w-full'}
+          action={acceptInvitationAction}
+        >
+          <input type="hidden" name={'inviteToken'} value={props.inviteToken} />
+
+          <input
+            type={'hidden'}
+            name={'nextPath'}
+            value={props.paths.accountHome}
+          />
+
+          <InvitationSubmitButton
+            email={props.email}
+            accountName={props.invitation.account.name}
+          />
+        </form>
+
+        <Separator />
+
+        <SignOutInvitationButton nextPath={props.paths.signOutNext} />
+
+        <span className={'text-muted-foreground text-center text-xs'}>
+          <Trans i18nKey={'teams:signInWithDifferentAccountDescription'} />
+        </span>
+      </div>
+    </div>
+  );
+}

packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Ellipsis } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Database } from '@kit/supabase/database';
+import { Badge } from '@kit/ui/badge';
+import { Button } from '@kit/ui/button';
+import { DataTable } from '@kit/ui/data-table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import { ProfileAvatar } from '@kit/ui/profile-avatar';
+import { Trans } from '@kit/ui/trans';
+
+import { RoleBadge } from '../members/role-badge';
+import { DeleteInvitationDialog } from './delete-invitation-dialog';
+import { RenewInvitationDialog } from './renew-invitation-dialog';
+import { UpdateInvitationDialog } from './update-invitation-dialog';
+
+type Invitations =
+  Database['public']['Functions']['get_account_invitations']['Returns'];
+
+type AccountInvitationsTableProps = {
+  invitations: Invitations;
+
+  permissions: {
+    canUpdateInvitation: boolean;
+    canRemoveInvitation: boolean;
+    currentUserRoleHierarchy: number;
+  };
+};
+
+export function AccountInvitationsTable({
+  invitations,
+  permissions,
+}: AccountInvitationsTableProps) {
+  const { t } = useTranslation('teams');
+  const [search, setSearch] = useState('');
+  const columns = useGetColumns(permissions);
+
+  const filteredInvitations = invitations.filter((member) => {
+    const searchString = search.toLowerCase();
+
+    const email = (
+      member.email.split('@')[0]?.toLowerCase() ?? ''
+    ).toLowerCase();
+
+    return (
+      email.includes(searchString) ||
+      member.role.toLowerCase().includes(searchString)
+    );
+  });
+
+  return (
+    <div className={'flex flex-col space-y-2'}>
+      <Input
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+        placeholder={t(`searchInvitations`)}
+      />
+
+      <DataTable
+        data-cy={'invitations-table'}
+        columns={columns}
+        data={filteredInvitations}
+      />
+    </div>
+  );
+}
+
+function useGetColumns(permissions: {
+  canUpdateInvitation: boolean;
+  canRemoveInvitation: boolean;
+  currentUserRoleHierarchy: number;
+}): ColumnDef<Invitations[0]>[] {
+  const { t } = useTranslation('teams');
+
+  return useMemo(
+    () => [
+      {
+        header: t('emailLabel'),
+        size: 200,
+        cell: ({ row }) => {
+          const member = row.original;
+          const email = member.email;
+
+          return (
+            <span
+              data-test={'invitation-email'}
+              className={'flex items-center space-x-4 text-left'}
+            >
+              <span>
+                <ProfileAvatar text={email} />
+              </span>
+
+              <span>{email}</span>
+            </span>
+          );
+        },
+      },
+      {
+        header: t('roleLabel'),
+        cell: ({ row }) => {
+          const { role } = row.original;
+
+          return <RoleBadge role={role} />;
+        },
+      },
+      {
+        header: t('invitedAtLabel'),
+        cell: ({ row }) => {
+          return new Date(row.original.created_at).toLocaleDateString();
+        },
+      },
+      {
+        header: t('expiresAtLabel'),
+        cell: ({ row }) => {
+          return new Date(row.original.expires_at).toLocaleDateString();
+        },
+      },
+      {
+        header: t('inviteStatus'),
+        cell: ({ row }) => {
+          const isExpired = getIsInviteExpired(row.original.expires_at);
+
+          if (isExpired) {
+            return <Badge variant={'warning'}>{t('expired')}</Badge>;
+          }
+
+          return <Badge variant={'success'}>{t('active')}</Badge>;
+        },
+      },
+      {
+        header: '',
+        id: 'actions',
+        cell: ({ row }) => (
+          <ActionsDropdown
+            permissions={permissions}
+            invitation={row.original}
+          />
+        ),
+      },
+    ],
+    [permissions, t],
+  );
+}
+
+function ActionsDropdown({
+  permissions,
+  invitation,
+}: {
+  permissions: AccountInvitationsTableProps['permissions'];
+  invitation: Invitations[0];
+}) {
+  const [isDeletingInvite, setIsDeletingInvite] = useState(false);
+  const [isUpdatingRole, setIsUpdatingRole] = useState(false);
+  const [isRenewingInvite, setIsRenewingInvite] = useState(false);
+
+  if (!permissions.canUpdateInvitation && !permissions.canRemoveInvitation) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant={'ghost'} size={'icon'}>
+            <Ellipsis className={'h-5 w-5'} />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent>
+          <If condition={permissions.canUpdateInvitation}>
+            <DropdownMenuItem
+              data-test={'update-invitation-trigger'}
+              onClick={() => setIsUpdatingRole(true)}
+            >
+              <Trans i18nKey={'teams:updateInvitation'} />
+            </DropdownMenuItem>
+
+            <If condition={getIsInviteExpired(invitation.expires_at)}>
+              <DropdownMenuItem
+                data-test={'renew-invitation-trigger'}
+                onClick={() => setIsRenewingInvite(true)}
+              >
+                <Trans i18nKey={'teams:renewInvitation'} />
+              </DropdownMenuItem>
+            </If>
+          </If>
+
+          <If condition={permissions.canRemoveInvitation}>
+            <DropdownMenuItem
+              data-test={'remove-invitation-trigger'}
+              onClick={() => setIsDeletingInvite(true)}
+            >
+              <Trans i18nKey={'teams:removeInvitation'} />
+            </DropdownMenuItem>
+          </If>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <If condition={isDeletingInvite}>
+        <DeleteInvitationDialog
+          isOpen
+          setIsOpen={setIsDeletingInvite}
+          invitationId={invitation.id}
+        />
+      </If>
+
+      <If condition={isUpdatingRole}>
+        <UpdateInvitationDialog
+          isOpen
+          setIsOpen={setIsUpdatingRole}
+          invitationId={invitation.id}
+          userRole={invitation.role}
+          userRoleHierarchy={permissions.currentUserRoleHierarchy}
+        />
+      </If>
+
+      <If condition={isRenewingInvite}>
+        <RenewInvitationDialog
+          isOpen
+          setIsOpen={setIsRenewingInvite}
+          invitationId={invitation.id}
+          email={invitation.email}
+        />
+      </If>
+    </>
+  );
+}
+
+function getIsInviteExpired(isoExpiresAt: string) {
+  const currentIsoTime = new Date().toISOString();
+
+  const isoExpiresAtDate = new Date(isoExpiresAt);
+  const currentIsoTimeDate = new Date(currentIsoTime);
+
+  return isoExpiresAtDate < currentIsoTimeDate;
+}

packages/features/team-accounts/src/components/invitations/delete-invitation-dialog.tsx

@@ -0,0 +1,113 @@
+import { useState, useTransition } from 'react';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { deleteInvitationAction } from '../../server/actions/team-invitations-server-actions';
+
+export function DeleteInvitationDialog({
+  isOpen,
+  setIsOpen,
+  invitationId,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  invitationId: number;
+}) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="team:deleteInvitation" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            <Trans i18nKey="team:deleteInvitationDialogDescription" />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <DeleteInvitationForm
+          setIsOpen={setIsOpen}
+          invitationId={invitationId}
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function DeleteInvitationForm({
+  invitationId,
+  setIsOpen,
+}: {
+  invitationId: number;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const onInvitationRemoved = () => {
+    startTransition(async () => {
+      try {
+        await deleteInvitationAction({ invitationId });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <form data-test={'delete-invitation-form'} action={onInvitationRemoved}>
+      <div className={'flex flex-col space-y-6'}>
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'common:modalConfirmationQuestion'} />
+        </p>
+
+        <If condition={error}>
+          <RemoveInvitationErrorAlert />
+        </If>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            type={'submit'}
+            variant={'destructive'}
+            disabled={isSubmitting}
+          >
+            <Trans i18nKey={'teams:deleteInvitation'} />
+          </Button>
+        </AlertDialogFooter>
+      </div>
+    </form>
+  );
+}
+
+function RemoveInvitationErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:deleteInvitationErrorTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:deleteInvitationErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useFormStatus } from 'react-dom';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function InvitationSubmitButton(props: {
+  accountName: string;
+  email: string;
+}) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type={'submit'} className={'w-full'} disabled={pending}>
+      <Trans
+        i18nKey={pending ? 'teams:joiningTeam' : 'teams:continueAs'}
+        values={{
+          accountName: props.accountName,
+          email: props.email,
+        }}
+      />
+    </Button>
+  );
+}

packages/features/team-accounts/src/components/invitations/renew-invitation-dialog.tsx

@@ -0,0 +1,117 @@
+import { useState, useTransition } from 'react';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { renewInvitationAction } from '../../server/actions/team-invitations-server-actions';
+
+export function RenewInvitationDialog({
+  isOpen,
+  setIsOpen,
+  invitationId,
+  email,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  invitationId: number;
+  email: string;
+}) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="team:renewInvitation" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            <Trans
+              i18nKey="team:renewInvitationDialogDescription"
+              values={{ email }}
+            />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <RenewInvitationForm
+          setIsOpen={setIsOpen}
+          invitationId={invitationId}
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function RenewInvitationForm({
+  invitationId,
+  setIsOpen,
+}: {
+  invitationId: number;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const inInvitationRenewed = () => {
+    startTransition(async () => {
+      try {
+        await renewInvitationAction({ invitationId });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <form action={inInvitationRenewed}>
+      <div className={'flex flex-col space-y-6'}>
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'common:modalConfirmationQuestion'} />
+        </p>
+
+        <If condition={error}>
+          <RenewInvitationErrorAlert />
+        </If>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            data-test={'confirm-renew-invitation'}
+            disabled={isSubmitting}
+          >
+            <Trans i18nKey={'teams:renewInvitation'} />
+          </Button>
+        </AlertDialogFooter>
+      </div>
+    </form>
+  );
+}
+
+function RenewInvitationErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:renewInvitationErrorTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:renewInvitationErrorDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/invitations/sign-out-invitation-button.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function SignOutInvitationButton(
+  props: React.PropsWithChildren<{
+    nextPath: string;
+  }>,
+) {
+  const signOut = useSignOut();
+
+  return (
+    <Button
+      variant={'ghost'}
+      onClick={async () => {
+        await signOut.mutateAsync();
+        window.location.assign(props.nextPath);
+      }}
+    >
+      <Trans i18nKey={'teams:signInWithDifferentAccount'} />
+    </Button>
+  );
+}

packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx

@@ -0,0 +1,186 @@
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@kit/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { RoleSchema } from '../../schema/update-member-role.schema';
+import { updateInvitationAction } from '../../server/actions/team-invitations-server-actions';
+import { MembershipRoleSelector } from '../members/membership-role-selector';
+import { RolesDataProvider } from '../members/roles-data-provider';
+
+type Role = string;
+
+export function UpdateInvitationDialog({
+  isOpen,
+  setIsOpen,
+  invitationId,
+  userRole,
+  userRoleHierarchy,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  invitationId: number;
+  userRole: Role;
+  userRoleHierarchy: number;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'teams:updateMemberRoleModalHeading'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'teams:updateMemberRoleModalDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <UpdateInvitationForm
+          invitationId={invitationId}
+          userRole={userRole}
+          userRoleHierarchy={userRoleHierarchy}
+          setIsOpen={setIsOpen}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function UpdateInvitationForm({
+  invitationId,
+  userRole,
+  userRoleHierarchy,
+  setIsOpen,
+}: React.PropsWithChildren<{
+  invitationId: number;
+  userRole: Role;
+  userRoleHierarchy: number;
+  setIsOpen: (isOpen: boolean) => void;
+}>) {
+  const { t } = useTranslation('teams');
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const onSubmit = ({ role }: { role: Role }) => {
+    startTransition(async () => {
+      try {
+        await updateInvitationAction({
+          invitationId,
+          role,
+        });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  const form = useForm({
+    resolver: zodResolver(
+      RoleSchema.refine(
+        (data) => {
+          return data.role !== userRole;
+        },
+        {
+          message: t('roleMustBeDifferent'),
+          path: ['role'],
+        },
+      ),
+    ),
+    reValidateMode: 'onChange',
+    mode: 'onChange',
+    defaultValues: {
+      role: userRole,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        data-test={'update-invitation-form'}
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={'flex flex-col space-y-6'}
+      >
+        <If condition={error}>
+          <UpdateRoleErrorAlert />
+        </If>
+
+        <FormField
+          name={'role'}
+          render={({ field }) => {
+            return (
+              <FormItem>
+                <FormLabel>
+                  <Trans i18nKey={'teams:roleLabel'} />
+                </FormLabel>
+
+                <FormControl>
+                  <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
+                    {(roles) => (
+                      <MembershipRoleSelector
+                        roles={roles}
+                        currentUserRole={userRole}
+                        value={field.value}
+                        onChange={(newRole) =>
+                          form.setValue(field.name, newRole)
+                        }
+                      />
+                    )}
+                  </RolesDataProvider>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans i18nKey={'teams:updateRoleDescription'} />
+                </FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+
+        <Button type={'submit'} disabled={pending}>
+          <Trans i18nKey={'teams:updateRoleSubmitLabel'} />
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+function UpdateRoleErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:updateRoleErrorHeading'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:updateRoleErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Ellipsis } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Database } from '@kit/supabase/database';
+import { Badge } from '@kit/ui/badge';
+import { Button } from '@kit/ui/button';
+import { DataTable } from '@kit/ui/data-table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import { ProfileAvatar } from '@kit/ui/profile-avatar';
+import { Trans } from '@kit/ui/trans';
+
+import { RemoveMemberDialog } from './remove-member-dialog';
+import { RoleBadge } from './role-badge';
+import { TransferOwnershipDialog } from './transfer-ownership-dialog';
+import { UpdateMemberRoleDialog } from './update-member-role-dialog';
+
+type Members =
+  Database['public']['Functions']['get_account_members']['Returns'];
+
+interface Permissions {
+  canUpdateRole: (roleHierarchy: number) => boolean;
+  canRemoveFromAccount: (roleHierarchy: number) => boolean;
+  canTransferOwnership: boolean;
+}
+
+type AccountMembersTableProps = {
+  members: Members;
+  currentUserId: string;
+  currentAccountId: string;
+  userRoleHierarchy: number;
+  isPrimaryOwner: boolean;
+  canManageRoles: boolean;
+};
+
+export function AccountMembersTable({
+  members,
+  currentUserId,
+  currentAccountId,
+  isPrimaryOwner,
+  userRoleHierarchy,
+  canManageRoles,
+}: AccountMembersTableProps) {
+  const [search, setSearch] = useState('');
+  const { t } = useTranslation('teams');
+
+  const permissions = {
+    canUpdateRole: (targetRole: number) => {
+      return (
+        isPrimaryOwner || (canManageRoles && userRoleHierarchy < targetRole)
+      );
+    },
+    canRemoveFromAccount: (targetRole: number) => {
+      return (
+        isPrimaryOwner || (canManageRoles && userRoleHierarchy < targetRole)
+      );
+    },
+    canTransferOwnership: isPrimaryOwner,
+  };
+
+  const columns = useGetColumns(permissions, {
+    currentUserId,
+    currentAccountId,
+    currentRoleHierarchy: userRoleHierarchy,
+  });
+
+  const filteredMembers = members
+    .filter((member) => {
+      const searchString = search.toLowerCase();
+
+      const displayName = (
+        member.name ??
+        member.email.split('@')[0] ??
+        ''
+      ).toLowerCase();
+
+      return (
+        displayName.includes(searchString) ||
+        member.role.toLowerCase().includes(searchString)
+      );
+    })
+    .sort((prev, next) => {
+      if (prev.primary_owner_user_id === prev.user_id) {
+        return -1;
+      }
+
+      if (prev.role_hierarchy_level < next.role_hierarchy_level) {
+        return -1;
+      }
+
+      return 1;
+    });
+
+  return (
+    <div className={'flex flex-col space-y-2'}>
+      <Input
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+        placeholder={t(`searchMembersPlaceholder`)}
+      />
+
+      <DataTable columns={columns} data={filteredMembers} />
+    </div>
+  );
+}
+
+function useGetColumns(
+  permissions: Permissions,
+  params: {
+    currentUserId: string;
+    currentAccountId: string;
+    currentRoleHierarchy: number;
+  },
+): ColumnDef<Members[0]>[] {
+  const { t } = useTranslation('teams');
+
+  return useMemo(
+    () => [
+      {
+        header: t('memberName'),
+        size: 200,
+        cell: ({ row }) => {
+          const member = row.original;
+          const displayName = member.name ?? member.email.split('@')[0];
+          const isSelf = member.user_id === params.currentUserId;
+
+          return (
+            <span className={'flex items-center space-x-4 text-left'}>
+              <span>
+                <ProfileAvatar
+                  displayName={displayName}
+                  pictureUrl={member.picture_url}
+                />
+              </span>
+
+              <span>{displayName}</span>
+
+              <If condition={isSelf}>
+                <Badge variant={'outline'}>{t('youLabel')}</Badge>
+              </If>
+            </span>
+          );
+        },
+      },
+      {
+        header: t('emailLabel'),
+        accessorKey: 'email',
+        cell: ({ row }) => {
+          return row.original.email ?? '-';
+        },
+      },
+      {
+        header: t('roleLabel'),
+        cell: ({ row }) => {
+          const { role, primary_owner_user_id, user_id } = row.original;
+          const isPrimaryOwner = primary_owner_user_id === user_id;
+
+          return (
+            <span className={'flex items-center space-x-1'}>
+              <RoleBadge role={role} />
+
+              <If condition={isPrimaryOwner}>
+                <span
+                  className={
+                    'rounded-md bg-yellow-400 px-2.5 py-1 text-xs font-medium dark:text-black'
+                  }
+                >
+                  {t('primaryOwnerLabel')}
+                </span>
+              </If>
+            </span>
+          );
+        },
+      },
+      {
+        header: t('joinedAtLabel'),
+        cell: ({ row }) => {
+          return new Date(row.original.created_at).toLocaleDateString();
+        },
+      },
+      {
+        header: '',
+        id: 'actions',
+        cell: ({ row }) => (
+          <ActionsDropdown
+            permissions={permissions}
+            member={row.original}
+            currentUserId={params.currentUserId}
+            currentTeamAccountId={params.currentAccountId}
+            currentRoleHierarchy={params.currentRoleHierarchy}
+          />
+        ),
+      },
+    ],
+    [t, params, permissions],
+  );
+}
+
+function ActionsDropdown({
+  permissions,
+  member,
+  currentUserId,
+  currentTeamAccountId,
+  currentRoleHierarchy,
+}: {
+  permissions: Permissions;
+  member: Members[0];
+  currentUserId: string;
+  currentTeamAccountId: string;
+  currentRoleHierarchy: number;
+}) {
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isTransferring, setIsTransferring] = useState(false);
+  const [isUpdatingRole, setIsUpdatingRole] = useState(false);
+
+  const isCurrentUser = member.user_id === currentUserId;
+  const isPrimaryOwner = member.primary_owner_user_id === member.user_id;
+
+  if (isCurrentUser || isPrimaryOwner) {
+    return null;
+  }
+
+  const memberRoleHierarchy = member.role_hierarchy_level;
+  const canUpdateRole = permissions.canUpdateRole(memberRoleHierarchy);
+
+  const canRemoveFromAccount =
+    permissions.canRemoveFromAccount(memberRoleHierarchy);
+
+  // if has no permission to update role, transfer ownership or remove from account
+  // do not render the dropdown menu
+  if (
+    !canUpdateRole &&
+    !permissions.canTransferOwnership &&
+    !canRemoveFromAccount
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant={'ghost'} size={'icon'}>
+            <Ellipsis className={'h-5 w-5'} />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent>
+          <If condition={canUpdateRole}>
+            <DropdownMenuItem onClick={() => setIsUpdatingRole(true)}>
+              <Trans i18nKey={'teams:updateRole'} />
+            </DropdownMenuItem>
+          </If>
+
+          <If condition={permissions.canTransferOwnership}>
+            <DropdownMenuItem onClick={() => setIsTransferring(true)}>
+              <Trans i18nKey={'teams:transferOwnership'} />
+            </DropdownMenuItem>
+          </If>
+
+          <If condition={canRemoveFromAccount}>
+            <DropdownMenuItem onClick={() => setIsRemoving(true)}>
+              <Trans i18nKey={'teams:removeMember'} />
+            </DropdownMenuItem>
+          </If>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <If condition={isRemoving}>
+        <RemoveMemberDialog
+          isOpen
+          setIsOpen={setIsRemoving}
+          teamAccountId={currentTeamAccountId}
+          userId={member.user_id}
+        />
+      </If>
+
+      <If condition={isUpdatingRole}>
+        <UpdateMemberRoleDialog
+          isOpen
+          setIsOpen={setIsUpdatingRole}
+          userId={member.user_id}
+          userRole={member.role}
+          teamAccountId={currentTeamAccountId}
+          userRoleHierarchy={currentRoleHierarchy}
+        />
+      </If>
+
+      <If condition={isTransferring}>
+        <TransferOwnershipDialog
+          isOpen
+          setIsOpen={setIsTransferring}
+          targetDisplayName={member.name ?? member.email}
+          accountId={member.account_id}
+          userId={member.user_id}
+        />
+      </If>
+    </>
+  );
+}

packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plus, X } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
+import { Trans } from '@kit/ui/trans';
+
+import { InviteMembersSchema } from '../../schema/invite-members.schema';
+import { createInvitationsAction } from '../../server/actions/team-invitations-server-actions';
+import { MembershipRoleSelector } from './membership-role-selector';
+import { RolesDataProvider } from './roles-data-provider';
+
+type InviteModel = ReturnType<typeof createEmptyInviteModel>;
+
+type Role = string;
+
+/**
+ * The maximum number of invites that can be sent at once.
+ * Useful to avoid spamming the server with too large payloads
+ */
+const MAX_INVITES = 5;
+
+export function InviteMembersDialogContainer({
+  accountSlug,
+  userRoleHierarchy,
+  children,
+}: React.PropsWithChildren<{
+  accountSlug: string;
+  userRoleHierarchy: number;
+}>) {
+  const [pending, startTransition] = useTransition();
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation('teams');
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen} modal>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'teams:inviteMembersHeading'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'teams:inviteMembersDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
+          {(roles) => (
+            <InviteMembersForm
+              pending={pending}
+              roles={roles}
+              onSubmit={(data) => {
+                startTransition(() => {
+                  const promise = createInvitationsAction({
+                    accountSlug,
+                    invitations: data.invitations,
+                  });
+
+                  toast.promise(() => promise, {
+                    loading: t('invitingMembers'),
+                    success: t('inviteMembersSuccessMessage'),
+                    error: t('inviteMembersErrorMessage'),
+                  });
+
+                  setIsOpen(false);
+                });
+              }}
+            />
+          )}
+        </RolesDataProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function InviteMembersForm({
+  onSubmit,
+  roles,
+  pending,
+}: {
+  onSubmit: (data: { invitations: InviteModel[] }) => void;
+  pending: boolean;
+  roles: string[];
+}) {
+  const { t } = useTranslation('teams');
+
+  const form = useForm({
+    resolver: zodResolver(InviteMembersSchema),
+    shouldUseNativeValidation: true,
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      invitations: [createEmptyInviteModel()],
+    },
+  });
+
+  const fieldArray = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        className={'flex flex-col space-y-8'}
+        data-test={'invite-members-form'}
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <div className="flex flex-col gap-y-4">
+          {fieldArray.fields.map((field, index) => {
+            const isFirst = index === 0;
+
+            const emailInputName = `invitations.${index}.email` as const;
+            const roleInputName = `invitations.${index}.role` as const;
+
+            return (
+              <div data-test={'invite-member-form-item'} key={field.id}>
+                <div className={'flex items-end gap-x-1 md:space-x-2'}>
+                  <div className={'w-7/12'}>
+                    <FormField
+                      name={emailInputName}
+                      render={({ field }) => {
+                        return (
+                          <FormItem>
+                            <If condition={isFirst}>
+                              <FormLabel>{t('emailLabel')}</FormLabel>
+                            </If>
+
+                            <FormControl>
+                              <Input
+                                data-test={'invite-email-input'}
+                                placeholder={t('emailPlaceholder')}
+                                type="email"
+                                required
+                                {...field}
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        );
+                      }}
+                    />
+                  </div>
+
+                  <div className={'w-4/12'}>
+                    <FormField
+                      name={roleInputName}
+                      render={({ field }) => {
+                        return (
+                          <FormItem>
+                            <If condition={isFirst}>
+                              <FormLabel>
+                                <Trans i18nKey={'teams:roleLabel'} />
+                              </FormLabel>
+                            </If>
+
+                            <FormControl>
+                              <MembershipRoleSelector
+                                triggerClassName={'m-0'}
+                                roles={roles}
+                                value={field.value}
+                                onChange={(role) => {
+                                  form.setValue(field.name, role);
+                                }}
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        );
+                      }}
+                    />
+                  </div>
+
+                  <div className={'flex w-[40px] items-end justify-end'}>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant={'ghost'}
+                            size={'icon'}
+                            type={'button'}
+                            disabled={fieldArray.fields.length <= 1}
+                            data-test={'remove-invite-button'}
+                            aria-label={t('removeInviteButtonLabel')}
+                            onClick={() => {
+                              fieldArray.remove(index);
+                              form.clearErrors(emailInputName);
+                            }}
+                          >
+                            <X className={'h-4 lg:h-5'} />
+                          </Button>
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                          {t('removeInviteButtonLabel')}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          <If condition={fieldArray.fields.length < MAX_INVITES}>
+            <div>
+              <Button
+                data-test={'add-new-invite-button'}
+                type={'button'}
+                variant={'link'}
+                size={'sm'}
+                disabled={pending}
+                onClick={() => {
+                  fieldArray.append(createEmptyInviteModel());
+                }}
+              >
+                <Plus className={'mr-1 h-3'} />
+
+                <span>
+                  <Trans i18nKey={'teams:addAnotherMemberButtonLabel'} />
+                </span>
+              </Button>
+            </div>
+          </If>
+        </div>
+
+        <Button type={'submit'} disabled={pending}>
+          <Trans
+            i18nKey={
+              pending
+                ? 'teams:invitingMembers'
+                : 'teams:inviteMembersButtonLabel'
+            }
+          />
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+function createEmptyInviteModel() {
+  return { email: '', role: 'member' as Role };
+}

packages/features/team-accounts/src/components/members/membership-role-selector.tsx

@@ -0,0 +1,52 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@kit/ui/select';
+import { Trans } from '@kit/ui/trans';
+
+type Role = string;
+
+export function MembershipRoleSelector({
+  roles,
+  value,
+  currentUserRole,
+  onChange,
+  triggerClassName,
+}: {
+  roles: Role[];
+  value: Role;
+  currentUserRole?: Role;
+  onChange: (role: Role) => unknown;
+  triggerClassName?: string;
+}) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger
+        className={triggerClassName}
+        data-test={'role-selector-trigger'}
+      >
+        <SelectValue />
+      </SelectTrigger>
+
+      <SelectContent>
+        {roles.map((role) => {
+          return (
+            <SelectItem
+              key={role}
+              data-test={`role-option-${role}`}
+              disabled={currentUserRole === role}
+              value={role}
+            >
+              <span className={'text-sm capitalize'}>
+                <Trans i18nKey={`common:roles.${role}.label`} defaults={role} />
+              </span>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

packages/features/team-accounts/src/components/members/remove-member-dialog.tsx

@@ -0,0 +1,118 @@
+import { useState, useTransition } from 'react';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { removeMemberFromAccountAction } from '../../server/actions/team-members-server-actions';
+
+export function RemoveMemberDialog({
+  isOpen,
+  setIsOpen,
+  teamAccountId,
+  userId,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  teamAccountId: string;
+  userId: string;
+}) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="teamS:removeMemberModalHeading" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            <Trans i18nKey={'teams:removeMemberModalDescription'} />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <RemoveMemberForm
+          setIsOpen={setIsOpen}
+          accountId={teamAccountId}
+          userId={userId}
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function RemoveMemberForm({
+  accountId,
+  userId,
+  setIsOpen,
+}: {
+  accountId: string;
+  userId: string;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const onMemberRemoved = () => {
+    startTransition(async () => {
+      try {
+        await removeMemberFromAccountAction({ accountId, userId });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <form action={onMemberRemoved}>
+      <div className={'flex flex-col space-y-6'}>
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'common:modalConfirmationQuestion'} />
+        </p>
+
+        <If condition={error}>
+          <RemoveMemberErrorAlert />
+        </If>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            data-test={'confirm-remove-member'}
+            variant={'destructive'}
+            disabled={isSubmitting}
+          >
+            <Trans i18nKey={'teams:removeMemberSubmitLabel'} />
+          </Button>
+        </AlertDialogFooter>
+      </div>
+    </form>
+  );
+}
+
+function RemoveMemberErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:removeMemberErrorHeading'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:removeMemberErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/members/role-badge.tsx

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority';
+
+import { Badge } from '@kit/ui/badge';
+import { Trans } from '@kit/ui/trans';
+
+type Role = string;
+
+const roles = {
+  owner: '',
+  member:
+    'bg-blue-50 hover:bg-blue-50 text-blue-500 dark:bg-blue-500/10 dark:hover:bg-blue-500/10',
+};
+
+const roleClassNameBuilder = cva('font-medium capitalize shadow-none', {
+  variants: {
+    role: roles,
+  },
+});
+
+export function RoleBadge({ role }: { role: Role }) {
+  // @ts-expect-error: hard to type this since users can add custom roles
+  const className = roleClassNameBuilder({ role });
+  const isCustom = !(role in roles);
+
+  return (
+    <Badge className={className} variant={isCustom ? 'outline' : 'default'}>
+      <span data-test={'member-role-badge'}>
+        <Trans i18nKey={`common:roles.${role}.label`} defaults={role} />
+      </span>
+    </Badge>
+  );
+}

packages/features/team-accounts/src/components/members/roles-data-provider.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+
+export function RolesDataProvider(props: {
+  maxRoleHierarchy: number;
+  children: (roles: string[]) => React.ReactNode;
+}) {
+  const rolesQuery = useFetchRoles(props);
+
+  if (rolesQuery.isLoading) {
+    return <LoadingOverlay fullPage={false} />;
+  }
+
+  if (rolesQuery.isError) {
+    return null;
+  }
+
+  return <>{props.children(rolesQuery.data ?? [])}</>;
+}
+
+function useFetchRoles(props: { maxRoleHierarchy: number }) {
+  const supabase = useSupabase();
+
+  return useQuery({
+    queryKey: ['roles', props.maxRoleHierarchy],
+    queryFn: async () => {
+      const { error, data } = await supabase
+        .from('roles')
+        .select('name')
+        .gte('hierarchy_level', props.maxRoleHierarchy)
+        .order('hierarchy_level', { ascending: true });
+
+      if (error) {
+        throw error;
+      }
+
+      return data.map((item) => item.name);
+    },
+  });
+}

packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+
+import { VerifyOtpForm } from '@kit/otp/components';
+import { useUser } from '@kit/supabase/hooks/use-user';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { Form } from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { TransferOwnershipConfirmationSchema } from '../../schema/transfer-ownership-confirmation.schema';
+import { transferOwnershipAction } from '../../server/actions/team-members-server-actions';
+
+export function TransferOwnershipDialog({
+  isOpen,
+  setIsOpen,
+  targetDisplayName,
+  accountId,
+  userId,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  accountId: string;
+  userId: string;
+  targetDisplayName: string;
+}) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="team:transferOwnership" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            <Trans i18nKey="team:transferOwnershipDescription" />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <TransferOrganizationOwnershipForm
+          accountId={accountId}
+          userId={userId}
+          targetDisplayName={targetDisplayName}
+          setIsOpen={setIsOpen}
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function TransferOrganizationOwnershipForm({
+  accountId,
+  userId,
+  targetDisplayName,
+  setIsOpen,
+}: {
+  userId: string;
+  accountId: string;
+  targetDisplayName: string;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+  const { data: user } = useUser();
+
+  const form = useForm<{
+    accountId: string;
+    userId: string;
+    otp: string;
+  }>({
+    resolver: zodResolver(TransferOwnershipConfirmationSchema),
+    defaultValues: {
+      accountId,
+      userId,
+      otp: '',
+    },
+  });
+
+  const { otp } = useWatch({ control: form.control });
+
+  // If no OTP has been entered yet, show the OTP verification form
+  if (!otp) {
+    return (
+      <div className="flex flex-col space-y-6">
+        <VerifyOtpForm
+          purpose={`transfer-team-ownership-${accountId}`}
+          email={user?.email || ''}
+          onSuccess={(otpValue) => {
+            form.setValue('otp', otpValue, { shouldValidate: true });
+          }}
+          CancelButton={
+            <AlertDialogCancel>
+              <Trans i18nKey={'common:cancel'} />
+            </AlertDialogCancel>
+          }
+          data-test="verify-otp-form"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className={'flex flex-col space-y-4 text-sm'}
+        onSubmit={form.handleSubmit((data) => {
+          startTransition(async () => {
+            try {
+              await transferOwnershipAction(data);
+
+              setIsOpen(false);
+            } catch {
+              setError(true);
+            }
+          });
+        })}
+      >
+        <If condition={error}>
+          <TransferOwnershipErrorAlert />
+        </If>
+
+        <div className="border-destructive rounded-md border p-4">
+          <p className="text-destructive text-sm">
+            <Trans
+              i18nKey={'teams:transferOwnershipDisclaimer'}
+              values={{
+                member: targetDisplayName,
+              }}
+              components={{ b: <b /> }}
+            />
+          </p>
+        </div>
+
+        <input type="hidden" name="otp" value={otp} />
+
+        <div>
+          <p className={'text-muted-foreground'}>
+            <Trans i18nKey={'common:modalConfirmationQuestion'} />
+          </p>
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            type={'submit'}
+            data-test={'confirm-transfer-ownership-button'}
+            variant={'destructive'}
+            disabled={pending}
+          >
+            <If
+              condition={pending}
+              fallback={<Trans i18nKey={'teams:transferOwnership'} />}
+            >
+              <Trans i18nKey={'teams:transferringOwnership'} />
+            </If>
+          </Button>
+        </AlertDialogFooter>
+      </form>
+    </Form>
+  );
+}
+
+function TransferOwnershipErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:transferTeamErrorHeading'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:transferTeamErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx

@@ -0,0 +1,186 @@
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@kit/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { RoleSchema } from '../../schema/update-member-role.schema';
+import { updateMemberRoleAction } from '../../server/actions/team-members-server-actions';
+import { MembershipRoleSelector } from './membership-role-selector';
+import { RolesDataProvider } from './roles-data-provider';
+
+type Role = string;
+
+export function UpdateMemberRoleDialog({
+  isOpen,
+  setIsOpen,
+  userId,
+  teamAccountId,
+  userRole,
+  userRoleHierarchy,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  userId: string;
+  teamAccountId: string;
+  userRole: Role;
+  userRoleHierarchy: number;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'teams:updateMemberRoleModalHeading'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'teams:updateMemberRoleModalDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <RolesDataProvider maxRoleHierarchy={userRoleHierarchy}>
+          {(data) => (
+            <UpdateMemberForm
+              setIsOpen={setIsOpen}
+              userId={userId}
+              teamAccountId={teamAccountId}
+              userRole={userRole}
+              roles={data}
+            />
+          )}
+        </RolesDataProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function UpdateMemberForm({
+  userId,
+  userRole,
+  teamAccountId,
+  setIsOpen,
+  roles,
+}: React.PropsWithChildren<{
+  userId: string;
+  userRole: Role;
+  teamAccountId: string;
+  setIsOpen: (isOpen: boolean) => void;
+  roles: Role[];
+}>) {
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+  const { t } = useTranslation('teams');
+
+  const onSubmit = ({ role }: { role: Role }) => {
+    startTransition(async () => {
+      try {
+        await updateMemberRoleAction({
+          accountId: teamAccountId,
+          userId,
+          role,
+        });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
+
+  const form = useForm({
+    resolver: zodResolver(
+      RoleSchema.refine(
+        (data) => {
+          return data.role !== userRole;
+        },
+        {
+          message: t(`roleMustBeDifferent`),
+          path: ['role'],
+        },
+      ),
+    ),
+    reValidateMode: 'onChange',
+    mode: 'onChange',
+    defaultValues: {
+      role: userRole,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        data-test={'update-member-role-form'}
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={'flex flex-col space-y-6'}
+      >
+        <If condition={error}>
+          <UpdateRoleErrorAlert />
+        </If>
+
+        <FormField
+          name={'role'}
+          render={({ field }) => {
+            return (
+              <FormItem>
+                <FormLabel>{t('roleLabel')}</FormLabel>
+
+                <FormControl>
+                  <MembershipRoleSelector
+                    roles={roles}
+                    currentUserRole={userRole}
+                    value={field.value}
+                    onChange={(newRole) => form.setValue('role', newRole)}
+                  />
+                </FormControl>
+
+                <FormDescription>{t('updateRoleDescription')}</FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+
+        <Button data-test={'confirm-update-member-role'} disabled={pending}>
+          <Trans i18nKey={'teams:updateRoleSubmitLabel'} />
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+function UpdateRoleErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:updateRoleErrorHeading'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:updateRoleErrorMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import { useFormStatus } from 'react-dom';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+import { ErrorBoundary } from '@kit/monitoring/components';
+import { VerifyOtpForm } from '@kit/otp/components';
+import { useUser } from '@kit/supabase/hooks/use-user';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+import { Trans } from '@kit/ui/trans';
+
+import { deleteTeamAccountAction } from '../../server/actions/delete-team-account-server-actions';
+import { leaveTeamAccountAction } from '../../server/actions/leave-team-account-server-actions';
+
+export function TeamAccountDangerZone({
+  account,
+  primaryOwnerUserId,
+  features,
+}: React.PropsWithChildren<{
+  account: {
+    name: string;
+    id: string;
+  };
+
+  features: {
+    enableTeamDeletion: boolean;
+  };
+
+  primaryOwnerUserId: string;
+}>) {
+  const { data: user } = useUser();
+
+  if (!user) {
+    return <LoadingOverlay fullPage={false} />;
+  }
+
+  // Only the primary owner can delete the team account
+  const userIsPrimaryOwner = user.id === primaryOwnerUserId;
+
+  if (userIsPrimaryOwner) {
+    if (features.enableTeamDeletion) {
+      return <DeleteTeamContainer account={account} />;
+    }
+
+    return;
+  }
+
+  // A primary owner can't leave the team account
+  // but other members can
+  return <LeaveTeamContainer account={account} />;
+}
+
+function DeleteTeamContainer(props: {
+  account: {
+    name: string;
+    id: string;
+  };
+}) {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <div className={'flex flex-col space-y-1'}>
+        <span className={'text-sm font-medium'}>
+          <Trans i18nKey={'teams:deleteTeam'} />
+        </span>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans
+            i18nKey={'teams:deleteTeamDescription'}
+            values={{
+              teamName: props.account.name,
+            }}
+          />
+        </p>
+      </div>
+
+      <div>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              data-test={'delete-team-trigger'}
+              type={'button'}
+              variant={'destructive'}
+            >
+              <Trans i18nKey={'teams:deleteTeam'} />
+            </Button>
+          </AlertDialogTrigger>
+
+          <AlertDialogContent onEscapeKeyDown={(e) => e.preventDefault()}>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                <Trans i18nKey={'teams:deletingTeam'} />
+              </AlertDialogTitle>
+
+              <AlertDialogDescription>
+                <Trans
+                  i18nKey={'teams:deletingTeamDescription'}
+                  values={{
+                    teamName: props.account.name,
+                  }}
+                />
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <DeleteTeamConfirmationForm
+              name={props.account.name}
+              id={props.account.id}
+            />
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+}
+
+function DeleteTeamConfirmationForm({
+  name,
+  id,
+}: {
+  name: string;
+  id: string;
+}) {
+  const { data: user } = useUser();
+
+  const form = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(
+      z.object({
+        otp: z.string().min(6).max(6),
+      }),
+    ),
+    defaultValues: {
+      otp: '',
+    },
+  });
+
+  const { otp } = useWatch({ control: form.control });
+
+  if (!user?.email) {
+    return <LoadingOverlay fullPage={false} />;
+  }
+
+  if (!otp) {
+    return (
+      <VerifyOtpForm
+        purpose={`delete-team-account-${id}`}
+        email={user.email}
+        onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
+        CancelButton={
+          <AlertDialogCancel className={'m-0'}>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+        }
+      />
+    );
+  }
+
+  return (
+    <ErrorBoundary fallback={<DeleteTeamErrorAlert />}>
+      <Form {...form}>
+        <form
+          data-test={'delete-team-form'}
+          className={'flex flex-col space-y-4'}
+          action={deleteTeamAccountAction}
+        >
+          <div className={'flex flex-col space-y-2'}>
+            <div
+              className={
+                'border-destructive text-destructive my-4 flex flex-col space-y-2 rounded-md border-2 p-4 text-sm'
+              }
+            >
+              <div>
+                <Trans
+                  i18nKey={'teams:deleteTeamDisclaimer'}
+                  values={{
+                    teamName: name,
+                  }}
+                />
+              </div>
+
+              <div className={'text-sm'}>
+                <Trans i18nKey={'common:modalConfirmationQuestion'} />
+              </div>
+            </div>
+
+            <input type="hidden" value={id} name={'accountId'} />
+            <input type="hidden" value={otp} name={'otp'} />
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>
+              <Trans i18nKey={'common:cancel'} />
+            </AlertDialogCancel>
+
+            <DeleteTeamSubmitButton />
+          </AlertDialogFooter>
+        </form>
+      </Form>
+    </ErrorBoundary>
+  );
+}
+
+function DeleteTeamSubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      data-test={'delete-team-form-confirm-button'}
+      disabled={pending}
+      variant={'destructive'}
+    >
+      <Trans i18nKey={'teams:deleteTeam'} />
+    </Button>
+  );
+}
+
+function LeaveTeamContainer(props: {
+  account: {
+    name: string;
+    id: string;
+  };
+}) {
+  const form = useForm({
+    resolver: zodResolver(
+      z.object({
+        confirmation: z.string().refine((value) => value === 'LEAVE', {
+          message: 'Confirmation required to leave team',
+          path: ['confirmation'],
+        }),
+      }),
+    ),
+    defaultValues: {
+      confirmation: '' as 'LEAVE',
+    },
+  });
+
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <p className={'text-muted-foreground text-sm'}>
+        <Trans
+          i18nKey={'teams:leaveTeamDescription'}
+          values={{
+            teamName: props.account.name,
+          }}
+        />
+      </p>
+
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <div>
+            <Button
+              data-test={'leave-team-button'}
+              type={'button'}
+              variant={'destructive'}
+            >
+              <Trans i18nKey={'teams:leaveTeam'} />
+            </Button>
+          </div>
+        </AlertDialogTrigger>
+
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              <Trans i18nKey={'teams:leavingTeamModalHeading'} />
+            </AlertDialogTitle>
+
+            <AlertDialogDescription>
+              <Trans i18nKey={'teams:leavingTeamModalDescription'} />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
+            <Form {...form}>
+              <form
+                className={'flex flex-col space-y-4'}
+                action={leaveTeamAccountAction}
+              >
+                <input
+                  type={'hidden'}
+                  value={props.account.id}
+                  name={'accountId'}
+                />
+
+                <FormField
+                  name={'confirmation'}
+                  render={({ field }) => {
+                    return (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans i18nKey={'teams:leaveTeamInputLabel'} />
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input
+                            data-test="leave-team-input-field"
+                            type="text"
+                            className="w-full"
+                            autoComplete={'off'}
+                            placeholder=""
+                            pattern="LEAVE"
+                            required
+                            {...field}
+                          />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans i18nKey={'teams:leaveTeamInputDescription'} />
+                        </FormDescription>
+
+                        <FormMessage />
+                      </FormItem>
+                    );
+                  }}
+                />
+
+                <AlertDialogFooter>
+                  <AlertDialogCancel>
+                    <Trans i18nKey={'common:cancel'} />
+                  </AlertDialogCancel>
+
+                  <LeaveTeamSubmitButton />
+                </AlertDialogFooter>
+              </form>
+            </Form>
+          </ErrorBoundary>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+function LeaveTeamSubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      data-test={'confirm-leave-organization-button'}
+      disabled={pending}
+      variant={'destructive'}
+    >
+      <Trans i18nKey={'teams:leaveTeam'} />
+    </Button>
+  );
+}
+
+function LeaveTeamErrorAlert() {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'destructive'}>
+        <AlertTitle>
+          <Trans i18nKey={'teams:leaveTeamErrorHeading'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'common:genericError'} />
+        </AlertDescription>
+      </Alert>
+
+      <AlertDialogFooter>
+        <AlertDialogCancel>
+          <Trans i18nKey={'common:cancel'} />
+        </AlertDialogCancel>
+      </AlertDialogFooter>
+    </div>
+  );
+}
+
+function DeleteTeamErrorAlert() {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'destructive'}>
+        <AlertTitle>
+          <Trans i18nKey={'teams:deleteTeamErrorHeading'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'common:genericError'} />
+        </AlertDescription>
+      </Alert>
+
+      <AlertDialogFooter>
+        <AlertDialogCancel>
+          <Trans i18nKey={'common:cancel'} />
+        </AlertDialogCancel>
+      </AlertDialogFooter>
+    </div>
+  );
+}

packages/features/team-accounts/src/components/settings/team-account-settings-container.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+
+import { TeamAccountDangerZone } from './team-account-danger-zone';
+import { UpdateTeamAccountImage } from './update-team-account-image-container';
+import { UpdateTeamAccountNameForm } from './update-team-account-name-form';
+
+export function TeamAccountSettingsContainer(props: {
+  account: {
+    name: string;
+    slug: string;
+    id: string;
+    pictureUrl: string | null;
+    primaryOwnerUserId: string;
+  };
+
+  paths: {
+    teamAccountSettings: string;
+  };
+
+  features: {
+    enableTeamDeletion: boolean;
+  };
+}) {
+  return (
+    <div className={'flex w-full flex-col space-y-4'}>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'teams:settings.teamLogo'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'teams:settings.teamLogoDescription'} />
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <UpdateTeamAccountImage account={props.account} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'teams:settings.teamName'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'teams:settings.teamNameDescription'} />
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <UpdateTeamAccountNameForm
+            path={props.paths.teamAccountSettings}
+            account={props.account}
+          />
+        </CardContent>
+      </Card>
+
+      <Card className={'border-destructive border'}>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'teams:settings.dangerZone'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'teams:settings.dangerZoneDescription'} />
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <TeamAccountDangerZone
+            primaryOwnerUserId={props.account.primaryOwnerUserId}
+            account={props.account}
+            features={props.features}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

packages/features/team-accounts/src/components/settings/update-team-account-image-container.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import { ImageUploader } from '@kit/ui/image-uploader';
+import { Trans } from '@kit/ui/trans';
+
+const AVATARS_BUCKET = 'account_image';
+
+export function UpdateTeamAccountImage(props: {
+  account: {
+    id: string;
+    name: string;
+    pictureUrl: string | null;
+  };
+}) {
+  const client = useSupabase();
+  const { t } = useTranslation('teams');
+
+  const createToaster = useCallback(
+    (promise: () => Promise<unknown>) => {
+      return toast.promise(promise, {
+        success: t(`updateTeamSuccessMessage`),
+        error: t(`updateTeamErrorMessage`),
+        loading: t(`updateTeamLoadingMessage`),
+      });
+    },
+    [t],
+  );
+
+  const onValueChange = useCallback(
+    (file: File | null) => {
+      const removeExistingStorageFile = () => {
+        if (props.account.pictureUrl) {
+          return (
+            deleteProfilePhoto(client, props.account.pictureUrl) ??
+            Promise.resolve()
+          );
+        }
+
+        return Promise.resolve();
+      };
+
+      if (file) {
+        const promise = () =>
+          removeExistingStorageFile().then(() =>
+            uploadUserProfilePhoto(client, file, props.account.id).then(
+              (pictureUrl) => {
+                return client
+                  .from('accounts')
+                  .update({
+                    picture_url: pictureUrl,
+                  })
+                  .eq('id', props.account.id)
+                  .throwOnError();
+              },
+            ),
+          );
+
+        createToaster(promise);
+      } else {
+        const promise = () =>
+          removeExistingStorageFile().then(() => {
+            return client
+              .from('accounts')
+              .update({
+                picture_url: null,
+              })
+              .eq('id', props.account.id)
+              .throwOnError();
+          });
+
+        createToaster(promise);
+      }
+    },
+    [client, createToaster, props],
+  );
+
+  return (
+    <ImageUploader
+      value={props.account.pictureUrl}
+      onValueChange={onValueChange}
+    >
+      <div className={'flex flex-col space-y-1'}>
+        <span className={'text-sm'}>
+          <Trans i18nKey={'account:profilePictureHeading'} />
+        </span>
+
+        <span className={'text-xs'}>
+          <Trans i18nKey={'account:profilePictureSubheading'} />
+        </span>
+      </div>
+    </ImageUploader>
+  );
+}
+
+function deleteProfilePhoto(client: SupabaseClient, url: string) {
+  const bucket = client.storage.from(AVATARS_BUCKET);
+  const fileName = url.split('/').pop()?.split('?')[0];
+
+  if (!fileName) {
+    return;
+  }
+
+  return bucket.remove([fileName]);
+}
+
+async function uploadUserProfilePhoto(
+  client: SupabaseClient,
+  photoFile: File,
+  userId: string,
+) {
+  const bytes = await photoFile.arrayBuffer();
+  const bucket = client.storage.from(AVATARS_BUCKET);
+  const extension = photoFile.name.split('.').pop();
+  const fileName = await getAvatarFileName(userId, extension);
+
+  const result = await bucket.upload(fileName, bytes);
+
+  if (!result.error) {
+    return bucket.getPublicUrl(fileName).data.publicUrl;
+  }
+
+  throw result.error;
+}
+
+async function getAvatarFileName(
+  userId: string,
+  extension: string | undefined,
+) {
+  const { nanoid } = await import('nanoid');
+  const uniqueId = nanoid(16);
+
+  return `${userId}.${extension}?v=${uniqueId}`;
+}

packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { isRedirectError } from 'next/dist/client/components/redirect-error';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { Trans } from '@kit/ui/trans';
+
+import { TeamNameFormSchema } from '../../schema/update-team-name.schema';
+import { updateTeamAccountName } from '../../server/actions/team-details-server-actions';
+
+export const UpdateTeamAccountNameForm = (props: {
+  account: {
+    name: string;
+    slug: string;
+  };
+
+  path: string;
+}) => {
+  const [pending, startTransition] = useTransition();
+  const { t } = useTranslation('teams');
+
+  const form = useForm({
+    resolver: zodResolver(TeamNameFormSchema),
+    defaultValues: {
+      name: props.account.name,
+    },
+  });
+
+  return (
+    <div className={'space-y-8'}>
+      <Form {...form}>
+        <form
+          data-test={'update-team-account-name-form'}
+          className={'flex flex-col space-y-4'}
+          onSubmit={form.handleSubmit((data) => {
+            startTransition(async () => {
+              const toastId = toast.loading(t('updateTeamLoadingMessage'));
+
+              try {
+                const result = await updateTeamAccountName({
+                  slug: props.account.slug,
+                  name: data.name,
+                  path: props.path,
+                });
+
+                if (result.success) {
+                  toast.success(t('updateTeamSuccessMessage'), {
+                    id: toastId,
+                  });
+                } else {
+                  toast.error(t('updateTeamErrorMessage'), {
+                    id: toastId,
+                  });
+                }
+              } catch (error) {
+                if (!isRedirectError(error)) {
+                  toast.error(t('updateTeamErrorMessage'), {
+                    id: toastId,
+                  });
+                } else {
+                  toast.success(t('updateTeamSuccessMessage'), {
+                    id: toastId,
+                  });
+                }
+              }
+            });
+          })}
+        >
+          <FormField
+            name={'name'}
+            render={({ field }) => {
+              return (
+                <FormItem>
+                  <FormLabel>
+                    <Trans i18nKey={'teams:teamNameInputLabel'} />
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      data-test={'team-name-input'}
+                      required
+                      placeholder={''}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          <div>
+            <Button
+              className={'w-full md:w-auto'}
+              data-test={'update-team-submit-button'}
+              disabled={pending}
+            >
+              <Trans i18nKey={'teams:updateTeamSubmitLabel'} />
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};

packages/features/team-accounts/src/components/team-account-workspace-context.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { createContext } from 'react';
+
+import { User } from '@supabase/supabase-js';
+
+import { Database } from '@kit/supabase/database';
+
+interface AccountWorkspace {
+  accounts: Database['public']['Views']['user_accounts']['Row'][];
+  account: Database['public']['Functions']['team_account_workspace']['Returns'][0];
+  user: User;
+}
+
+export const TeamAccountWorkspaceContext = createContext<AccountWorkspace>(
+  {} as AccountWorkspace,
+);
+
+export function TeamAccountWorkspaceContextProvider(
+  props: React.PropsWithChildren<{ value: AccountWorkspace }>,
+) {
+  return (
+    <TeamAccountWorkspaceContext.Provider value={props.value}>
+      {props.children}
+    </TeamAccountWorkspaceContext.Provider>
+  );
+}

packages/features/team-accounts/src/hooks/use-team-account-workspace.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { TeamAccountWorkspaceContext } from '../components';
+
+/**
+ * @name useTeamAccountWorkspace
+ * @description A hook to access the account workspace data.
+ * @returns The account workspace data.
+ */
+export function useTeamAccountWorkspace() {
+  const ctx = useContext(TeamAccountWorkspaceContext);
+
+  if (!ctx) {
+    throw new Error(
+      'useTeamAccountWorkspace must be used within a TeamAccountWorkspaceContext.Provider. This is only provided within the account workspace /home/[account]',
+    );
+  }
+
+  return ctx;
+}

packages/features/team-accounts/src/schema/accept-invitation.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const AcceptInvitationSchema = z.object({
+  inviteToken: z.string().uuid(),
+  nextPath: z.string().min(1),
+});

packages/features/team-accounts/src/schema/create-team.schema.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod';
+
+/**
+ * @name RESERVED_NAMES_ARRAY
+ * @description Array of reserved names for team accounts
+ * This is a list of names that cannot be used for team accounts as they are reserved for other purposes.
+ * Please include any new reserved names here.
+ */
+const RESERVED_NAMES_ARRAY = [
+  'settings',
+  'billing',
+  // please add more reserved names here
+];
+
+const SPECIAL_CHARACTERS_REGEX = /[!@#$%^&*()+=[\]{};':"\\|,.<>/?]/;
+
+/**
+ * @name TeamNameSchema
+ */
+export const TeamNameSchema = z
+  .string({
+    description: 'The name of the team account',
+  })
+  .min(2)
+  .max(50)
+  .refine(
+    (name) => {
+      console.log(name);
+      return !SPECIAL_CHARACTERS_REGEX.test(name);
+    },
+    {
+      message: 'teams:specialCharactersError',
+    },
+  )
+  .refine(
+    (name) => {
+      return !RESERVED_NAMES_ARRAY.includes(name.toLowerCase());
+    },
+    {
+      message: 'teams:reservedNameError',
+    },
+  );
+
+/**
+ * @name CreateTeamSchema
+ * @description Schema for creating a team account
+ */
+export const CreateTeamSchema = z.object({
+  name: TeamNameSchema,
+});

packages/features/team-accounts/src/schema/delete-invitation.schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const DeleteInvitationSchema = z.object({
+  invitationId: z.number().int(),
+});

packages/features/team-accounts/src/schema/delete-team-account.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const DeleteTeamAccountSchema = z.object({
+  accountId: z.string().uuid(),
+  otp: z.string().min(1),
+});

packages/features/team-accounts/src/schema/invite-members.schema.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+
+const InviteSchema = z.object({
+  email: z.string().email(),
+  role: z.string().min(1).max(100),
+});
+
+export const InviteMembersSchema = z
+  .object({
+    invitations: InviteSchema.array().min(1).max(5),
+  })
+  .refine(
+    (data) => {
+      const emails = data.invitations.map((member) =>
+        member.email.toLowerCase(),
+      );
+
+      const uniqueEmails = new Set(emails);
+
+      return emails.length === uniqueEmails.size;
+    },
+    {
+      message: 'Duplicate emails are not allowed',
+      path: ['invitations'],
+    },
+  );

packages/features/team-accounts/src/schema/leave-team-account.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const LeaveTeamAccountSchema = z.object({
+  accountId: z.string().uuid(),
+  confirmation: z.custom((value) => value === 'LEAVE'),
+});

packages/features/team-accounts/src/schema/remove-member.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const RemoveMemberSchema = z.object({
+  accountId: z.string().uuid(),
+  userId: z.string().uuid(),
+});

packages/features/team-accounts/src/schema/renew-invitation.schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const RenewInvitationSchema = z.object({
+  invitationId: z.number().positive(),
+});

packages/features/team-accounts/src/schema/transfer-ownership-confirmation.schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const TransferOwnershipConfirmationSchema = z.object({
+  accountId: z.string().uuid(),
+  userId: z.string().uuid(),
+  otp: z.string().min(6),
+});
+
+export type TransferOwnershipConfirmationData = z.infer<
+  typeof TransferOwnershipConfirmationSchema
+>;

packages/features/team-accounts/src/schema/update-invitation.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const UpdateInvitationSchema = z.object({
+  invitationId: z.number(),
+  role: z.string().min(1),
+});

packages/features/team-accounts/src/schema/update-member-role.schema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const RoleSchema = z.object({
+  role: z.string().min(1),
+});
+
+export const UpdateMemberRoleSchema = RoleSchema.extend({
+  accountId: z.string().uuid(),
+  userId: z.string().uuid(),
+});

packages/features/team-accounts/src/schema/update-team-name.schema.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+
+import { TeamNameSchema } from './create-team.schema';
+
+export const TeamNameFormSchema = z.object({
+  name: TeamNameSchema,
+});
+
+export const UpdateTeamNameSchema = TeamNameFormSchema.merge(
+  z.object({
+    slug: z.string().min(1).max(255),
+    path: z.string().min(1).max(255),
+  }),
+);

packages/features/team-accounts/src/server/actions/create-team-account-server-actions.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getLogger } from '@kit/shared/logger';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { CreateTeamSchema } from '../../schema/create-team.schema';
+import { createCreateTeamAccountService } from '../services/create-team-account.service';
+
+export const createTeamAccountAction = enhanceAction(
+  async ({ name }, user) => {
+    const logger = await getLogger();
+    const client = getSupabaseServerClient();
+    const service = createCreateTeamAccountService(client);
+
+    const ctx = {
+      name: 'team-accounts.create',
+      userId: user.id,
+      accountName: name,
+    };
+
+    logger.info(ctx, `Creating team account...`);
+
+    const { data, error } = await service.createNewOrganizationAccount({
+      name,
+      userId: user.id,
+    });
+
+    if (error) {
+      logger.error({ ...ctx, error }, `Failed to create team account`);
+
+      return {
+        error: true,
+      };
+    }
+
+    logger.info(ctx, `Team account created`);
+
+    const accountHomePath = '/home/' + data.slug;
+
+    redirect(accountHomePath);
+  },
+  {
+    schema: CreateTeamSchema,
+  },
+);

packages/features/team-accounts/src/server/actions/delete-team-account-server-actions.ts

@@ -0,0 +1,96 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+import { enhanceAction } from '@kit/next/actions';
+import { createOtpApi } from '@kit/otp';
+import { getLogger } from '@kit/shared/logger';
+import type { Database } from '@kit/supabase/database';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { DeleteTeamAccountSchema } from '../../schema/delete-team-account.schema';
+import { createDeleteTeamAccountService } from '../services/delete-team-account.service';
+
+const enableTeamAccountDeletion =
+  process.env.NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION === 'true';
+
+export const deleteTeamAccountAction = enhanceAction(
+  async (formData: FormData, user) => {
+    const logger = await getLogger();
+
+    const params = DeleteTeamAccountSchema.parse(
+      Object.fromEntries(formData.entries()),
+    );
+
+    const otpService = createOtpApi(getSupabaseServerClient());
+
+    const otpResult = await otpService.verifyToken({
+      purpose: `delete-team-account-${params.accountId}`,
+      userId: user.id,
+      token: params.otp,
+    });
+
+    if (!otpResult.valid) {
+      throw new Error('Invalid OTP code');
+    }
+
+    const ctx = {
+      name: 'team-accounts.delete',
+      userId: user.id,
+      accountId: params.accountId,
+    };
+
+    if (!enableTeamAccountDeletion) {
+      logger.warn(ctx, `Team account deletion is not enabled`);
+
+      throw new Error('Team account deletion is not enabled');
+    }
+
+    logger.info(ctx, `Deleting team account...`);
+
+    await deleteTeamAccount({
+      accountId: params.accountId,
+      userId: user.id,
+    });
+
+    logger.info(ctx, `Team account request successfully sent`);
+
+    return redirect('/home');
+  },
+  {
+    auth: true,
+  },
+);
+
+async function deleteTeamAccount(params: {
+  accountId: string;
+  userId: string;
+}) {
+  const client = getSupabaseServerClient();
+  const service = createDeleteTeamAccountService();
+
+  // verify that the user has the necessary permissions to delete the team account
+  await assertUserPermissionsToDeleteTeamAccount(client, params.accountId);
+
+  // delete the team account
+  await service.deleteTeamAccount(client, params);
+}
+
+async function assertUserPermissionsToDeleteTeamAccount(
+  client: SupabaseClient<Database>,
+  accountId: string,
+) {
+  const { data: isOwner, error } = await client
+    .rpc('is_account_owner', {
+      account_id: accountId,
+    })
+    .single();
+
+  if (error || !isOwner) {
+    throw new Error('You do not have permission to delete this account');
+  }
+
+  return isOwner;
+}

packages/features/team-accounts/src/server/actions/leave-team-account-server-actions.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+
+import { LeaveTeamAccountSchema } from '../../schema/leave-team-account.schema';
+import { createLeaveTeamAccountService } from '../services/leave-team-account.service';
+
+export const leaveTeamAccountAction = enhanceAction(
+  async (formData: FormData, user) => {
+    const body = Object.fromEntries(formData.entries());
+    const params = LeaveTeamAccountSchema.parse(body);
+
+    const service = createLeaveTeamAccountService(
+      getSupabaseServerAdminClient(),
+    );
+
+    await service.leaveTeamAccount({
+      accountId: params.accountId,
+      userId: user.id,
+    });
+
+    revalidatePath('/home/[account]', 'layout');
+
+    return redirect('/home');
+  },
+  {},
+);

packages/features/team-accounts/src/server/actions/team-details-server-actions.ts

@@ -0,0 +1,57 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getLogger } from '@kit/shared/logger';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { UpdateTeamNameSchema } from '../../schema/update-team-name.schema';
+
+export const updateTeamAccountName = enhanceAction(
+  async (params) => {
+    const client = getSupabaseServerClient();
+    const logger = await getLogger();
+    const { name, path, slug } = params;
+
+    const ctx = {
+      name: 'team-accounts.update',
+      accountName: name,
+    };
+
+    logger.info(ctx, `Updating team name...`);
+
+    const { error, data } = await client
+      .from('accounts')
+      .update({
+        name,
+        slug,
+      })
+      .match({
+        slug,
+      })
+      .select('slug')
+      .single();
+
+    if (error) {
+      logger.error({ ...ctx, error }, `Failed to update team name`);
+
+      throw error;
+    }
+
+    const newSlug = data.slug;
+
+    logger.info(ctx, `Team name updated`);
+
+    if (newSlug) {
+      const nextPath = path.replace('[account]', newSlug);
+
+      redirect(nextPath);
+    }
+
+    return { success: true };
+  },
+  {
+    schema: UpdateTeamNameSchema,
+  },
+);

packages/features/team-accounts/src/server/actions/team-invitations-server-actions.ts

@@ -0,0 +1,159 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+import { z } from 'zod';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { AcceptInvitationSchema } from '../../schema/accept-invitation.schema';
+import { DeleteInvitationSchema } from '../../schema/delete-invitation.schema';
+import { InviteMembersSchema } from '../../schema/invite-members.schema';
+import { RenewInvitationSchema } from '../../schema/renew-invitation.schema';
+import { UpdateInvitationSchema } from '../../schema/update-invitation.schema';
+import { createAccountInvitationsService } from '../services/account-invitations.service';
+import { createAccountPerSeatBillingService } from '../services/account-per-seat-billing.service';
+
+/**
+ * @name createInvitationsAction
+ * @description Creates invitations for inviting members.
+ */
+export const createInvitationsAction = enhanceAction(
+  async (params) => {
+    const client = getSupabaseServerClient();
+
+    // Create the service
+    const service = createAccountInvitationsService(client);
+
+    // send invitations
+    await service.sendInvitations(params);
+
+    revalidateMemberPage();
+
+    return {
+      success: true,
+    };
+  },
+  {
+    schema: InviteMembersSchema.and(
+      z.object({
+        accountSlug: z.string().min(1),
+      }),
+    ),
+  },
+);
+
+/**
+ * @name deleteInvitationAction
+ * @description Deletes an invitation specified by the invitation ID.
+ */
+export const deleteInvitationAction = enhanceAction(
+  async (data) => {
+    const client = getSupabaseServerClient();
+    const service = createAccountInvitationsService(client);
+
+    // Delete the invitation
+    await service.deleteInvitation(data);
+
+    revalidateMemberPage();
+
+    return {
+      success: true,
+    };
+  },
+  {
+    schema: DeleteInvitationSchema,
+  },
+);
+
+/**
+ * @name updateInvitationAction
+ * @description Updates an invitation.
+ */
+export const updateInvitationAction = enhanceAction(
+  async (invitation) => {
+    const client = getSupabaseServerClient();
+    const service = createAccountInvitationsService(client);
+
+    await service.updateInvitation(invitation);
+
+    revalidateMemberPage();
+
+    return {
+      success: true,
+    };
+  },
+  {
+    schema: UpdateInvitationSchema,
+  },
+);
+
+/**
+ * @name acceptInvitationAction
+ * @description Accepts an invitation to join a team.
+ */
+export const acceptInvitationAction = enhanceAction(
+  async (data: FormData, user) => {
+    const client = getSupabaseServerClient();
+
+    const { inviteToken, nextPath } = AcceptInvitationSchema.parse(
+      Object.fromEntries(data),
+    );
+
+    // create the services
+    const perSeatBillingService = createAccountPerSeatBillingService(client);
+    const service = createAccountInvitationsService(client);
+
+    // use admin client to accept invitation
+    const adminClient = getSupabaseServerAdminClient();
+
+    // Accept the invitation
+    const accountId = await service.acceptInvitationToTeam(adminClient, {
+      inviteToken,
+      userId: user.id,
+    });
+
+    // If the account ID is not present, throw an error
+    if (!accountId) {
+      throw new Error('Failed to accept invitation');
+    }
+
+    // Increase the seats for the account
+    await perSeatBillingService.increaseSeats(accountId);
+
+    return redirect(nextPath);
+  },
+  {},
+);
+
+/**
+ * @name renewInvitationAction
+ * @description Renews an invitation.
+ */
+export const renewInvitationAction = enhanceAction(
+  async (params) => {
+    const client = getSupabaseServerClient();
+    const { invitationId } = RenewInvitationSchema.parse(params);
+
+    const service = createAccountInvitationsService(client);
+
+    // Renew the invitation
+    await service.renewInvitation(invitationId);
+
+    revalidateMemberPage();
+
+    return {
+      success: true,
+    };
+  },
+  {
+    schema: RenewInvitationSchema,
+  },
+);
+
+function revalidateMemberPage() {
+  revalidatePath('/home/[account]/members', 'page');
+}

packages/features/team-accounts/src/server/actions/team-members-server-actions.ts

@@ -0,0 +1,144 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+
+import { enhanceAction } from '@kit/next/actions';
+import { createOtpApi } from '@kit/otp';
+import { getLogger } from '@kit/shared/logger';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import { RemoveMemberSchema } from '../../schema/remove-member.schema';
+import { TransferOwnershipConfirmationSchema } from '../../schema/transfer-ownership-confirmation.schema';
+import { UpdateMemberRoleSchema } from '../../schema/update-member-role.schema';
+import { createAccountMembersService } from '../services/account-members.service';
+
+/**
+ * @name removeMemberFromAccountAction
+ * @description Removes a member from an account.
+ */
+export const removeMemberFromAccountAction = enhanceAction(
+  async ({ accountId, userId }) => {
+    const client = getSupabaseServerClient();
+    const service = createAccountMembersService(client);
+
+    await service.removeMemberFromAccount({
+      accountId,
+      userId,
+    });
+
+    // revalidate all pages that depend on the account
+    revalidatePath('/home/[account]', 'layout');
+
+    return { success: true };
+  },
+  {
+    schema: RemoveMemberSchema,
+  },
+);
+
+/**
+ * @name updateMemberRoleAction
+ * @description Updates the role of a member in an account.
+ */
+export const updateMemberRoleAction = enhanceAction(
+  async (data) => {
+    const client = getSupabaseServerClient();
+    const service = createAccountMembersService(client);
+    const adminClient = getSupabaseServerAdminClient();
+
+    // update the role of the member
+    await service.updateMemberRole(data, adminClient);
+
+    // revalidate all pages that depend on the account
+    revalidatePath('/home/[account]', 'layout');
+
+    return { success: true };
+  },
+  {
+    schema: UpdateMemberRoleSchema,
+  },
+);
+
+/**
+ * @name transferOwnershipAction
+ * @description Transfers the ownership of an account to another member.
+ * Requires OTP verification for security.
+ */
+export const transferOwnershipAction = enhanceAction(
+  async (data, user) => {
+    const client = getSupabaseServerClient();
+    const logger = await getLogger();
+
+    const ctx = {
+      name: 'teams.transferOwnership',
+      userId: user.id,
+      accountId: data.accountId,
+    };
+
+    logger.info(ctx, 'Processing team ownership transfer request...');
+
+    // assert that the user is the owner of the account
+    const { data: isOwner, error } = await client.rpc('is_account_owner', {
+      account_id: data.accountId,
+    });
+
+    if (error || !isOwner) {
+      logger.error(ctx, 'User is not the owner of this account');
+
+      throw new Error(
+        `You must be the owner of the account to transfer ownership`,
+      );
+    }
+
+    // Verify the OTP
+    const otpApi = createOtpApi(client);
+
+    const otpResult = await otpApi.verifyToken({
+      token: data.otp,
+      userId: user.id,
+      purpose: `transfer-team-ownership-${data.accountId}`,
+    });
+
+    if (!otpResult.valid) {
+      logger.error(ctx, 'Invalid OTP provided');
+      throw new Error('Invalid OTP');
+    }
+
+    // validate the user ID matches the nonce's user ID
+    if (otpResult.user_id !== user.id) {
+      logger.error(
+        ctx,
+        `This token was meant to be used by a different user. Exiting.`,
+      );
+
+      throw new Error('Nonce mismatch');
+    }
+
+    logger.info(
+      ctx,
+      'OTP verification successful. Proceeding with ownership transfer...',
+    );
+
+    const service = createAccountMembersService(client);
+
+    // at this point, the user is authenticated, is the owner of the account, and has verified via OTP
+    // so we proceed with the transfer of ownership with admin privileges
+    const adminClient = getSupabaseServerAdminClient();
+
+    // transfer the ownership of the account
+    await service.transferOwnership(data, adminClient);
+
+    // revalidate all pages that depend on the account
+    revalidatePath('/home/[account]', 'layout');
+
+    logger.info(ctx, 'Team ownership transferred successfully');
+
+    return {
+      success: true,
+    };
+  },
+  {
+    schema: TransferOwnershipConfirmationSchema,
+  },
+);

packages/features/team-accounts/src/server/api.ts

@@ -0,0 +1,236 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { Database } from '@kit/supabase/database';
+
+/**
+ * Class representing an API for interacting with team accounts.
+ * @constructor
+ * @param {SupabaseClient<Database>} client - The Supabase client instance.
+ */
+export class TeamAccountsApi {
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name getTeamAccount
+   * @description Get the account data for the given slug.
+   * @param slug
+   */
+  async getTeamAccount(slug: string) {
+    const { data, error } = await this.client
+      .from('accounts')
+      .select('*')
+      .eq('slug', slug)
+      .single();
+
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
+  /**
+   * @name getTeamAccountById
+   * @description Check if the user is already in the account.
+   * @param accountId
+   */
+  async getTeamAccountById(accountId: string) {
+    const { data, error } = await this.client
+      .from('accounts')
+      .select('*')
+      .eq('id', accountId)
+      .single();
+
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
+  /**
+   * @name getSubscription
+   * @description Get the subscription data for the account.
+   * @param accountId
+   */
+  async getSubscription(accountId: string) {
+    const { data, error } = await this.client
+      .from('subscriptions')
+      .select('*, items: subscription_items !inner (*)')
+      .eq('account_id', accountId)
+      .maybeSingle();
+
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
+  /**
+   * Get the orders data for the given account.
+   * @param accountId
+   */
+  async getOrder(accountId: string) {
+    const response = await this.client
+      .from('orders')
+      .select('*, items: order_items !inner (*)')
+      .eq('account_id', accountId)
+      .maybeSingle();
+
+    if (response.error) {
+      throw response.error;
+    }
+
+    return response.data;
+  }
+
+  /**
+   * @name getAccountWorkspace
+   * @description Get the account workspace data.
+   * @param slug
+   */
+  async getAccountWorkspace(slug: string) {
+    const accountPromise = this.client.rpc('team_account_workspace', {
+      account_slug: slug,
+    });
+
+    const accountsPromise = this.client.from('user_accounts').select('*');
+
+    const [accountResult, accountsResult] = await Promise.all([
+      accountPromise,
+      accountsPromise,
+    ]);
+
+    if (accountResult.error) {
+      return {
+        error: accountResult.error,
+        data: null,
+      };
+    }
+
+    if (accountsResult.error) {
+      return {
+        error: accountsResult.error,
+        data: null,
+      };
+    }
+
+    const accountData = accountResult.data[0];
+
+    if (!accountData) {
+      return {
+        error: new Error('Account data not found'),
+        data: null,
+      };
+    }
+
+    return {
+      data: {
+        account: accountData,
+        accounts: accountsResult.data,
+      },
+      error: null,
+    };
+  }
+
+  /**
+   * @name hasPermission
+   * @description Check if the user has permission to manage billing for the account.
+   */
+  async hasPermission(params: {
+    accountId: string;
+    userId: string;
+    permission: Database['public']['Enums']['app_permissions'];
+  }) {
+    const { data, error } = await this.client.rpc('has_permission', {
+      account_id: params.accountId,
+      user_id: params.userId,
+      permission_name: params.permission,
+    });
+
+    if (error) {
+      throw error;
+    }
+
+    return data;
+  }
+
+  /**
+   * @name getMembersCount
+   * @description Get the number of members in the account.
+   * @param accountId
+   */
+  async getMembersCount(accountId: string) {
+    const { count, error } = await this.client
+      .from('accounts_memberships')
+      .select('*', {
+        head: true,
+        count: 'exact',
+      })
+      .eq('account_id', accountId);
+
+    if (error) {
+      throw error;
+    }
+
+    return count;
+  }
+
+  /**
+   * @name getCustomerId
+   * @description Get the billing customer ID for the given account.
+   * @param accountId
+   */
+  async getCustomerId(accountId: string) {
+    const { data, error } = await this.client
+      .from('billing_customers')
+      .select('customer_id')
+      .eq('account_id', accountId)
+      .maybeSingle();
+
+    if (error) {
+      throw error;
+    }
+
+    return data?.customer_id;
+  }
+
+  /**
+   * @name getInvitation
+   * @description Get the invitation data from the invite token.
+   * @param adminClient - The admin client instance. Since the user is not yet part of the account, we need to use an admin client to read the pending membership
+   * @param token - The invitation token.
+   */
+  async getInvitation(adminClient: SupabaseClient<Database>, token: string) {
+    const { data: invitation, error } = await adminClient
+      .from('invitations')
+      .select<
+        string,
+        {
+          id: string;
+          account: {
+            id: string;
+            name: string;
+            slug: string;
+            picture_url: string;
+          };
+        }
+      >(
+        'id, expires_at, account: account_id !inner (id, name, slug, picture_url)',
+      )
+      .eq('invite_token', token)
+      .gte('expires_at', new Date().toISOString())
+      .single();
+
+    if (error ?? !invitation) {
+      return null;
+    }
+
+    return invitation;
+  }
+}
+
+export function createTeamAccountsApi(client: SupabaseClient<Database>) {
+  return new TeamAccountsApi(client);
+}

packages/features/team-accounts/src/server/services/account-invitations.service.ts

@@ -0,0 +1,296 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { addDays, formatISO } from 'date-fns';
+import { z } from 'zod';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+import type { DeleteInvitationSchema } from '../../schema/delete-invitation.schema';
+import type { InviteMembersSchema } from '../../schema/invite-members.schema';
+import type { UpdateInvitationSchema } from '../../schema/update-invitation.schema';
+
+export function createAccountInvitationsService(
+  client: SupabaseClient<Database>,
+) {
+  return new AccountInvitationsService(client);
+}
+
+/**
+ * @name AccountInvitationsService
+ * @description Service for managing account invitations.
+ */
+class AccountInvitationsService {
+  private readonly namespace = 'invitations';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name deleteInvitation
+   * @description Removes an invitation from the database.
+   * @param params
+   */
+  async deleteInvitation(params: z.infer<typeof DeleteInvitationSchema>) {
+    const logger = await getLogger();
+
+    const ctx = {
+      name: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, 'Removing invitation...');
+
+    const { data, error } = await this.client
+      .from('invitations')
+      .delete()
+      .match({
+        id: params.invitationId,
+      });
+
+    if (error) {
+      logger.error(ctx, `Failed to remove invitation`);
+
+      throw error;
+    }
+
+    logger.info(ctx, 'Invitation successfully removed');
+
+    return data;
+  }
+
+  /**
+   * @name updateInvitation
+   * @param params
+   * @description Updates an invitation in the database.
+   */
+  async updateInvitation(params: z.infer<typeof UpdateInvitationSchema>) {
+    const logger = await getLogger();
+
+    const ctx = {
+      name: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, 'Updating invitation...');
+
+    const { data, error } = await this.client
+      .from('invitations')
+      .update({
+        role: params.role,
+      })
+      .match({
+        id: params.invitationId,
+      });
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        'Failed to update invitation',
+      );
+
+      throw error;
+    }
+
+    logger.info(ctx, 'Invitation successfully updated');
+
+    return data;
+  }
+
+  async validateInvitation(
+    invitation: z.infer<typeof InviteMembersSchema>['invitations'][number],
+    accountSlug: string,
+  ) {
+    const { data: members, error } = await this.client.rpc(
+      'get_account_members',
+      {
+        account_slug: accountSlug,
+      },
+    );
+
+    if (error) {
+      throw error;
+    }
+
+    const isUserAlreadyMember = members.find((member) => {
+      return member.email === invitation.email;
+    });
+
+    if (isUserAlreadyMember) {
+      throw new Error('User already member of the team');
+    }
+  }
+
+  /**
+   * @name sendInvitations
+   * @description Sends invitations to join a team.
+   * @param accountSlug
+   * @param invitations
+   */
+  async sendInvitations({
+    accountSlug,
+    invitations,
+  }: {
+    invitations: z.infer<typeof InviteMembersSchema>['invitations'];
+    accountSlug: string;
+  }) {
+    const logger = await getLogger();
+
+    const ctx = {
+      accountSlug,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, 'Storing invitations...');
+
+    try {
+      await Promise.all(
+        invitations.map((invitation) =>
+          this.validateInvitation(invitation, accountSlug),
+        ),
+      );
+    } catch (error) {
+      logger.error(
+        {
+          ...ctx,
+          error: (error as Error).message,
+        },
+        'Error validating invitations',
+      );
+
+      throw error;
+    }
+
+    const accountResponse = await this.client
+      .from('accounts')
+      .select('name')
+      .eq('slug', accountSlug)
+      .single();
+
+    if (!accountResponse.data) {
+      logger.error(
+        ctx,
+        'Account not found in database. Cannot send invitations.',
+      );
+
+      throw new Error('Account not found');
+    }
+
+    const response = await this.client.rpc('add_invitations_to_account', {
+      invitations,
+      account_slug: accountSlug,
+    });
+
+    if (response.error) {
+      logger.error(
+        {
+          ...ctx,
+          error: response.error,
+        },
+        `Failed to add invitations to account ${accountSlug}`,
+      );
+
+      throw response.error;
+    }
+
+    const responseInvitations = Array.isArray(response.data)
+      ? response.data
+      : [response.data];
+
+    logger.info(
+      {
+        ...ctx,
+        count: responseInvitations.length,
+      },
+      'Invitations added to account',
+    );
+  }
+
+  /**
+   * @name acceptInvitationToTeam
+   * @description Accepts an invitation to join a team.
+   */
+  async acceptInvitationToTeam(
+    adminClient: SupabaseClient<Database>,
+    params: {
+      userId: string;
+      inviteToken: string;
+    },
+  ) {
+    const logger = await getLogger();
+    const ctx = {
+      name: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, 'Accepting invitation to team');
+
+    const { error, data } = await adminClient.rpc('accept_invitation', {
+      token: params.inviteToken,
+      user_id: params.userId,
+    });
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        'Failed to accept invitation to team',
+      );
+
+      throw error;
+    }
+
+    logger.info(ctx, 'Successfully accepted invitation to team');
+
+    return data;
+  }
+
+  /**
+   * @name renewInvitation
+   * @description Renews an invitation to join a team by extending the expiration date by 7 days.
+   * @param invitationId
+   */
+  async renewInvitation(invitationId: number) {
+    const logger = await getLogger();
+
+    const ctx = {
+      invitationId,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, 'Renewing invitation...');
+
+    const sevenDaysFromNow = formatISO(addDays(new Date(), 7));
+
+    const { data, error } = await this.client
+      .from('invitations')
+      .update({
+        expires_at: sevenDaysFromNow,
+      })
+      .match({
+        id: invitationId,
+      });
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        'Failed to renew invitation',
+      );
+
+      throw error;
+    }
+
+    logger.info(ctx, 'Invitation successfully renewed');
+
+    return data;
+  }
+}

packages/features/team-accounts/src/server/services/account-members.service.ts

@@ -0,0 +1,181 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+import type { RemoveMemberSchema } from '../../schema/remove-member.schema';
+import type { TransferOwnershipConfirmationSchema } from '../../schema/transfer-ownership-confirmation.schema';
+import type { UpdateMemberRoleSchema } from '../../schema/update-member-role.schema';
+import { createAccountPerSeatBillingService } from './account-per-seat-billing.service';
+
+export function createAccountMembersService(client: SupabaseClient<Database>) {
+  return new AccountMembersService(client);
+}
+
+class AccountMembersService {
+  private readonly namespace = 'account-members';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name removeMemberFromAccount
+   * @description Removes a member from an account.
+   * @param params
+   */
+  async removeMemberFromAccount(params: z.infer<typeof RemoveMemberSchema>) {
+    const logger = await getLogger();
+
+    const ctx = {
+      namespace: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, `Removing member from account...`);
+
+    const { data, error } = await this.client
+      .from('accounts_memberships')
+      .delete()
+      .match({
+        account_id: params.accountId,
+        user_id: params.userId,
+      });
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        `Failed to remove member from account`,
+      );
+
+      throw error;
+    }
+
+    logger.info(
+      ctx,
+      `Successfully removed member from account. Verifying seat count...`,
+    );
+
+    const service = createAccountPerSeatBillingService(this.client);
+
+    await service.decreaseSeats(params.accountId);
+
+    return data;
+  }
+
+  /**
+   * @name updateMemberRole
+   * @description Updates the role of a member in an account.
+   * @param params
+   * @param adminClient
+   */
+  async updateMemberRole(
+    params: z.infer<typeof UpdateMemberRoleSchema>,
+    adminClient: SupabaseClient<Database>,
+  ) {
+    const logger = await getLogger();
+
+    const ctx = {
+      namespace: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, `Validating permissions to update member role...`);
+
+    const { data: canActionAccountMember, error: accountError } =
+      await this.client.rpc('can_action_account_member', {
+        target_user_id: params.userId,
+        target_team_account_id: params.accountId,
+      });
+
+    if (accountError ?? !canActionAccountMember) {
+      logger.error(
+        {
+          ...ctx,
+          accountError,
+        },
+        `Failed to validate permissions to update member role`,
+      );
+
+      throw new Error(`Failed to validate permissions to update member role`);
+    }
+
+    logger.info(ctx, `Permissions validated. Updating member role...`);
+
+    // we use the Admin client to update the role
+    // since we do not set any RLS policies on the accounts_memberships table
+    // for updating accounts_memberships. Instead, we use the can_action_account_member
+    // RPC to validate permissions to update the role
+    const { data, error } = await adminClient
+      .from('accounts_memberships')
+      .update({
+        account_role: params.role,
+      })
+      .match({
+        account_id: params.accountId,
+        user_id: params.userId,
+      });
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        `Failed to update member role`,
+      );
+
+      throw error;
+    }
+
+    logger.info(ctx, `Successfully updated member role`);
+
+    return data;
+  }
+
+  /**
+   * @name transferOwnership
+   * @description Transfers ownership of an account to another user.
+   * @param params
+   * @param adminClient
+   */
+  async transferOwnership(
+    params: z.infer<typeof TransferOwnershipConfirmationSchema>,
+    adminClient: SupabaseClient<Database>,
+  ) {
+    const logger = await getLogger();
+
+    const ctx = {
+      namespace: this.namespace,
+      ...params,
+    };
+
+    logger.info(ctx, `Transferring ownership of account...`);
+
+    const { data, error } = await adminClient.rpc(
+      'transfer_team_account_ownership',
+      {
+        target_account_id: params.accountId,
+        new_owner_id: params.userId,
+      },
+    );
+
+    if (error) {
+      logger.error(
+        { ...ctx, error },
+        `Failed to transfer ownership of account`,
+      );
+
+      throw error;
+    }
+
+    logger.info(ctx, `Successfully transferred ownership of account`);
+
+    return data;
+  }
+}

packages/features/team-accounts/src/server/services/account-per-seat-billing.service.ts

@@ -0,0 +1,227 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { createBillingGatewayService } from '@kit/billing-gateway';
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export function createAccountPerSeatBillingService(
+  client: SupabaseClient<Database>,
+) {
+  return new AccountPerSeatBillingService(client);
+}
+
+/**
+ * @name AccountPerSeatBillingService
+ * @description Service for managing per-seat billing for accounts.
+ */
+class AccountPerSeatBillingService {
+  private readonly namespace = 'accounts.per-seat-billing';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name getPerSeatSubscriptionItem
+   * @description Retrieves the per-seat subscription item for an account.
+   * @param accountId
+   */
+  async getPerSeatSubscriptionItem(accountId: string) {
+    const logger = await getLogger();
+    const ctx = { accountId, name: this.namespace };
+
+    logger.info(
+      ctx,
+      `Retrieving per-seat subscription item for account ${accountId}...`,
+    );
+
+    const { data, error } = await this.client
+      .from('subscriptions')
+      .select(
+        `
+          provider: billing_provider,
+          id,
+          subscription_items !inner (
+            quantity,
+            id,
+            type
+          )
+        `,
+      )
+      .eq('account_id', accountId)
+      .eq('subscription_items.type', 'per_seat')
+      .maybeSingle();
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        `Failed to get per-seat subscription item for account ${accountId}`,
+      );
+
+      throw error;
+    }
+
+    if (!data?.subscription_items) {
+      logger.info(
+        ctx,
+        `Account is not subscribed to a per-seat subscription. Exiting...`,
+      );
+
+      return;
+    }
+
+    logger.info(
+      ctx,
+      `Per-seat subscription item found for account ${accountId}. Will update...`,
+    );
+
+    return data;
+  }
+
+  /**
+   * @name increaseSeats
+   * @description Increases the number of seats for an account.
+   * @param accountId
+   */
+  async increaseSeats(accountId: string) {
+    const logger = await getLogger();
+    const subscription = await this.getPerSeatSubscriptionItem(accountId);
+
+    if (!subscription) {
+      return;
+    }
+
+    const subscriptionItems = subscription.subscription_items.filter((item) => {
+      return item.type === 'per_seat';
+    });
+
+    if (!subscriptionItems.length) {
+      return;
+    }
+
+    const billingGateway = createBillingGatewayService(subscription.provider);
+
+    const ctx = {
+      name: this.namespace,
+      accountId,
+      subscriptionItems,
+    };
+
+    logger.info(ctx, `Increasing seats for account ${accountId}...`);
+
+    const promises = subscriptionItems.map(async (item) => {
+      try {
+        logger.info(
+          {
+            name: this.namespace,
+            accountId,
+            subscriptionItemId: item.id,
+            quantity: item.quantity + 1,
+          },
+          `Updating subscription item...`,
+        );
+
+        await billingGateway.updateSubscriptionItem({
+          subscriptionId: subscription.id,
+          subscriptionItemId: item.id,
+          quantity: item.quantity + 1,
+        });
+
+        logger.info(
+          {
+            name: this.namespace,
+            accountId,
+            subscriptionItemId: item.id,
+            quantity: item.quantity + 1,
+          },
+          `Subscription item updated successfully`,
+        );
+      } catch (error) {
+        logger.error(
+          {
+            ...ctx,
+            error,
+          },
+          `Failed to increase seats for account ${accountId}`,
+        );
+      }
+    });
+
+    await Promise.all(promises);
+  }
+
+  /**
+   * @name decreaseSeats
+   * @description Decreases the number of seats for an account.
+   * @param accountId
+   */
+  async decreaseSeats(accountId: string) {
+    const logger = await getLogger();
+    const subscription = await this.getPerSeatSubscriptionItem(accountId);
+
+    if (!subscription) {
+      return;
+    }
+
+    const subscriptionItems = subscription.subscription_items.filter((item) => {
+      return item.type === 'per_seat';
+    });
+
+    if (!subscriptionItems.length) {
+      return;
+    }
+
+    const ctx = {
+      name: this.namespace,
+      accountId,
+      subscriptionItems,
+    };
+
+    logger.info(ctx, `Decreasing seats for account ${accountId}...`);
+
+    const billingGateway = createBillingGatewayService(subscription.provider);
+
+    const promises = subscriptionItems.map(async (item) => {
+      try {
+        logger.info(
+          {
+            name: this.namespace,
+            accountId,
+            subscriptionItemId: item.id,
+            quantity: item.quantity - 1,
+          },
+          `Updating subscription item...`,
+        );
+
+        await billingGateway.updateSubscriptionItem({
+          subscriptionId: subscription.id,
+          subscriptionItemId: item.id,
+          quantity: item.quantity - 1,
+        });
+
+        logger.info(
+          {
+            name: this.namespace,
+            accountId,
+            subscriptionItemId: item.id,
+            quantity: item.quantity - 1,
+          },
+          `Subscription item updated successfully`,
+        );
+      } catch (error) {
+        logger.error(
+          {
+            ...ctx,
+            error,
+          },
+          `Failed to decrease seats for account ${accountId}`,
+        );
+      }
+    });
+
+    await Promise.all(promises);
+  }
+}

packages/features/team-accounts/src/server/services/create-team-account.service.ts

@@ -0,0 +1,45 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export function createCreateTeamAccountService(
+  client: SupabaseClient<Database>,
+) {
+  return new CreateTeamAccountService(client);
+}
+
+class CreateTeamAccountService {
+  private readonly namespace = 'accounts.create-team-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  async createNewOrganizationAccount(params: { name: string; userId: string }) {
+    const logger = await getLogger();
+    const ctx = { ...params, namespace: this.namespace };
+
+    logger.info(ctx, `Creating new team account...`);
+
+    const { error, data } = await this.client.rpc('create_team_account', {
+      account_name: params.name,
+    });
+
+    if (error) {
+      logger.error(
+        {
+          error,
+          ...ctx,
+        },
+        `Error creating team account`,
+      );
+
+      throw new Error('Error creating team account');
+    }
+
+    logger.info(ctx, `Team account created successfully`);
+
+    return { data, error };
+  }
+}

packages/features/team-accounts/src/server/services/delete-team-account.service.ts

@@ -0,0 +1,61 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export function createDeleteTeamAccountService() {
+  return new DeleteTeamAccountService();
+}
+
+class DeleteTeamAccountService {
+  private readonly namespace = 'accounts.delete-team-account';
+
+  /**
+   * Deletes a team account. Permissions are not checked here, as they are
+   * checked in the server action.
+   *
+   * USE WITH CAUTION. THE USER MUST HAVE THE NECESSARY PERMISSIONS.
+   *
+   * @param adminClient
+   * @param params
+   */
+  async deleteTeamAccount(
+    adminClient: SupabaseClient<Database>,
+    params: {
+      accountId: string;
+      userId: string;
+    },
+  ) {
+    const logger = await getLogger();
+
+    const ctx = {
+      accountId: params.accountId,
+      userId: params.userId,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, `Requested team account deletion. Processing...`);
+
+    // we can use the admin client to delete the account.
+    const { error } = await adminClient
+      .from('accounts')
+      .delete()
+      .eq('id', params.accountId);
+
+    if (error) {
+      logger.error(
+        {
+          ...ctx,
+          error,
+        },
+        'Failed to delete team account',
+      );
+
+      throw new Error('Failed to delete team account');
+    }
+
+    logger.info(ctx, 'Successfully deleted team account');
+  }
+}

packages/features/team-accounts/src/server/services/leave-team-account.service.ts

@@ -0,0 +1,63 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+const Schema = z.object({
+  accountId: z.string().uuid(),
+  userId: z.string().uuid(),
+});
+
+export function createLeaveTeamAccountService(
+  client: SupabaseClient<Database>,
+) {
+  return new LeaveTeamAccountService(client);
+}
+
+/**
+ * @name LeaveTeamAccountService
+ * @description Service for leaving a team account.
+ */
+class LeaveTeamAccountService {
+  private readonly namespace = 'leave-team-account';
+
+  constructor(private readonly adminClient: SupabaseClient<Database>) {}
+
+  /**
+   * @name leaveTeamAccount
+   * @description Leave a team account
+   * @param params
+   */
+  async leaveTeamAccount(params: z.infer<typeof Schema>) {
+    const logger = await getLogger();
+
+    const ctx = {
+      ...params,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, 'Leaving team account...');
+
+    const { accountId, userId } = Schema.parse(params);
+
+    const { error } = await this.adminClient
+      .from('accounts_memberships')
+      .delete()
+      .match({
+        account_id: accountId,
+        user_id: userId,
+      });
+
+    if (error) {
+      logger.error({ ...ctx, error }, 'Failed to leave team account');
+
+      throw new Error('Failed to leave team account');
+    }
+
+    logger.info(ctx, 'Successfully left team account');
+  }
+}

packages/features/team-accounts/src/server/services/webhooks/account-invitations-webhook.service.ts

@@ -0,0 +1,175 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+type Invitation = Database['public']['Tables']['invitations']['Row'];
+
+const invitePath = '/join';
+
+const siteURL = process.env.NEXT_PUBLIC_SITE_URL;
+const productName = process.env.NEXT_PUBLIC_PRODUCT_NAME ?? '';
+const emailSender = process.env.EMAIL_SENDER;
+
+const env = z
+  .object({
+    invitePath: z
+      .string({
+        required_error: 'The property invitePath is required',
+      })
+      .min(1),
+    siteURL: z
+      .string({
+        required_error: 'NEXT_PUBLIC_SITE_URL is required',
+      })
+      .min(1),
+    productName: z
+      .string({
+        required_error: 'NEXT_PUBLIC_PRODUCT_NAME is required',
+      })
+      .min(1),
+    emailSender: z
+      .string({
+        required_error: 'EMAIL_SENDER is required',
+      })
+      .min(1),
+  })
+  .parse({
+    invitePath,
+    siteURL,
+    productName,
+    emailSender,
+  });
+
+export function createAccountInvitationsWebhookService(
+  client: SupabaseClient<Database>,
+) {
+  return new AccountInvitationsWebhookService(client);
+}
+
+class AccountInvitationsWebhookService {
+  private namespace = 'accounts.invitations.webhook';
+
+  constructor(private readonly adminClient: SupabaseClient<Database>) {}
+
+  /**
+   * @name handleInvitationWebhook
+   * @description Handles the webhook event for invitations
+   * @param invitation
+   */
+  async handleInvitationWebhook(invitation: Invitation) {
+    return this.dispatchInvitationEmail(invitation);
+  }
+
+  private async dispatchInvitationEmail(invitation: Invitation) {
+    const logger = await getLogger();
+
+    logger.info(
+      { invitation, name: this.namespace },
+      'Handling invitation webhook event...',
+    );
+
+    const inviter = await this.adminClient
+      .from('accounts')
+      .select('email, name')
+      .eq('id', invitation.invited_by)
+      .single();
+
+    if (inviter.error) {
+      logger.error(
+        {
+          error: inviter.error,
+          name: this.namespace,
+        },
+        'Failed to fetch inviter details',
+      );
+
+      throw inviter.error;
+    }
+
+    const team = await this.adminClient
+      .from('accounts')
+      .select('name')
+      .eq('id', invitation.account_id)
+      .single();
+
+    if (team.error) {
+      logger.error(
+        {
+          error: team.error,
+          name: this.namespace,
+        },
+        'Failed to fetch team details',
+      );
+
+      throw team.error;
+    }
+
+    const ctx = {
+      invitationId: invitation.id,
+      name: this.namespace,
+    };
+
+    logger.info(ctx, 'Invite retrieved. Sending invitation email...');
+
+    try {
+      const { renderInviteEmail } = await import('@kit/email-templates');
+      const { getMailer } = await import('@kit/mailers');
+
+      const mailer = await getMailer();
+      const link = this.getInvitationLink(
+        invitation.invite_token,
+        invitation.email,
+      );
+
+      const { html, subject } = await renderInviteEmail({
+        link,
+        invitedUserEmail: invitation.email,
+        inviter: inviter.data.name ?? inviter.data.email ?? '',
+        productName: env.productName,
+        teamName: team.data.name,
+      });
+
+      await mailer
+        .sendEmail({
+          from: env.emailSender,
+          to: invitation.email,
+          subject,
+          html,
+        })
+        .then(() => {
+          logger.info(ctx, 'Invitation email successfully sent!');
+        })
+        .catch((error) => {
+          console.error(error);
+
+          logger.error({ error, ...ctx }, 'Failed to send invitation email');
+        });
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error(error);
+      logger.warn({ error, ...ctx }, 'Failed to invite user to team');
+
+      return {
+        error,
+        success: false,
+      };
+    }
+  }
+
+  private getInvitationLink(token: string, email: string) {
+    const searchParams = new URLSearchParams({
+      invite_token: token,
+      email,
+    }).toString();
+
+    const href = new URL(env.invitePath, env.siteURL).href;
+
+    return `${href}?${searchParams}`;
+  }
+}

packages/features/team-accounts/src/server/services/webhooks/account-webhooks.service.ts

@@ -0,0 +1,90 @@
+import { z } from 'zod';
+
+import { getLogger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+type Account = Database['public']['Tables']['accounts']['Row'];
+
+export function createAccountWebhooksService() {
+  return new AccountWebhooksService();
+}
+
+class AccountWebhooksService {
+  private readonly namespace = 'accounts.webhooks';
+
+  async handleAccountDeletedWebhook(account: Account) {
+    const logger = await getLogger();
+
+    const ctx = {
+      accountId: account.id,
+      namespace: this.namespace,
+    };
+
+    logger.info(ctx, 'Received account deleted webhook. Processing...');
+
+    if (account.is_personal_account) {
+      logger.info(ctx, `Account is personal. We send an email to the user.`);
+
+      await this.sendDeleteAccountEmail(account);
+    }
+  }
+
+  private async sendDeleteAccountEmail(account: Account) {
+    const userEmail = account.email;
+    const userDisplayName = account.name ?? userEmail;
+
+    const emailSettings = this.getEmailSettings();
+
+    if (userEmail) {
+      await this.sendAccountDeletionEmail({
+        fromEmail: emailSettings.fromEmail,
+        productName: emailSettings.productName,
+        userDisplayName,
+        userEmail,
+      });
+    }
+  }
+
+  private async sendAccountDeletionEmail(params: {
+    fromEmail: string;
+    userEmail: string;
+    userDisplayName: string;
+    productName: string;
+  }) {
+    const { renderAccountDeleteEmail } = await import('@kit/email-templates');
+    const { getMailer } = await import('@kit/mailers');
+
+    const mailer = await getMailer();
+
+    const { html, subject } = await renderAccountDeleteEmail({
+      userDisplayName: params.userDisplayName,
+      productName: params.productName,
+    });
+
+    return mailer.sendEmail({
+      to: params.userEmail,
+      from: params.fromEmail,
+      subject,
+      html,
+    });
+  }
+
+  private getEmailSettings() {
+    const productName = process.env.NEXT_PUBLIC_PRODUCT_NAME;
+    const fromEmail = process.env.EMAIL_SENDER;
+
+    return z
+      .object({
+        productName: z.string(),
+        fromEmail: z
+          .string({
+            required_error: 'EMAIL_SENDER is required',
+          })
+          .min(1),
+      })
+      .parse({
+        productName,
+        fromEmail,
+      });
+  }
+}

packages/features/team-accounts/src/server/services/webhooks/index.ts

@@ -0,0 +1,2 @@
+export * from './account-webhooks.service';
+export * from './account-invitations-webhook.service';

packages/features/team-accounts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@kit/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "*.tsx", "src"],
+  "exclude": ["node_modules"]
+}