Refactor billing services with new AccountsApi

The billing services have been refactored to use the new AccountsApi and TeamAccountsApi. All methods that were previously defined in each billing service, including getting customer ID, getting permissions, etc., have been transferred to these APIs. This change improves the modularity and organization of the code.

apps/web/app/(dashboard)/home/(user)/_components/home-sidebar-account-selector.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+const features = {
+  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
+};
+
+export function HomeSidebarAccountSelector(props: {
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+
+  collapsed: boolean;
+}) {
+  const router = useRouter();
+
+  return (
+    <AccountSelector
+      collapsed={props.collapsed}
+      accounts={props.accounts}
+      features={features}
+      onAccountChange={(value) => {
+        if (value) {
+          const path = pathsConfig.app.accountHome.replace('[account]', value);
+          router.replace(path);
+        }
+      }}
+    />
+  );
+}

apps/web/app/(dashboard)/home/(user)/_components/home-sidebar.tsx

@@ -0,0 +1,54 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { If } from '@kit/ui/if';
+import { Sidebar, SidebarContent, SidebarNavigation } from '@kit/ui/sidebar';
+
+import { loadUserWorkspace } from '~/(dashboard)/home/(user)/_lib/server/load-user-workspace';
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountSidebarConfig } from '~/config/personal-account-sidebar.config';
+
+// home imports
+import { HomeSidebarAccountSelector } from '../_components/home-sidebar-account-selector';
+
+export function HomeSidebar() {
+  const collapsed = getSidebarCollapsed();
+  const { accounts, user, workspace } = use(loadUserWorkspace());
+
+  return (
+    <Sidebar collapsed={collapsed}>
+      <SidebarContent className={'h-16 justify-center'}>
+        <If
+          condition={featuresFlagConfig.enableTeamAccounts}
+          fallback={<AppLogo className={'py-2'} />}
+        >
+          <HomeSidebarAccountSelector
+            collapsed={collapsed}
+            accounts={accounts}
+          />
+        </If>
+      </SidebarContent>
+
+      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
+        <SidebarNavigation config={personalAccountSidebarConfig} />
+      </SidebarContent>
+
+      <div className={'absolute bottom-4 left-0 w-full'}>
+        <SidebarContent>
+          <ProfileAccountDropdownContainer
+            collapsed={collapsed}
+            user={user}
+            account={workspace}
+          />
+        </SidebarContent>
+      </div>
+    </Sidebar>
+  );
+}
+
+function getSidebarCollapsed() {
+  return cookies().get('sidebar-collapsed')?.value === 'true';
+}