Remove team account related services and actions

Removed services and actions related to team account deletion as well as updated paths within other dependent files, better reflecting their new locations. Also, added a new service titled 'AccountBillingService' for handling billing-related operations and restructured the form layout and handled translation in 'team-account-danger-zone' component.

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

@@ -17,6 +17,7 @@ import {
 } from '@kit/ui/command';
 import { If } from '@kit/ui/if';
 import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
+import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
 import { CreateTeamAccountDialog } from '../../../team-accounts/src/components/create-team-account-dialog';
@@ -29,8 +30,8 @@ interface AccountSelectorProps {
   }>;
 
   features: {
-    enableOrganizationAccounts: boolean;
-    enableOrganizationCreation: boolean;
+    enableTeamAccounts: boolean;
+    enableTeamCreation: boolean;
   };
 
   selectedAccount?: string;
@@ -46,8 +47,8 @@ export function AccountSelector({
   selectedAccount,
   onAccountChange,
   features = {
-    enableOrganizationAccounts: true,
-    enableOrganizationCreation: true,
+    enableTeamAccounts: true,
+    enableTeamCreation: true,
   },
   collapsed = false,
 }: React.PropsWithChildren<AccountSelectorProps>) {
@@ -75,6 +76,10 @@ export function AccountSelector({
 
   const selected = accounts.find((account) => account.value === value);
 
+  if (!features.enableTeamAccounts) {
+    return null;
+  }
+
   return (
     <>
       <Popover open={open} onOpenChange={setOpen}>
@@ -150,9 +155,9 @@ export function AccountSelector({
 
               <CommandSeparator />
 
-              <If condition={features.enableOrganizationAccounts}>
+              <If condition={features.enableTeamAccounts}>
                 <If condition={accounts.length > 0}>
-                  <CommandGroup heading={'Your Organizations'}>
+                  <CommandGroup heading={<Trans i18nKey={'teams:yourTeams'} />}>
                     {(accounts ?? []).map((account) => (
                       <CommandItem
                         key={account.value}
@@ -185,7 +190,7 @@ export function AccountSelector({
                 </If>
               </If>
 
-              <If condition={features.enableOrganizationCreation}>
+              <If condition={features.enableTeamCreation}>
                 <CommandGroup>
                   <Button
                     size={'sm'}
@@ -198,7 +203,9 @@ export function AccountSelector({
                   >
                     <Plus className="mr-2 h-4 w-4" />
 
-                    <span>Create Organization</span>
+                    <span>
+                      <Trans i18nKey={'teams:createTeam'} />
+                    </span>
                   </Button>
                 </CommandGroup>
               </If>
@@ -207,7 +214,7 @@ export function AccountSelector({
         </PopoverContent>
       </Popover>
 
-      <If condition={features.enableOrganizationCreation}>
+      <If condition={features.enableTeamCreation}>
         <CreateTeamAccountDialog
           isOpen={isCreatingAccount}
           setIsOpen={setIsCreatingAccount}

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx

@@ -18,6 +18,7 @@ import {
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
+  AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@kit/ui/alert-dialog';
@@ -166,18 +167,20 @@ function ConfirmUnenrollFactorModal(
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <AlertDialogAction
-          className={'w-full'}
-          type={'button'}
-          disabled={unEnroll.isPending}
-          onClick={() => onUnenrollRequested(props.factorId)}
-        >
-          <Trans i18nKey={'account:unenrollFactorModalButtonLabel'} />
-        </AlertDialogAction>
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
 
-        <AlertDialogCancel>
-          <Trans i18nKey={'common:cancel'} />
-        </AlertDialogCancel>
+          <AlertDialogAction
+            className={'w-full'}
+            type={'button'}
+            disabled={unEnroll.isPending}
+            onClick={() => onUnenrollRequested(props.factorId)}
+          >
+            <Trans i18nKey={'account:unenrollFactorModalButtonLabel'} />
+          </AlertDialogAction>
+        </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
   );

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -212,20 +212,22 @@ function MultiFactorAuthSetupForm({
                 name={'verificationCode'}
               />
 
-              <Button
-                disabled={!verificationCodeForm.formState.isValid}
-                type={'submit'}
-              >
-                {state.loading ? (
-                  <Trans i18nKey={'account:verifyingCode'} />
-                ) : (
-                  <Trans i18nKey={'account:enableMfaFactor'} />
-                )}
-              </Button>
+              <div className={'flex space-x-2'}>
+                <Button type={'button'} variant={'ghost'} onClick={onCancel}>
+                  <Trans i18nKey={'common:cancel'} />
+                </Button>
 
-              <Button type={'button'} variant={'ghost'} onClick={onCancel}>
-                <Trans i18nKey={'common:cancel'} />
-              </Button>
+                <Button
+                  disabled={!verificationCodeForm.formState.isValid}
+                  type={'submit'}
+                >
+                  {state.loading ? (
+                    <Trans i18nKey={'account:verifyingCode'} />
+                  ) : (
+                    <Trans i18nKey={'account:enableMfaFactor'} />
+                  )}
+                </Button>
+              </div>
             </div>
           </form>
         </Form>
@@ -362,13 +364,15 @@ function FactorNameForm(
             }}
           />
 
-          <Button type={'submit'}>
-            <Trans i18nKey={'account:factorNameSubmitLabel'} />
-          </Button>
+          <div className={'flex space-x-2'}>
+            <Button type={'button'} variant={'ghost'} onClick={props.onCancel}>
+              <Trans i18nKey={'common:cancel'} />
+            </Button>
 
-          <Button type={'button'} variant={'ghost'} onClick={props.onCancel}>
-            <Trans i18nKey={'common:cancel'} />
-          </Button>
+            <Button type={'submit'}>
+              <Trans i18nKey={'account:factorNameSubmitLabel'} />
+            </Button>
+          </div>
         </div>
       </form>
     </Form>

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+
 import {
   usePersonalAccountData,
   useRevalidatePersonalAccountDataQuery,
@@ -8,7 +10,11 @@ import { UpdateAccountDetailsForm } from './update-account-details-form';
 
 export function UpdateAccountDetailsFormContainer() {
   const user = usePersonalAccountData();
-  const invalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
+  const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
+
+  if (user.isLoading) {
+    return <LoadingOverlay fullPage={false} />;
+  }
 
   if (!user.data) {
     return null;
@@ -18,7 +24,7 @@ export function UpdateAccountDetailsFormContainer() {
     <UpdateAccountDetailsForm
       displayName={user.data.name ?? ''}
       userId={user.data.id}
-      onUpdate={invalidateUserDataQuery}
+      onUpdate={revalidateUserDataQuery}
     />
   );
 }