feat(editor): Add follow up question nps (#17459)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1774,14 +1774,13 @@
 	"pushConnection.executionError": "There was a problem executing the workflow{error}",
 	"pushConnection.executionError.openNode": "Open errored node",
 	"pushConnection.executionError.details": "<br /><strong>{details}</strong>",
-	"prompts.productTeamMessage": "Our product team will get in touch personally",
 	"prompts.npsSurvey.recommendationQuestion": "How likely are you to recommend n8n to a friend or colleague?",
 	"prompts.npsSurvey.greatFeedbackTitle": "Great to hear! Can we reach out to see how we can make n8n even better for you?",
 	"prompts.npsSurvey.defaultFeedbackTitle": "Thanks for your feedback! We'd love to understand how we can improve. Can we reach out?",
+	"prompts.npsSurvey.feedbackQuestionTitle": "Thank you! Why did you choose this score?",
 	"prompts.npsSurvey.notLikely": "Not likely",
 	"prompts.npsSurvey.veryLikely": "Very likely",
 	"prompts.npsSurvey.send": "Send",
-	"prompts.npsSurvey.yourEmailAddress": "Your email address",
 	"prompts.npsSurvey.reviewUs": "If you’d like to help even more, leave us a <a target=\"_blank\" href=\"https://www.g2.com/products/n8n/reviews/start\">review on G2</a>.",
 	"prompts.npsSurvey.thanks": "Thanks for your feedback",
 	"renameAction.emptyName.message": "Please enter a name, or press 'esc' to go back to the old one",

packages/frontend/editor-ui/src/components/NpsSurvey.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VALID_EMAIL_REGEX, NPS_SURVEY_MODAL_KEY } from '@/constants';
+import { NPS_SURVEY_MODAL_KEY } from '@/constants';
 import { useRootStore } from '@n8n/stores/useRootStore';
 import ModalDrawer from '@/components/ModalDrawer.vue';
 import { useToast } from '@/composables/useToast';
@@ -23,32 +23,33 @@ const { APP_Z_INDEXES } = useStyles();
 const DEFAULT_TITLE = i18n.baseText('prompts.npsSurvey.recommendationQuestion');
 const GREAT_FEEDBACK_TITLE = i18n.baseText('prompts.npsSurvey.greatFeedbackTitle');
 const DEFAULT_FEEDBACK_TITLE = i18n.baseText('prompts.npsSurvey.defaultFeedbackTitle');
-const PRODUCT_TEAM_MESSAGE = i18n.baseText('prompts.productTeamMessage');
+const FEEDBACK_QUESTION_TITLE = i18n.baseText('prompts.npsSurvey.feedbackQuestionTitle');
 const VERY_LIKELY_OPTION = i18n.baseText('prompts.npsSurvey.veryLikely');
 const NOT_LIKELY_OPTION = i18n.baseText('prompts.npsSurvey.notLikely');
 const SEND = i18n.baseText('prompts.npsSurvey.send');
-const YOUR_EMAIL_ADDRESS = i18n.baseText('prompts.npsSurvey.yourEmailAddress');
 
-const form = ref<{ value: string; email: string }>({ value: '', email: '' });
+const form = ref<{ value: string; feedback: string }>({
+	value: '',
+	feedback: '',
+});
 const showButtons = ref(true);
+const showFeedback = ref(false);
 const modalBus = createEventBus();
 
 const modalTitle = computed(() => {
+	if (showFeedback.value) {
+		return FEEDBACK_QUESTION_TITLE;
+	}
 	if (form?.value?.value !== '') {
-		if (Number(form.value) > 7) {
+		if (Number(form.value.value) > 7) {
 			return GREAT_FEEDBACK_TITLE;
 		} else {
 			return DEFAULT_FEEDBACK_TITLE;
 		}
 	}
-
 	return DEFAULT_TITLE;
 });
 
-const isEmailValid = computed(
-	() => form?.value?.email && VALID_EMAIL_REGEX.test(String(form.value.email).toLowerCase()),
-);
-
 async function closeDialog(): Promise<void> {
 	if (form.value.value === '') {
 		telemetry.track('User responded value survey score', {
@@ -58,22 +59,22 @@ async function closeDialog(): Promise<void> {
 
 		await useNpsSurveyStore().ignoreNpsSurvey();
 	}
-	if (form.value.value !== '' && form.value.email === '') {
-		telemetry.track('User responded value survey email', {
+	// If the user closes the nps modal, we send two events
+	// 1. User responded value survey score
+	// 2. User responded value survey feedback (if not empty)
+	if (form.value.value !== '' && form.value.feedback.trim() === '') {
+		telemetry.track('User responded value survey feedback', {
 			instance_id: rootStore.instanceId,
-			email: '',
+			feedback: '',
 			nps: form.value.value,
 		});
 	}
 }
 
-function onInputChange(value: string) {
-	form.value.email = value;
-}
-
 async function selectSurveyValue(value: string) {
 	form.value.value = value;
 	showButtons.value = false;
+	showFeedback.value = true;
 
 	telemetry.track('User responded value survey score', {
 		instance_id: rootStore.instanceId,
@@ -83,12 +84,16 @@ async function selectSurveyValue(value: string) {
 	await useNpsSurveyStore().respondNpsSurvey();
 }
 
+function onFeedbackInput(value: string) {
+	form.value.feedback = value;
+}
+
 async function send() {
-	if (isEmailValid.value) {
-		telemetry.track('User responded value survey email', {
+	if (form.value.feedback.trim() !== '') {
+		telemetry.track('User responded value survey feedback', {
 			instance_id: rootStore.instanceId,
-			email: form.value.email,
 			nps: form.value.value,
+			feedback: form.value.feedback,
 		});
 
 		toast.showMessage({
@@ -100,8 +105,9 @@ async function send() {
 
 		setTimeout(() => {
 			form.value.value = '';
-			form.value.email = '';
+			form.value.feedback = '';
 			showButtons.value = true;
+			showFeedback.value = false;
 		}, 1000);
 		modalBus.emit('close');
 	}
@@ -127,7 +133,7 @@ watch(
 		:modal="true"
 		:wrapper-closable="false"
 		direction="btt"
-		width="120px"
+		width="auto"
 		class="nps-survey"
 		:class="$style.npsSurvey"
 		:close-on-click-modal="false"
@@ -157,21 +163,23 @@ watch(
 						<n8n-text size="small" color="text-xlight">{{ VERY_LIKELY_OPTION }}</n8n-text>
 					</div>
 				</div>
-				<div v-else :class="$style.email">
-					<div :class="$style.input" data-test-id="nps-survey-email" @keyup.enter="send">
+				<div v-else-if="showFeedback" :class="$style.feedback">
+					<div :class="$style.input" data-test-id="nps-survey-feedback">
 						<n8n-input
-							v-model="form.email"
-							:placeholder="YOUR_EMAIL_ADDRESS"
-							@update:model-value="onInputChange"
+							v-model="form.feedback"
+							type="textarea"
+							:rows="2"
+							:class="$style.feedbackInput"
+							@update:model-value="onFeedbackInput"
 						/>
-						<div :class="$style.button">
-							<n8n-button :label="SEND" float="right" :disabled="!isEmailValid" @click="send" />
-						</div>
 					</div>
-					<div :class="$style.disclaimer">
-						<n8n-text size="small" color="text-dark">
-							{{ PRODUCT_TEAM_MESSAGE }}
-						</n8n-text>
+					<div :class="$style.button" data-test-id="nps-survey-feedback-button">
+						<n8n-button
+							:label="SEND"
+							float="right"
+							:disabled="!form.feedback.trim()"
+							@click="send"
+						/>
 					</div>
 				</div>
 			</section>
@@ -197,6 +205,7 @@ watch(
 .content {
 	display: flex;
 	justify-content: center;
+	margin-bottom: 10px;
 
 	@media (max-width: $breakpoint-xs) {
 		margin-top: 20px;
@@ -246,8 +255,23 @@ watch(
 	margin-left: 10px;
 }
 
-.disclaimer {
-	margin-top: var(--spacing-4xs);
+.feedback {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	margin-top: 2px;
+	position: relative;
+}
+
+.feedbackInput {
+	width: 350px;
+	max-width: 100%;
+	margin-bottom: 10px;
+}
+
+.feedbackInput textarea {
+	resize: none;
+	font-family: var(--font-family);
 }
 
 .npsSurvey {