@greatapps/common 1.1.790 → 1.1.791

package/src/components/account/sections/team/steps/UserInformationStep.tsx

@@ -0,0 +1,423 @@
+'use client';
+
+import { useEffect, useRef, type ChangeEvent, type ReactNode } from 'react';
+import {
+  IconEye,
+  IconInfoCircle,
+  IconLock,
+  IconShieldCheck,
+  IconTool,
+  IconTrash,
+  IconUpload,
+  IconUserEdit,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Button } from '../../../../ui/buttons/Button';
+import { Separator } from '../../../../ui/data-display/Separator';
+import { Toast } from '../../../../ui/feedback/Toast';
+import { FormField } from '../../../../ui/form/FormField';
+import PhoneInput from '../../../../ui/form/PhoneInput';
+import { RadioGroup } from '../../../../ui/form/RadioGroup';
+import { RadioOptionFieldIcon } from '../../../../ui/form/RadioOptionFieldIcon';
+import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../../../modules/images/constants/image.constants';
+import {
+  checkUserExistsAction,
+  updateAccountUserByIdAction,
+} from '../../../../../modules/accounts/actions/account-management.action';
+import { ACCOUNT_USERS_QUERY_KEY } from '../../../../../modules/accounts/hooks/useAccountManagement';
+import { UserProfile, type User } from '../../../../../modules/users/schema';
+import { useAuthQueryKey } from '../../../../../hooks/useAuthQueryKey';
+import { useDebounce } from '../../../../../hooks/useDebounce';
+import { useIsDefaultWhitelabel } from '../../../../../providers/whitelabel.provider';
+import { withAction } from '../../../../../utils/withAction';
+import { cn } from '../../../../../infra/utils/clsx';
+import type { UserFormData } from '../user-form.schema';
+
+const PROFILE_DESCRIPTION_KEYS = {
+  [UserProfile.owner]: 'profileOwner',
+  [UserProfile.admin]: 'profileAdmin',
+  [UserProfile.collaborator]: 'profileCollaborator',
+  [UserProfile.viewer]: 'profileViewer',
+} as const satisfies Record<UserProfile, string>;
+
+function toUserProfile(value: string): UserProfile {
+  const profile = Object.values(UserProfile).find((candidate) => candidate === value);
+  return profile ?? UserProfile.collaborator;
+}
+
+const PROFILE_ICONS: Record<UserProfile, ReactNode> = {
+  [UserProfile.owner]: <IconShieldCheck size={20} />,
+  [UserProfile.admin]: <IconShieldCheck size={20} />,
+  [UserProfile.collaborator]: <IconUserEdit size={20} />,
+  [UserProfile.viewer]: <IconEye size={20} />,
+};
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+type UserInformationStepProps = {
+  mode: 'add' | 'edit';
+  photoPreview?: string | null;
+  onPhotoChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onRemovePhoto?: () => void;
+  isOwnProfile?: boolean;
+  canEditUser?: boolean;
+  onOpenChangePhone?: () => void;
+  onOpenChangeEmail?: () => void;
+  onOpenTwoFactor?: () => void;
+  onOpenChangePassword?: () => void;
+  canChangeProfile?: boolean;
+  targetUser?: User;
+  twoFactorEnabled?: boolean;
+  onTwoFactorChange?: (enabled: boolean) => void;
+  onProfileChange?: (profile: UserProfile) => void;
+  onEmailExistsError?: (error: string | null) => void;
+  onEmailChecking?: (checking: boolean) => void;
+  emailExistsError?: string | null;
+  isCheckingEmail?: boolean;
+};
+
+/** Passo de informações do sheet de usuário: foto, dados pessoais, segurança e função. */
+export function UserInformationStep({
+  mode,
+  photoPreview,
+  onPhotoChange,
+  onRemovePhoto,
+  isOwnProfile = false,
+  canEditUser = false,
+  onOpenChangePhone,
+  onOpenChangeEmail,
+  onOpenTwoFactor,
+  onOpenChangePassword,
+  canChangeProfile = true,
+  targetUser,
+  twoFactorEnabled = false,
+  onTwoFactorChange,
+  onProfileChange,
+  onEmailExistsError,
+  onEmailChecking,
+  emailExistsError,
+  isCheckingEmail = false,
+}: UserInformationStepProps) {
+  const translateStep = useTranslations('common.account.workspace.team.informationStep');
+  const translateProfile = useTranslations('common.account.workspace.team.profiles');
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const form = useFormContext<UserFormData>();
+  const { register, watch, setValue, formState } = form;
+
+  const role = useWatch({ control: form.control, name: 'profile' });
+  const phoneValue = useWatch({ control: form.control, name: 'phone' });
+  const emailValue = useWatch({ control: form.control, name: 'email' });
+  const isEditMode = mode === 'edit';
+
+  const queryClient = useQueryClient();
+  const accountUsersKey = useAuthQueryKey([...ACCOUNT_USERS_QUERY_KEY]);
+
+  const toggleTwoFactorMutation = useMutation({
+    mutationFn: (enabled: boolean) =>
+      withAction(updateAccountUserByIdAction)(targetUser!.id, { two_factor_authentication: enabled }),
+    onMutate: (enabled) => {
+      const previous = twoFactorEnabled;
+      onTwoFactorChange?.(enabled);
+      return { previous };
+    },
+    onSuccess: (_data, enabled) => {
+      queryClient.invalidateQueries({ queryKey: accountUsersKey });
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={enabled ? translateStep('twoFactorEnabled') : translateStep('twoFactorDisabled')}
+          toastId={toastId}
+        />
+      ));
+    },
+    onError: (error, _enabled, context) => {
+      if (context) onTwoFactorChange?.(context.previous);
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={error instanceof Error ? error.message : translateStep('twoFactorError')}
+          toastId={toastId}
+        />
+      ));
+    },
+  });
+
+  const debouncedEmail = useDebounce(emailValue || '', 500);
+
+  // No cadastro, avisa antes de avançar quando o e-mail já pertence a outra conta.
+  useEffect(() => {
+    if (isEditMode || !debouncedEmail || !EMAIL_REGEX.test(debouncedEmail)) {
+      onEmailExistsError?.(null);
+      onEmailChecking?.(false);
+      return;
+    }
+
+    let cancelled = false;
+    onEmailChecking?.(true);
+
+    withAction(checkUserExistsAction)(debouncedEmail)
+      .then((result) => {
+        if (cancelled) return;
+        onEmailExistsError?.(result.exists ? translateStep('emailAlreadyRegistered') : null);
+      })
+      .catch(() => {
+        if (!cancelled) onEmailExistsError?.(null);
+      })
+      .finally(() => {
+        if (!cancelled) onEmailChecking?.(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedEmail, isEditMode, onEmailExistsError, onEmailChecking]);
+
+  const readOnly = isEditMode && !isOwnProfile && !canEditUser;
+
+  const visibleProfiles = Object.values(UserProfile).filter((profile) =>
+    role === UserProfile.owner ? profile === UserProfile.owner : profile !== UserProfile.owner
+  );
+
+  return (
+    <div className="flex flex-col gap-6 px-5 py-6 flex-1">
+      <span className="text-zinc-950 paragraph-medium-semibold">{translateStep('sectionTitle')}</span>
+
+      <div className="flex items-center gap-3">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={ACCEPTED_IMAGE_FORMATS_STRING}
+          className="hidden"
+          onChange={onPhotoChange}
+          disabled={readOnly}
+        />
+        {photoPreview ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={photoPreview}
+            alt={translateStep('photoAlt')}
+            className={cn(
+              'size-12 rounded-full object-cover shrink-0',
+              readOnly ? 'cursor-default' : 'cursor-pointer'
+            )}
+            onClick={readOnly ? undefined : () => fileInputRef.current?.click()}
+          />
+        ) : (
+          <div
+            className={cn(
+              'size-12 shrink-0 rounded-full bg-zinc-50 border border-dashed border-zinc-200 flex items-center justify-center',
+              readOnly ? 'cursor-default' : 'cursor-pointer'
+            )}
+            onClick={readOnly ? undefined : () => fileInputRef.current?.click()}
+          >
+            <IconUpload size={20} className="text-zinc-400" />
+          </div>
+        )}
+        {photoPreview ? (
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-8!"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={readOnly}
+            >
+              {translateStep('changePhoto')}
+            </Button>
+            <Button type="button" variant="ghost" className="h-8!" onClick={onRemovePhoto} disabled={readOnly}>
+              <IconTrash size={16} className="text-zinc-500" />
+            </Button>
+          </div>
+        ) : (
+          <Button
+            type="button"
+            variant="secondary"
+            className="h-8!"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={readOnly}
+          >
+            {translateStep('addPhoto')}
+          </Button>
+        )}
+      </div>
+
+      <FormField
+        label={translateStep('firstName')}
+        required
+        placeholder={translateStep('namePlaceholder')}
+        disabled={readOnly}
+        error={!!formState.errors.name}
+        errorMessage={formState.errors.name?.message}
+        {...register('name')}
+      />
+
+      <FormField
+        label={translateStep('lastName')}
+        placeholder={translateStep('namePlaceholder')}
+        disabled={readOnly}
+        {...register('lastName')}
+      />
+
+      {isEditMode && isOwnProfile ? (
+        <div className="relative">
+          <PhoneInput
+            label={translateStep('phone')}
+            value={phoneValue || ''}
+            onChange={(value) => setValue('phone', value, { shouldValidate: true, shouldDirty: true })}
+            disabled
+            classnameContainer="bg-gray-50 border-0! opacity-100! pointer-events-none cursor-not-allowed"
+          />
+          <button
+            type="button"
+            className="absolute right-0 top-0 paragraph-xsmall-semibold text-zinc-950 underline cursor-pointer"
+            onClick={onOpenChangePhone}
+          >
+            {translateStep('change')}
+          </button>
+        </div>
+      ) : (
+        <PhoneInput
+          label={translateStep('phone')}
+          placeholder={translateStep('phonePlaceholder')}
+          value={phoneValue || ''}
+          onChange={(value) => setValue('phone', value, { shouldValidate: true, shouldDirty: true })}
+          disabled={readOnly}
+          error={!!formState.errors.phone}
+          errorMessage={formState.errors.phone?.message}
+        />
+      )}
+
+      {isEditMode && isOwnProfile ? (
+        <div className="relative">
+          <FormField
+            label={translateStep('email')}
+            value={watch('email')}
+            disabled
+            classnameContainer="bg-gray-50 border-0! opacity-100! pointer-events-none cursor-not-allowed"
+          />
+          <button
+            type="button"
+            className="absolute right-0 top-0 paragraph-xsmall-semibold text-zinc-950 underline cursor-pointer"
+            onClick={onOpenChangeEmail}
+          >
+            {translateStep('change')}
+          </button>
+        </div>
+      ) : (
+        <FormField
+          label={translateStep('email')}
+          required={!readOnly}
+          type="email"
+          placeholder={translateStep('emailPlaceholder')}
+          disabled={readOnly}
+          error={!!formState.errors.email || !!emailExistsError}
+          errorMessage={formState.errors.email?.message || emailExistsError || undefined}
+          hintMessage={isCheckingEmail ? translateStep('checkingEmail') : undefined}
+          {...register('email')}
+        />
+      )}
+
+      {!isEditMode && (
+        <div
+          className={cn(
+            'flex items-center gap-3 p-4 rounded-lg',
+            isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+          )}
+        >
+          <IconInfoCircle size={16} className="text-zinc-950 shrink-0 mt-0.5" />
+          <p className="paragraph-small-regular text-zinc-950">{translateStep('inviteInfo')}</p>
+        </div>
+      )}
+
+      <Separator />
+
+      {isEditMode && (isOwnProfile || canEditUser) && (
+        <>
+          <span className="text-zinc-950 paragraph-medium-semibold">{translateStep('securityTitle')}</span>
+
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-4 p-4 border border-zinc-200 rounded-lg">
+              <div className="size-10 rounded-lg bg-zinc-50 flex items-center justify-center shrink-0">
+                <IconTool size={20} className="text-zinc-600" />
+              </div>
+              <span className="flex-1 paragraph-small-semibold text-zinc-950">
+                {translateStep('twoFactor')}
+              </span>
+              {isOwnProfile ? (
+                <Button type="button" variant="secondary" className="h-10! shrink-0" onClick={onOpenTwoFactor}>
+                  {twoFactorEnabled ? translateStep('disable') : translateStep('enable')}
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="h-10! shrink-0"
+                  loading={toggleTwoFactorMutation.isPending}
+                  onClick={() => toggleTwoFactorMutation.mutate(!twoFactorEnabled)}
+                >
+                  {toggleTwoFactorMutation.isPending
+                    ? translateStep('twoFactorSaving')
+                    : twoFactorEnabled
+                      ? translateStep('disable')
+                      : translateStep('enable')}
+                </Button>
+              )}
+            </div>
+
+            {isOwnProfile && (
+              <div className="flex items-center gap-4 p-4 border border-zinc-200 rounded-lg">
+                <div className="size-10 rounded-lg bg-zinc-50 flex items-center justify-center shrink-0">
+                  <IconLock size={20} className="text-zinc-600" />
+                </div>
+                <span className="flex-1 paragraph-small-semibold text-zinc-950">
+                  {translateStep('changePassword')}
+                </span>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  className="h-10! shrink-0"
+                  onClick={onOpenChangePassword}
+                >
+                  {translateStep('changePasswordButton')}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <Separator />
+        </>
+      )}
+
+      <span className="text-zinc-950 paragraph-medium-semibold">{translateStep('roleTitle')}</span>
+
+      <RadioGroup
+        value={role}
+        onValueChange={(value) => {
+          const profile = toUserProfile(value);
+          setValue('profile', profile, { shouldDirty: true });
+          onProfileChange?.(profile);
+        }}
+        disabled={readOnly || !canChangeProfile}
+      >
+        <div className="flex flex-col gap-3">
+          {visibleProfiles.map((profile) => (
+            <RadioOptionFieldIcon
+              key={profile}
+              value={profile}
+              label={translateProfile(profile)}
+              description={translateStep(PROFILE_DESCRIPTION_KEYS[profile])}
+              isSelected={role === profile}
+              disabled={role === UserProfile.owner}
+              icon={PROFILE_ICONS[profile]}
+            />
+          ))}
+        </div>
+      </RadioGroup>
+    </div>
+  );
+}

package/src/components/account/sections/team/user-form.schema.ts

@@ -0,0 +1,43 @@
+import { z } from 'zod';
+import { UserProfile, type User } from '../../../../modules/users/schema';
+
+type UserFormMessages = {
+  required: string;
+  invalidEmail: string;
+};
+
+/** Mensagens já traduzidas — o schema é montado dentro do componente com `useMemo`. */
+export function buildUserFormSchema({ required, invalidEmail }: UserFormMessages) {
+  return z.object({
+    name: z.string().min(1, required),
+    lastName: z.string(),
+    email: z.string().min(1, required).email(invalidEmail),
+    phone: z.string(),
+    profile: z.nativeEnum(UserProfile),
+    photo: z.custom<File | null>().nullable(),
+    selectedProjects: z.record(z.string(), z.boolean()),
+    gender: z.number(),
+    receiveSms: z.boolean(),
+    receiveEmail: z.boolean(),
+  });
+}
+
+export type UserFormData = z.infer<ReturnType<typeof buildUserFormSchema>>;
+
+/** Valores iniciais do formulário de usuário — compartilhados pelo sheet da equipe e pelo Meu perfil. */
+export function buildUserFormDefaults(user?: User): UserFormData {
+  return {
+    name: user?.name || '',
+    lastName: user?.last_name || '',
+    email: user?.email || '',
+    phone: user?.phone || '',
+    profile: user?.profile || UserProfile.collaborator,
+    photo: null,
+    selectedProjects: Object.fromEntries(
+      user?.projects?.map((project) => [project.id.toString(), true]) || []
+    ),
+    gender: user?.gender ?? 1,
+    receiveSms: user?.receive_sms ?? true,
+    receiveEmail: user?.receive_email ?? true,
+  };
+}

package/src/components/account/types/workspace-actions.type.ts

@@ -0,0 +1,56 @@
+import type { Affiliate } from '../../../modules/affiliates/types/affiliate.type';
+import type { Charge } from '../../../modules/charges/types/charge.type';
+import type { Project } from '../../../modules/projects/types';
+import type { Subscription } from '../../../modules/subscriptions/types/subscription.type';
+import type { User } from '../../../modules/users/schema';
+
+/**
+ * Fluxos das abas do modal Minha conta que ainda vivem nos apps (troca de plano, sheets de projeto e
+ * de usuário...). O app que tem o fluxo passa o handler em `<Modals workspaceActions>`; sem handler,
+ * a aba leva para a tela equivalente em `accounts_url`.
+ */
+export interface SubscriptionActions {
+  onChoosePlan?: () => void;
+  onChangePlan?: () => void;
+  onCancelPlan?: () => void;
+  onEditBillingAddress?: () => void;
+  onViewPlanDetails?: () => void;
+  onViewPendingChange?: (pendingChange: NonNullable<Subscription['pending_change']>) => void;
+  onViewUsageReport?: () => void;
+  onAddCard?: () => void;
+  onPayCharge?: (charge: Charge) => void;
+  onViewCharge?: (charge: Charge) => void;
+}
+
+export interface ProjectsActions {
+  /** Chamado depois das checagens de assinatura cancelada e do addon de projetos. */
+  onCreateProject?: () => void;
+  /** Plano sem o addon de projetos. */
+  onProjectsDisabled?: () => void;
+  onOpenProject?: (project: Project) => void;
+  onDeleteProject?: (project: Project) => void;
+}
+
+export interface TeamActions {
+  onAddUser?: () => void;
+  onEditUser?: (user: User) => void;
+  onDeleteUser?: (user: User) => void;
+}
+
+export interface AffiliatesActions {
+  /** Conta ainda fora do programa: aceite dos termos e criação do afiliado. */
+  onJoinProgram?: () => void;
+  onRequestWithdrawal?: (affiliate: Affiliate) => void;
+  /** Saque pedido sem PIX/titular cadastrados: o app abre o aviso de conta de recebimento. */
+  onMissingReceivingAccount?: (affiliate: Affiliate) => void;
+  onEditReceivingAccount?: (affiliate: Affiliate) => void;
+  onListLeads?: (affiliate: Affiliate) => void;
+  onViewAttachment?: (attachment: string) => void;
+}
+
+export interface WorkspaceActions {
+  subscription?: SubscriptionActions;
+  projects?: ProjectsActions;
+  team?: TeamActions;
+  affiliates?: AffiliatesActions;
+}

package/src/components/layouts/ProfilePopover.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
@@ -13,11 +12,13 @@ import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
 import { useBrandLoadingIcon } from "../../hooks/useBrandLoadingIcon";
 import { useAuth } from "../../providers/auth.provider";
-import { useIsDefaultWhitelabel, useWhitelabelUrls } from "../../providers/whitelabel.provider";
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
 import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
 import { useCreditsDisabledModal } from "../../store/useCreditsDisabledModal";
+import { useAccountModals } from "../../store/useAccountModals";
+import { AccountSectionType } from "../../enums/AccountSectionType";
 
 export interface ProfileMenuItem {
   icon?: React.ReactNode;
@@ -47,11 +48,11 @@ function ProfilePopover({
     useIaCredits();
   const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
   const { openModal: openCreditsDisabledModal } = useCreditsDisabledModal();
+  // "Editar" abre o Meu perfil dentro do modal Minha conta, montado por `<Modals>`.
+  const openConfigurations = useAccountModals((state) => state.openConfigurations);
   const canManage = user?.profile === 'owner' || user?.profile === 'admin';
   const isDefaultWl = useIsDefaultWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
   const brandLoadingIcon = useBrandLoadingIcon();
-  const router = useRouter();
 
   const handleLogout = async () => {
     setPopoverOpen(false);
@@ -120,13 +121,8 @@ function ProfilePopover({
                 variant="secondary"
                 className="h-8! px-3! paragraph-xsmall-semibold"
                 onClick={() => {
-                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);
-                  if (isSameOrigin) {
-                    setPopoverOpen(false);
-                    router.push(`${window.location.pathname}?openProfile=true`);
-                  } else {
-                    window.location.href = `${accountsUrl}?openProfile=true`;
-                  }
+                  setPopoverOpen(false);
+                  openConfigurations(AccountSectionType.MY_PROFILE);
                 }}
               >
                 {translate('common.actions.edit')}
@@ -173,7 +169,10 @@ function ProfilePopover({
                       key={index}
                       icon={item.icon}
                       label={item.label}
-                      onClick={item.onClick}
+                      onClick={() => {
+                        setPopoverOpen(false);
+                        item.onClick();
+                      }}
                     />
                   ))}
                 </div>

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -20,7 +20,8 @@ import { useListProjectUsers } from "../../modules/projects/hooks/list-project-u
 import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
 import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
 import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
-import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
+import { WorkspaceSectionType } from "../../enums/WorkspaceSectionType";
+import useAccountHubActions from "../account/hooks/useAccountHubActions";
 
 export interface UsersSelectorPopoverProps {
   projectId?: number;
@@ -48,7 +49,7 @@ export function UsersSelectorPopover({
   contentClassName,
 }: UsersSelectorPopoverProps) {
   const translate = useTranslations();
-  const { accountsUrl } = useWhitelabelUrls();
+  const { openAddUser, openSection } = useAccountHubActions();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState<number | null>(null);
   const [searchInput, setSearchInput] = useState("");
@@ -116,7 +117,8 @@ export function UsersSelectorPopover({
                 variant="secondary"
                 className="h-8 paragraph-small-semibold text-gray-950"
                 onClick={() => {
-                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;
+                  setOpen(false);
+                  openAddUser();
                 }}
               >
                 <IconPlus size={16} />
@@ -224,7 +226,8 @@ export function UsersSelectorPopover({
             variant="ghost"
             className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
             onClick={() => {
-              window.location.href = `${accountsUrl}/my-teams`;
+              setOpen(false);
+              openSection(WorkspaceSectionType.TEAM);
             }}
           >
             {translate('common.layout.usersSelector.manageTeam')}

package/src/components/modals/AccountDeletionWarningModal.tsx

@@ -11,14 +11,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../ui/overlay/Dialog';
-import { useExternalContracting, useWhitelabelUrls } from '../../providers/whitelabel.provider';
 import { useAccountDeletionWarningModal } from '../../store/useAccountDeletionWarningModal';
+import useAccountHubActions from '../account/hooks/useAccountHubActions';
 
 export default function AccountDeletionWarningModal() {
   const translate = useTranslations();
   const { open, onReactivate, closeModal } = useAccountDeletionWarningModal();
-  const { accountsUrl } = useWhitelabelUrls();
-  const { redirectToExternal } = useExternalContracting();
+  const { openPlansCatalog } = useAccountHubActions();
 
   const handleReactivate = () => {
     if (onReactivate) {
@@ -27,8 +26,8 @@ export default function AccountDeletionWarningModal() {
       return;
     }
 
-    if (redirectToExternal('plans')) return;
-    window.location.href = `${accountsUrl}/subscriptions?tab=plans`;
+    closeModal();
+    openPlansCatalog();
   };
 
   return (