@greatapps/common 1.1.673 → 1.1.675

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
@@ -21,7 +20,6 @@ interface ChangeEmailModalProps {
 }
 
 export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
-  const translate = useTranslations();
   const { user } = useAuth();
   const invalidateUser = useInvalidateUser();
 
@@ -55,7 +53,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
     reset: resetOtp,
   } = useOtpVerification({
     onSuccess: handleSuccess,
-    successMessage: translate('common.account.changeEmail.emailChanged'),
+    successMessage: 'E-mail alterado com sucesso',
     validateFn: async (token) => {
       const result = await confirmEmailChangeAction(token, emailToVerify);
       return result.success;
@@ -93,7 +91,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
               <IconChevronLeft size={20} className="text-gray-950" />
             </Button>
             <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              {translate('common.account.changeEmail.title')}
+              Alterar e-mail
             </DialogTitle>
             <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
               <IconX size={18} className="text-gray-500" />
@@ -102,11 +100,11 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
         ) : (
           <>
             <DialogHeader className="sr-only">
-              <DialogTitle>{translate('common.account.changeEmail.title')}</DialogTitle>
+              <DialogTitle>Alterar e-mail</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">
-                {translate('common.account.changeEmail.title')}
+                Alterar e-mail
               </span>
               <Button
                 variant="ghost"
@@ -135,16 +133,10 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
               </div>
 
               <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">
-                  {translate('common.account.otp.validationCode')}
-                </h3>
+                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
                 <p className="paragraph-small-regular text-gray-600">
-                  {translate.rich('common.account.changeEmail.sentCodeTo', {
-                    email: user?.email ?? '',
-                    b: (chunks) => (
-                      <span className="font-semibold text-gray-950 break-all">{chunks}</span>
-                    ),
-                  })}
+                  Enviamos um código de validação para o E-mail{' '}
+                  <span className="font-semibold text-gray-950 break-all">{user?.email}.</span>
                 </p>
               </div>
 
@@ -161,9 +153,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                   </InputOTPGroup>
                 </InputOTP>
                 {hasError && (
-                  <p className="paragraph-small-regular text-red-500">
-                    {translate('common.account.otp.incorrectCode')}
-                  </p>
+                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
                 )}
               </div>
 
@@ -173,16 +163,14 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
                   onClick={handleResend}
                   className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
                 >
-                  {translate('common.account.otp.resend')}
+                  Reenviar código
                 </button>
               ) : (
                 <p className="paragraph-small-regular text-gray-500">
-                  {translate.rich('common.account.otp.resendIn', {
-                    time: formatTimer(timer),
-                    b: (chunks) => (
-                      <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
-                    ),
-                  })}
+                  Reenviar em{' '}
+                  <span className="paragraph-small-semibold text-gray-950">
+                    {formatTimer(timer)}
+                  </span>
                 </p>
               )}
             </div>
@@ -191,12 +179,10 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
 
             <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
               <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
+                Cancelar
               </Button>
               <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading
-                  ? translate('common.account.otp.validating')
-                  : translate('common.account.changeEmail.confirm')}
+                {isLoading ? 'Validando...' : 'Alterar e-mail'}
               </Button>
             </div>
           </form>
@@ -205,16 +191,16 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
             <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-1">
                 <span className="paragraph-medium-semibold text-gray-950">
-                  {translate('common.account.changeEmail.updateTitle')}
+                  Atualizar E-mail de contato
                 </span>
                 <span className="paragraph-small-regular text-gray-600">
-                  {translate('common.account.changeEmail.updateDescription')}
+                  Informe o seu novo E-mail para manter seu contato atualizado.
                 </span>
               </div>
 
               <FormField
-                label={translate('common.account.changeEmail.newEmail')}
-                placeholder={translate('common.account.changeEmail.newEmailPlaceholder')}
+                label="Novo e-mail"
+                placeholder="Digite seu novo e-mail"
                 type="email"
                 {...register('email')}
                 error={!!errors.email}
@@ -225,10 +211,10 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
 
             <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
               <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
+                Cancelar
               </Button>
               <Button className="h-10!" type="submit" disabled={isSubmitting}>
-                {isSubmitting ? translate('common.actions.sending') : translate('common.actions.continue')}
+                {isSubmitting ? 'Enviando...' : 'Continuar'}
               </Button>
             </div>
           </form>

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { IconLock, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
 import { Button } from '../../ui/buttons/Button';
 import { FormField } from '../../ui/form/FormField';
 import useChangePasswordForm from '../hooks/useChangePasswordForm';
@@ -12,7 +11,6 @@ interface ChangePasswordSectionProps {
 }
 
 export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
-  const translate = useTranslations();
   const { register, handleSubmit, errors } = useChangePasswordForm({
     onSuccess: onBack,
   });
@@ -25,9 +23,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
       className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
     >
       <div className="flex items-center justify-between">
-        <span className="paragraph-medium-semibold text-gray-950">
-          {translate('common.account.changePassword.title')}
-        </span>
+        <span className="paragraph-medium-semibold text-gray-950">Alterar senha</span>
         <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
           <IconX size={18} />
         </Button>
@@ -35,9 +31,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
 
       <div className="flex flex-col gap-4">
         <FormField
-          label={translate('common.account.changePassword.currentPassword')}
+          label="Senha atual"
           type="password"
-          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}
+          placeholder="Digite sua senha atual"
           leftIcon={IconLock}
           error={!!errors.currentPassword}
           errorMessage={errors.currentPassword?.message}
@@ -47,9 +43,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
           {...register('currentPassword')}
         />
         <FormField
-          label={translate('common.account.changePassword.newPassword')}
+          label="Nova senha"
           type="password"
-          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}
+          placeholder="Digite sua nova senha"
           leftIcon={IconLock}
           error={!!errors.newPassword}
           errorMessage={errors.newPassword?.message}
@@ -61,7 +57,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
       </div>
 
       <Button type="submit" className="w-fit h-10!">
-        {translate('common.account.changePassword.submit')}
+        Salvar nova senha
       </Button>
     </form>
   );

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';
 import { Button } from '../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
@@ -21,7 +20,6 @@ interface ChangePhoneModalProps {
 }
 
 export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
-  const translate = useTranslations();
   const { user } = useAuth();
   const invalidateUser = useInvalidateUser();
 
@@ -72,7 +70,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
     reset: resetOtp,
   } = useOtpVerification({
     onSuccess: handleSuccess,
-    successMessage: translate('common.account.changePhone.phoneChanged'),
+    successMessage: 'Telefone alterado',
     validateFn: async (token) => {
       const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
       return result.success;
@@ -110,7 +108,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
               <IconChevronLeft size={20} className="text-gray-950" />
             </Button>
             <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              {translate('common.account.changePhone.titleEdit')}
+              Alterar telefone
             </DialogTitle>
             <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
               <IconX size={18} className="text-gray-500" />
@@ -119,17 +117,11 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
         ) : (
           <>
             <DialogHeader className="sr-only">
-              <DialogTitle>
-                {hasExistingPhone
-                  ? translate('common.account.changePhone.titleEdit')
-                  : translate('common.account.changePhone.titleAdd')}
-              </DialogTitle>
+              <DialogTitle>{hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}</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">
-                {hasExistingPhone
-                  ? translate('common.account.changePhone.titleEdit')
-                  : translate('common.account.changePhone.titleAdd')}
+                {hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}
               </span>
               <Button
                 variant="ghost"
@@ -158,14 +150,10 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
               </div>
 
               <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">
-                  {translate('common.account.otp.validationCode')}
-                </h3>
+                <h3 className="paragraph-medium-semibold text-gray-950">Código de validação</h3>
                 <p className="paragraph-small-regular text-gray-600">
-                  {translate.rich('common.account.changePhone.sentCodeTo', {
-                    phone: currentPhoneDisplay,
-                    b: (chunks) => <span className="font-semibold text-gray-950">{chunks}</span>,
-                  })}
+                  Enviamos um código de validação para o número atual{' '}
+                  <span className="font-semibold text-gray-950">{currentPhoneDisplay}.</span>
                 </p>
               </div>
 
@@ -182,9 +170,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
                   </InputOTPGroup>
                 </InputOTP>
                 {hasError && (
-                  <p className="paragraph-small-regular text-red-500">
-                    {translate('common.account.otp.incorrectCode')}
-                  </p>
+                  <p className="paragraph-small-regular text-red-500">Código incorreto</p>
                 )}
               </div>
 
@@ -194,16 +180,14 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
                   onClick={handleResend}
                   className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
                 >
-                  {translate('common.account.otp.resend')}
+                  Reenviar código
                 </button>
               ) : (
                 <p className="paragraph-small-regular text-gray-500">
-                  {translate.rich('common.account.otp.resendIn', {
-                    time: formatTimer(timer),
-                    b: (chunks) => (
-                      <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
-                    ),
-                  })}
+                  Reenviar em{' '}
+                  <span className="paragraph-small-semibold text-gray-950">
+                    {formatTimer(timer)}
+                  </span>
                 </p>
               )}
             </div>
@@ -212,12 +196,10 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
 
             <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
               <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
+                Cancelar
               </Button>
               <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading
-                  ? translate('common.account.otp.validating')
-                  : translate('common.account.changePhone.confirm')}
+                {isLoading ? 'Validando...' : 'Alterar telefone'}
               </Button>
             </div>
           </form>
@@ -226,23 +208,17 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
             <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-1">
                 <span className="paragraph-medium-semibold text-gray-950">
-                  {hasExistingPhone
-                    ? translate('common.account.changePhone.updateTitle')
-                    : translate('common.account.changePhone.addTitle')}
+                  {hasExistingPhone ? 'Atualizar telefone de contato' : 'Adicionar telefone de contato'}
                 </span>
                 <span className="paragraph-small-regular text-gray-600">
                   {hasExistingPhone
-                    ? translate('common.account.changePhone.updateDescription')
-                    : translate('common.account.changePhone.addDescription')}
+                    ? 'Informe o novo número para manter seu contato atualizado.'
+                    : 'Informe seu número de telefone para contato.'}
                 </span>
               </div>
 
               <PhoneInput
-                label={
-                  hasExistingPhone
-                    ? translate('common.account.changePhone.newNumber')
-                    : translate('common.account.changePhone.numberLabel')
-                }
+                label={hasExistingPhone ? 'Novo número' : 'Número de telefone'}
                 placeholder="(00) 0 0000-0000"
                 value={phoneValue}
                 onChange={handlePhoneChange}
@@ -253,16 +229,12 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
 
             <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
               <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
+                Cancelar
               </Button>
               <Button className="h-10!" type="submit" disabled={isSubmitting}>
                 {isSubmitting
-                  ? hasExistingPhone
-                    ? translate('common.actions.sending')
-                    : translate('common.actions.saving')
-                  : hasExistingPhone
-                    ? translate('common.actions.continue')
-                    : translate('common.actions.save')}
+                  ? (hasExistingPhone ? 'Enviando...' : 'Salvando...')
+                  : (hasExistingPhone ? 'Continuar' : 'Salvar')}
               </Button>
             </div>
           </form>

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

@@ -2,7 +2,6 @@
 
 import { useState, useRef } from 'react';
 import Image from 'next/image';
-import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
@@ -27,13 +26,6 @@ interface MyProfileSectionProps {
 }
 
 export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {
-  const translate = useTranslations();
-  const genderOptions = GENDER_OPTIONS.map((option) => ({
-    ...option,
-    label: translate(
-      `common.account.profile.genderOptions.${option.value === 'masculino' ? 'male' : 'female'}`,
-    ),
-  }));
   const { user } = useAuth();
   const updateAccountUser = useUpdateAccountUser();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -94,20 +86,16 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
       form.reset(data);
       setSelectedPhoto(null);
       setPhotoRemoved(false);
-      toast.custom((toastId) => (
-        <Toast
-          variant="success"
-          message={translate('common.account.profile.savedSuccess')}
-          toastId={toastId}
-        />
+      toast.custom((t) => (
+        <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
       ));
       onClose();
     } catch (error) {
-      toast.custom((toastId) => (
+      toast.custom((t) => (
         <Toast
           variant="error"
-          message={error instanceof Error ? error.message : translate('common.account.profile.saveError')}
-          toastId={toastId}
+          message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}
+          toastId={t}
         />
       ));
     }
@@ -125,14 +113,14 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
         />
         <div className="absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6">
           <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">
-            {translate('common.account.profile.title')}
+            Meu perfil
           </span>
           <div className="flex flex-col gap-5">
             <div className="flex items-center gap-4">
               {avatarPreview ? (
                 <Image
                   src={avatarPreview}
-                  alt={translate('common.account.profile.avatarAlt')}
+                  alt="Foto do usuário"
                   width={48}
                   height={48}
                   className="size-12 rounded-full object-cover cursor-pointer"
@@ -154,7 +142,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     type="button"
                     onClick={() => fileInputRef.current?.click()}
                   >
-                    {translate('common.account.profile.changePhoto')}
+                    Alterar foto
                   </Button>
                   <Button
                     type="button"
@@ -172,7 +160,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                 >
-                  {translate('common.account.profile.changePhoto')}
+                  Alterar foto
                 </Button>
               )}
             </div>
@@ -181,31 +169,31 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <div className="flex flex-col gap-4">
                 <div className="flex gap-4">
                   <FormField
-                    label={translate('common.account.profile.name')}
-                    placeholder={translate('common.account.profile.namePlaceholder')}
+                    label="Nome"
+                    placeholder="Digite seu nome"
                     error={!!errors.name}
                     errorMessage={errors.name?.message}
                     {...register('name')}
                   />
                   <FormField
-                    label={translate('common.account.profile.lastName')}
-                    placeholder={translate('common.account.profile.lastNamePlaceholder')}
+                    label="Sobrenome"
+                    placeholder="Digite seu sobrenome"
                     error={!!errors.last_name}
                     errorMessage={errors.last_name?.message}
                     {...register('last_name')}
                   />
                 </div>
                 <SelectField
-                  label={translate('common.account.profile.gender')}
-                  placeholder={translate('common.account.profile.genderPlaceholder')}
-                  options={genderOptions}
+                  label="Gênero"
+                  placeholder="Selecione seu gênero"
+                  options={GENDER_OPTIONS}
                   value={watch('gender')}
                   className="h-10!"
                   onChange={(value) => setValue('gender', value as string)}
                 />
                 <div className="relative">
                   <PhoneInput
-                    label={translate('common.account.profile.phone')}
+                    label="Telefone"
                     value={user?.phone ?? ''}
                     disabled
                     classnameContainer="bg-gray-50 border-0!"
@@ -215,7 +203,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
                     onClick={() => setChangePhoneOpen(true)}
                   >
-                    {translate('common.account.profile.change')}
+                    Alterar
                   </button>
                 </div>
               </div>
@@ -223,13 +211,11 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <Separator />
 
               <div className="flex flex-col gap-4">
-                <span className="paragraph-medium-semibold text-gray-600">
-                  {translate('common.account.profile.accessData')}
-                </span>
+                <span className="paragraph-medium-semibold text-gray-600">Dados de acesso</span>
                 <div className="relative">
                   <div className='cursor-not-allowed'>
                     <FormField
-                      label={translate('common.account.profile.email')}
+                      label="E-mail"
                       value={user?.email ?? ''}
                       disabled
                       classnameContainer="bg-gray-50 border-0!"
@@ -240,7 +226,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     className="absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer"
                     onClick={() => setChangeEmailOpen(true)}
                   >
-                    {translate('common.account.profile.change')}
+                    Alterar
                   </button>
                 </div>
               </div>
@@ -261,10 +247,10 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               onClose();
             }}
           >
-            {translate('common.actions.cancel')}
+            Cancelar
           </Button>
           <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
-            {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
+            {isSubmitting ? 'Salvando...' : 'Salvar alterações'}
           </Button>
         </div>
       </form>