Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

packages/features/accounts/src/components/account-selector.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 
 import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons';
-import { CheckIcon, PlusIcon } from 'lucide-react';
+import { Check, Plus } from 'lucide-react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
 import { Button } from '@kit/ui/button';
@@ -19,7 +19,7 @@ import { If } from '@kit/ui/if';
 import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
 import { cn } from '@kit/ui/utils';
 
-import { CreateOrganizationAccountDialog } from './create-organization-account-dialog';
+import { CreateTeamAccountDialog } from '../../../team-accounts/src/components/create-team-account-dialog';
 
 interface AccountSelectorProps {
   accounts: Array<{
@@ -64,7 +64,7 @@ export function AccountSelector({
 
   const Icon = (props: { item: string }) => {
     return (
-      <CheckIcon
+      <Check
         className={cn(
           'ml-auto h-4 w-4',
           value === props.item ? 'opacity-100' : 'opacity-0',
@@ -196,7 +196,7 @@ export function AccountSelector({
                       setOpen(false);
                     }}
                   >
-                    <PlusIcon className="mr-2 h-4 w-4" />
+                    <Plus className="mr-2 h-4 w-4" />
 
                     <span>Create Organization</span>
                   </Button>
@@ -208,7 +208,7 @@ export function AccountSelector({
       </Popover>
 
       <If condition={features.enableOrganizationCreation}>
-        <CreateOrganizationAccountDialog
+        <CreateTeamAccountDialog
           isOpen={isCreatingAccount}
           setIsOpen={setIsCreatingAccount}
         />

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -7,11 +7,11 @@ import Link from 'next/link';
 import type { Session } from '@supabase/gotrue-js';
 
 import {
-  EllipsisVerticalIcon,
-  HomeIcon,
-  LogOutIcon,
-  MessageCircleQuestionIcon,
-  ShieldIcon,
+  EllipsisVertical,
+  Home,
+  LogOut,
+  MessageCircleQuestion,
+  Shield,
 } from 'lucide-react';
 
 import {
@@ -87,7 +87,7 @@ export function PersonalAccountDropdown({
             </span>
           </div>
 
-          <EllipsisVerticalIcon
+          <EllipsisVertical
             className={'text-muted-foreground hidden h-8 group-hover:flex'}
           />
         </If>
@@ -119,7 +119,7 @@ export function PersonalAccountDropdown({
             className={'s-full flex items-center space-x-2'}
             href={paths.home}
           >
-            <HomeIcon className={'h-5'} />
+            <Home className={'h-5'} />
 
             <span>
               <Trans i18nKey={'common:homeTabLabel'} />
@@ -131,7 +131,7 @@ export function PersonalAccountDropdown({
 
         <DropdownMenuItem asChild>
           <Link className={'s-full flex items-center space-x-2'} href={'/docs'}>
-            <MessageCircleQuestionIcon className={'h-5'} />
+            <MessageCircleQuestion className={'h-5'} />
 
             <span>
               <Trans i18nKey={'common:documentation'} />
@@ -147,7 +147,7 @@ export function PersonalAccountDropdown({
               className={'s-full flex items-center space-x-2'}
               href={'/admin'}
             >
-              <ShieldIcon className={'h-5'} />
+              <Shield className={'h-5'} />
 
               <span>Admin</span>
             </Link>
@@ -162,7 +162,7 @@ export function PersonalAccountDropdown({
           onClick={signOutRequested}
         >
           <span className={'flex w-full items-center space-x-2'}>
-            <LogOutIcon className={'h-5'} />
+            <LogOut className={'h-5'} />
 
             <span>
               <Trans i18nKey={'auth:signOut'} />

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

@@ -18,6 +18,8 @@ import { Heading } from '@kit/ui/heading';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
+import { deletePersonalAccountAction } from '../../server/personal-accounts-server-actions';
+
 export function AccountDangerZone() {
   return <DeleteAccountContainer />;
 }
@@ -72,7 +74,7 @@ function DeleteAccountForm() {
   return (
     <Form {...form}>
       <form
-        action={deleteUserAccountAction}
+        action={deletePersonalAccountAction}
         className={'flex flex-col space-y-4'}
       >
         <div className={'flex flex-col space-y-6'}>
@@ -99,6 +101,7 @@ function DeleteAccountForm() {
               <Input
                 data-test={'delete-account-input-field'}
                 required
+                name={'confirmation'}
                 type={'text'}
                 className={'w-full'}
                 placeholder={''}

packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx

@@ -9,7 +9,7 @@ export function UpdateEmailFormContainer(props: { callbackPath: string }) {
   const { data: user, isPending } = useUser();
 
   if (isPending) {
-    return <LoadingOverlay />;
+    return <LoadingOverlay fullPage={false} />;
   }
 
   if (!user) {

packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx

@@ -15,7 +15,7 @@ export function UpdatePasswordFormContainer(
   const { data: user, isPending } = useUser();
 
   if (isPending) {
-    return <LoadingOverlay />;
+    return <LoadingOverlay fullPage={false} />;
   }
 
   const canUpdatePassword = user.identities?.some(

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

@@ -1,69 +0,0 @@
-'use server';
-
-import { redirect } from 'next/navigation';
-
-import { z } from 'zod';
-
-import { Logger } from '@kit/shared/logger';
-import { requireAuth } from '@kit/supabase/require-auth';
-import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
-
-import { CreateOrganizationAccountSchema } from '../schema/create-organization.schema';
-import { AccountsService } from './services/accounts.service';
-
-const ORGANIZATION_ACCOUNTS_PATH = z
-  .string({
-    required_error: 'Organization accounts path is required',
-  })
-  .min(1)
-  .parse(process.env.ORGANIZATION_ACCOUNTS_PATH);
-
-export async function createOrganizationAccountAction(
-  params: z.infer<typeof CreateOrganizationAccountSchema>,
-) {
-  const { name: accountName } = CreateOrganizationAccountSchema.parse(params);
-
-  const client = getSupabaseServerActionClient();
-  const accountsService = new AccountsService(client);
-  const session = await requireAuth(client);
-
-  if (session.error) {
-    redirect(session.redirectTo);
-  }
-
-  const createAccountResponse =
-    await accountsService.createNewOrganizationAccount({
-      name: accountName,
-      userId: session.data.user.id,
-    });
-
-  if (createAccountResponse.error) {
-    return handleError(
-      createAccountResponse.error,
-      `Error creating organization`,
-    );
-  }
-
-  const accountHomePath =
-    ORGANIZATION_ACCOUNTS_PATH + createAccountResponse.data.slug;
-
-  redirect(accountHomePath);
-}
-
-function handleError<Error = unknown>(
-  error: Error,
-  message: string,
-  organizationId?: string,
-) {
-  const exception = error instanceof Error ? error.message : undefined;
-
-  Logger.error(
-    {
-      exception,
-      organizationId,
-    },
-    message,
-  );
-
-  throw new Error(message);
-}

packages/features/accounts/src/server/personal-accounts-server-actions.ts

@@ -0,0 +1,63 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { Logger } from '@kit/shared/logger';
+import { requireAuth } from '@kit/supabase/require-auth';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+import { PersonalAccountsService } from './services/personal-accounts.service';
+
+export async function deletePersonalAccountAction(formData: FormData) {
+  const confirmation = formData.get('confirmation');
+
+  if (confirmation !== 'DELETE') {
+    throw new Error('Confirmation required to delete account');
+  }
+
+  const session = await requireAuth(getSupabaseServerActionClient());
+
+  if (session.error) {
+    redirect(session.redirectTo);
+  }
+
+  const client = getSupabaseServerActionClient();
+  const service = new PersonalAccountsService(client);
+  const userId = session.data.user.id;
+
+  Logger.info(
+    {
+      userId,
+      name: 'accounts',
+    },
+    `Deleting personal account...`,
+  );
+
+  const deleteAccountResponse = await service.deletePersonalAccount({
+    userId,
+  });
+
+  if (deleteAccountResponse.error) {
+    Logger.error(
+      {
+        error: deleteAccountResponse.error,
+        name: 'accounts',
+      },
+      `Error deleting personal account`,
+    );
+
+    throw new Error('Error deleting personal account');
+  }
+
+  Logger.info(
+    {
+      userId,
+      name: 'accounts',
+    },
+    `Personal account deleted successfully.`,
+  );
+
+  await client.auth.signOut();
+
+  redirect('/');
+}

packages/features/accounts/src/server/services/accounts.service.ts

@@ -1,46 +0,0 @@
-import { SupabaseClient } from '@supabase/supabase-js';
-
-import { Logger } from '@kit/shared/logger';
-import { Database } from '@kit/supabase/database';
-
-/**
- * @name AccountsService
- * @description Service for managing accounts in the application
- * @param Database - The Supabase database type to use
- * @example
- * const client = getSupabaseClient();
- * const accountsService = new AccountsService(client);
- *
- * accountsService.createNewOrganizationAccount({
- *  name: 'My Organization',
- *  userId: '123',
- *  });
- */
-export class AccountsService {
-  private readonly logger = new AccountsServiceLogger();
-
-  constructor(private readonly client: SupabaseClient<Database>) {}
-
-  createNewOrganizationAccount(params: { name: string; userId: string }) {
-    this.logger.logCreateNewOrganizationAccount(params);
-
-    return this.client.rpc('create_account', {
-      account_name: params.name,
-    });
-  }
-}
-
-class AccountsServiceLogger {
-  private namespace = 'accounts';
-
-  logCreateNewOrganizationAccount(params: { name: string; userId: string }) {
-    Logger.info(
-      this.withNamespace(params),
-      `Creating new organization account...`,
-    );
-  }
-
-  private withNamespace(params: object) {
-    return { ...params, name: this.namespace };
-  }
-}

packages/features/accounts/src/server/services/personal-accounts.service.ts

@@ -0,0 +1,17 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { Database } from '@kit/supabase/database';
+
+/**
+ * @name PersonalAccountsService
+ * @description Service for managing accounts in the application
+ * @param Database - The Supabase database type to use
+ * @example
+ * const client = getSupabaseClient();
+ * const accountsService = new AccountsService(client);
+ */
+export class PersonalAccountsService {
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  async deletePersonalAccount(param: { userId: string }) {}
+}

packages/features/admin/package.json

@@ -9,10 +9,30 @@
     "typecheck": "tsc --noEmit"
   },
   "prettier": "@kit/prettier-config",
+  "peerDependencies": {
+    "@kit/ui": "0.1.0"
+  },
+  "devDependencies": {
+    "@kit/eslint-config": "0.2.0",
+    "@kit/prettier-config": "0.1.0",
+    "@kit/tailwind-config": "0.1.0",
+    "@kit/tsconfig": "0.1.0"
+  },
   "exports": {
     ".": "./src/index.ts"
   },
-  "devDependencies": {
-    "@kit/prettier-config": "0.1.0"
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@kit/eslint-config/base",
+      "@kit/eslint-config/react"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
   }
 }

packages/features/admin/src/components/AdminHeader.tsx

@@ -1,20 +1,27 @@
 import Link from 'next/link';
 
-import { PageHeader } from '@/components/app/Page';
-import pathsConfig from '@/config/paths.config';
-import { ArrowLeftIcon } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
+import { PageHeader } from '@kit/ui/page';
 
-function AdminHeader({ children }: React.PropsWithChildren) {
+function AdminHeader({
+  children,
+  paths,
+}: React.PropsWithChildren<{
+  appHome: string;
+  paths: {
+    appHome: string;
+  };
+}>) {
   return (
     <PageHeader
       title={children}
       description={`Manage your app from the admin dashboard.`}
     >
-      <Link href={pathsConfig.appHome}>
+      <Link href={paths.appHome}>
         <Button variant={'link'}>
-          <ArrowLeftIcon className={'h-4'} />
+          <ArrowLeft className={'h-4'} />
           <span>Back to App</span>
         </Button>
       </Link>

packages/features/admin/src/components/AdminSidebar.tsx

@@ -1,31 +1,26 @@
 'use client';
 
-import Logo from '@/components/app/Logo';
-import { Sidebar, SidebarContent, SidebarItem } from '@/components/app/Sidebar';
-import { HomeIcon, UserIcon, UsersIcon } from 'lucide-react';
+import { Home, User, Users } from 'lucide-react';
 
-function AdminSidebar() {
+import { Sidebar, SidebarContent, SidebarItem } from '@kit/ui/sidebar';
+
+function AdminSidebar(props: { Logo: React.ReactNode }) {
   return (
     <Sidebar>
-      <SidebarContent className={'mb-6 mt-4 pt-2'}>
-        <Logo href={'/admin'} />
-      </SidebarContent>
+      <SidebarContent className={'mb-6 mt-4 pt-2'}>{props.Logo}</SidebarContent>
 
       <SidebarContent>
-        <SidebarItem end path={'/admin'} Icon={<HomeIcon className={'h-4'} />}>
+        <SidebarItem end path={'/admin'} Icon={<Home className={'h-4'} />}>
           Admin
         </SidebarItem>
 
-        <SidebarItem
-          path={'/admin/users'}
-          Icon={<UserIcon className={'h-4'} />}
-        >
+        <SidebarItem path={'/admin/users'} Icon={<User className={'h-4'} />}>
           Users
         </SidebarItem>
 
         <SidebarItem
           path={'/admin/organizations'}
-          Icon={<UsersIcon className={'h-4'} />}
+          Icon={<Users className={'h-4'} />}
         >
           Organizations
         </SidebarItem>

packages/features/auth/package.json

@@ -15,7 +15,6 @@
     "./shared": "./src/shared.ts",
     "./mfa": "./src/mfa.ts"
   },
-  "dependencies": {},
   "devDependencies": {
     "@kit/prettier-config": "0.1.0",
     "@kit/eslint-config": "0.2.0",

packages/features/auth/src/components/multi-factor-challenge-container.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import type { FormEventHandler } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { useMutation } from '@tanstack/react-query';
 
 import useFetchAuthFactors from '@kit/supabase/hooks/use-fetch-mfa-factors';
-import useSignOut from '@kit/supabase/hooks/use-sign-out';
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 import { Alert, AlertDescription } from '@kit/ui/alert';
 import { Button } from '@kit/ui/button';

packages/features/auth/src/components/oauth-provider-logo-image.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import { AtSignIcon, PhoneIcon } from 'lucide-react';
+import { AtSign, Phone } from 'lucide-react';
 
 const DEFAULT_IMAGE_SIZE = 18;
 
@@ -29,8 +29,8 @@ export const OauthProviderLogoImage: React.FC<{
 
 function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
   return {
-    password: <AtSignIcon className={'s-[18px]'} />,
-    phone: <PhoneIcon className={'s-[18px]'} />,
+    password: <AtSign className={'s-[18px]'} />,
+    phone: <Phone className={'s-[18px]'} />,
     google: '/assets/images/google.webp',
     facebook: '/assets/images/facebook.webp',
     twitter: '/assets/images/twitter.webp',

packages/features/auth/src/components/password-sign-up-container.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { CheckIcon } from 'lucide-react';
+import { Check } from 'lucide-react';
 
 import { useSignUpWithEmailAndPassword } from '@kit/supabase/hooks/use-sign-up-with-email-password';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -66,7 +66,7 @@ export function EmailPasswordSignUpContainer({
     <>
       <If condition={showVerifyEmailAlert}>
         <Alert variant={'success'}>
-          <CheckIcon className={'w-4'} />
+          <Check className={'w-4'} />
 
           <AlertTitle>
             <Trans i18nKey={'auth:emailConfirmationAlertHeading'} />

packages/features/team-accounts/package.json

@@ -11,15 +11,6 @@
   "exports": {
     "./components": "./src/components/index.ts"
   },
-  "dependencies": {
-    "@kit/supabase": "0.1.0",
-    "@kit/ui": "0.1.0",
-    "@kit/shared": "0.1.0",
-    "@kit/accounts": "0.1.0",
-    "@kit/mailers": "0.1.0",
-    "@kit/emails": "0.1.0",
-    "lucide-react": "^0.360.0"
-  },
   "devDependencies": {
     "@kit/eslint-config": "0.2.0",
     "@kit/prettier-config": "0.1.0",
@@ -28,7 +19,14 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@kit/supabase": "0.1.0",
+    "@kit/ui": "0.1.0",
+    "@kit/shared": "0.1.0",
+    "@kit/accounts": "0.1.0",
+    "@kit/mailers": "0.1.0",
+    "@kit/emails": "0.1.0",
+    "lucide-react": "^0.360.0"
   },
   "prettier": "@kit/prettier-config",
   "eslintConfig": {

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

@@ -0,0 +1,58 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { z } from 'zod';
+
+import { Logger } from '@kit/shared/logger';
+import { requireAuth } from '@kit/supabase/require-auth';
+import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
+
+import { CreateTeamSchema } from '../schema/create-team.schema';
+import { CreateTeamAccountService } from '../services/create-team-account.service';
+
+const TEAM_ACCOUNTS_HOME_PATH = z
+  .string({
+    required_error: 'variable TEAM_ACCOUNTS_HOME_PATH is required',
+  })
+  .min(1)
+  .parse(process.env.TEAM_ACCOUNTS_HOME_PATH);
+
+export async function createOrganizationAccountAction(
+  params: z.infer<typeof CreateTeamSchema>,
+) {
+  const { name: accountName } = CreateTeamSchema.parse(params);
+
+  const client = getSupabaseServerActionClient();
+  const service = new CreateTeamAccountService(client);
+  const session = await requireAuth(client);
+
+  if (session.error) {
+    redirect(session.redirectTo);
+  }
+
+  const userId = session.data.user.id;
+
+  const createAccountResponse = await service.createNewOrganizationAccount({
+    name: accountName,
+    userId,
+  });
+
+  if (createAccountResponse.error) {
+    Logger.error(
+      {
+        userId,
+        error: createAccountResponse.error,
+        name: 'accounts',
+      },
+      `Error creating organization account`,
+    );
+
+    throw new Error('Error creating organization account');
+  }
+
+  const accountHomePath =
+    TEAM_ACCOUNTS_HOME_PATH + '/' + createAccountResponse.data.slug;
+
+  redirect(accountHomePath);
+}

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

@@ -20,10 +20,10 @@ import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
-import { CreateOrganizationAccountSchema } from '../schema/create-organization.schema';
-import { createOrganizationAccountAction } from '../server/accounts-server-actions';
+import { createOrganizationAccountAction } from '../actions/create-team-account-server-actions';
+import { CreateTeamSchema } from '../schema/create-team.schema';
 
-export function CreateOrganizationAccountDialog(
+export function CreateTeamAccountDialog(
   props: React.PropsWithChildren<{
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
@@ -46,11 +46,11 @@ function CreateOrganizationAccountForm() {
   const [error, setError] = useState<boolean>();
   const [pending, startTransition] = useTransition();
 
-  const form = useForm<z.infer<typeof CreateOrganizationAccountSchema>>({
+  const form = useForm<z.infer<typeof CreateTeamSchema>>({
     defaultValues: {
       name: '',
     },
-    resolver: zodResolver(CreateOrganizationAccountSchema),
+    resolver: zodResolver(CreateTeamSchema),
   });
 
   return (

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

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
+import { Ellipsis } from 'lucide-react';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -126,7 +126,7 @@ function ActionsDropdown({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant={'ghost'} size={'icon'}>
-            <EllipsisIcon className={'h-5 w-5'} />
+            <Ellipsis className={'h-5 w-5'} />
           </Button>
         </DropdownMenuTrigger>
 

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

@@ -17,7 +17,7 @@ import { deleteInvitationAction } from '../../actions/account-invitations-server
 export const DeleteInvitationDialog: React.FC<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  invitationId: string;
+  invitationId: number;
 }> = ({ isOpen, setIsOpen, invitationId }) => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -45,7 +45,7 @@ function DeleteInvitationForm({
   invitationId,
   setIsOpen,
 }: {
-  invitationId: string;
+  invitationId: number;
   setIsOpen: (isOpen: boolean) => void;
 }) {
   const [isSubmitting, startTransition] = useTransition();

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

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { EllipsisIcon } from 'lucide-react';
+import { Ellipsis } from 'lucide-react';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -189,7 +189,7 @@ function ActionsDropdown({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant={'ghost'} size={'icon'}>
-            <EllipsisIcon className={'h-5 w-5'} />
+            <Ellipsis className={'h-5 w-5'} />
           </Button>
         </DropdownMenuTrigger>
 

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

@@ -3,7 +3,7 @@
 import { useState, useTransition } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PlusIcon, XIcon } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -181,7 +181,7 @@ function InviteMembersForm({
                               form.clearErrors(emailInputName);
                             }}
                           >
-                            <XIcon className={'h-4 lg:h-5'} />
+                            <X className={'h-4 lg:h-5'} />
                           </Button>
                         </TooltipTrigger>
 
@@ -208,7 +208,7 @@ function InviteMembersForm({
               }}
             >
               <span className={'flex items-center space-x-2'}>
-                <PlusIcon className={'h-4'} />
+                <Plus className={'h-4'} />
 
                 <span>
                   <Trans i18nKey={'organization:addAnotherMemberButtonLabel'} />

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

@@ -1,5 +1,5 @@
 import { z } from 'zod';
 
-export const CreateOrganizationAccountSchema = z.object({
+export const CreateTeamSchema = z.object({
   name: z.string().min(2).max(50),
 });

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

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

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

@@ -0,0 +1,21 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { Logger } from '@kit/shared/logger';
+import { Database } from '@kit/supabase/database';
+
+export class CreateTeamAccountService {
+  private readonly namespace = 'accounts.create-team-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  createNewOrganizationAccount(params: { name: string; userId: string }) {
+    Logger.info(
+      { ...params, namespace: this.namespace },
+      `Creating new organization account...`,
+    );
+
+    return this.client.rpc('create_account', {
+      account_name: params.name,
+    });
+  }
+}