Add support article links to email aliases section (#1034)

* Add support article links to email aliases

* Update copy of email aliases support text

Author: davinotdavid

assets/app/vue/defines.ts

@@ -3,6 +3,8 @@ export const OTHER_APPS_SUPPORT_URL = 'https://support.tb.pro/hc/en-us/articles/
 export const WHAT_IS_IMAP_SUPPORT_URL = 'https://support.tb.pro/hc/articles/46108465880467-What-is-IMAP';
 export const WHAT_IS_JMAP_SUPPORT_URL = 'https://support.tb.pro/hc/articles/46109214513939-What-is-JMAP';
 export const WHAT_IS_SMTP_SUPPORT_URL = 'https://support.tb.pro/hc/articles/46106891841043-What-is-SMTP';
+export const EMAIL_ALIASES_SUPPORT_URL = 'https://support.tb.pro/hc/articles/46804820453907';
+export const EMAIL_ALIASES_CATCH_ALL_SUPPORT_URL = 'https://support.tb.pro/hc/articles/51338950680467';
 export const DOWNLOAD_THUNDERBIRD_DESKTOP_URL = 'https://www.thunderbird.net/thunderbird/all?utm_campaign=main&utm_medium=tb_pro&utm_source=thundermail_dashboard&utm_content=desktop_download';
 export const DOWNLOAD_THUNDERBIRD_MOBILE_URL = 'https://play.google.com/store/apps/details?id=net.thunderbird.android&referrer=utm_campaign%3Dmain%26utm_medium%3Dtb_pro%26utm_source%3Dthundermail_dashboard%26utm_content%3Dmobile_download';
 export const IOS_SUPPORT_URL = 'https://support.tb.pro/hc/en-us/articles/51053665815827-Setting-Up-Thundermail-on-iOS';

assets/app/vue/locales/en.json

@@ -210,7 +210,10 @@
           "anErrorOccurredWhileChangingDisplayName": "An error occurred while changing the display name",
           "newDisplayName": "New display name",
           "displayNamePlaceholder": "Enter your display name",
-          "displayNameRequired": "Display name is required"
+          "displayNameRequired": "Display name is required",
+          "emailAliasesLearnMore": "Learn more",
+          "emailAliasesCatchAllLearnMore": "support article",
+          "emailAliasSupportText": "{emailAliasesSupportLink} about how to setup email aliases. For catch-all aliases, check out this {emailAliasesCatchAllSupportLink}."
         },
         "customDomains": {
           "customDomains": "Custom Domains",

assets/app/vue/views/MailView/sections/EmailSettingsSection/components/EmailAliasForm.vue

@@ -2,6 +2,7 @@
 import { ref, computed, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { TextInput, SelectInput, PrimaryButton, LinkButton } from '@thunderbirdops/services-ui';
+import { EMAIL_ALIASES_SUPPORT_URL, EMAIL_ALIASES_CATCH_ALL_SUPPORT_URL } from '@/defines';
 
 // Types
 import { EMAIL_ALIAS_STEP } from '../types';
@@ -123,6 +124,19 @@ watch(selectedDomain, () => {
       </div>
     </form>
   </template>
+
+  <i18n-t keypath="views.mail.sections.emailSettings.emailAliasSupportText" tag="p" class="email-alias-support-text">
+    <template #emailAliasesSupportLink>
+      <a :href="EMAIL_ALIASES_SUPPORT_URL" target="_blank" rel="noopener noreferrer">
+        {{ t('views.mail.sections.emailSettings.emailAliasesLearnMore') }}
+      </a>
+    </template>
+    <template #emailAliasesCatchAllSupportLink>
+      <a :href="EMAIL_ALIASES_CATCH_ALL_SUPPORT_URL" target="_blank" rel="noopener noreferrer">
+        {{ t('views.mail.sections.emailSettings.emailAliasesCatchAllLearnMore') }}
+      </a>
+    </template>
+  </i18n-t>
 </template>
 
 <style scoped>
@@ -163,4 +177,13 @@ watch(selectedDomain, () => {
   align-items: center;
   gap: 0.5rem;
 }
+
+.email-alias-support-text {
+  font-size: 0.75rem;
+  margin-block-start: 1rem;
+
+  a {
+    color: var(--colour-ti-highlight);
+  }
+}
 </style>

assets/app/vue/views/MailView/sections/EmailSettingsSection/components/EmailAliases.vue

@@ -205,7 +205,7 @@ const onDeleteAliasError = (error: string) => {
   }
 
   .aliases-list {
-    margin-block-end: 1.5rem;
+    margin-block-end: 1rem;
 
     .alias-item {
       display: flex;