Improve billing settings accessibility with both solutions A and B

Co-authored-by: ephraimduncan <55143799+ephraimduncan@users.noreply.github.com>

apps/remix/app/components/general/org-menu-switcher.tsx

@@ -282,18 +282,6 @@ export const OrgMenuSwitcher = () => {
                 </DropdownMenuItem>
               )}
 
-              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-                <Link to="/inbox">
-                  <Trans>Personal Inbox</Trans>
-                </Link>
-              </DropdownMenuItem>
-
-              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-                <Link to="/settings/profile">
-                  <Trans>Account</Trans>
-                </Link>
-              </DropdownMenuItem>
-
               {currentOrganisation &&
                 canExecuteOrganisationAction(
                   'MANAGE_ORGANISATION',
@@ -314,6 +302,18 @@ export const OrgMenuSwitcher = () => {
                 </DropdownMenuItem>
               )}
 
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/inbox">
+                  <Trans>Personal Inbox</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/settings/profile">
+                  <Trans>Account</Trans>
+                </Link>
+              </DropdownMenuItem>
+
               <DropdownMenuItem
                 className="text-muted-foreground px-4 py-2"
                 onClick={() => setLanguageSwitcherOpen(true)}

apps/remix/app/components/general/organisations/account-billing-organisations.tsx

@@ -0,0 +1,71 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CreditCardIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+export const AccountBillingOrganisations = () => {
+  const { _ } = useLingui();
+  const { user, organisations } = useSession();
+
+  if (!IS_BILLING_ENABLED()) {
+    return null;
+  }
+
+  // Filter to only organisations where user can manage billing
+  const billingOrganisations = organisations.filter((org) =>
+    canExecuteOrganisationAction('MANAGE_BILLING', org.currentOrganisationRole),
+  );
+
+  if (billingOrganisations.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="max-w-xl">
+      <h3 className="text-foreground mb-2 text-lg font-semibold">
+        <Trans>Billing Management</Trans>
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">
+        <Trans>Manage billing for organisations where you have billing permissions.</Trans>
+      </p>
+
+      <div className="space-y-3">
+        {billingOrganisations.map((org) => (
+          <Card key={org.id} className="overflow-hidden">
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <AvatarWithText
+                    avatarSrc={formatAvatarUrl(org.avatarImageId)}
+                    avatarClass="h-10 w-10"
+                    avatarFallback={org.name.slice(0, 1).toUpperCase()}
+                    primaryText={<span className="font-medium">{org.name}</span>}
+                    secondaryText={
+                      org.ownerUserId === user.id ? _(msg`Owner`) : _(msg`Can manage billing`)
+                    }
+                  />
+                </div>
+
+                <Button variant="outline" size="sm" asChild>
+                  <Link to={`/o/${org.url}/settings/billing`}>
+                    <CreditCardIcon className="mr-2 h-4 w-4" />
+                    <Trans>Manage Billing</Trans>
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -10,6 +10,7 @@ import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animat
 import { AccountDeleteDialog } from '~/components/dialogs/account-delete-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
 import { ProfileForm } from '~/components/forms/profile';
+import { AccountBillingOrganisations } from '~/components/general/organisations/account-billing-organisations';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamEmailUsage } from '~/components/general/teams/team-email-usage';
 import { appMetaTags } from '~/utils/meta';
@@ -47,6 +48,8 @@ export default function SettingsProfile() {
           )}
         </AnimatePresence>
 
+        <AccountBillingOrganisations />
+
         <AccountDeleteDialog />
       </div>
     </div>