Add account selection functionality to mobile navigation

Added a new type, 'Accounts', and used it to enable account selection from the mobile navigation menu. The 'Accounts' type incorporates the label, value, and image of a given account. This change will improve the app's usability, making it easier for users to navigate different accounts directly from their mobile devices. For custom plans, a null check has been implemented to avoid rendering null values.

apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx

@@ -27,6 +27,12 @@ import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
 
+type Accounts = Array<{
+  label: string | null;
+  value: string | null;
+  image: string | null;
+}>;
+
 const features = {
   enableTeamAccounts: featureFlagsConfig.enableTeamAccounts,
   enableTeamCreation: featureFlagsConfig.enableTeamCreation,
@@ -35,6 +41,7 @@ const features = {
 export const TeamAccountLayoutMobileNavigation = (
   props: React.PropsWithChildren<{
     account: string;
+    accounts: Accounts;
   }>,
 ) => {
   const signOut = useSignOut();
@@ -76,7 +83,7 @@ export const TeamAccountLayoutMobileNavigation = (
       </DropdownMenuTrigger>
 
       <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
-        <TeamAccountsModal />
+        <TeamAccountsModal accounts={props.accounts} />
 
         {Links}
 
@@ -130,7 +137,7 @@ function SignOutDropdownItem(
   );
 }
 
-function TeamAccountsModal() {
+function TeamAccountsModal(props: { accounts: Accounts }) {
   const router = useRouter();
 
   return (
@@ -157,6 +164,7 @@ function TeamAccountsModal() {
 
         <div className={'py-16'}>
           <AccountSelector
+            className={'w-full max-w-full'}
             onAccountChange={(value) => {
               const path = value
                 ? pathsConfig.app.accountHome.replace('[account]', value)
@@ -164,7 +172,7 @@ function TeamAccountsModal() {
 
               router.replace(path);
             }}
-            accounts={[]}
+            accounts={props.accounts}
             features={features}
           />
         </div>

apps/web/app/home/[account]/layout.tsx

@@ -61,7 +61,10 @@ function TeamWorkspaceLayout({
         <AppLogo />
 
         <div className={'flex space-x-4'}>
-          <TeamAccountLayoutMobileNavigation account={params.account} />
+          <TeamAccountLayoutMobileNavigation
+            accounts={accounts}
+            account={params.account}
+          />
         </div>
       </PageMobileNavigation>
 

packages/billing/gateway/src/components/plan-picker.tsx

@@ -213,7 +213,7 @@ export function PlanPicker(
                         return item.interval === selectedInterval;
                       });
 
-                      if (!plan) {
+                      if (!plan || plan.custom) {
                         return null;
                       }
 

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

@@ -38,6 +38,7 @@ interface AccountSelectorProps {
 
   selectedAccount?: string;
   collapsed?: boolean;
+  className?: string;
 
   onAccountChange: (value: string | undefined) => void;
 }
@@ -48,6 +49,7 @@ export function AccountSelector({
   accounts,
   selectedAccount,
   onAccountChange,
+  className,
   features = {
     enableTeamCreation: true,
   },
@@ -104,6 +106,7 @@ export function AccountSelector({
                 'justify-start': !collapsed,
                 'justify-center': collapsed,
               },
+              className,
             )}
           >
             <If