N8n 2952 personalisation

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -3,17 +3,19 @@
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot"></slot>
 			<n8n-select
-				v-else-if="type === 'select'"
+				v-else-if="type === 'select' || type === 'multi-select'"
 				:value="value"
+				:placeholder="placeholder"
+				:multiple="type === 'multi-select'"
+				@change="onInput"
+				@focus="onFocus"
+				@blur="onBlur"
 			>
 				<n8n-option
 					v-for="option in (options || [])"
 					:key="option.value"
 					:value="option.value"
 					:label="option.label"
-					@change="onInput"
-					@focus="onFocus"
-					@blur="onBlur"
 				/>
 			</n8n-select>
 			<n8n-input
@@ -72,7 +74,6 @@ export default Vue.extend({
 	},
 	props: {
 		value: {
-			type: String,
 		},
 		label: {
 			type: String,

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -5,7 +5,7 @@
 		<template v-slot="{ bp }">
 			<div :class="bp === 'md' || columnView? $style.grid : $style.gridMulti">
 				<div
-					v-for="(input) in inputs"
+					v-for="(input) in filteredInputs"
 					:key="input.name"
 				>
 					<n8n-text color="text-base" v-if="input.properties.type === 'text'" tag="div" align="center">
@@ -55,7 +55,7 @@ export default Vue.extend({
 	data() {
 		return {
 			showValidationWarnings: false,
-			values: {} as {[key: string]: string},
+			values: {} as {[key: string]: any},
 			validity: {} as {[key: string]: boolean},
 		};
 	},
@@ -71,6 +71,9 @@ export default Vue.extend({
 		}
 	},
 	computed: {
+		filteredInputs(): IFormInput[] {
+			return this.inputs.filter((input: IFormInput) => typeof input.shouldDisplay === 'function'? input.shouldDisplay(this.values): true);
+		},
 		isReadyToSubmit(): boolean {
 			for (let key in this.validity) {
 				if (!this.validity[key]) {
@@ -82,7 +85,7 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onInput(name: string, value: string) {
+		onInput(name: string, value: any) {
 			this.values = {
 				...this.values,
 				[name]: value,

packages/editor-ui/src/Interface.ts

@@ -483,15 +483,26 @@ export interface IVersionNotificationSettings {
 	infoUrl: string;
 }
 
-export type IPersonalizationSurveyKeys = 'codingSkill' | 'companyIndustry' | 'companySize' | 'otherCompanyIndustry' | 'otherWorkArea' | 'workArea';
-
-export type IPersonalizationSurveyAnswers = {
-	codingSkill: string | null;
-	companyIndustry: string[];
-	companySize: string | null;
-	otherCompanyIndustry: string | null;
-	otherWorkArea: string | null;
-	workArea: string[] | string | null;
+export type IPersonalizationSurveyAnswersV1 = {
+	codingSkill?: string | null;
+	companyIndustry?: string[] | null;
+	companySize?: string | null;
+	otherCompanyIndustry?: string | null;
+	otherWorkArea?: string | null;
+	workArea?: string[] | string | null;
+};
+
+export type IPersonalizationSurveyAnswersV2 = {
+	version: 'v2';
+	automationGoal?: string | null;
+	codingSkill?: string | null;
+	companyIndustryExtended?: string[] | null;
+	companySize?: string | null;
+	companyType?: string | null;
+	mspFocus?: string[] | null;
+	mspFocusOther?: string | null;
+	otherAutomationGoal?: string | null;
+	otherCompanyIndustryExtended?: string[] | null;
 };
 
 export interface IN8nPrompts {
@@ -883,7 +894,7 @@ export interface IUserResponse {
 		name: IRole;
 		id: string;
 	};
-	personalizationAnswers?: IPersonalizationSurveyAnswers | null;
+	personalizationAnswers?: IPersonalizationSurveyAnswersV1 | IPersonalizationSurveyAnswersV2 | null;
 	isPending: boolean;
 }
 
@@ -917,8 +928,8 @@ export type IFormInput = {
 	name: string;
 	initialValue?: string | number | boolean | null;
 	properties: {
-		label: string;
-		type?: "text" | "email" | "password" | 'select';
+		label?: string;
+		type?: "text" | "email" | "password" | 'select' | 'multi-select';
 		maxlength?: number;
 		required?: boolean;
 		showRequiredAsterisk?: boolean;
@@ -931,7 +942,8 @@ export type IFormInput = {
 		placeholder?: string;
 		options?: Array<{label: string; value: string}>;
 		autocomplete?: 'off' | 'new-password' | 'current-password' | 'given-name' | 'family-name' | 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-	}
+	};
+	shouldDisplay?: (values: {[key: string]: unknown}) => boolean;
 };
 
 export type IFormInputs = IFormInput[];

packages/editor-ui/src/api/users.ts

@@ -1,4 +1,4 @@
-import { IInviteResponse, IPersonalizationSurveyAnswers, IRestApiContext, IUserResponse } from '@/Interface';
+import { IInviteResponse, IPersonalizationSurveyAnswersV2, IRestApiContext, IUserResponse } from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import { makeRestApiRequest } from './helpers';
 
@@ -67,6 +67,6 @@ export async function reinvite(context: IRestApiContext, {id}: {id: string}): Pr
 	await makeRestApiRequest(context, 'POST', `/users/${id}/reinvite`);
 }
 
-export async function submitPersonalizationSurvey(context: IRestApiContext, params: IPersonalizationSurveyAnswers): Promise<void> {
+export async function submitPersonalizationSurvey(context: IRestApiContext, params: IPersonalizationSurveyAnswersV2): Promise<void> {
 	await makeRestApiRequest(context, 'POST', '/me/survey', params as unknown as IDataObject);
 }