n8n/packages/editor-ui/src/components/PersonalizationModal.vue

<template>
	<Modal
		:name="PERSONALIZATION_MODAL_KEY"
		:title="
			!submitted
				? $locale.baseText('personalizationModal.customizeN8n')
				: $locale.baseText('personalizationModal.thanks')
		"
		:subtitle="!submitted ? $locale.baseText('personalizationModal.theseQuestionsHelpUs') : ''"
		:centerTitle="true"
		:showClose="false"
		:eventBus="modalBus"
		:closeOnClickModal="false"
		:closeOnPressEscape="false"
		width="460px"
		@enter="onSave"
	>
		<template v-slot:content>
			<div v-if="submitted" :class="$style.submittedContainer">
				<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
				<n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
			</div>
			<div :class="$style.container" v-else>
				<n8n-form-inputs :inputs="survey" :columnView="true" :eventBus="formBus" @submit="onSubmit"/>
			</div>
		</template>
		<template v-slot:footer>
			<div>
				<n8n-button
					v-if="submitted"
					@click="closeDialog"
					:label="$locale.baseText('personalizationModal.getStarted')"
					float="right"
				/>
				<n8n-button
					v-else
					@click="onSave"
					:loading="isSaving"
					:label="$locale.baseText('personalizationModal.continue')"
					float="right"
				/>
			</div>
		</template>
	</Modal>
</template>

<script lang="ts">
import mixins from 'vue-typed-mixins';

const SURVEY_VERSION = 'v2';

import {
	CODING_SKILL_KEY,
	COMPANY_SIZE_100_499,
	COMPANY_SIZE_1000_OR_MORE,
	COMPANY_SIZE_20_OR_LESS,
	COMPANY_SIZE_20_99,
	COMPANY_SIZE_500_999,
	COMPANY_SIZE_KEY,
	COMPANY_SIZE_PERSONAL_USE,
	GOVERNMENT_INDUSTRY,
	HEALTHCARE_INDUSTRY,
	LEGAL_INDUSTRY,
	OTHER_INDUSTRY_OPTION,
	PERSONALIZATION_MODAL_KEY,
	SECURITY_INDUSTRY,
	EDUCATION_INDUSTRY,
	FINANCE_INSURANCE_INDUSTRY,
	IT_INDUSTRY,
	MARKETING_INDUSTRY,
	MEDIA_INDUSTRY,
	MANUFACTURING_INDUSTRY,
	PHYSICAL_RETAIL_OR_SERVICES,
	REAL_ESTATE_OR_CONSTRUCTION,
	TELECOMS_INDUSTRY,
	AUTOMATION_GOAL_KEY,
	CUSTOMER_INTEGRATIONS_GOAL,
	CUSTOMER_SUPPORT_GOAL,
	FINANCE_ACCOUNTING_GOAL,
	HR_GOAL,
	OPERATIONS_GOAL,
	PRODUCT_GOAL,
	SALES_MARKETING_GOAL,
	SECURITY_GOAL,
	OTHER_AUTOMATION_GOAL,
	NOT_SURE_YET_GOAL,
	AUTOMATION_GOAL_OTHER_KEY,
	COMPANY_TYPE_KEY,
	CUSTOMER_TYPE_KEY,
	MSP_FOCUS_KEY,
	MSP_FOCUS_OTHER_KEY,
	SAAS_COMPANY_TYPE,
	ECOMMERCE_COMPANY_TYPE,
	MSP_COMPANY_TYPE,
	DIGITAL_AGENCY_COMPANY_TYPE,
	AUTOMATION_AGENCY_COMPANY_TYPE,
	SYSTEMS_INTEGRATOR_COMPANY_TYPE,
	OTHER_COMPANY_TYPE,
	PERSONAL_COMPANY_TYPE,
	INDIVIDUAL_CUSTOMER_TYPE,
	SMALL_CUSTOMER_TYPE,
	MEDIUM_CUSTOMER_TYPE,
	LARGE_CUSTOMER_TYPE,
	CLOUD_INFRA_FOCUS,
	IT_SUPPORT_FOCUS,
	NETWORKING_COMMUNICATION_FOCUS,
	SECURITY_FOCUS,
	OTHER_FOCUS,
	COMPANY_INDUSTRY_EXTENDED_KEY,
	OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
	ONBOARDING_PROMPT_TIMEBOX,
	FIRST_ONBOARDING_PROMPT_TIMEOUT,
	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
} from '../constants';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import Modal from './Modal.vue';
import { IFormInput, IFormInputs, IPersonalizationSurveyAnswersV2 } from '@/Interface';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import { getAccountAge } from '@/modules/userHelpers';

export default mixins(showMessage, workflowHelpers).extend({
	components: { Modal },
	name: 'PersonalizationModal',
	data() {
		return {
			submitted: false,
			isSaving: false,
			PERSONALIZATION_MODAL_KEY,
			otherWorkAreaFieldVisible: false,
			otherCompanyIndustryFieldVisible: false,
			showAllIndustryQuestions: true,
			modalBus: new Vue(),
			formBus: new Vue(),
		};
	},
	computed: {
		...mapGetters({
			baseUrl: 'getBaseUrl',
		}),
		...mapGetters('users', [
			'currentUser',
		]),
		...mapGetters('settings', [
			'isOnboardingCallPromptFeatureEnabled',
		]),
		survey() {
			const survey: IFormInputs = [
				{
					name: CODING_SKILL_KEY,
					properties: {
						label: this.$locale.baseText('personalizationModal.howAreYourCodingSkills'),
						type: 'select',
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								label: this.$locale.baseText('personalizationModal.neverCoded'),
								value: '0',
							},
							{
								label: this.$locale.baseText(
									'personalizationModal.iGetStuckTooQuicklyToAchieveMuch',
								),
								value: '1',
							},
							{
								label: this.$locale.baseText('personalizationModal.iCanCodeSomeUsefulThingsBut'),
								value: '2',
							},
							{
								label: this.$locale.baseText('personalizationModal.iKnowEnoughToBeDangerousBut'),
								value: '3',
							},
							{
								label: this.$locale.baseText('personalizationModal.iCanFigureMostThingsOut'),
								value: '4',
							},
							{
								label: this.$locale.baseText('personalizationModal.iCanDoAlmostAnythingIWant'),
								value: '5',
							},
						],
					},
				},
				{
					name: COMPANY_TYPE_KEY,
					properties: {
						label: this.$locale.baseText('personalizationModal.whatBestDescribesYourCompany'),
						type: 'select',
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								label: this.$locale.baseText('personalizationModal.saas'),
								value: SAAS_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.eCommerce'),
								value: ECOMMERCE_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.managedServiceProvider'),
								value: MSP_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.digitalAgencyOrConsultant'),
								value: DIGITAL_AGENCY_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.automationAgencyOrConsultant'),
								value: AUTOMATION_AGENCY_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.systemsIntegrator'),
								value: SYSTEMS_INTEGRATOR_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.other'),
								value: OTHER_COMPANY_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.imNotUsingN8nForWork'),
								value: PERSONAL_COMPANY_TYPE,
							},
						],
					},
				},
				{
					name: CUSTOMER_TYPE_KEY,
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						return (
							!!companyType && ![ OTHER_COMPANY_TYPE, PERSONAL_COMPANY_TYPE, ECOMMERCE_COMPANY_TYPE, MSP_COMPANY_TYPE].includes(companyType)
						);
					},
					properties: {
						label: this.$locale.baseText('personalizationModal.whatKindOfCustomersDoYouServe'),
						type: 'select',
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								label: this.$locale.baseText('personalizationModal.individualConsumers'),
								value: INDIVIDUAL_CUSTOMER_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.smallBusinesses'),
								value: SMALL_CUSTOMER_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.mediumBusinesses'),
								value: MEDIUM_CUSTOMER_TYPE,
							},
							{
								label: this.$locale.baseText('personalizationModal.largeBusinesses'),
								value: LARGE_CUSTOMER_TYPE,
							},
						],
					},
				},
				{
					name: MSP_FOCUS_KEY,
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						return companyType === MSP_COMPANY_TYPE;
					},
					properties: {
						label: this.$locale.baseText('personalizationModal.whatDoesYourCompanyFocusOn'),
						type: 'multi-select',
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								label: this.$locale.baseText('personalizationModal.cloudInfrastructure'),
								value: CLOUD_INFRA_FOCUS,
							},
							{
								label: this.$locale.baseText('personalizationModal.itSupport'),
								value: IT_SUPPORT_FOCUS,
							},
							{
								label: this.$locale.baseText('personalizationModal.networkingOrCommunication'),
								value: NETWORKING_COMMUNICATION_FOCUS,
							},
							{
								label: this.$locale.baseText('personalizationModal.security'),
								value: SECURITY_FOCUS,
							},
							{
								label: this.$locale.baseText('personalizationModal.otherPleaseSpecify'),
								value: OTHER_FOCUS,
							},
						],
					},
				},
				{
					name: MSP_FOCUS_OTHER_KEY,
					properties: {
						placeholder: this.$locale.baseText(
							'personalizationModal.pleaseSpecifyYourCompanyFocus',
						),
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						const mspFocus = (values as IPersonalizationSurveyAnswersV2)[MSP_FOCUS_KEY];
						return companyType === MSP_COMPANY_TYPE && !!mspFocus && mspFocus.includes(OTHER_FOCUS);
					},
				},
				{
					name: COMPANY_INDUSTRY_EXTENDED_KEY,
					properties: {
						type: 'multi-select',
						label: this.$locale.baseText('personalizationModal.whichIndustriesIsYourCompanyIn'),
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								value: EDUCATION_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.education'),
							},
							{
								value: FINANCE_INSURANCE_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.financeOrInsurance'),
							},
							{
								value: GOVERNMENT_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.government'),
							},
							{
								value: HEALTHCARE_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.healthcare'),
							},
							{
								value: IT_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.it'),
							},
							{
								value: LEGAL_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.legal'),
							},
							{
								value: MARKETING_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.marketing'),
							},
							{
								value: MEDIA_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.media'),
							},
							{
								value: MANUFACTURING_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.manufacturing'),
							},
							{
								value: PHYSICAL_RETAIL_OR_SERVICES,
								label: this.$locale.baseText('personalizationModal.physicalRetailOrServices'),
							},
							{
								value: REAL_ESTATE_OR_CONSTRUCTION,
								label: this.$locale.baseText('personalizationModal.realEstateOrConstruction'),
							},
							{
								value: SECURITY_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.security'),
							},
							{
								value: TELECOMS_INDUSTRY,
								label: this.$locale.baseText('personalizationModal.telecoms'),
							},
							{
								value: OTHER_INDUSTRY_OPTION,
								label: this.$locale.baseText('personalizationModal.otherPleaseSpecify'),
							},
						],
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						return companyType === OTHER_COMPANY_TYPE;
					},
				},
				{
					name: OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
					properties: {
						placeholder: this.$locale.baseText('personalizationModal.specifyYourCompanysIndustry'),
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						const companyIndustry = (values as IPersonalizationSurveyAnswersV2)[COMPANY_INDUSTRY_EXTENDED_KEY];
						return companyType === OTHER_COMPANY_TYPE && !!companyIndustry && companyIndustry.includes(OTHER_INDUSTRY_OPTION);
					},
				},
				{
					name: AUTOMATION_GOAL_KEY,
					properties: {
						type: 'select',
						label: this.$locale.baseText('personalizationModal.whatAreYouLookingToAutomate'),
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								value: CUSTOMER_INTEGRATIONS_GOAL,
								label: this.$locale.baseText('personalizationModal.customerIntegrations'),
							},
							{
								value: CUSTOMER_SUPPORT_GOAL,
								label: this.$locale.baseText('personalizationModal.customerSupport'),
							},
							{
								value: FINANCE_ACCOUNTING_GOAL,
								label: this.$locale.baseText('personalizationModal.financeOrAccounting'),
							},
							{
								value: HR_GOAL,
								label: this.$locale.baseText('personalizationModal.hr'),
							},
							{
								value: OPERATIONS_GOAL,
								label: this.$locale.baseText('personalizationModal.operations'),
							},
							{
								value: PRODUCT_GOAL,
								label: this.$locale.baseText('personalizationModal.product'),
							},
							{
								value: SALES_MARKETING_GOAL,
								label: this.$locale.baseText('personalizationModal.salesAndMarketing'),
							},
							{
								value: SECURITY_GOAL,
								label: this.$locale.baseText('personalizationModal.security'),
							},
							{
								value: OTHER_AUTOMATION_GOAL,
								label: this.$locale.baseText('personalizationModal.otherPleaseSpecify'),
							},
							{
								value: NOT_SURE_YET_GOAL,
								label: this.$locale.baseText('personalizationModal.notSureYet'),
							},
						],
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						return companyType !== PERSONAL_COMPANY_TYPE;
					},
				},
				{
					name: AUTOMATION_GOAL_OTHER_KEY,
					properties: {
						placeholder: this.$locale.baseText('personalizationModal.specifyYourAutomationGoal'),
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						const automationGoal = (values as IPersonalizationSurveyAnswersV2)[AUTOMATION_GOAL_KEY];
						return companyType !== PERSONAL_COMPANY_TYPE && automationGoal === OTHER_AUTOMATION_GOAL;
					},
				},
				{
					name: COMPANY_SIZE_KEY,
					properties: {
						type: 'select',
						label: this.$locale.baseText('personalizationModal.howBigIsYourCompany'),
						placeholder: this.$locale.baseText('personalizationModal.select'),
						options: [
							{
								label: this.$locale.baseText('personalizationModal.lessThan20People'),
								value: COMPANY_SIZE_20_OR_LESS,
							},
							{
								label: `20-99 ${this.$locale.baseText('personalizationModal.people')}`,
								value: COMPANY_SIZE_20_99,
							},
							{
								label: `100-499 ${this.$locale.baseText('personalizationModal.people')}`,
								value: COMPANY_SIZE_100_499,
							},
							{
								label: `500-999 ${this.$locale.baseText('personalizationModal.people')}`,
								value: COMPANY_SIZE_500_999,
							},
							{
								label: `1000+ ${this.$locale.baseText('personalizationModal.people')}`,
								value: COMPANY_SIZE_1000_OR_MORE,
							},
							{
								label: this.$locale.baseText('personalizationModal.imNotUsingN8nForWork'),
								value: COMPANY_SIZE_PERSONAL_USE,
							},
						],
					},
					shouldDisplay(values): boolean {
						const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
						return companyType !== PERSONAL_COMPANY_TYPE;
					},
				},
			];

			return survey;
		},
	},
	methods: {
		closeDialog() {
			this.modalBus.$emit('close');
		},
		onSave() {
			this.formBus.$emit('submit');
		},
		async onSubmit(values: IPersonalizationSurveyAnswersV2): Promise<void> {
			this.$data.isSaving = true;

			try {
				await this.$store.dispatch('users/submitPersonalizationSurvey', {...values, version: SURVEY_VERSION});

				if (Object.keys(values).length === 0) {
					this.closeDialog();
				}

				await this.fetchOnboardingPrompt();
				this.submitted = true;
			} catch (e) {
				this.$showError(e, 'Error while submitting results');
			}

			this.$data.isSaving = false;
		},
		async fetchOnboardingPrompt() {
			if (this.isOnboardingCallPromptFeatureEnabled && getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX) {
				const onboardingResponse = await this.$store.dispatch('ui/getNextOnboardingPrompt');
				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;

				if (onboardingResponse.title && onboardingResponse.description) {
					setTimeout(async () => {
						this.$showToast({
							type: 'info',
							title: onboardingResponse.title,
							message: onboardingResponse.description,
							duration: 0,
							customClass: 'clickable',
							closeOnClick: true,
							onClick: () => {
								this.$telemetry.track('user clicked onboarding toast', {
									seq_num: onboardingResponse.toast_sequence_number,
									title: onboardingResponse.title,
									description: onboardingResponse.description,
								});
								this.$store.commit('ui/openModal', ONBOARDING_CALL_SIGNUP_MODAL_KEY, {root: true});
							},
						});
					}, promptTimeout);
				}
			}
		},
	},
});
</script>

<style lang="scss" module>
.container {
	> div,
	section > div:not(:last-child) {
		margin-bottom: var(--spacing-m);
	}
}

.submittedContainer {
	* {
		margin-bottom: var(--spacing-2xs);
	}
}

.demoImage {
	border-radius: var(--border-radius-large);
	border: var(--border-base);
	width: 100%;
	height: 140px;
}
</style>