@greatapps/common 1.1.218 → 1.1.219

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ShieldCheck } from 'lucide-react';
+import { IconShieldCheck } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import {
   Dialog,
@@ -38,7 +38,7 @@ export default function DisableTwoFactorAuthModal({
         >
           <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
             <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
-              <ShieldCheck size={20} className="text-gray-600" />
+              <IconShieldCheck size={20} className="text-gray-600" />
             </div>
             <DialogHeader className="p-0 gap-2">
               <DialogTitle className="paragraph-medium-semibold text-gray-950">

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function IsntPossibleDeleteAccountModal() {
-  const { activeModal, close, config } = useAccountModals();
-  const { onGoToSubscription } = config;
-  const open = activeModal === 'isntPossibleDelete';
-
-  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%]!">
-        <div className="flex flex-col gap-5">
-          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
-            <TriangleAlert size={20} className="text-red-500" />
-          </div>
-          <DialogHeader className="p-0 gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Não é possível excluir a conta
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-gray-600">
-              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
-              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
-              página Assinatura e depois tente novamente.
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        <div className="h-px bg-gray-200 -mx-6" />
-
-        <div className="flex flex-row items-center gap-2">
-          <Button className="h-10 flex-1" onClick={close}>
-            Ok, entendi
-          </Button>
-          <Button
-            variant="secondary"
-            className="h-10 flex-1"
-            onClick={onGoToSubscription ?? close}
-          >
-            Ir para assinatura
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function IsntPossibleDeleteAccountModal() {
+  const { activeModal, close, config } = useAccountModals();
+  const { onGoToSubscription } = config;
+  const open = activeModal === 'isntPossibleDelete';
+
+  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%]!">
+        <div className="flex flex-col gap-5">
+          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+            <IconAlertTriangle size={20} className="text-red-500" />
+          </div>
+          <DialogHeader className="p-0 gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Não é possível excluir a conta
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-gray-600">
+              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
+              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
+              página Assinatura e depois tente novamente.
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="h-px bg-gray-200 -mx-6" />
+
+        <div className="flex flex-row items-center gap-2">
+          <Button className="h-10 flex-1" onClick={close}>
+            Ok, entendi
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10 flex-1"
+            onClick={onGoToSubscription ?? close}
+          >
+            Ir para assinatura
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowLeft, X, Copy, RefreshCw } from 'lucide-react';
+import { IconArrowLeft, IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
 import { Separator } from '../ui/data-display/Separator';
@@ -57,7 +57,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
               className="size-8! p-0 absolute right-4"
               onClick={handleClose}
             >
-              <X size={18} />
+              <IconX size={18} />
             </Button>
           </div>
 
@@ -88,7 +88,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                 className="h-8! w-fit"
                 onClick={handleCopyCodes}
               >
-                <Copy size={16} />
+                <IconCopy size={16} />
                 Copiar códigos
               </Button>
             </div>
@@ -124,7 +124,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             className="size-8! p-0 absolute left-4"
             onClick={handleClose}
           >
-            <ArrowLeft size={20} />
+            <IconArrowLeft size={20} />
           </Button>
           <span className="paragraph-medium-semibold text-gray-950 text-center">
             Autenticação de dois fatores
@@ -135,7 +135,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             className="size-8! p-0 absolute right-4"
             onClick={handleClose}
           >
-            <X size={18} />
+            <IconX size={18} />
           </Button>
         </div>
 
@@ -169,7 +169,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                     onClick={() => retryGenerate()}
                     className="flex flex-col items-center gap-1.5 text-center"
                   >
-                    <RefreshCw size={20} className="text-gray-400" />
+                    <IconRefresh size={20} className="text-gray-400" />
                     <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
                   </button>
                 ) : isGenerating || !qrcode ? (

package/src/components/account/hooks/useChangePhoneForm.tsx

@@ -1,81 +1,81 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
-
-function splitPhoneValue(fullValue: string): { ddi: string; local: string } {
-  const trimmed = fullValue.trim();
-  const spaceIdx = trimmed.indexOf(' ');
-  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };
-  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
-}
-
-export default function useChangePhoneForm() {
-  const [showVerification, setShowVerification] = useState(false);
-  const [phoneValue, setPhoneValue] = useState('');
-  const [phoneError, setPhoneError] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });
-
-  const handlePhoneChange = useCallback((value: string) => {
-    setPhoneValue(value);
-    if (phoneError) setPhoneError('');
-  }, [phoneError]);
-
-  const handleContinue = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const { ddi, local } = splitPhoneValue(phoneValue);
-
-    if (!local || local.replace(/\D/g, '').length < 8) {
-      setPhoneError('Número de telefone inválido');
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const result = await requestPhoneChangeAction(local, ddi);
-
-      if (!result.success) {
-        toast.custom((t) => (
-          <Toast
-            variant="error"
-            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-            toastId={t}
-          />
-        ));
-        return;
-      }
-
-      setSubmittedPhone({ ddi, local });
-      setShowVerification(true);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [phoneValue]);
-
-  const handleBack = useCallback(() => {
-    setShowVerification(false);
-  }, []);
-
-  const resetForm = useCallback(() => {
-    setPhoneValue('');
-    setPhoneError('');
-    setSubmittedPhone({ ddi: '+55', local: '' });
-    setShowVerification(false);
-  }, []);
-
-  return {
-    showVerification,
-    phoneValue,
-    phoneError,
-    isSubmitting,
-    submittedPhone,
-    handlePhoneChange,
-    handleContinue,
-    handleBack,
-    resetForm,
-  };
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+
+function splitPhoneValue(fullValue: string): { ddi: string; local: string } {
+  const trimmed = fullValue.trim();
+  const spaceIdx = trimmed.indexOf(' ');
+  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };
+  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
+}
+
+export default function useChangePhoneForm() {
+  const [showVerification, setShowVerification] = useState(false);
+  const [phoneValue, setPhoneValue] = useState('');
+  const [phoneError, setPhoneError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });
+
+  const handlePhoneChange = useCallback((value: string) => {
+    setPhoneValue(value);
+    if (phoneError) setPhoneError('');
+  }, [phoneError]);
+
+  const handleContinue = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const { ddi, local } = splitPhoneValue(phoneValue);
+
+    if (!local || local.replace(/\D/g, '').length < 8) {
+      setPhoneError('Número de telefone inválido');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await requestPhoneChangeAction(local, ddi);
+
+      if (!result.success) {
+        toast.custom((t) => (
+          <Toast
+            variant="error"
+            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
+            toastId={t}
+          />
+        ));
+        return;
+      }
+
+      setSubmittedPhone({ ddi, local });
+      setShowVerification(true);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [phoneValue]);
+
+  const handleBack = useCallback(() => {
+    setShowVerification(false);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setPhoneValue('');
+    setPhoneError('');
+    setSubmittedPhone({ ddi: '+55', local: '' });
+    setShowVerification(false);
+  }, []);
+
+  return {
+    showVerification,
+    phoneValue,
+    phoneError,
+    isSubmitting,
+    submittedPhone,
+    handlePhoneChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  };
+}

package/src/components/account/hooks/useTwoFactorAuthForm.tsx

@@ -1,101 +1,101 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { Toast } from '../../ui/feedback/Toast';
-import { copyToClipboard } from '../../../utils/browser/clipboard';
-import {
-  generateTwoFactorAction,
-  confirmTwoFactorAction,
-} from '../../../modules/accounts/actions/account-management.action';
-import { withAction } from '../../../utils/withAction';
-
-type Step = 'code' | 'recovery';
-
-interface UseTwoFactorAuthFormProps {
-  onSuccess?: () => void;
-  open?: boolean;
-}
-
-export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
-  const [code, setCode] = useState('');
-  const [step, setStep] = useState<Step>('code');
-
-  const generateMutation = useMutation({
-    mutationFn: withAction(generateTwoFactorAction),
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const confirmMutation = useMutation({
-    mutationFn: withAction(confirmTwoFactorAction),
-    onSuccess: () => {
-      setStep('recovery');
-    },
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
-      ));
-    },
-  });
-
-  const { mutate: triggerGenerate } = generateMutation;
-
-  useEffect(() => {
-    if (open) {
-      triggerGenerate();
-    }
-  }, [open, triggerGenerate]);
-
-  const generateFailed = generateMutation.isError;
-
-  const isCodeComplete = code.length === 6;
-
-  const handleSubmit = () => {
-    if (!isCodeComplete) return;
-    confirmMutation.mutate(code);
-  };
-
-  const handleFinalize = () => {
-    onSuccess?.();
-    setTimeout(resetForm, 300);
-  };
-
-  const handleCopyCodes = useCallback(async () => {
-    const codes = generateMutation.data?.backupCodes ?? [];
-    const success = await copyToClipboard(codes.join('\n'));
-    if (success) {
-      toast.custom((t) => (
-        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
-      ));
-    }
-  }, [generateMutation.data]);
-
-  const resetForm = () => {
-    setCode('');
-    setStep('code');
-    generateMutation.reset();
-    confirmMutation.reset();
-  };
-
-  return {
-    code,
-    setCode,
-    isCodeComplete,
-    isGenerating: generateMutation.isPending,
-    isConfirming: confirmMutation.isPending,
-    generateFailed,
-    retryGenerate: triggerGenerate,
-    qrcode: generateMutation.data?.qrcode,
-    backupCodes: generateMutation.data?.backupCodes ?? [],
-    step,
-    handleSubmit,
-    handleFinalize,
-    handleCopyCodes,
-    resetForm,
-  };
-}
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Toast } from '../../ui/feedback/Toast';
+import { copyToClipboard } from '../../../utils/browser/clipboard';
+import {
+  generateTwoFactorAction,
+  confirmTwoFactorAction,
+} from '../../../modules/accounts/actions/account-management.action';
+import { withAction } from '../../../utils/withAction';
+
+type Step = 'code' | 'recovery';
+
+interface UseTwoFactorAuthFormProps {
+  onSuccess?: () => void;
+  open?: boolean;
+}
+
+export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
+  const [code, setCode] = useState('');
+  const [step, setStep] = useState<Step>('code');
+
+  const generateMutation = useMutation({
+    mutationFn: withAction(generateTwoFactorAction),
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao gerar QR Code. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const confirmMutation = useMutation({
+    mutationFn: withAction(confirmTwoFactorAction),
+    onSuccess: () => {
+      setStep('recovery');
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
+      ));
+    },
+  });
+
+  const { mutate: triggerGenerate } = generateMutation;
+
+  useEffect(() => {
+    if (open) {
+      triggerGenerate();
+    }
+  }, [open, triggerGenerate]);
+
+  const generateFailed = generateMutation.isError;
+
+  const isCodeComplete = code.length === 6;
+
+  const handleSubmit = () => {
+    if (!isCodeComplete) return;
+    confirmMutation.mutate(code);
+  };
+
+  const handleFinalize = () => {
+    onSuccess?.();
+    setTimeout(resetForm, 300);
+  };
+
+  const handleCopyCodes = useCallback(async () => {
+    const codes = generateMutation.data?.backupCodes ?? [];
+    const success = await copyToClipboard(codes.join('\n'));
+    if (success) {
+      toast.custom((t) => (
+        <Toast variant="success" message="Códigos copiados com sucesso" toastId={t} />
+      ));
+    }
+  }, [generateMutation.data]);
+
+  const resetForm = () => {
+    setCode('');
+    setStep('code');
+    generateMutation.reset();
+    confirmMutation.reset();
+  };
+
+  return {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating: generateMutation.isPending,
+    isConfirming: confirmMutation.isPending,
+    generateFailed,
+    retryGenerate: triggerGenerate,
+    qrcode: generateMutation.data?.qrcode,
+    backupCodes: generateMutation.data?.backupCodes ?? [],
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm,
+  };
+}

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronLeft, X, Mail } from 'lucide-react';
+import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
 import { Separator } from '../../ui/data-display/Separator';
@@ -88,13 +88,13 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
         {showVerification ? (
           <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
             <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
-              <ChevronLeft size={20} className="text-gray-950" />
+              <IconChevronLeft size={20} className="text-gray-950" />
             </Button>
             <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
               Alterar e-mail
             </DialogTitle>
             <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
-              <X size={18} className="text-gray-500" />
+              <IconX size={18} className="text-gray-500" />
             </Button>
           </DialogHeader>
         ) : (
@@ -111,7 +111,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                 className="absolute right-2 size-8! p-0"
                 onClick={handleClose}
               >
-                <X size={18} className="text-gray-500" />
+                <IconX size={18} className="text-gray-500" />
               </Button>
             </div>
           </>
@@ -129,7 +129,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
           >
             <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
               <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
-                <Mail size={20} className="text-gray-950" />
+                <IconMail size={20} className="text-gray-950" />
               </div>
 
               <div className="flex flex-col gap-1">
@@ -205,7 +205,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                 {...register('email')}
                 error={!!errors.email}
                 errorMessage={errors.email?.message}
-                leftIcon={Mail}
+                leftIcon={IconMail}
               />
             </div>
 

package/src/components/account/sections/ChangePasswordSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowLeft, Lock } from 'lucide-react';
+import { IconArrowLeft, IconLock } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { FormField } from '../../ui/form/FormField';
 import useChangePasswordForm from '../hooks/useChangePasswordForm';
@@ -24,7 +24,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
     >
       <div className="flex items-center gap-3">
         <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
-          <ArrowLeft size={20} />
+          <IconArrowLeft size={20} />
         </Button>
         <span className="paragraph-medium-semibold text-gray-950">Alterar senha</span>
       </div>
@@ -34,7 +34,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
           label="Senha atual"
           type="password"
           placeholder="Digite sua senha atual"
-          leftIcon={Lock}
+          leftIcon={IconLock}
           error={!!errors.currentPassword}
           errorMessage={errors.currentPassword?.message}
           classnameContainer="h-10!"
@@ -46,7 +46,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
           label="Nova senha"
           type="password"
           placeholder="Digite sua nova senha"
-          leftIcon={Lock}
+          leftIcon={IconLock}
           error={!!errors.newPassword}
           errorMessage={errors.newPassword?.message}
           classnameContainer="h-10!"