@greatapps/common 1.1.790 → 1.1.791

package/src/components/account/AccountModalLayout.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
+import { IconX, type TablerIcon } from '@tabler/icons-react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/overlay/Dialog';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
+import { Skeleton } from '../ui/feedback/Skeleton';
+import { cn } from '../../infra/utils/clsx';
+
+/** Contagem exibida ao lado do título no topo; cada seção informa a sua. */
+const SectionCountContext = createContext<(count?: number) => void>(() => {});
+
+export function useSectionCount(count?: number) {
+  const setCount = useContext(SectionCountContext);
+
+  useEffect(() => {
+    setCount(count);
+    return () => setCount(undefined);
+  }, [count, setCount]);
+}
+
+const navItemClasses = cn(
+  'group border-0! rounded-lg flex items-center gap-2 h-10 px-2 py-3 transition-colors cursor-pointer',
+  // Mesma paleta do menu lateral do gpages (`navigation/NavItem`): selecionado em gray-50.
+  'bg-white hover:bg-gray-100 active:bg-gray-50 data-[state=active]:bg-gray-50',
+  'text-zinc-500 data-[state=active]:text-zinc-950',
+  'paragraph-small-medium data-[state=active]:paragraph-small-semibold',
+  'whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-zinc-300',
+  // Mobile: os itens viram uma faixa de abas rolável no topo.
+  'justify-center lg:justify-start lg:w-full'
+);
+
+type AccountModalLayoutProps = {
+  open: boolean;
+  onClose: () => void;
+  /** Título do menu lateral. */
+  title: string;
+  /** Título da seção aberta, no topo do conteúdo. */
+  sectionTitle: string;
+  activeSection: string;
+  onSectionChange: (section: string) => void;
+  /** Menu lateral: `AccountModalNavGroup` com `AccountModalNavItem`. */
+  navigation: ReactNode;
+  /** Conteúdo das seções (`AccountModalSection`). */
+  children: ReactNode;
+  /** Perfil ainda carregando: o menu e o conteúdo esperam em vez de cair numa seção qualquer. */
+  isLoading?: boolean;
+};
+
+/**
+ * Casca do modal Minha conta, no mesmo padrão do modal de configurações de página: menu lateral
+ * à esquerda e, à direita, topo com o título da seção e o X sobre uma divisória.
+ */
+export function AccountModalLayout({
+  open,
+  onClose,
+  title,
+  sectionTitle,
+  activeSection,
+  onSectionChange,
+  navigation,
+  children,
+  isLoading = false,
+}: AccountModalLayoutProps) {
+  const [sectionCount, setSectionCount] = useState<number | undefined>(undefined);
+  const registerCount = useCallback((count?: number) => setSectionCount(count), []);
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        showCloseButton={false}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className={cn(
+          'max-w-none! p-0 gap-0 flex flex-col lg:flex-row overflow-hidden border-0',
+          'rounded-t-2xl rounded-b-none h-[100dvh] w-full top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0',
+          'lg:rounded-lg lg:border lg:shadow-[0px_24px_70px_rgba(9,9,11,0.22)]',
+          'lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]',
+          'lg:w-[min(1260px,calc(100vw-48px))] lg:h-[min(824px,calc(100dvh-48px))]'
+        )}
+      >
+        <Tabs
+          value={activeSection}
+          onValueChange={onSectionChange}
+          orientation="vertical"
+          className="flex flex-col lg:flex-row w-full h-full flex-1 min-h-0 gap-0"
+        >
+          <TabsList
+            className={cn(
+              'flex gap-0 bg-transparent border-b-0 shrink-0',
+              'lg:flex-col lg:items-stretch lg:justify-start lg:overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300',
+              'lg:w-[280px] lg:shrink-0 lg:border-r lg:border-zinc-200 lg:p-5',
+              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide px-3 py-2 border-b border-zinc-200 lg:border-b-0',
+              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
+            )}
+          >
+            <span className="hidden lg:block text-zinc-950 paragraph-medium-semibold">{title}</span>
+            <div className="flex flex-row lg:flex-col lg:mt-5 lg:gap-5 lg:w-full">
+              {isLoading ? <AccountModalNavSkeleton /> : navigation}
+            </div>
+          </TabsList>
+
+          <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+            <div className="flex items-center gap-5 border-b border-zinc-200 pt-3 pr-4 pb-3 pl-5 shrink-0">
+              <DialogTitle className="text-zinc-950 paragraph-medium-semibold flex-1 min-w-0 truncate">
+                {sectionTitle}
+                {sectionCount != null && <span className="text-zinc-500"> ({sectionCount})</span>}
+              </DialogTitle>
+              <button
+                type="button"
+                onClick={onClose}
+                aria-label="Fechar"
+                className="group shrink-0 inline-flex size-10 items-center justify-center rounded-lg cursor-pointer border-none transition-colors hover:bg-zinc-100"
+              >
+                <IconX size={18} className="text-zinc-500 group-hover:text-zinc-950" />
+              </button>
+            </div>
+
+            <SectionCountContext.Provider value={registerCount}>
+              <div className="flex-1 min-h-0 flex flex-col">
+                {isLoading ? <AccountModalContentSkeleton /> : children}
+              </div>
+            </SectionCountContext.Provider>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AccountModalNavSkeleton() {
+  return (
+    <div className="flex flex-row lg:flex-col gap-2 lg:gap-3 w-full">
+      {Array.from({ length: 6 }).map((_, index) => (
+        <Skeleton key={index} className="h-10 w-24 lg:w-full rounded-lg shrink-0" />
+      ))}
+    </div>
+  );
+}
+
+function AccountModalContentSkeleton() {
+  return (
+    <div className="flex flex-col gap-4 p-5 lg:p-6">
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-24 w-full rounded-lg" />
+    </div>
+  );
+}
+
+type AccountModalNavGroupProps = {
+  label: string;
+  children: ReactNode;
+};
+
+/** Grupo do menu lateral. No mobile os itens de todos os grupos viram uma única faixa de abas. */
+export function AccountModalNavGroup({ label, children }: AccountModalNavGroupProps) {
+  return (
+    <div className="contents lg:flex lg:flex-col lg:gap-2">
+      <span className="hidden lg:block paragraph-xsmall-medium text-zinc-500">{label}</span>
+      <div className="contents lg:flex lg:flex-col lg:gap-0.5">{children}</div>
+    </div>
+  );
+}
+
+type AccountModalNavItemProps = {
+  value: string;
+  icon: TablerIcon;
+  label: string;
+};
+
+export function AccountModalNavItem({ value, icon: Icon, label }: AccountModalNavItemProps) {
+  return (
+    <TabsTrigger value={value} className={navItemClasses}>
+      <Icon size={18} className="shrink-0 text-zinc-500 group-data-[state=active]:text-zinc-950" />
+      {label}
+    </TabsTrigger>
+  );
+}
+
+type AccountModalSectionProps = {
+  value: string;
+  children: ReactNode;
+};
+
+export function AccountModalSection({ value, children }: AccountModalSectionProps) {
+  return (
+    <TabsContent value={value} className="h-full! relative overflow-hidden">
+      {children}
+    </TabsContent>
+  );
+}

package/src/components/account/AccountModals.tsx

@@ -1,6 +1,10 @@
 'use client';
 
-import ConfigurationsMyAccountModal from './ConfigurationsMyAccountModal';
+import { Suspense } from 'react';
+import MyAccountModal from './MyAccountModal';
+import { AccountHubLinkHandler } from './AccountHubLinkHandler';
+import AddFirstCardWarningModal from '../modals/cards/AddFirstCardWarningModal';
+import SwitchPaymentToCardModal from '../modals/cards/SwitchPaymentToCardModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import IsntPossibleDeleteAccountModal from './IsntPossibleDeleteAccountModal';
 import ConfirmDeleteAccountModal from './ConfirmDeleteAccountModal';
@@ -8,10 +12,16 @@ import ConfirmDeleteAccountModal from './ConfirmDeleteAccountModal';
 export default function AccountModals() {
   return (
     <>
-      <ConfigurationsMyAccountModal />
+      <Suspense fallback={null}>
+        <AccountHubLinkHandler />
+      </Suspense>
+      <MyAccountModal />
       <DeleteAccountModal />
       <IsntPossibleDeleteAccountModal />
       <ConfirmDeleteAccountModal />
+      {/* Cartões: montados aqui para todo app que usa o modal ganhar o fluxo sem registrar nada. */}
+      <AddFirstCardWarningModal />
+      <SwitchPaymentToCardModal />
     </>
   );
 }

package/src/components/account/DeleteAccountModal.tsx

@@ -78,7 +78,7 @@ export default function DeleteAccountModal() {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-lg lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto">
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-lg lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
         <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
           <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
             <DialogHeader className="p-0">

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -4,14 +4,22 @@ import { useTranslations } from 'next-intl';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
 import { Button } from '../ui/buttons/Button';
+import { WorkspaceSectionType } from '../../enums/WorkspaceSectionType';
 import { useAccountModals } from '../../store/useAccountModals';
+import useAccountHubActions from './hooks/useAccountHubActions';
 
 export default function IsntPossibleDeleteAccountModal() {
   const translate = useTranslations();
   const { activeModal, close, config } = useAccountModals();
+  const { openSection } = useAccountHubActions();
   const { onGoToSubscription } = config;
   const open = activeModal === 'isntPossibleDelete';
 
+  const goToSubscription = () => {
+    close();
+    openSection(WorkspaceSectionType.SUBSCRIPTION);
+  };
+
   return (
     <Dialog open={open} onOpenChange={close}>
       <DialogContent className="max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
@@ -40,7 +48,7 @@ export default function IsntPossibleDeleteAccountModal() {
           <Button
             variant="secondary"
             className="h-10 flex-1"
-            onClick={onGoToSubscription ?? close}
+            onClick={onGoToSubscription ?? goToSubscription}
           >
             {translate('common.account.cantDelete.goToSubscription')}
           </Button>

package/src/components/account/MyAccountModal.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  IconCreditCard,
+  IconFolder,
+  IconKey,
+  IconLink,
+  IconLock,
+  IconSettings2,
+  IconUser,
+  IconUsers,
+  type TablerIcon,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import {
+  AccountModalLayout,
+  AccountModalNavGroup,
+  AccountModalNavItem,
+  AccountModalSection,
+} from './AccountModalLayout';
+import { MyProfileSection } from './sections/MyProfileSection';
+import { PreferencesSection } from './sections/PreferencesSection';
+import { TokenSection } from './sections/TokenSection';
+import { SecuritySection } from './sections/SecuritySection';
+import { ChangePasswordSection } from './sections/ChangePasswordSection';
+import { SubscriptionSection } from './sections/SubscriptionSection';
+import { ProjectsSection } from './sections/ProjectsSection';
+import { TeamSection } from './sections/TeamSection';
+import { AffiliatesSection } from './sections/AffiliatesSection';
+import useMyAccountModal from './hooks/useMyAccountModal';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { WorkspaceSectionType } from '../../enums/WorkspaceSectionType';
+import { useAccountModals, type MyAccountSection } from '../../store/useAccountModals';
+import { useAuth } from '../../providers/auth.provider';
+import { useManagementPermissions } from '../../modules/auth/hooks/useManagementPermissions';
+import { useCurrentSubscription } from '../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-subscription-expired';
+import { useExternalContracting, useWhitelabel } from '../../providers/whitelabel.provider';
+
+type MyAccountNavSection = {
+  value: MyAccountSection;
+  icon: TablerIcon;
+  label: string;
+  visible: boolean;
+  content: ReactNode;
+};
+
+/** Modal Minha conta: assinatura, projetos, equipe e afiliados (workspace), e preferências, token e segurança. */
+export default function MyAccountModal() {
+  const translate = useTranslations();
+  const { activeModal, initialSection, openDeleteAccount, openIsntPossibleDelete, close } = useAccountModals();
+  const { isOwner, isOwnerOrAdmin } = useManagementPermissions();
+  const { isLoading: isProfileLoading } = useAuth();
+  const { isExternalContracting } = useExternalContracting();
+  const { whitelabel } = useWhitelabel();
+  const { data: { data: [subscription] = [] } = {} } = useCurrentSubscription();
+
+  const open = activeModal === 'account';
+
+  // Assinatura paga vigente impede excluir a conta: o fluxo manda para o aviso em vez da exclusão.
+  const isBlockingSubscription =
+    !!subscription &&
+    subscription.type !== 'free' &&
+    subscription.type !== 'trial' &&
+    subscription.active === true &&
+    !subscription.date_cancellation &&
+    !hasSubscriptionExpired(subscription.date_due);
+
+  const handleDeleteAccount = () => {
+    close();
+    if (isBlockingSubscription) {
+      openIsntPossibleDelete();
+    } else {
+      openDeleteAccount();
+    }
+  };
+
+  const accountSections: MyAccountNavSection[] = [
+    {
+      value: AccountSectionType.MY_PROFILE,
+      icon: IconUser,
+      label: translate('common.account.profile.title'),
+      visible: true,
+      content: <MyProfileSection onClose={close} />,
+    },
+    {
+      value: AccountSectionType.PREFERENCES,
+      icon: IconSettings2,
+      label: translate('common.preferences.title'),
+      visible: true,
+      content: <PreferencesSection onClose={close} />,
+    },
+    {
+      value: AccountSectionType.TOKEN,
+      icon: IconKey,
+      label: translate('common.account.token.title'),
+      visible: isOwner,
+      content: <TokenSection />,
+    },
+    {
+      value: AccountSectionType.SECURITY,
+      icon: IconLock,
+      label: translate('common.account.security.title'),
+      visible: isOwner,
+      content: (
+        <SecuritySection
+          setActiveSection={(section) => setActiveSection(section)}
+          onClose={close}
+          onDeleteAccount={handleDeleteAccount}
+        />
+      ),
+    },
+  ];
+
+  const workspaceSections: MyAccountNavSection[] = [
+    {
+      value: WorkspaceSectionType.SUBSCRIPTION,
+      icon: IconCreditCard,
+      label: translate('common.account.workspace.nav.subscription'),
+      visible: isOwnerOrAdmin && !isExternalContracting,
+      content: <SubscriptionSection />,
+    },
+    {
+      value: WorkspaceSectionType.PROJECTS,
+      icon: IconFolder,
+      label: translate('common.account.workspace.nav.projects'),
+      visible: true,
+      content: <ProjectsSection />,
+    },
+    {
+      value: WorkspaceSectionType.TEAM,
+      icon: IconUsers,
+      label: translate('common.account.workspace.nav.team'),
+      visible: true,
+      content: <TeamSection />,
+    },
+    {
+      value: WorkspaceSectionType.AFFILIATES,
+      icon: IconLink,
+      label: translate('common.account.workspace.nav.affiliates'),
+      visible: whitelabel?.id === 1 && isOwnerOrAdmin,
+      content: <AffiliatesSection />,
+    },
+  ];
+
+  const visibleAccountSections = accountSections.filter((section) => section.visible);
+  const visibleWorkspaceSections = workspaceSections.filter((section) => section.visible);
+  const visibleSections = [...visibleWorkspaceSections, ...visibleAccountSections];
+
+  // Troca de senha não tem item no menu: abre a partir de Segurança.
+  const changePasswordSection: MyAccountNavSection[] = isOwner
+    ? [
+        {
+          value: AccountSectionType.CHANGE_PASSWORD,
+          icon: IconLock,
+          label: translate('common.account.changePassword.title'),
+          visible: false,
+          content: <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />,
+        },
+      ]
+    : [];
+
+  const { activeSection, setActiveSection } = useMyAccountModal({
+    isOpen: open,
+    initialSection,
+    availableSections: [...visibleSections, ...changePasswordSection].map((section) => section.value),
+    isReady: !isProfileLoading,
+  });
+
+  const sectionTitle =
+    [...visibleSections, ...changePasswordSection].find((section) => section.value === activeSection)?.label ??
+    translate('common.account.workspace.title');
+
+  const renderNavItems = (sections: MyAccountNavSection[]) =>
+    sections.map((section) => (
+      <AccountModalNavItem key={section.value} value={section.value} icon={section.icon} label={section.label} />
+    ));
+
+  return (
+    <AccountModalLayout
+      open={open}
+      onClose={close}
+      title={translate('common.account.workspace.title')}
+      sectionTitle={sectionTitle}
+      activeSection={activeSection ?? ''}
+      onSectionChange={setActiveSection}
+      isLoading={isProfileLoading}
+      navigation={
+        <>
+          {visibleWorkspaceSections.length > 0 && (
+            <AccountModalNavGroup label={translate('common.account.workspace.groups.workspace')}>
+              {renderNavItems(visibleWorkspaceSections)}
+            </AccountModalNavGroup>
+          )}
+          <AccountModalNavGroup label={translate('common.account.workspace.groups.account')}>
+            {renderNavItems(visibleAccountSections)}
+          </AccountModalNavGroup>
+        </>
+      }
+    >
+      {visibleSections.map((section) => (
+        <AccountModalSection key={section.value} value={section.value}>
+          {section.content}
+        </AccountModalSection>
+      ))}
+
+      {changePasswordSection.map((section) => (
+        <AccountModalSection key={section.value} value={section.value}>
+          {section.content}
+        </AccountModalSection>
+      ))}
+    </AccountModalLayout>
+  );
+}

package/src/components/account/TwoFactorAuthModal.tsx

@@ -136,7 +136,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             if (isCodeComplete) handleSubmit();
           }}
         >
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+          <div className="flex-1 min-h-0 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 overscroll-contain lg:overflow-visible">
             <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
               <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
                 {translate.rich('common.account.twoFactor.instructions', {

package/src/components/account/hooks/useAccountHubActions.ts

@@ -0,0 +1,95 @@
+'use client';
+
+import { AccountHubFlow } from '../../../enums/AccountHubFlow';
+import { WorkspaceSectionType } from '../../../enums/WorkspaceSectionType';
+import { useCouponByCode } from '../../../modules/coupons/hooks/use-coupon-by-code.hook';
+import { isAccountSectionType } from '../../../modules/accounts/utils/is-account-section';
+import type { AccountHubLink } from '../../../modules/accounts/types/account-hub-link.type';
+import { useExternalContracting } from '../../../providers/whitelabel.provider';
+import { useAccountModals, type MyAccountSection } from '../../../store/useAccountModals';
+import { useProjectFlows } from '../../../store/useProjectFlows';
+import { useSubscriptionFlows } from '../../../store/useSubscriptionFlows';
+import { useTeamFlows } from '../../../store/useTeamFlows';
+
+export default function useAccountHubActions() {
+  const openConfigurations = useAccountModals((state) => state.openConfigurations);
+  const openWorkspace = useAccountModals((state) => state.openWorkspace);
+  const openChangePlan = useSubscriptionFlows((state) => state.openChangePlan);
+  const openPlansCatalogFlow = useSubscriptionFlows((state) => state.openPlansCatalog);
+  const requestOverdueReceipt = useSubscriptionFlows((state) => state.requestOverdueReceipt);
+  const openCreateProjectFlow = useProjectFlows((state) => state.openCreateProject);
+  const openAddUserFlow = useTeamFlows((state) => state.openAddUser);
+  const { redirectToExternal } = useExternalContracting();
+  const { mutate: findCouponByCode } = useCouponByCode();
+
+  const openSection = (section: MyAccountSection) => {
+    if (isAccountSectionType(section)) {
+      openConfigurations(section);
+      return;
+    }
+    openWorkspace(section);
+  };
+
+  const openPlansCatalog = (couponCode?: string) => {
+    if (redirectToExternal('plans')) return;
+    openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+
+    if (!couponCode) {
+      openPlansCatalogFlow();
+      return;
+    }
+
+    findCouponByCode(couponCode, {
+      onSuccess: (coupon) => openPlansCatalogFlow({ appliedCouponStripeData: coupon?.stripe_data }),
+      onError: () => openPlansCatalogFlow(),
+    });
+  };
+
+  const openAddons = () => {
+    if (redirectToExternal('contracting')) return;
+    openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+    openChangePlan();
+  };
+
+  const openReactivate = () => {
+    if (redirectToExternal('contracting')) return;
+    openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+    openChangePlan({ isReactivation: true });
+  };
+
+  const openOverdueReceipt = () => {
+    openWorkspace(WorkspaceSectionType.SUBSCRIPTION);
+    requestOverdueReceipt();
+  };
+
+  const openCreateProject = () => {
+    openWorkspace(WorkspaceSectionType.PROJECTS);
+    openCreateProjectFlow();
+  };
+
+  const openAddUser = () => {
+    openWorkspace(WorkspaceSectionType.TEAM);
+    openAddUserFlow();
+  };
+
+  const openLink = (link: AccountHubLink) => {
+    if (link.flow === AccountHubFlow.PLANS) return openPlansCatalog(link.couponCode);
+    if (link.flow === AccountHubFlow.ADDONS) return openAddons();
+    if (link.flow === AccountHubFlow.REACTIVATE) return openReactivate();
+    if (link.flow === AccountHubFlow.RECEIPT) return openOverdueReceipt();
+    if (link.flow === AccountHubFlow.CREATE_PROJECT) return openCreateProject();
+    if (link.flow === AccountHubFlow.ADD_USER) return openAddUser();
+    openSection(link.section);
+  };
+
+  return {
+    openSection,
+    openPlansCatalog,
+    openAddons,
+    openReactivate,
+    openOverdueReceipt,
+    openCreateProject,
+    openAddUser,
+    openLink,
+  };
+}

package/src/components/account/hooks/useAddCardWithPaymentSwitch.ts

@@ -0,0 +1,70 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { useCards } from '../../../modules/cards/hooks/cards.hook';
+import { useCurrentSubscription } from '../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { isFreeSubscription } from '../../../modules/subscriptions/utils/is-free-subscription';
+import { useAuth } from '../../../providers/auth.provider';
+import { useModalManager } from '../../../store/useModalManager';
+
+/**
+ * Abre o cadastro de cartão e, quando faz sentido, oferece em seguida a troca da forma de
+ * pagamento da assinatura.
+ *
+ * A decisão vive num hook porque os pontos que abrem o cadastro (cartões da assinatura, aviso de
+ * primeiro cartão e gestão de cartões) precisam da MESMA regra: espalhá-la é como o fluxo antigo
+ * divergia — o aviso prometia que "a próxima fatura será cobrada neste cartão", promessa que o
+ * backend não cumpria com a assinatura em boleto ou pix.
+ *
+ * `setAsDefault: false` quando vamos perguntar: com `set_default: true` o backend já aplica o
+ * padrão e reaponta as assinaturas cobráveis, e aí "Agora não" não teria o que recusar.
+ */
+export function useAddCardWithPaymentSwitch() {
+  const { openModal } = useModalManager();
+  const { account } = useAuth();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const { data: cardsData } = useCards({ includeVindi: true });
+
+  const activeSubscription = subscriptionData?.data?.[0] ?? null;
+
+  const canOfferSwitch = useMemo(() => {
+    // Vindi não passa por aqui: o cadastro é Stripe (SetupIntent) e a troca atômica vive no
+    // fluxo Stripe — oferecer levaria a conta a um erro sem saída.
+    if (account?.gateway === 'vindi') return false;
+
+    // Sem assinatura paga viva não há forma de pagamento para transferir.
+    if (!activeSubscription) return false;
+
+    // Cancelada não é "sem assinatura": o backend recusa a troca sobre uma assinatura morta.
+    if (!activeSubscription.active && activeSubscription.cancellation_reason) return false;
+
+    if (isFreeSubscription(activeSubscription) || activeSubscription.type === 'trial') return false;
+
+    return true;
+  }, [account?.gateway, activeSubscription]);
+
+  const openAddCard = useCallback(() => {
+    if (!canOfferSwitch) {
+      openModal('addCardModal');
+      return;
+    }
+
+    // Contado ANTES do cadastro: depois que o cartão entra, a lista já foi invalidada e o número
+    // viraria "quantos existem agora", que não distingue a conta que não tinha nenhum.
+    const previousCardsCount = (cardsData?.data ?? []).filter((card) => !card.deleted).length;
+
+    openModal('addCardModal', {
+      setAsDefault: false,
+      onCardAdded: (cardId: string) => {
+        openModal('switchPaymentToCardModal', {
+          cardId,
+          subscriptionId: activeSubscription?.id,
+          currentPaymentMethod: activeSubscription?.payment_method ?? null,
+          previousCardsCount,
+        });
+      },
+    });
+  }, [canOfferSwitch, openModal, activeSubscription, cardsData]);
+
+  return { openAddCard, canOfferSwitch };
+}