1 files changed, 18 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
index ae28694f5d2..2b2722ab329 100644
--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue
@@ -4,8 +4,11 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import axios from '~/lib/utils/axios_utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, sprintf } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ServiceDeskSetting from './service_desk_setting.vue';
 
+const CustomEmailWrapper = () => import('./custom_email_wrapper.vue');
+
 export default {
   serviceDeskEmailHelpPath: helpPagePath('/user/project/service_desk.html', {
     anchor: 'use-an-additional-service-desk-alias-email',
@@ -15,10 +18,12 @@ export default {
     GlSprintf,
     GlLink,
     ServiceDeskSetting,
+    CustomEmailWrapper,
   },
   directives: {
     SafeHtml,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: {
     initialIsEnabled: {
       default: false,
@@ -56,6 +61,9 @@ export default {
     publicProject: {
       default: false,
     },
+    customEmailEndpoint: {
+      default: '',
+    },
   },
   data() {
     return {
@@ -68,6 +76,11 @@ export default {
       updatedServiceDeskEmail: this.serviceDeskEmail,
     };
   },
+  computed: {
+    showCustomEmailWrapper() {
+      return this.glFeatures.serviceDeskCustomEmail && this.isEnabled && this.isIssueTrackerEnabled;
+    },
+  },
   methods: {
     onEnableToggled(isChecked) {
       this.isEnabled = isChecked;
@@ -179,5 +192,10 @@ export default {
       @save="onSaveTemplate"
       @toggle="onEnableToggled"
     />
+    <custom-email-wrapper
+      v-if="showCustomEmailWrapper"
+      :incoming-email="incomingEmail"
+      :custom-email-endpoint="customEmailEndpoint"
+    />
   </div>
 </template>