@greatapps/common 1.1.666 → 1.1.668

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

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

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

@@ -1,6 +1,7 @@
 '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';
@@ -11,6 +12,7 @@ interface ChangePasswordSectionProps {
 }
 
 export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
+  const translate = useTranslations();
   const { register, handleSubmit, errors } = useChangePasswordForm({
     onSuccess: onBack,
   });
@@ -23,7 +25,9 @@ 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">Alterar senha</span>
+        <span className="paragraph-medium-semibold text-gray-950">
+          {translate('common.account.changePassword.title')}
+        </span>
         <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
           <IconX size={18} />
         </Button>
@@ -31,9 +35,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
 
       <div className="flex flex-col gap-4">
         <FormField
-          label="Senha atual"
+          label={translate('common.account.changePassword.currentPassword')}
           type="password"
-          placeholder="Digite sua senha atual"
+          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}
           leftIcon={IconLock}
           error={!!errors.currentPassword}
           errorMessage={errors.currentPassword?.message}
@@ -43,9 +47,9 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
           {...register('currentPassword')}
         />
         <FormField
-          label="Nova senha"
+          label={translate('common.account.changePassword.newPassword')}
           type="password"
-          placeholder="Digite sua nova senha"
+          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}
           leftIcon={IconLock}
           error={!!errors.newPassword}
           errorMessage={errors.newPassword?.message}
@@ -57,7 +61,7 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
       </div>
 
       <Button type="submit" className="w-fit h-10!">
-        Salvar nova senha
+        {translate('common.account.changePassword.submit')}
       </Button>
     </form>
   );

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

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

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

@@ -2,6 +2,7 @@
 
 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';
@@ -26,6 +27,13 @@ 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);
@@ -86,16 +94,20 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
       form.reset(data);
       setSelectedPhoto(null);
       setPhotoRemoved(false);
-      toast.custom((t) => (
-        <Toast variant="success" message="Perfil atualizado com sucesso" toastId={t} />
+      toast.custom((toastId) => (
+        <Toast
+          variant="success"
+          message={translate('common.account.profile.savedSuccess')}
+          toastId={toastId}
+        />
       ));
       onClose();
     } catch (error) {
-      toast.custom((t) => (
+      toast.custom((toastId) => (
         <Toast
           variant="error"
-          message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}
-          toastId={t}
+          message={error instanceof Error ? error.message : translate('common.account.profile.saveError')}
+          toastId={toastId}
         />
       ));
     }
@@ -113,14 +125,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">
-            Meu perfil
+            {translate('common.account.profile.title')}
           </span>
           <div className="flex flex-col gap-5">
             <div className="flex items-center gap-4">
               {avatarPreview ? (
                 <Image
                   src={avatarPreview}
-                  alt="Foto do usuário"
+                  alt={translate('common.account.profile.avatarAlt')}
                   width={48}
                   height={48}
                   className="size-12 rounded-full object-cover cursor-pointer"
@@ -142,7 +154,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                     type="button"
                     onClick={() => fileInputRef.current?.click()}
                   >
-                    Alterar foto
+                    {translate('common.account.profile.changePhoto')}
                   </Button>
                   <Button
                     type="button"
@@ -160,7 +172,7 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                 >
-                  Alterar foto
+                  {translate('common.account.profile.changePhoto')}
                 </Button>
               )}
             </div>
@@ -169,31 +181,31 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <div className="flex flex-col gap-4">
                 <div className="flex gap-4">
                   <FormField
-                    label="Nome"
-                    placeholder="Digite seu nome"
+                    label={translate('common.account.profile.name')}
+                    placeholder={translate('common.account.profile.namePlaceholder')}
                     error={!!errors.name}
                     errorMessage={errors.name?.message}
                     {...register('name')}
                   />
                   <FormField
-                    label="Sobrenome"
-                    placeholder="Digite seu sobrenome"
+                    label={translate('common.account.profile.lastName')}
+                    placeholder={translate('common.account.profile.lastNamePlaceholder')}
                     error={!!errors.last_name}
                     errorMessage={errors.last_name?.message}
                     {...register('last_name')}
                   />
                 </div>
                 <SelectField
-                  label="Gênero"
-                  placeholder="Selecione seu gênero"
-                  options={GENDER_OPTIONS}
+                  label={translate('common.account.profile.gender')}
+                  placeholder={translate('common.account.profile.genderPlaceholder')}
+                  options={genderOptions}
                   value={watch('gender')}
                   className="h-10!"
                   onChange={(value) => setValue('gender', value as string)}
                 />
                 <div className="relative">
                   <PhoneInput
-                    label="Telefone"
+                    label={translate('common.account.profile.phone')}
                     value={user?.phone ?? ''}
                     disabled
                     classnameContainer="bg-gray-50 border-0!"
@@ -203,7 +215,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)}
                   >
-                    Alterar
+                    {translate('common.account.profile.change')}
                   </button>
                 </div>
               </div>
@@ -211,11 +223,13 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               <Separator />
 
               <div className="flex flex-col gap-4">
-                <span className="paragraph-medium-semibold text-gray-600">Dados de acesso</span>
+                <span className="paragraph-medium-semibold text-gray-600">
+                  {translate('common.account.profile.accessData')}
+                </span>
                 <div className="relative">
                   <div className='cursor-not-allowed'>
                     <FormField
-                      label="E-mail"
+                      label={translate('common.account.profile.email')}
                       value={user?.email ?? ''}
                       disabled
                       classnameContainer="bg-gray-50 border-0!"
@@ -226,7 +240,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)}
                   >
-                    Alterar
+                    {translate('common.account.profile.change')}
                   </button>
                 </div>
               </div>
@@ -247,10 +261,10 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
               onClose();
             }}
           >
-            Cancelar
+            {translate('common.actions.cancel')}
           </Button>
           <Button className="h-10! cursor-pointer" type="submit" disabled={isSubmitting}>
-            {isSubmitting ? 'Salvando...' : 'Salvar alterações'}
+            {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
           </Button>
         </div>
       </form>