Add branding hooks for plan usage

dashboard/src/views/EmailDomainView.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef, inject } from 'vue';
 import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch, SingleSelect } from 'pankow';
 import { prettyDecimalSize, sleep } from 'pankow/utils';
 import Section from '../components/Section.vue';
@@ -21,6 +21,9 @@ const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
 const profileModel = ProfileModel.create();
 
+const features = inject('features');
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
 const inputDialog = useTemplateRef('inputDialog');
 const enableIncomingDialog = useTemplateRef('enableIncomingDialog');
 const connectionDialog = useTemplateRef('connectionDialog');
@@ -313,6 +316,7 @@ onMounted(async () => {
 
     </Section>
 
+    <!-- TODO translation -->
     <Section title="Sending" :padding="false" v-if="!busyRefresh">
       <template #header-buttons>
         <Button @click="onSendTestMail">{{ $t('emails.domains.testEmailTooltip') }}</Button>
@@ -329,7 +333,14 @@ onMounted(async () => {
       </SettingsItem>
     </Section>
 
-    <Section title="Receiving" :padding="false" v-if="!busyRefresh">
+    <!-- TODO translation -->
+    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :disabled="!features.emailServer">
+      <template #overlay>
+        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+          <Button @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+        </div>
+      </template>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('email.incoming.title') }}</label>