@greatapps/common 1.1.666 → 1.1.667

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,11 +1,13 @@
 'use client';
 
+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 { useAccountModals } from '../../store/useAccountModals';
 
 export default function IsntPossibleDeleteAccountModal() {
+  const translate = useTranslations();
   const { activeModal, close, config } = useAccountModals();
   const { onGoToSubscription } = config;
   const open = activeModal === 'isntPossibleDelete';
@@ -19,12 +21,12 @@ export default function IsntPossibleDeleteAccountModal() {
           </div>
           <DialogHeader className="p-0 gap-2">
             <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Não é possível excluir a conta
+              {translate('common.account.cantDelete.title')}
             </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.
+              {translate.rich('common.account.cantDelete.description', {
+                b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
+              })}
             </DialogDescription>
           </DialogHeader>
         </div>
@@ -33,14 +35,14 @@ export default function IsntPossibleDeleteAccountModal() {
 
         <div className="flex flex-row items-center gap-2">
           <Button className="h-10 flex-1" onClick={close}>
-            Ok, entendi
+            {translate('common.account.cantDelete.confirm')}
           </Button>
           <Button
             variant="secondary"
             className="h-10 flex-1"
             onClick={onGoToSubscription ?? close}
           >
-            Ir para assinatura
+            {translate('common.account.cantDelete.goToSubscription')}
           </Button>
         </div>
       </DialogContent>

package/src/components/account/TwoFactorAuthModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
@@ -15,6 +16,7 @@ interface TwoFactorAuthModalProps {
 }
 
 export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {
+  const translate = useTranslations();
   const {
     code,
     setCode,
@@ -46,11 +48,11 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           className="z-[1011] 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-[470px] lg:h-auto 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%]"
         >
           <DialogHeader className="sr-only">
-            <DialogTitle>Códigos de segurança</DialogTitle>
+            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
           </DialogHeader>
           <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
             <span className="paragraph-medium-semibold text-gray-950 text-center">
-              Códigos de segurança
+              {translate('common.account.twoFactor.recoveryTitle')}
             </span>
             <Button
               type="button"
@@ -65,15 +67,12 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
             <div className="flex flex-col gap-2">
               <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                Salve estes códigos de recuperação de emergência
+                {translate('common.account.twoFactor.recoveryHeading')}
               </h3>
               <div className="paragraph-small-regular text-gray-600">
-                <p>
-                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta
-                  sem um código de dois fatores.
-                </p>
+                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
                 <br />
-                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>
+                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
               </div>
             </div>
 
@@ -90,17 +89,17 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                 onClick={handleCopyCodes}
               >
                 <IconCopy size={16} />
-                Copiar códigos
+                {translate('common.account.twoFactor.copyCodes')}
               </Button>
             </div>
           </div>
 
           <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
             <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
             <Button className="h-10!" type="button" onClick={handleFinalize}>
-              Finalizar
+              {translate('common.account.twoFactor.finish')}
             </Button>
           </div>
         </DialogContent>
@@ -116,11 +115,11 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
         className="z-[1011] 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-[470px] 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%]"
       >
         <DialogHeader className="sr-only">
-          <DialogTitle>Autenticação de dois fatores</DialogTitle>
+          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
         </DialogHeader>
         <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
           <span className="paragraph-medium-semibold text-gray-950 text-center">
-            Autenticação de dois fatores
+            {translate('common.account.twoFactor.title')}
           </span>
           <Button
             type="button"
@@ -142,17 +141,18 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
           <div className="flex-1 min-h-0 overflow-y-auto 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]">
-                Instale um aplicativo autenticador no seu celular (ex.:{' '}
-                <a
-                  href="https://support.google.com/accounts/answer/1066447"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="paragraph-small-medium underline"
-                >
-                  Google Authenticator
-                </a>
-                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o
-                código de 6 dígitos gerado para continuar.
+                {translate.rich('common.account.twoFactor.instructions', {
+                  link: (chunks) => (
+                    <a
+                      href="https://support.google.com/accounts/answer/1066447"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="paragraph-small-medium underline"
+                    >
+                      {chunks}
+                    </a>
+                  ),
+                })}
               </p>
 
               <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
@@ -163,7 +163,9 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                     className="flex flex-col items-center gap-1.5 text-center"
                   >
                     <IconRefresh size={20} className="text-gray-400" />
-                    <span className="paragraph-xsmall-medium text-gray-500">Tentar novamente</span>
+                    <span className="paragraph-xsmall-medium text-gray-500">
+                      {translate('common.account.twoFactor.retry')}
+                    </span>
                   </button>
                 ) : isGenerating || !qrcode ? (
                   <div className="skeleton w-full h-full rounded" />
@@ -171,7 +173,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
                     src={qrcode}
-                    alt="QR Code para autenticação de dois fatores"
+                    alt={translate('common.account.twoFactor.qrAlt')}
                     className="w-full h-full"
                   />
                 )}
@@ -180,7 +182,7 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
               <div className="flex items-center gap-3 w-full">
                 <Separator className="flex-1" />
                 <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                  Cole os 6 dígitos abaixo
+                  {translate('common.account.twoFactor.pasteDigits')}
                 </span>
                 <Separator className="flex-1" />
               </div>
@@ -203,10 +205,12 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
 
           <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
             <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-              Cancelar
+              {translate('common.actions.cancel')}
             </Button>
             <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}
+              {isConfirming
+                ? translate('common.account.twoFactor.activating')
+                : translate('common.account.twoFactor.activate')}
             </Button>
           </div>
         </form>

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

@@ -3,12 +3,14 @@
 import { useState, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { changeEmailSchema, type ChangeEmailFormData } from '../../../utils/validators/account';
 import { requestEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
 
 export default function useChangeEmailForm() {
+  const translate = useTranslations();
   const [showVerification, setShowVerification] = useState(false);
 
   const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting } } = useForm<ChangeEmailFormData>({
@@ -21,11 +23,11 @@ export default function useChangeEmailForm() {
     const result = await requestEmailChangeAction(data.email);
 
     if (!result.success) {
-      toast.custom((t) => (
+      toast.custom((toastId) => (
         <Toast
           variant="error"
-          message={result.error ?? 'E-mail já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-          toastId={t}
+          message={result.error ?? translate('common.account.changeEmail.emailExistsError')}
+          toastId={toastId}
         />
       ));
       return;

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

@@ -3,6 +3,7 @@
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { changePasswordSchema, type ChangePasswordFormData } from '../../../utils/validators/account';
@@ -13,6 +14,7 @@ interface UseChangePasswordFormProps {
 }
 
 export default function useChangePasswordForm({ onSuccess }: UseChangePasswordFormProps = {}) {
+  const translate = useTranslations();
   const form = useForm<ChangePasswordFormData>({
     resolver: zodResolver(changePasswordSchema),
     mode: 'onChange',
@@ -26,22 +28,34 @@ export default function useChangePasswordForm({ onSuccess }: UseChangePasswordFo
     mutationFn: changePasswordAction,
     onSuccess: (result) => {
       if (!result.success) {
-        toast.custom((t) => (
-          <Toast variant="error" message={result.error ?? 'Erro ao alterar senha'} toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={result.error ?? translate('common.account.changePassword.changeError')}
+            toastId={toastId}
+          />
         ));
         return;
       }
 
-      toast.custom((t) => (
-        <Toast variant="success" message="Senha alterada com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.changePassword.changedSuccess')}
+          toastId={toastId}
+        />
       ));
 
       form.reset();
       onSuccess?.();
     },
     onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao alterar senha. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.changePassword.genericError')}
+          toastId={toastId}
+        />
       ));
     },
   });

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { requestPhoneChangeAction, updateUserAction } from '../../../modules/accounts/actions/account-management.action';
@@ -18,6 +19,7 @@ interface UseChangePhoneFormOptions {
 }
 
 export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuccess }: UseChangePhoneFormOptions) {
+  const translate = useTranslations();
   const [showVerification, setShowVerification] = useState(false);
   const [phoneValue, setPhoneValue] = useState('');
   const [phoneError, setPhoneError] = useState('');
@@ -35,7 +37,7 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
     const { ddi, local } = splitPhoneValue(phoneValue);
 
     if (!local || local.replace(/\D/g, '').length < 8) {
-      setPhoneError('Número de telefone inválido');
+      setPhoneError(translate('common.account.changePhone.invalidNumber'));
       return;
     }
 
@@ -45,18 +47,22 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
         const result = await updateUserAction({ phone: local, ddi });
 
         if (!result.success) {
-          toast.custom((t) => (
+          toast.custom((toastId) => (
             <Toast
               variant="error"
-              message={result.error ?? 'Ocorreu um erro ao salvar o telefone. Tente novamente mais tarde.'}
-              toastId={t}
+              message={result.error ?? translate('common.account.changePhone.saveError')}
+              toastId={toastId}
             />
           ));
           return;
         }
 
-        toast.custom((t) => (
-          <Toast variant="success" message="Telefone adicionado" toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="success"
+            message={translate('common.account.changePhone.phoneAdded')}
+            toastId={toastId}
+          />
         ));
         onDirectUpdateSuccess?.();
         return;
@@ -65,11 +71,11 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
       const result = await requestPhoneChangeAction(local, ddi);
 
       if (!result.success) {
-        toast.custom((t) => (
+        toast.custom((toastId) => (
           <Toast
             variant="error"
-            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}
-            toastId={t}
+            message={result.error ?? translate('common.account.changePhone.numberExistsError')}
+            toastId={toastId}
           />
         ));
         return;
@@ -80,7 +86,7 @@ export default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuc
     } finally {
       setIsSubmitting(false);
     }
-  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess]);
+  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess, translate]);
 
   const handleBack = useCallback(() => {
     setShowVerification(false);

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

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
@@ -17,6 +18,7 @@ export default function useDisableTwoFactorAuthForm({
   onClose,
   onSuccess,
 }: UseDisableTwoFactorAuthFormProps) {
+  const translate = useTranslations();
   const [code, setCode] = useState('');
   const queryClient = useQueryClient();
   const userKey = useWlQueryKey([...USER_QUERY_KEY]);
@@ -28,23 +30,35 @@ export default function useDisableTwoFactorAuthForm({
     onSuccess: (result) => {
       if (!result.success) {
         setCode('');
-        toast.custom((t) => (
-          <Toast variant="error" message={result.error ?? 'Código inválido'} toastId={t} />
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={result.error ?? translate('common.account.twoFactor.invalidCode')}
+            toastId={toastId}
+          />
         ));
         return;
       }
 
       queryClient.invalidateQueries({ queryKey: userKey });
-      toast.custom((t) => (
-        <Toast variant="success" message="Autenticação de dois fatores desabilitada" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.disabledSuccess')}
+          toastId={toastId}
+        />
       ));
       setCode('');
       onSuccess?.();
     },
     onError: () => {
       setCode('');
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao desabilitar 2FA. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.disableError')}
+          toastId={toastId}
+        />
       ));
     },
   });

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import useCountdownTimer from '../../../hooks/useCountdownTimer';
@@ -20,6 +21,7 @@ export default function useOtpVerification({
   validateFn,
   resendFn,
 }: UseOtpVerificationOptions) {
+  const translate = useTranslations();
   const [code, setCode] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -85,14 +87,24 @@ export default function useOtpVerification({
         await resendFn();
       }
 
-      toast.custom((t) => <Toast variant="success" message="Código reenviado" toastId={t} />);
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.codeResent')}
+          toastId={toastId}
+        />
+      ));
     } catch (error) {
       console.error('Erro ao reenviar código:', error);
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao reenviar código. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.resendError')}
+          toastId={toastId}
+        />
       ));
     }
-  }, [canResend, resetTimer, resendFn]);
+  }, [canResend, resetTimer, resendFn, translate]);
 
   const reset = useCallback(() => {
     setCode('');

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

@@ -2,6 +2,7 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 import { Toast } from '../../ui/feedback/Toast';
 import { copyToClipboard } from '../../../utils/browser/clipboard';
@@ -19,14 +20,19 @@ interface UseTwoFactorAuthFormProps {
 }
 
 export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {
+  const translate = useTranslations();
   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} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.generateError')}
+          toastId={toastId}
+        />
       ));
     },
   });
@@ -38,8 +44,12 @@ export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAu
     },
     onError: () => {
       setCode('');
-      toast.custom((t) => (
-        <Toast variant="error" message="Erro ao confirmar código. Tente novamente." toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="error"
+          message={translate('common.account.twoFactor.confirmError')}
+          toastId={toastId}
+        />
       ));
     },
   });
@@ -70,11 +80,15 @@ export default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAu
     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} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.twoFactor.codesCopied')}
+          toastId={toastId}
+        />
       ));
     }
-  }, [generateMutation.data]);
+  }, [generateMutation.data, translate]);
 
   const resetForm = () => {
     setCode('');