chore: add localization support for email account settings

(cherry picked from commit 5eb46f6b6cd528c22a0d01cd564c7209d4ee78b4) # Conflicts: # frontend/src/components/Settings/emailConfig.ts
2025-04-22 15:33:28 +05:30 · 2025-04-22 15:33:28 +05:30 · b28c6b94f1
commit b28c6b94f1
parent 1f1090c2e6
5 changed files with 67 additions and 49 deletions
--- a/frontend/src/components/Settings/EmailAccountCard.vue
+++ b/frontend/src/components/Settings/EmailAccountCard.vue
@ -13,7 +13,7 @@
      </div>
    </div>
    <div>
-      <Badge variant="subtle" :label="badgeTitleColor" :theme="gray" />
+      <Badge variant="subtle" :label="badgeTitle" :theme="gray" />
    </div>
    <!-- email id -->
  </div>
@ -31,18 +31,18 @@ const props = defineProps({
  },
 })

-const badgeTitleColor = computed(() => {
+const badgeTitle = computed(() => {
  if (
    props.emailAccount.default_incoming &&
    props.emailAccount.default_outgoing
  ) {
-    return 'Default Sending and Inbox'
+    return __('Default Sending and Inbox')
  } else if (props.emailAccount.default_incoming) {
-    return 'Default Inbox'
+    return __('Default Inbox')
  } else if (props.emailAccount.default_outgoing) {
-    return 'Default Sending'
+    return __('Default Sending')
  } else {
-    return 'Inbox'
+    return __('Inbox')
  }
 })
 </script>
--- a/frontend/src/components/Settings/EmailAccountList.vue
+++ b/frontend/src/components/Settings/EmailAccountList.vue
@ -3,10 +3,10 @@
    <!-- header -->
    <div class="flex items-center justify-between text-ink-gray-9">
      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
-        Email Accounts
+        {{ __('Email Accounts') }}
      </h2>
      <Button
-        label="Add Account"
+        :label="__('Add Account')"
        theme="gray"
        variant="solid"
        @click="emit('update:step', 'email-add')"
@ -31,7 +31,7 @@
    </div>
    <!-- fallback if no email accounts -->
    <div v-else class="flex items-center justify-center h-64 text-gray-500">
-      Please add an email account to continue.
+      {{ __('Please add an email account to continue.') }}
    </div>
  </div>
 </template>
--- a/frontend/src/components/Settings/EmailAdd.vue
+++ b/frontend/src/components/Settings/EmailAdd.vue
@ -2,9 +2,11 @@
  <div class="flex flex-col h-full gap-4">
    <!-- title and desc -->
    <div role="heading" aria-level="1" class="flex flex-col gap-1">
-      <h2 class="text-xl font-semibold text-ink-gray-9">Setup Email</h2>
+      <h2 class="text-xl font-semibold text-ink-gray-9">
+        {{ __('Setup Email') }}
+      </h2>
      <p class="text-sm text-gray-600">
-        Choose the email service provider you want to configure.
+        {{ __('Choose the email service provider you want to configure.') }}
      </p>
    </div>
    <!-- email service provider selection -->
@ -138,14 +140,14 @@ const addEmailRes = createResource({
  },
  onSuccess: () => {
    createToast({
-      title: 'Email account created successfully',
+      title: __('Email account created successfully'),
      icon: 'check',
      iconClasses: 'text-green-600',
    })
    emit('update:step', 'email-list')
  },
  onError: () => {
-    error.value = 'Failed to create email account, Invalid credentials'
+    error.value = __('Failed to create email account, Invalid credentials')
  },
 })

--- a/frontend/src/components/Settings/EmailEdit.vue
+++ b/frontend/src/components/Settings/EmailEdit.vue
@ -2,7 +2,9 @@
  <div class="flex flex-col h-full gap-4">
    <!-- title and desc -->
    <div role="heading" aria-level="1" class="flex justify-between gap-1">
-      <h2 class="text-xl font-semibold text-ink-gray-9">Edit Email</h2>
+      <h2 class="text-xl font-semibold text-ink-gray-9">
+        {{ __('Edit Email') }}
+      </h2>
    </div>
    <div class="w-fit">
      <EmailProviderIcon
@ -19,7 +21,9 @@
      />
      <div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
        {{ info.description }}
-        <a :href="info.link" target="_blank" class="underline">here</a>
+        <a :href="info.link" target="_blank" class="underline">{{
+          __('here')
+        }}</a>
        .
      </div>
    </div>
@ -60,14 +64,14 @@
    <!-- action buttons -->
    <div class="flex justify-between mt-auto">
      <Button
-        label="Back"
+        :label="__('Back')"
        theme="gray"
        variant="outline"
        :disabled="loading"
        @click="emit('update:step', 'email-list')"
      />
      <Button
-        label="Update Account"
+        :label="__('Update Account')"
        variant="solid"
        @click="updateAccount"
        :loading="loading"
@ -112,7 +116,7 @@ const state = reactive({
 })

 const info = {
-  description: 'To know more about setting up email accounts, click',
+  description: __('To know more about setting up email accounts, click'),
  link: 'https://docs.erpnext.com/docs/user/manual/en/email-account',
 }

@ -145,7 +149,7 @@ async function updateAccount() {

  if (!nameChanged && !otherFieldsChanged) {
    createToast({
-      title: 'No changes made',
+      title: __('No changes made'),
      icon: 'info',
      iconClasses: 'text-blue-600',
    })
@ -207,7 +211,7 @@ async function callSetValue(values) {
 function succesHandler() {
  emit('update:step', 'email-list')
  createToast({
-    title: 'Email account updated successfully',
+    title: __('Email account updated successfully'),
    icon: 'check',
    iconClasses: 'text-green-600',
  })
@ -215,6 +219,6 @@ function succesHandler() {

 function errorHandler() {
  loading.value = false
-  error.value = 'Failed to update email account, Invalid credentials'
+  error.value = __('Failed to update email account, Invalid credentials')
 }
 </script>
--- a/frontend/src/components/Settings/emailConfig.ts
+++ b/frontend/src/components/Settings/emailConfig.ts
@ -10,10 +10,10 @@ const LogoFrappeMail = '/images/frappe-mail.svg'

 const fixedFields = [
  {
-    label: 'Account Name',
+    label: __('Account Name'),
    name: 'email_account_name',
    type: 'text',
-    placeholder: 'Support / Sales',
+    placeholder: __('Support / Sales'),
  },
  {
    label: 'Email ID',
@ -25,38 +25,48 @@ const fixedFields = [

 export const incomingOutgoingFields = [
  {
-    label: 'Enable Incoming',
+    label: __('Enable Incoming'),
    name: 'enable_incoming',
    type: 'checkbox',
+<<<<<<< HEAD:frontend/src/components/Settings/emailConfig.ts
    description:
      'If enabled, tickets can be created from the incoming emails on this account.',
+=======
+    description: __(
+      'If enabled, records can be created from the incoming emails on this account.',
+    ),
+>>>>>>> 5eb46f6 (chore: add localization support for email account settings):frontend/src/components/Settings/emailConfig.js
  },
  {
-    label: 'Enable Outgoing',
+    label: __('Enable Outgoing'),
    name: 'enable_outgoing',
    type: 'checkbox',
-    description: 'If enabled, outgoing emails can be sent from this account.',
+    description: __(
+      'If enabled, outgoing emails can be sent from this account.',
+    ),
  },
  {
-    label: 'Default Incoming',
+    label: __('Default Incoming'),
    name: 'default_incoming',
    type: 'checkbox',
-    description:
+    description: __(
      'If enabled, all replies to your company (eg: replies@yourcomany.com) will come to this account. Note: Only one account can be default incoming.',
+    ),
  },
  {
-    label: 'Default Outgoing',
+    label: __('Default Outgoing'),
    name: 'default_outgoing',
    type: 'checkbox',
-    description:
+    description: __(
      'If enabled, all outgoing emails will be sent from this account. Note: Only one account can be default outgoing.',
+    ),
  },
 ]

 export const popularProviderFields = [
  ...fixedFields,
  {
-    label: 'Password',
+    label: __('Password'),
    name: 'password',
    type: 'password',
    placeholder: '********',
@ -89,55 +99,57 @@ export const services = [
  {
    name: 'GMail',
    icon: LogoGmail,
-    info: `Setting up GMail requires you to enable two factor authentication
-		  and app specific passwords. Read more`,
+    info: __(`Setting up GMail requires you to enable two factor authentication
+		  and app specific passwords. Read more`),
    link: 'https://support.google.com/accounts/answer/185833',
    custom: false,
  },
  {
    name: 'Outlook',
    icon: LogoOutlook,
-    info: `Setting up Outlook requires you to enable two factor authentication
-		  and app specific passwords. Read more`,
+    info: __(`Setting up Outlook requires you to enable two factor authentication
+		  and app specific passwords. Read more`),
    link: 'https://support.microsoft.com/en-us/account-billing/how-to-get-and-use-app-passwords-5896ed9b-4263-e681-128a-a6f2979a7944',
    custom: false,
  },
  {
    name: 'Sendgrid',
    icon: LogoSendgrid,
-    info: `Setting up Sendgrid requires you to enable two factor authentication
-		  and app specific passwords. Read more `,
+    info: __(`Setting up Sendgrid requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
    link: 'https://sendgrid.com/docs/ui/account-and-settings/two-factor-authentication/',
    custom: false,
  },
  {
    name: 'SparkPost',
    icon: LogoSparkpost,
-    info: `Setting up SparkPost requires you to enable two factor authentication
-		  and app specific passwords. Read more `,
+    info: __(`Setting up SparkPost requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
    link: 'https://support.sparkpost.com/docs/my-account-and-profile/enabling-two-factor-authentication',
    custom: false,
  },
  {
    name: 'Yahoo',
    icon: LogoYahoo,
-    info: `Setting up Yahoo requires you to enable two factor authentication
-		  and app specific passwords. Read more `,
+    info: __(`Setting up Yahoo requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
    link: 'https://help.yahoo.com/kb/SLN15241.html',
    custom: false,
  },
  {
    name: 'Yandex',
    icon: LogoYandex,
-    info: `Setting up Yandex requires you to enable two factor authentication
-		  and app specific passwords. Read more `,
+    info: __(`Setting up Yandex requires you to enable two factor authentication
+		  and app specific passwords. Read more `),
    link: 'https://yandex.com/support/id/authorization/app-passwords.html',
    custom: false,
  },
  {
    name: 'Frappe Mail',
    icon: LogoFrappeMail,
-    info: `Setting up Frappe Mail requires you to have an API key and API Secret of your email account. Read more `,
+    info: __(
+      `Setting up Frappe Mail requires you to have an API key and API Secret of your email account. Read more `,
+    ),
    link: 'https://github.com/frappe/mail',
    custom: true,
  },
@ -155,21 +167,21 @@ export const emailIcon = {

 export function validateInputs(state, isCustom) {
  if (!state.email_account_name) {
-    return 'Account name is required'
+    return __('Account name is required')
  }
  if (!state.email_id) {
-    return 'Email ID is required'
+    return __('Email ID is required')
  }
  const validEmail = validateEmail(state.email_id)
  if (!validEmail) {
-    return 'Invalid email ID'
+    return __('Invalid email ID')
  }
  if (!isCustom && !state.password) {
-    return 'Password is required'
+    return __('Password is required')
  }
  if (isCustom) {
    if (!state.api_key) {
-      return 'API Key is required'
+      return __('API Key is required')
    }
    if (!state.api_secret) {
      return