Custom domain UI revamp

assets/app/vue/locales/en.json

@@ -200,6 +200,10 @@
         },
         "customDomains": {
           "customDomains": "Custom Domains",
+          "domains": "Domains",
+          "ownerDNSRecords": "{domainName} DNS records",
+          "conflictingRecords": "Conflicting records",
+          "allRecords": "All records",
           "customDomainsDescriptionInitial": "Use your own domain to create personalized email addresses.",
           "customDomainsDescriptionAdd": "Adding a domain you own to your account allows you to create aliases using your custom domains.",
           "domainsAdded": "{domainCount} / {domainLimit} domains added",
@@ -227,9 +231,16 @@
           "recordsTableHeaderNameHost": "{'Name/Host'}",
           "recordsTableHeaderValueData": "{'Value/Data'}",
           "recordsTableHeaderPriority": "Priority",
+          "copyValue": "Copy value",
+          "recordAction": {
+            "add": "Add",
+            "edit": "Edit",
+            "remove": "Remove"
+          },
           "recordConflictWarning": "Conflict detected. Replace {currentValue} with the value in the row above.",
           "mxRecordConflictWarning": "This record conflicts. Remove conflicting MX records or change the priority.",
           "spfRecordConflictWarning": "This record conflicts. The current SPF record does not contain {includeValue}.",
+          "spfRecordIncludeValue": "the expected include value",
           "recordMissingWarning": "Record is missing.",
           "staleDnsRecordsTitle": "Remove these stale records",
           "staleDnsRecords": "Please remove the {type} record for {name} as it points to {existing_values}.",
@@ -242,6 +253,53 @@
           "domainAlreadyExists": "Domain already exists",
           "domainAlreadyConfigured": "This domain is already configured. Please {link} in case you believe this is a mistake.",
           "reachOutToSupport": "reach out to support",
+          "recordActionInfo": {
+            "MX": {
+              "remove": {
+                "remove": "Remove",
+                "content": "{bold} this record from your DNS register site to avoid having email sent to multiple servers. {link}",
+                "link": "Learn more on our support site."
+              },
+              "add": {
+                "add": "Add",
+                "content": "{bold} this record to your DNS register site to have your email sent to Thunderbird Pro servers. {link}",
+                "link": "Learn more on our support site."
+              },
+              "edit": {
+                "edit": "Edit",
+                "content": "{bold} this record from your DNS register site to avoid having email sent to multiple servers. {link}",
+                "link": "Learn more on our support site."
+              }
+            },
+            "SRV": {
+              "remove": {
+                "remove": "Remove",
+                "content": "{bold} this record from your DNS register site to avoid compatibility issues."
+              },
+              "add": {
+                "add": "Add",
+                "content": "{bold} this record to your DNS register site to avoid compatibility issues."
+              },
+              "edit": {
+                "edit": "Edit",
+                "content": "{bold} this record from your DNS register site to avoid compatibility issues."
+              }
+            },
+            "OTHER": {
+              "remove": {
+                "remove": "Remove",
+                "content": "{bold} this record from your DNS register site to avoid having your outgoing email be flagged as spam."
+              },
+              "add": {
+                "add": "Add",
+                "content": "{bold} this record to your DNS register site to avoid having your outgoing email be flagged as spam."
+              },
+              "edit": {
+                "edit": "Edit",
+                "content": "{bold} this record from your DNS register site to avoid having your outgoing email be flagged as spam."
+              }
+            }
+          },
           "verificationValidationErrors": {
             "mxLookupError": "Unable to find MX record pointing to Thundermail",
             "ipLookupError": "Unable to resolve IP addresses",
@@ -511,4 +569,4 @@
     "privacyPolicy": "Privacy Policy",
     "legal": "Legal"
   }
-}
+}

assets/app/vue/views/MailView/sections/CustomDomainsSection/components/CustomDomainAddStep.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { PrimaryButton, TextInput, NoticeBar, NoticeBarTypes } from '@thunderbirdops/services-ui';
+
+defineProps<{
+  customDomain: string | null;
+  customDomainError: string | null;
+  domainAlreadyConfigured: boolean;
+  isAddingCustomDomain: boolean;
+}>();
+
+const emit = defineEmits<{
+  submit: [];
+  'update:customDomain': [value: string | null];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <form @submit.prevent="emit('submit')">
+    <text-input
+      :placeholder="t('views.mail.sections.customDomains.domainPlaceholder')"
+      name="custom-domain"
+      :help="t('views.mail.sections.customDomains.domainHelp')"
+      :error="customDomainError"
+      class="custom-domain-text-input"
+      :model-value="customDomain"
+      @update:model-value="emit('update:customDomain', $event)"
+    >
+      {{ t('views.mail.sections.customDomains.enterCustomDomain') }}
+    </text-input>
+
+    <notice-bar
+      :type="NoticeBarTypes.Critical"
+      v-if="domainAlreadyConfigured"
+      class="domain-already-configured-notice-bar"
+    >
+      <i18n-t keypath="views.mail.sections.customDomains.domainAlreadyConfigured" tag="span">
+        <template #link>
+          <router-link to="/contact">{{ t('views.mail.sections.customDomains.reachOutToSupport') }}</router-link>
+        </template>
+      </i18n-t>
+    </notice-bar>
+
+    <primary-button variant="outline" @click="emit('submit')" :disabled="isAddingCustomDomain">
+      {{ t('views.mail.sections.customDomains.continue') }}
+    </primary-button>
+  </form>
+</template>
+
+<style scoped>
+.custom-domain-text-input {
+  margin-block-end: 1.5rem;
+}
+
+.domain-already-configured-notice-bar {
+  margin-block-end: 1.5rem;
+
+  a {
+    color: var(--colour-ti-secondary);
+  }
+}
+
+@media (min-width: 768px) {
+  .custom-domain-text-input {
+    max-width: 50%;
+  }
+
+  .domain-already-configured-notice-bar {
+    max-width: 50%;
+  }
+}
+</style>