feat: Update NPS Value Survey (#9638)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>

packages/editor-ui/src/components/ContactPromptModal.vue

@@ -33,20 +33,27 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import type { IN8nPromptResponse } from '@/Interface';
+import type { IN8nPromptResponse, ModalKey } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useToast } from '@/composables/useToast';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
 export default defineComponent({
 	name: 'ContactPromptModal',
 	components: { Modal },
-	props: ['modalName'],
+	props: {
+		modalName: {
+			type: String as PropType<ModalKey>,
+			required: true,
+		},
+	},
 	setup() {
 		return {
 			...useToast(),
@@ -59,17 +66,17 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useRootStore, useSettingsStore),
+		...mapStores(useRootStore, useSettingsStore, useNpsSurveyStore),
 		title(): string {
-			if (this.settingsStore.promptsData && this.settingsStore.promptsData.title) {
-				return this.settingsStore.promptsData.title;
+			if (this.npsSurveyStore.promptsData?.title) {
+				return this.npsSurveyStore.promptsData.title;
 			}
 
 			return 'You’re a power user 💪';
 		},
 		description(): string {
-			if (this.settingsStore.promptsData && this.settingsStore.promptsData.message) {
-				return this.settingsStore.promptsData.message;
+			if (this.npsSurveyStore.promptsData?.message) {
+				return this.npsSurveyStore.promptsData.message;
 			}
 
 			return 'Your experience with n8n can help us improve — for you and our entire community.';

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -55,6 +55,7 @@ import type {
 import { useI18n } from '@/composables/useI18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import type { BaseTextKey } from '../../plugins/i18n';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
 const props = defineProps<{
 	workflow: IWorkflowDb;
@@ -72,6 +73,7 @@ const uiStore = useUIStore();
 const usersStore = useUsersStore();
 const workflowsStore = useWorkflowsStore();
 const projectsStore = useProjectsStore();
+const npsSurveyStore = useNpsSurveyStore();
 
 const router = useRouter();
 const route = useRoute();
@@ -250,7 +252,7 @@ async function onSaveButtonClick() {
 	if (saved) {
 		showCreateWorkflowSuccessToast(id);
 
-		await settingsStore.fetchPromptsData();
+		await npsSurveyStore.fetchPromptsData();
 
 		if (route.name === VIEWS.EXECUTION_DEBUG) {
 			await router.replace({

packages/editor-ui/src/components/Modal.vue

@@ -54,13 +54,14 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import type { EventBus } from 'n8n-design-system';
 import { useUIStore } from '@/stores/ui.store';
+import type { ModalKey } from '@/Interface';
 
 export default defineComponent({
 	name: 'Modal',
 	props: {
 		...ElDialog.props,
 		name: {
-			type: String,
+			type: String as PropType<ModalKey>,
 		},
 		title: {
 			type: String,

packages/editor-ui/src/components/ModalRoot.vue

@@ -12,15 +12,17 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
+import type { ModalKey } from '@/Interface';
 
 export default defineComponent({
 	name: 'ModalRoot',
 	props: {
 		name: {
-			type: String,
+			type: String as PropType<ModalKey>,
 			required: true,
 		},
 		keepAlive: {

packages/editor-ui/src/components/Modals.vue

@@ -41,9 +41,9 @@
 			<UpdatesPanel />
 		</ModalRoot>
 
-		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keep-alive="true">
+		<ModalRoot :name="NPS_SURVEY_MODAL_KEY" :keep-alive="true">
 			<template #default="{ active }">
-				<ValueSurvey :is-active="active" />
+				<NpsSurvey :is-active="active" />
 			</template>
 		</ModalRoot>
 
@@ -187,7 +187,7 @@ import {
 	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
 	PERSONALIZATION_MODAL_KEY,
 	TAGS_MANAGER_MODAL_KEY,
-	VALUE_SURVEY_MODAL_KEY,
+	NPS_SURVEY_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
 	WORKFLOW_ACTIVE_MODAL_KEY,
 	WORKFLOW_LM_CHAT_MODAL_KEY,
@@ -220,7 +220,7 @@ import OnboardingCallSignupModal from './OnboardingCallSignupModal.vue';
 import PersonalizationModal from './PersonalizationModal.vue';
 import TagsManager from './TagsManager/TagsManager.vue';
 import UpdatesPanel from './UpdatesPanel.vue';
-import ValueSurvey from './ValueSurvey.vue';
+import NpsSurvey from './NpsSurvey.vue';
 import WorkflowLMChat from './WorkflowLMChat.vue';
 import WorkflowSettings from './WorkflowSettings.vue';
 import DeleteUserModal from './DeleteUserModal.vue';
@@ -257,7 +257,7 @@ export default defineComponent({
 		PersonalizationModal,
 		TagsManager,
 		UpdatesPanel,
-		ValueSurvey,
+		NpsSurvey,
 		WorkflowLMChat,
 		WorkflowSettings,
 		WorkflowShareModal,
@@ -291,7 +291,7 @@ export default defineComponent({
 		WORKFLOW_LM_CHAT_MODAL_KEY,
 		WORKFLOW_SETTINGS_MODAL_KEY,
 		WORKFLOW_SHARE_MODAL_KEY,
-		VALUE_SURVEY_MODAL_KEY,
+		NPS_SURVEY_MODAL_KEY,
 		WORKFLOW_ACTIVE_MODAL_KEY,
 		IMPORT_CURL_MODAL_KEY,
 		GENERATE_CURL_MODAL_KEY,

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

@@ -0,0 +1,283 @@
+<script lang="ts" setup>
+import { VALID_EMAIL_REGEX, NPS_SURVEY_MODAL_KEY } from '@/constants';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import ModalDrawer from '@/components/ModalDrawer.vue';
+import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+import { ref, computed, watch } from 'vue';
+import { createEventBus } from 'n8n-design-system/utils';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
+
+const props = defineProps({
+	isActive: {
+		type: Boolean,
+	},
+});
+
+const rootStore = useRootStore();
+const i18n = useI18n();
+const toast = useToast();
+const telemetry = useTelemetry();
+
+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 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 showButtons = ref(true);
+const modalBus = createEventBus();
+
+const modalTitle = computed(() => {
+	if (form?.value?.value !== '') {
+		if (Number(form.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', {
+			instance_id: rootStore.instanceId,
+			nps: '',
+		});
+
+		await useNpsSurveyStore().ignoreNpsSurvey();
+	}
+	if (form.value.value !== '' && form.value.email === '') {
+		telemetry.track('User responded value survey email', {
+			instance_id: rootStore.instanceId,
+			email: '',
+			nps: form.value.value,
+		});
+	}
+}
+
+function onInputChange(value: string) {
+	form.value.email = value;
+}
+
+async function selectSurveyValue(value: string) {
+	form.value.value = value;
+	showButtons.value = false;
+
+	telemetry.track('User responded value survey score', {
+		instance_id: rootStore.instanceId,
+		nps: form.value.value,
+	});
+
+	await useNpsSurveyStore().respondNpsSurvey();
+}
+
+async function send() {
+	if (isEmailValid.value) {
+		telemetry.track('User responded value survey email', {
+			instance_id: rootStore.instanceId,
+			email: form.value.email,
+			nps: form.value.value,
+		});
+
+		toast.showMessage({
+			title: i18n.baseText('prompts.npsSurvey.thanks'),
+			message: Number(form.value.value) >= 8 ? i18n.baseText('prompts.npsSurvey.reviewUs') : '',
+			type: 'success',
+			duration: 15000,
+		});
+
+		setTimeout(() => {
+			form.value.value = '';
+			form.value.email = '';
+			showButtons.value = true;
+		}, 1000);
+		modalBus.emit('close');
+	}
+}
+
+watch(
+	() => props.isActive,
+	(isActive) => {
+		if (isActive) {
+			telemetry.track('User shown value survey', {
+				instance_id: rootStore.instanceId,
+			});
+		}
+	},
+);
+</script>
+
+<template>
+	<ModalDrawer
+		:name="NPS_SURVEY_MODAL_KEY"
+		:event-bus="modalBus"
+		:before-close="closeDialog"
+		:modal="false"
+		:wrapper-closable="false"
+		direction="btt"
+		width="120px"
+		class="nps-survey"
+		:class="$style.npsSurvey"
+		data-test-id="nps-survey-modal"
+	>
+		<template #header>
+			<div :class="$style.title">
+				<n8n-heading tag="h2" size="medium" color="text-xlight">{{ modalTitle }}</n8n-heading>
+			</div>
+		</template>
+		<template #content>
+			<section :class="$style.content">
+				<div v-if="showButtons" :class="$style.wrapper">
+					<div :class="$style.buttons" data-test-id="nps-survey-ratings">
+						<div v-for="value in 11" :key="value - 1" :class="$style.container">
+							<n8n-button
+								type="tertiary"
+								:label="(value - 1).toString()"
+								square
+								@click="selectSurveyValue((value - 1).toString())"
+							/>
+						</div>
+					</div>
+					<div :class="$style.text">
+						<n8n-text size="small" color="text-xlight">{{ NOT_LIKELY_OPTION }}</n8n-text>
+						<n8n-text size="small" color="text-xlight">{{ VERY_LIKELY_OPTION }}</n8n-text>
+					</div>
+				</div>
+				<div v-else :class="$style.email">
+					<div :class="$style.input" @keyup.enter="send" data-test-id="nps-survey-email">
+						<n8n-input
+							v-model="form.email"
+							:placeholder="YOUR_EMAIL_ADDRESS"
+							@update:model-value="onInputChange"
+						/>
+						<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>
+				</div>
+			</section>
+		</template>
+	</ModalDrawer>
+</template>
+
+<style module lang="scss">
+.title {
+	height: 16px;
+	text-align: center;
+
+	@media (max-width: $breakpoint-xs) {
+		margin-top: 10px;
+		padding: 0 15px;
+	}
+
+	h2 {
+		color: var(--color-nps-survey-font);
+	}
+}
+
+.content {
+	display: flex;
+	justify-content: center;
+
+	@media (max-width: $breakpoint-xs) {
+		margin-top: 20px;
+	}
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	.text span {
+		color: var(--color-nps-survey-font);
+	}
+}
+
+.buttons {
+	display: flex;
+}
+
+.container {
+	margin: 0 8px;
+
+	@media (max-width: $breakpoint-xs) {
+		margin: 0 4px;
+	}
+
+	&:first-child {
+		margin-left: 0;
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+
+.text {
+	margin-top: 8px;
+	display: flex;
+	justify-content: space-between;
+}
+
+.input {
+	display: flex;
+	align-items: center;
+}
+
+.button {
+	margin-left: 10px;
+}
+
+.disclaimer {
+	margin-top: var(--spacing-4xs);
+}
+
+.npsSurvey {
+	background: var(--color-nps-survey-background);
+	height: 120px;
+	top: auto;
+
+	@media (max-width: $breakpoint-xs) {
+		height: 140px;
+	}
+
+	@media (max-width: $breakpoint-xs) {
+		height: 140px !important;
+	}
+
+	header {
+		height: 50px;
+		margin: 0;
+		padding: 18px 0 16px;
+
+		button {
+			top: 12px;
+			right: 16px;
+			position: absolute;
+			font-weight: var(--font-weight-bold);
+			color: var(--color-nps-survey-font);
+
+			@media (max-width: $breakpoint-xs) {
+				top: 2px;
+				right: 2px;
+			}
+		}
+	}
+}
+</style>

packages/editor-ui/src/components/ValueSurvey.vue

@@ -1,295 +0,0 @@
-<template>
-	<ModalDrawer
-		:name="VALUE_SURVEY_MODAL_KEY"
-		:event-bus="modalBus"
-		:before-close="closeDialog"
-		:modal="false"
-		:wrapper-closable="false"
-		direction="btt"
-		width="120px"
-		:class="$style.valueSurvey"
-	>
-		<template #header>
-			<div :class="$style.title">
-				<n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading>
-			</div>
-		</template>
-		<template #content>
-			<section :class="$style.content">
-				<div v-if="showButtons" :class="$style.wrapper">
-					<div :class="$style.buttons">
-						<div v-for="value in 11" :key="value - 1" :class="$style.container">
-							<n8n-button
-								type="tertiary"
-								:label="(value - 1).toString()"
-								square
-								@click="selectSurveyValue((value - 1).toString())"
-							/>
-						</div>
-					</div>
-					<div :class="$style.text">
-						<n8n-text size="small" color="text-xlight">Not likely</n8n-text>
-						<n8n-text size="small" color="text-xlight">Very likely</n8n-text>
-					</div>
-				</div>
-				<div v-else :class="$style.email">
-					<div :class="$style.input" @keyup.enter="send">
-						<n8n-input
-							v-model="form.email"
-							placeholder="Your email address"
-							@update:model-value="onInputChange"
-						/>
-						<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-xlight">
-							David from our product team will get in touch personally
-						</n8n-text>
-					</div>
-				</div>
-			</section>
-		</template>
-	</ModalDrawer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { VALID_EMAIL_REGEX, VALUE_SURVEY_MODAL_KEY } from '@/constants';
-import type { IN8nPromptResponse } from '@/Interface';
-
-import ModalDrawer from '@/components/ModalDrawer.vue';
-
-import { useSettingsStore } from '@/stores/settings.store';
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { createEventBus } from 'n8n-design-system/utils';
-import { useToast } from '@/composables/useToast';
-
-const DEFAULT_TITLE = 'How likely are you to recommend n8n to a friend or colleague?';
-const GREAT_FEEDBACK_TITLE =
-	'Great to hear! Can we reach out to see how we can make n8n even better for you?';
-const DEFAULT_FEEDBACK_TITLE =
-	"Thanks for your feedback! We'd love to understand how we can improve. Can we reach out?";
-
-export default defineComponent({
-	name: 'ValueSurvey',
-	components: {
-		ModalDrawer,
-	},
-	props: ['isActive'],
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	watch: {
-		isActive(isActive) {
-			if (isActive) {
-				this.$telemetry.track('User shown value survey', {
-					instance_id: this.rootStore.instanceId,
-				});
-			}
-		},
-	},
-	computed: {
-		...mapStores(useRootStore, useSettingsStore),
-		getTitle(): string {
-			if (this.form.value !== '') {
-				if (Number(this.form.value) > 7) {
-					return GREAT_FEEDBACK_TITLE;
-				} else {
-					return DEFAULT_FEEDBACK_TITLE;
-				}
-			} else {
-				return DEFAULT_TITLE;
-			}
-		},
-		isEmailValid(): boolean {
-			return VALID_EMAIL_REGEX.test(String(this.form.email).toLowerCase());
-		},
-	},
-	data() {
-		return {
-			form: {
-				email: '',
-				value: '',
-			},
-			showButtons: true,
-			VALUE_SURVEY_MODAL_KEY,
-			modalBus: createEventBus(),
-		};
-	},
-	methods: {
-		closeDialog(): void {
-			if (this.form.value === '') {
-				this.$telemetry.track('User responded value survey score', {
-					instance_id: this.rootStore.instanceId,
-					nps: '',
-				});
-			}
-			if (this.form.value !== '' && this.form.email === '') {
-				this.$telemetry.track('User responded value survey email', {
-					instance_id: this.rootStore.instanceId,
-					email: '',
-				});
-			}
-		},
-		onInputChange(value: string) {
-			this.form.email = value;
-		},
-		async selectSurveyValue(value: string) {
-			this.form.value = value;
-			this.showButtons = false;
-
-			const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({
-				value: this.form.value,
-			});
-
-			if (response && response.updated) {
-				this.$telemetry.track('User responded value survey score', {
-					instance_id: this.rootStore.instanceId,
-					nps: this.form.value,
-				});
-			}
-		},
-		async send() {
-			if (this.isEmailValid) {
-				const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey(
-					{
-						email: this.form.email,
-						value: this.form.value,
-					},
-				);
-
-				if (response && response.updated) {
-					this.$telemetry.track('User responded value survey email', {
-						instance_id: this.rootStore.instanceId,
-						email: this.form.email,
-					});
-					this.showMessage({
-						title: 'Thanks for your feedback',
-						message:
-							'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>.',
-						type: 'success',
-						duration: 15000,
-					});
-				}
-
-				setTimeout(() => {
-					this.form.value = '';
-					this.form.email = '';
-					this.showButtons = true;
-				}, 1000);
-				this.modalBus.emit('close');
-			}
-		},
-	},
-});
-</script>
-
-<style module lang="scss">
-.title {
-	height: 16px;
-	text-align: center;
-
-	@media (max-width: $breakpoint-xs) {
-		margin-top: 10px;
-		padding: 0 15px;
-	}
-
-	h2 {
-		color: var(--color-value-survey-font);
-	}
-}
-
-.content {
-	display: flex;
-	justify-content: center;
-
-	@media (max-width: $breakpoint-xs) {
-		margin-top: 20px;
-	}
-}
-
-.wrapper {
-	display: flex;
-	flex-direction: column;
-	.text span {
-		color: var(--color-value-survey-font);
-	}
-}
-
-.buttons {
-	display: flex;
-}
-
-.container {
-	margin: 0 8px;
-
-	@media (max-width: $breakpoint-xs) {
-		margin: 0 4px;
-	}
-
-	&:first-child {
-		margin-left: 0;
-	}
-
-	&:last-child {
-		margin-right: 0;
-	}
-}
-
-.text {
-	margin-top: 8px;
-	display: flex;
-	justify-content: space-between;
-}
-
-.input {
-	display: flex;
-	align-items: center;
-}
-
-.button {
-	margin-left: 10px;
-}
-
-.disclaimer {
-	margin-top: var(--spacing-4xs);
-}
-
-.valueSurvey {
-	background: var(--color-value-survey-background);
-	height: 120px;
-	top: auto;
-
-	@media (max-width: $breakpoint-xs) {
-		height: 140px;
-	}
-
-	@media (max-width: $breakpoint-xs) {
-		height: 140px !important;
-	}
-
-	header {
-		height: 50px;
-		margin: 0;
-		padding: 18px 0 16px;
-
-		button {
-			top: 12px;
-			right: 16px;
-			position: absolute;
-			font-weight: var(--font-weight-bold);
-			color: var(--color-value-survey-font);
-
-			@media (max-width: $breakpoint-xs) {
-				top: 2px;
-				right: 2px;
-			}
-		}
-	}
-}
-</style>

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue

@@ -47,6 +47,7 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '@/co
 import type { IWorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
 interface IWorkflowSaveSettings {
 	saveFailedExecutions: boolean;
@@ -85,7 +86,7 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useRootStore, useSettingsStore, useUIStore, useWorkflowsStore),
+		...mapStores(useRootStore, useSettingsStore, useUIStore, useWorkflowsStore, useNpsSurveyStore),
 		accordionItems(): object[] {
 			return [
 				{
@@ -228,7 +229,9 @@ export default defineComponent({
 				name: this.workflowName,
 				tags: this.currentWorkflowTagIds,
 			});
-			if (saved) await this.settingsStore.fetchPromptsData();
+			if (saved) {
+				await this.npsSurveyStore.fetchPromptsData();
+			}
 		},
 	},
 });

packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue

@@ -49,6 +49,7 @@ import { useTagsStore } from '@/stores/tags.store';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useDebounce } from '@/composables/useDebounce';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
 export default defineComponent({
 	name: 'WorkflowExecutionsList',
@@ -79,7 +80,7 @@ export default defineComponent({
 			if (confirmModal === MODAL_CONFIRM) {
 				const saved = await this.workflowHelpers.saveCurrentWorkflow({}, false);
 				if (saved) {
-					await this.settingsStore.fetchPromptsData();
+					await this.npsSurveyStore.fetchPromptsData();
 				}
 				this.uiStore.stateIsDirty = false;
 				next();
@@ -141,7 +142,7 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore),
+		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useNpsSurveyStore),
 		temporaryExecution(): ExecutionSummary | undefined {
 			const isTemporary = !this.executions.find((execution) => execution.id === this.execution?.id);
 			return isTemporary ? this.execution : undefined;