Show subscription badge where required and disable UI elements accordingly

dashboard/src/views/EmailDomainView.vue

@@ -313,7 +313,6 @@ onMounted(async () => {
           <span v-else>{{ $t('emails.domains.disabled') }}</span>
         </div>
       </div>
-
     </Section>
 
     <!-- TODO translation -->
@@ -331,19 +330,6 @@ onMounted(async () => {
         </FormGroup>
         <Switch v-model="mailFromValidation" @change="onToggleMailFromValidation" :disabled="mailFromValidationBusy"/>
       </SettingsItem>
-    </Section>
-
-    <!-- TODO translation -->
-    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :title-badge="!features.emailServer ? 'Pro' : ''">
-      <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('email.incoming.title') }}</label>
-          <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
-        </FormGroup>
-        <Switch v-model="incomingEnabled" :disabled="busyRefresh" @change="onAskIncomingToggle"/>
-      </SettingsItem>
-
-      <CatchAllSettingsItem :domain-config="mailConfig" />
 
       <SettingsItem>
         <FormGroup>
@@ -355,5 +341,18 @@ onMounted(async () => {
         </div>
       </SettingsItem>
     </Section>
+
+    <!-- TODO translation -->
+    <Section title="Receiving" :padding="false" v-if="!busyRefresh" :title-badge="!features.emailServer ? 'Pro' : ''">
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('email.incoming.title') }}</label>
+          <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
+        </FormGroup>
+        <Switch v-model="incomingEnabled" :disabled="busyRefresh || !features.emailServer" @change="onAskIncomingToggle"/>
+      </SettingsItem>
+
+      <CatchAllSettingsItem :domain-config="mailConfig" :disabled="!features.emailServer"/>
+    </Section>
   </div>
 </template>