Implement internationalization for account settings and search components. Added translation support for various UI elements, including billing, notifications, and user dropdowns. Refactored search suggestions and no result messages to utilize localized text. Enhanced user experience by ensuring all relevant components display text based on selected language.

2026-02-19 17:41:37 +03:30
parent 0844100613
commit 25344a8738
14 changed files with 646 additions and 415 deletions
@@ -2,6 +2,7 @@

 // React Imports
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'

 // MUI Imports
 import Grid from '@mui/material/Grid2'
@@ -16,32 +17,35 @@ import InputAdornment from '@mui/material/InputAdornment'
 import CustomTextField from '@core/components/mui/TextField'

 const Address = () => {
+  const t = useTranslations('accountSettings')
+  const tBilling = useTranslations('accountSettings.billing')
+
  // States
  const [state, setState] = useState('')

  return (
    <Card>
-      <CardHeader title='Billing Address' />
+      <CardHeader title={tBilling('billingAddress')} />
      <CardContent>
        <form>
          <Grid container spacing={6}>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth label='Company Name' variant='outlined' placeholder='Pixinvent' />
+              <CustomTextField fullWidth label={tBilling('companyName')} variant='outlined' placeholder='Pixinvent' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth label='Billing Email' variant='outlined' placeholder='john.doe@example.com' />
+              <CustomTextField fullWidth label={tBilling('billingEmail')} variant='outlined' placeholder='john.doe@example.com' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth label='TAX ID' variant='outlined' placeholder='Enter TAX ID' />
+              <CustomTextField fullWidth label={tBilling('taxId')} variant='outlined' placeholder='Enter TAX ID' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth label='VAT Number' variant='outlined' placeholder='Enter VAT Number' />
+              <CustomTextField fullWidth label={tBilling('vatNumber')} variant='outlined' placeholder='Enter VAT Number' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField
                fullWidth
                type='number'
-                label='Mobile Number'
+                label={tBilling('mobileNumber')}
                placeholder='202 555 0111'
                slotProps={{
                  input: {
@@ -51,28 +55,28 @@ const Address = () => {
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField select fullWidth label='Country' value={state} onChange={e => setState(e.target.value)}>
-                <MenuItem value=''>Select Country</MenuItem>
-                <MenuItem value='australia'>Australia</MenuItem>
-                <MenuItem value='canada'>Canada</MenuItem>
-                <MenuItem value='france'>France</MenuItem>
-                <MenuItem value='united-kingdom'>United Kingdom</MenuItem>
-                <MenuItem value='united-states'>United States</MenuItem>
+              <CustomTextField select fullWidth label={tBilling('country')} value={state} onChange={e => setState(e.target.value)}>
+                <MenuItem value=''>{tBilling('selectCountry')}</MenuItem>
+                <MenuItem value='australia'>{tBilling('australia')}</MenuItem>
+                <MenuItem value='canada'>{tBilling('canada')}</MenuItem>
+                <MenuItem value='france'>{tBilling('france')}</MenuItem>
+                <MenuItem value='united-kingdom'>{tBilling('unitedKingdom')}</MenuItem>
+                <MenuItem value='united-states'>{tBilling('unitedStates')}</MenuItem>
              </CustomTextField>
            </Grid>
            <Grid size={{ xs: 12 }}>
-              <CustomTextField fullWidth label='Billing Address' variant='outlined' placeholder='Billing Address' />
+              <CustomTextField fullWidth label={tBilling('billingAddress')} variant='outlined' placeholder={tBilling('billingAddress')} />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth label='State' variant='outlined' placeholder='California' />
+              <CustomTextField fullWidth label={tBilling('state')} variant='outlined' placeholder='California' />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
-              <CustomTextField fullWidth type='number' label='Zip Code' variant='outlined' placeholder='231465' />
+              <CustomTextField fullWidth type='number' label={tBilling('zipCode')} variant='outlined' placeholder='231465' />
            </Grid>
            <Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
-              <Button variant='contained'>Save Changes</Button>
+              <Button variant='contained'>{t('saveChanges')}</Button>
              <Button variant='tonal' type='reset' color='secondary' onClick={() => setState('')}>
-                Discard
+                {tBilling('discard')}
              </Button>
            </Grid>
          </Grid>
@@ -1,3 +1,7 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -21,6 +25,9 @@ import UpgradePlan from '@components/dialogs/upgrade-plan'
 import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'

 const CurrentPlan = ({ data }: { data?: PricingPlanType[] }) => {
+  const t = useTranslations('accountSettings')
+  const tBilling = useTranslations('accountSettings.billing')
+
  const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
    children,
    variant,
@@ -29,60 +36,60 @@ const CurrentPlan = ({ data }: { data?: PricingPlanType[] }) => {

  return (
    <Card>
-      <CardHeader title='Current Plan' />
+      <CardHeader title={tBilling('currentPlan')} />
      <CardContent>
        <Grid container spacing={6}>
          <Grid size={{ xs: 12, md: 6 }} className='flex flex-col gap-6'>
            <div className='flex flex-col gap-1'>
              <Typography color='text.primary' className='font-medium'>
-                Your Current Plan is Basic
+                {tBilling('yourPlanBasic')}
              </Typography>
-              <Typography>A simple start for everyone</Typography>
+              <Typography>{tBilling('simpleStart')}</Typography>
            </div>
            <div className='flex flex-col gap-1'>
              <Typography color='text.primary' className='font-medium'>
-                Active until Dec 09, 2021
+                {tBilling('activeUntil', { date: 'Dec 09, 2021' })}
              </Typography>
-              <Typography>We will send you a notification upon Subscription expiration</Typography>
+              <Typography>{tBilling('subscriptionExpiry')}</Typography>
            </div>
            <div className='flex flex-col gap-1'>
              <div className='flex items-center gap-1.5'>
                <Typography color='text.primary' className='font-medium'>
-                  $199 Per Month
+                  {tBilling('perMonth', { amount: '$199' })}
                </Typography>
-                <Chip color='primary' variant='tonal' label='Popular' size='small' />
+                <Chip color='primary' variant='tonal' label={tBilling('popular')} size='small' />
              </div>
-              <Typography>Standard plan for small to medium businesses</Typography>
+              <Typography>{tBilling('standardPlan')}</Typography>
            </div>
          </Grid>
          <Grid size={{ xs: 12, md: 6 }} className='flex flex-col gap-6'>
            <Alert severity='warning'>
-              <AlertTitle>We need your attention!</AlertTitle>
-              Your plan requires update
+              <AlertTitle>{tBilling('attention')}</AlertTitle>
+              {tBilling('planRequiresUpdate')}
            </Alert>
            <div className='flex flex-col gap-1'>
              <div className='flex items-center justify-between'>
                <Typography color='text.primary' className='font-medium'>
-                  Days
+                  {tBilling('days')}
                </Typography>
                <Typography color='text.primary' className='font-medium'>
-                  12 of 30 Days
+                  {tBilling('daysProgress', { current: '12', total: '30' })}
                </Typography>
              </div>
              <LinearProgress variant='determinate' value={20} />
-              <Typography variant='body2'>18 days remaining until your plan requires update</Typography>
+              <Typography variant='body2'>{tBilling('daysRemaining', { count: '18' })}</Typography>
            </div>
          </Grid>
          <Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
            <OpenDialogOnElementClick
              element={Button}
-              elementProps={buttonProps('Upgrade Plan', 'primary', 'contained')}
+              elementProps={buttonProps(tBilling('upgradePlan'), 'primary', 'contained')}
              dialog={UpgradePlan}
              dialogProps={{ data: data }}
            />
            <OpenDialogOnElementClick
              element={Button}
-              elementProps={buttonProps('Cancel Subscription', 'error', 'tonal')}
+              elementProps={buttonProps(tBilling('cancelSubscription'), 'error', 'tonal')}
              dialog={ConfirmationDialog}
              dialogProps={{ type: 'unsubscribe' }}
            />
@@ -1,5 +1,7 @@
 'use client'

+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -54,14 +56,17 @@ const tableData: TableDataType[] = [
 ]

 const Notifications = () => {
+  const t = useTranslations('accountSettings')
+  const tNotif = useTranslations('accountSettings.notifications')
+
  return (
    <Card>
      <CardHeader
-        title='Recent Devices'
+        title={tNotif('recentDevices')}
        subheader={
          <>
-            We need permission from your browser to show notifications.
-            <Link className='text-primary'> Request Permission</Link>
+            {tNotif('permissionRequest')}
+            <Link className='text-primary'> {tNotif('requestPermission')}</Link>
          </>
        }
      />
@@ -70,8 +75,8 @@ const Notifications = () => {
          <table className={tableStyles.table}>
            <thead>
              <tr>
-                <th>Type</th>
-                <th>Email</th>
+                <th>{tNotif('type')}</th>
+                <th>{t('email')}</th>
                <th>Browser</th>
                <th>App</th>
              </tr>
@@ -97,20 +102,20 @@ const Notifications = () => {
          </table>
        </div>
        <CardContent>
-          <Typography className='mbe-6 font-medium'>When should we send you notifications?</Typography>
+          <Typography className='mbe-6 font-medium'>{tNotif('whenToSend')}</Typography>
          <Grid container spacing={6}>
            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
              <CustomTextField select fullWidth defaultValue='online'>
-                <MenuItem value='online'>Only when I&#39;m online</MenuItem>
-                <MenuItem value='anytime'>Anytime</MenuItem>
+                <MenuItem value='online'>{tNotif('onlyWhenOnline')}</MenuItem>
+                <MenuItem value='anytime'>{tNotif('anytime')}</MenuItem>
              </CustomTextField>
            </Grid>
            <Grid size={{ xs: 12 }} className='flex gap-4 flex-wrap'>
              <Button variant='contained' type='submit'>
-                Save Changes
+                {t('saveChanges')}
              </Button>
              <Button variant='tonal' color='secondary' type='reset'>
-                Discard
+                {tNotif('discard')}
              </Button>
            </Grid>
          </Grid>
@@ -2,6 +2,7 @@

 // React Imports
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'

 // MUI Imports
 import Card from '@mui/material/Card'
@@ -17,6 +18,9 @@ import Button from '@mui/material/Button'
 import CustomTextField from '@core/components/mui/TextField'

 const ChangePasswordCard = () => {
+  const t = useTranslations('accountSettings')
+  const tSecurity = useTranslations('accountSettings.security')
+
  // States
  const [isCurrentPasswordShown, setIsCurrentPasswordShown] = useState(false)
  const [isConfirmPasswordShown, setIsConfirmPasswordShown] = useState(false)
@@ -28,14 +32,14 @@ const ChangePasswordCard = () => {

  return (
    <Card>
-      <CardHeader title='Change Password' />
+      <CardHeader title={tSecurity('changePassword')} />
      <CardContent>
        <form>
          <Grid container spacing={6}>
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField
                fullWidth
-                label='Current Password'
+                label={tSecurity('currentPassword')}
                type={isCurrentPasswordShown ? 'text' : 'password'}
                placeholder='············'
                slotProps={{
@@ -60,7 +64,7 @@ const ChangePasswordCard = () => {
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField
                fullWidth
-                label='New Password'
+                label={tSecurity('newPassword')}
                type={isNewPasswordShown ? 'text' : 'password'}
                placeholder='············'
                slotProps={{
@@ -83,7 +87,7 @@ const ChangePasswordCard = () => {
            <Grid size={{ xs: 12, sm: 6 }}>
              <CustomTextField
                fullWidth
-                label='Confirm New Password'
+                label={tSecurity('confirmNewPassword')}
                type={isConfirmPasswordShown ? 'text' : 'password'}
                placeholder='············'
                slotProps={{
@@ -104,26 +108,26 @@ const ChangePasswordCard = () => {
              />
            </Grid>
            <Grid size={{ xs: 12 }} className='flex flex-col gap-4'>
-              <Typography variant='h6'>Password Requirements:</Typography>
+              <Typography variant='h6'>{tSecurity('passwordRequirements')}</Typography>
              <div className='flex flex-col gap-4'>
                <div className='flex items-center gap-2.5'>
                  <i className='tabler-circle-filled text-[8px]' />
-                  Minimum 8 characters long - the more, the better
+                  {tSecurity('passwordReq1')}
                </div>
                <div className='flex items-center gap-2.5'>
                  <i className='tabler-circle-filled text-[8px]' />
-                  At least one lowercase & one uppercase character
+                  {tSecurity('passwordReq2')}
                </div>
                <div className='flex items-center gap-2.5'>
                  <i className='tabler-circle-filled text-[8px]' />
-                  At least one number, symbol, or whitespace character
+                  {tSecurity('passwordReq3')}
                </div>
              </div>
            </Grid>
            <Grid size={{ xs: 12 }} className='flex gap-4'>
-              <Button variant='contained'>Save Changes</Button>
+              <Button variant='contained'>{t('saveChanges')}</Button>
              <Button variant='tonal' type='reset' color='secondary'>
-                Reset
+                {t('reset')}
              </Button>
            </Grid>
          </Grid>
@@ -1,5 +1,7 @@
 'use client'

+import { useTranslations } from 'next-intl'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -12,24 +14,27 @@ import MenuItem from '@mui/material/MenuItem'
 import CustomTextField from '@core/components/mui/TextField'

 const CreateApiKey = () => {
+  const t = useTranslations('accountSettings')
+  const tSecurity = useTranslations('accountSettings.security')
+
  return (
    <Card>
-      <CardHeader title='Create an API Key' />
+      <CardHeader title={tSecurity('createApiKey')} />
      <CardContent className='!pb-0'>
        <Grid container spacing={6}>
          <Grid size={{ xs: 12, md: 6 }}>
            <form className='flex justify-end items-end bs-full flex-col gap-5 pbe-6'>
-              <CustomTextField select fullWidth label='Choose the API key type you want to create' defaultValue=''>
-                <MenuItem value='full-control'>Full Control</MenuItem>
-                <MenuItem value='modify'>Modify</MenuItem>
-                <MenuItem value='read-execute'>Read & Execute</MenuItem>
-                <MenuItem value='list-folder-contents'>List Folder Contents</MenuItem>
-                <MenuItem value='read-only'>Read Only</MenuItem>
-                <MenuItem value='read-write'>Read & Write</MenuItem>
+              <CustomTextField select fullWidth label={tSecurity('apiKeyType')} defaultValue=''>
+                <MenuItem value='full-control'>{tSecurity('fullControl')}</MenuItem>
+                <MenuItem value='modify'>{tSecurity('modify')}</MenuItem>
+                <MenuItem value='read-execute'>{tSecurity('readExecute')}</MenuItem>
+                <MenuItem value='list-folder-contents'>{tSecurity('listFolderContents')}</MenuItem>
+                <MenuItem value='read-only'>{tSecurity('readOnly')}</MenuItem>
+                <MenuItem value='read-write'>{tSecurity('readWrite')}</MenuItem>
              </CustomTextField>
-              <CustomTextField label='Name the API key' placeholder='Server key 1' fullWidth />
+              <CustomTextField label={tSecurity('apiKeyName')} placeholder='Server key 1' fullWidth />
              <Button variant='contained' fullWidth>
-                Create Key
+                {tSecurity('createKey')}
              </Button>
            </form>
          </Grid>