feat: dialogs translations

frontend/vizzy/app/components/forms/location-form.tsx

@@ -18,6 +18,7 @@
 import { Loader2 } from 'lucide-react';
 import { fetchLocationDetails } from '@/lib/api/location/geocoding';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 interface LocationFormProps {
   defaultValues?: Partial<LocationValues>;
@@ -50,7 +51,7 @@
       })
     | null
   >(null);
-
+  const t = useTranslations('accountSettings.profileTab.location');
   const form = useForm<LocationValues>({
     resolver: zodResolver(locationSchema),
     defaultValues: {
@@ -66,9 +67,7 @@
       const result = await fetchLocationDetails(data.country, data.village);
 
       if (!result.data?.valid) {
-        toast.warning(
-          "We couldn't find this location. Please check your input and try again.",
-        );
+        toast.warning(t('locationError'));
         form.setError('country', {
           type: 'manual',
           message: 'Please check your input',
@@ -81,12 +80,10 @@
         !result.data.latitude ||
         !result.data.longitude
       ) {
-        toast.warning(
-          "We found the location but couldn't get all the details. Please try entering a more specific location.",
-        );
+        toast.warning(t('locationFoundButIncomplete'));
         form.setError('country', {
           type: 'manual',
-          message: 'Please try a more specific location',
+          message: t('locationFoundButIncompleteMessage'),
         });
         return;
       }
@@ -101,12 +98,10 @@
       setShowConfirmation(true);
     } catch (error) {
       console.error('Error validating location:', error);
-      toast.error(
-        'There was an error validating your location. Please try again.',
-      );
+      toast.error(t('validationError'));
       form.setError('country', {
         type: 'manual',
-        message: 'Please check your input',
+        message: t('validationErrorMessage'),
       });
     } finally {
       setIsLoading(false);
@@ -127,10 +122,10 @@
     return (
       <div className="space-y-6">
         <div className="bg-muted p-4 rounded-md">
-          <h3 className="font-medium mb-2">Confirm Your Location</h3>
+          <h3 className="font-medium mb-2">{t('confirmLocation')}</h3>
           <div className="space-y-2">
             <div>
-              <span className="font-medium">Full Address:</span>{' '}
+              <span className="font-medium">{t('fullAddress')}:</span>{' '}
               {locationData.fullAddress}
             </div>
             <div className="text-xs text-muted-foreground">
@@ -147,10 +142,10 @@
             className="flex-1"
             onClick={handleEdit}
           >
-            Edit
+            {t('edit')}
           </Button>
           <Button type="button" className="flex-1" onClick={handleConfirm}>
-            Confirm
+            {t('confirm')}
           </Button>
         </div>
       </div>
@@ -175,9 +170,9 @@
           name="country"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Country</FormLabel>
+              <FormLabel>{t('country')}</FormLabel>
               <FormControl>
-                <Input placeholder="Enter your country" {...field} />
+                <Input placeholder={t('countryPlaceholder')} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -189,9 +184,9 @@
           name="village"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Village</FormLabel>
+              <FormLabel>{t('village')}</FormLabel>
               <FormControl>
-                <Input placeholder="Enter your village" {...field} />
+                <Input placeholder={t('villagePlaceholder')} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -213,7 +208,7 @@
             {isLoading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Validating...
+                {t('loading')}
               </>
             ) : (
               submitButtonText

frontend/vizzy/app/profile/[username]/page.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/components/ui/data-display/avatar';
 import { Badge } from '@/components/ui/common/badge';
 import { Card } from '@/components/ui/data-display/card';
-import { ChevronRight, MapPin } from 'lucide-react';
+import { MapPin } from 'lucide-react';
 import { Button } from '@/components/ui/common/button';
 import UserListings from './components/user-listings';
 import Link from 'next/link';
@@ -140,14 +140,6 @@ export default async function ProfilePage(props: ProfilePageProps) {
           <h2 className="text-xl font-semibold">
             {t('listingsSection.title')}
           </h2>
-          {/* TODO: create the See all page (paginated list of product listings) */}
-          <Link
-            href={''}
-            className="text-sm text-primary hover:text-primary/80 transition-colors font-medium flex items-center gap-1"
-          >
-            {t('listingsSection.seeAll')}
-            <ChevronRight className="h-6 w-6" />
-          </Link>
         </div>
         {user.activeListings > 0 ? (
           <UserListings userid={user.id} />

frontend/vizzy/app/refresh/page.tsx

@@ -7,7 +7,7 @@ import { getAuthTokensAction } from '@/lib/actions/auth/token-action';
 import { useTranslations } from 'next-intl';
 
 export default function RefreshPage() {
-  const t = useTranslations('auth.refresh');
+  const t = useTranslations('common.auth.refresh');
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isLoading, setIsLoading] = useState(true);
@@ -69,7 +69,9 @@ export default function RefreshPage() {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center text-destructive">
-          <p>{t('errors.prefix')}: {error}</p>
+          <p>
+            {t('errors.prefix')}: {error}
+          </p>
           <button
             onClick={() => navigateTo('/auth/login')}
             className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded"

frontend/vizzy/app/settings/account/page.tsx

@@ -24,12 +24,13 @@
 import { deleteAccountAction } from '@/lib/actions/auth/delete-account-action';
 import { useRouter } from 'next/navigation';
 import { ROUTES } from '@/lib/constants/routes/routes';
+import { useTranslations } from 'next-intl';
 
 export default function AccountSettings() {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const router = useRouter();
-
+  const t = useTranslations('accountSettings.accountTab');
   const handleDelete = async () => {
     try {
       setIsDeleting(true);
@@ -54,11 +55,9 @@
       <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Delete Account</DialogTitle>
+            <DialogTitle>{t('deleteAccountButton')}</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete your account? This action cannot
-              be undone. All of your data will be permanently removed from our
-              servers.
+              {t('deleteAccountDescription')}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
@@ -68,77 +67,68 @@
               disabled={isDeleting}
               className="cursor-pointer"
             >
-              Cancel
+              {t('cancel')}
             </Button>
             <Button
               variant="destructive"
               onClick={handleDelete}
               disabled={isDeleting}
               className="cursor-pointer"
             >
-              {isDeleting ? 'Deleting...' : 'Delete Account'}
+              {isDeleting ? t('deleting') : t('deleteAccountButton')}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       <div className="space-y-6">
         <div>
-          <h3 className="text-lg font-medium">Account</h3>
-          <p className="text-sm text-muted-foreground">
-            Manage your account settings and preferences.
-          </p>
+          <h3 className="text-lg font-medium">{t('account')}</h3>
+          <p className="text-sm text-muted-foreground">{t('description')}</p>
         </div>
         {/* TODO: Implement password update */}
         <form>
           <Card className="mb-6">
             <CardHeader>
-              <CardTitle>Password</CardTitle>
-              <CardDescription>
-                Change your password here. After saving, you&apos;ll be logged
-                out.
-              </CardDescription>
+              <CardTitle>{t('password')}</CardTitle>
+              <CardDescription>{t('passwordDescription')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="current">Current password</Label>
+                <Label htmlFor="current">{t('currentPassword')}</Label>
                 <Input disabled id="current" type="password" />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="new">New password</Label>
+                <Label htmlFor="new">{t('newPassword')}</Label>
                 <Input disabled id="new" type="password" />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="confirm">Confirm password</Label>
+                <Label htmlFor="confirm">{t('confirmPassword')}</Label>
                 <Input disabled id="confirm" type="password" />
               </div>
             </CardContent>
             <CardFooter>
-              <Button disabled>Change password</Button>
+              <Button disabled>{t('changePassword')}</Button>
             </CardFooter>
           </Card>
         </form>
 
         <Card className="border-destructive">
           <CardHeader>
-            <CardTitle className="text-destructive">Danger Zone</CardTitle>
-            <CardDescription>
-              Permanently delete your account and all of your content.
-            </CardDescription>
+            <CardTitle className="text-destructive">
+              {t('dangerZone')}
+            </CardTitle>
+            <CardDescription>{t('dangerZoneDescription')}</CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground mb-4">
-              Once you delete your account, there is no going back. This action
-              cannot be undone. All of your data will be permanently removed
-              from our servers.
-            </p>
+            <p className="text-sm text-muted-foreground mb-4"></p>
             <Button
               variant="destructive"
               onClick={() => setShowConfirmDialog(true)}
               disabled={isDeleting}
               className="cursor-pointer"
             >
-              Delete Account
+              {t('deleteAccountButton')}
             </Button>
           </CardContent>
         </Card>

frontend/vizzy/app/settings/components/contact-form.tsx

@@ -2,6 +2,7 @@ import { Button } from '@/components/ui/common/button';
 import { Card, CardContent } from '@/components/ui/data-display/card';
 import { Input } from '@/components/ui/forms/input';
 import { Label } from '@/components/ui/common/label';
+import { useTranslations } from 'next-intl';
 
 interface ContactFormProps {
   newContact: {
@@ -22,33 +23,36 @@ export function ContactForm({
   onSave,
   isAddingContact,
 }: ContactFormProps) {
+  const t = useTranslations('accountSettings.profileTab.contacts');
   return (
     <Card className="border-dashed border-2">
       <CardContent className="pt-6">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div className="space-y-2">
-            <Label htmlFor="contactName">Name</Label>
+            <Label htmlFor="contactName">{t('contactName')}</Label>
             <Input
               id="contactName"
-              placeholder="Contact name"
+              placeholder={t('contactNamePlaceholder')}
               value={newContact.name}
               onChange={(e) => onContactChange('name', e.target.value)}
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="contactPhone">Phone Number</Label>
+            <Label htmlFor="contactPhone">{t('phoneNumber')}</Label>
             <Input
               id="contactPhone"
-              placeholder="Phone number"
+              placeholder={t('phoneNumberPlaceholder')}
               value={newContact.phone_number}
               onChange={(e) => onContactChange('phone_number', e.target.value)}
             />
           </div>
           <div className="space-y-2 sm:col-span-2">
-            <Label htmlFor="contactDescription">Description</Label>
+            <Label htmlFor="contactDescription">
+              {t('contactDescription')}
+            </Label>
             <Input
               id="contactDescription"
-              placeholder="Description"
+              placeholder={t('contactDescriptionPlaceholder')}
               value={newContact.description}
               onChange={(e) => onContactChange('description', e.target.value)}
             />
@@ -61,7 +65,7 @@ export function ContactForm({
             disabled={isAddingContact}
             className="cursor-pointer"
           >
-            Cancel
+            {t('cancel')}
           </Button>
           <Button
             onClick={onSave}
@@ -73,7 +77,7 @@ export function ContactForm({
             }
             className="cursor-pointer"
           >
-            {isAddingContact ? 'Saving...' : 'Save Contact'}
+            {isAddingContact ? t('saving') : t('saveContact')}
           </Button>
         </div>
       </CardContent>

frontend/vizzy/app/settings/components/contacts-list.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/components/ui/common/button';
 import { User, Trash2 } from 'lucide-react';
 import type { Contact } from '@/types/contact';
+import { useTranslations } from 'next-intl';
 
 interface ContactsListProps {
   contacts: Contact[];
@@ -13,13 +14,14 @@ export function ContactsList({
   isDeletingContact,
   onDelete,
 }: ContactsListProps) {
+  const t = useTranslations('accountSettings.profileTab.contacts');
   if (contacts.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-8 text-center">
         <User className="h-12 w-12 text-muted-foreground mb-2" />
-        <h3 className="text-lg font-medium">No contacts yet</h3>
+        <h3 className="text-lg font-medium">{t('noContacts')}</h3>
         <p className="text-sm text-muted-foreground">
-          Add your first contact to get started.
+          {t('noContactsDescription')}
         </p>
       </div>
     );
@@ -55,7 +57,7 @@ export function ContactsList({
             ) : (
               <Trash2 className="h-4 w-4" />
             )}
-            <span className="sr-only">Delete contact</span>
+            <span className="sr-only">{t('deleteContact')}</span>
           </Button>
         </div>
       ))}