refactor: Personalization tweaks (#3813)

* update survey

* add usage modes

* update recommended

* update key

* update key

* fix text cut off issue

* delete dulicate

* update placeholder

* clean up keys

* fix label
This commit is contained in:
Mutasem Aldmour
2022-08-03 13:02:46 +02:00
committed by GitHub
parent d65a9ed118
commit 7240aa38a3
8 changed files with 187 additions and 110682 deletions

View File

@@ -47,7 +47,7 @@
<script lang="ts">
import mixins from 'vue-typed-mixins';
const SURVEY_VERSION = 'v2';
const SURVEY_VERSION = 'v3';
import {
CODING_SKILL_KEY,
@@ -64,7 +64,7 @@ import {
OTHER_INDUSTRY_OPTION,
PERSONALIZATION_MODAL_KEY,
SECURITY_INDUSTRY,
EDUCATION_INDUSTRY,
EDUCATION_TYPE,
FINANCE_INSURANCE_INDUSTRY,
IT_INDUSTRY,
MARKETING_INDUSTRY,
@@ -76,6 +76,7 @@ import {
AUTOMATION_GOAL_KEY,
CUSTOMER_INTEGRATIONS_GOAL,
CUSTOMER_SUPPORT_GOAL,
ENGINEERING_GOAL,
FINANCE_ACCOUNTING_GOAL,
HR_GOAL,
OPERATIONS_GOAL,
@@ -86,36 +87,36 @@ import {
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,
MSP_INDUSTRY,
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,
MARKETING_AUTOMATION_GOAL_KEY,
MARKETING_AUTOMATION_LEAD_GENERATION_GOAL,
MARKETING_AUTOMATION_CUSTOMER_COMMUNICATION,
MARKETING_AUTOMATION_ACTIONS,
MARKETING_AUTOMATION_AD_CAMPAIGN,
MARKETING_AUTOMATION_REPORTING,
MARKETING_AUTOMATION_DATA_SYNCHING,
MARKETING_AUTOMATION_OTHER,
OTHER_MARKETING_AUTOMATION_GOAL_KEY,
USAGE_MODE_KEY,
USAGE_MODE_MANIPULATE_FILES,
USAGE_MODE_BUILD_BE_SERVICES,
USAGE_MODE_CONNECT_TO_PRODUCT,
} 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 { IFormInputs, IPersonalizationLatestVersion } from '@/Interface';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import { getAccountAge } from '@/modules/userHelpers';
@@ -147,42 +148,6 @@ export default mixins(showMessage, workflowHelpers).extend({
]),
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: {
@@ -198,22 +163,19 @@ export default mixins(showMessage, workflowHelpers).extend({
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,
},
{
value: EDUCATION_TYPE,
label: this.$locale.baseText('personalizationModal.education'),
},
{
label: this.$locale.baseText('personalizationModal.other'),
value: OTHER_COMPANY_TYPE,
@@ -225,85 +187,6 @@ export default mixins(showMessage, workflowHelpers).extend({
],
},
},
{
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: {
@@ -311,10 +194,6 @@ export default mixins(showMessage, workflowHelpers).extend({
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'),
@@ -335,6 +214,10 @@ export default mixins(showMessage, workflowHelpers).extend({
value: LEGAL_INDUSTRY,
label: this.$locale.baseText('personalizationModal.legal'),
},
{
value: MSP_INDUSTRY,
label: this.$locale.baseText('personalizationModal.managedServiceProvider'),
},
{
value: MARKETING_INDUSTRY,
label: this.$locale.baseText('personalizationModal.marketing'),
@@ -370,7 +253,7 @@ export default mixins(showMessage, workflowHelpers).extend({
],
},
shouldDisplay(values): boolean {
const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
return companyType === OTHER_COMPANY_TYPE;
},
},
@@ -380,8 +263,8 @@ export default mixins(showMessage, workflowHelpers).extend({
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];
const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
const companyIndustry = (values as IPersonalizationLatestVersion)[COMPANY_INDUSTRY_EXTENDED_KEY];
return companyType === OTHER_COMPANY_TYPE && !!companyIndustry && companyIndustry.includes(OTHER_INDUSTRY_OPTION);
},
},
@@ -400,6 +283,10 @@ export default mixins(showMessage, workflowHelpers).extend({
value: CUSTOMER_SUPPORT_GOAL,
label: this.$locale.baseText('personalizationModal.customerSupport'),
},
{
value: ENGINEERING_GOAL,
label: this.$locale.baseText('personalizationModal.engineeringOrDevops'),
},
{
value: FINANCE_ACCOUNTING_GOAL,
label: this.$locale.baseText('personalizationModal.financeOrAccounting'),
@@ -435,7 +322,7 @@ export default mixins(showMessage, workflowHelpers).extend({
],
},
shouldDisplay(values): boolean {
const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
return companyType !== PERSONAL_COMPANY_TYPE;
},
},
@@ -445,11 +332,85 @@ export default mixins(showMessage, workflowHelpers).extend({
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];
const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
const automationGoal = (values as IPersonalizationLatestVersion)[AUTOMATION_GOAL_KEY];
return companyType !== PERSONAL_COMPANY_TYPE && automationGoal === OTHER_AUTOMATION_GOAL;
},
},
{
name: MARKETING_AUTOMATION_GOAL_KEY,
properties: {
type: 'multi-select',
label: this.$locale.baseText('personalizationModal.specifySalesMarketingGoal'),
placeholder: this.$locale.baseText('personalizationModal.select'),
options: [
{
label: this.$locale.baseText('personalizationModal.leadGeneration'),
value: MARKETING_AUTOMATION_LEAD_GENERATION_GOAL,
},
{
label: this.$locale.baseText('personalizationModal.customerCommunication'),
value: MARKETING_AUTOMATION_CUSTOMER_COMMUNICATION,
},
{
label: this.$locale.baseText('personalizationModal.customerActions'),
value: MARKETING_AUTOMATION_ACTIONS,
},
{
label: this.$locale.baseText('personalizationModal.adCampaign'),
value: MARKETING_AUTOMATION_AD_CAMPAIGN,
},
{
label: this.$locale.baseText('personalizationModal.reporting'),
value: MARKETING_AUTOMATION_REPORTING,
},
{
label: this.$locale.baseText('personalizationModal.dataSynching'),
value: MARKETING_AUTOMATION_DATA_SYNCHING,
},
{
label: this.$locale.baseText('personalizationModal.other'),
value: MARKETING_AUTOMATION_OTHER,
},
],
},
shouldDisplay(values): boolean {
const goal = (values as IPersonalizationLatestVersion)[AUTOMATION_GOAL_KEY];
return goal === SALES_MARKETING_GOAL;
},
},
{
name: OTHER_MARKETING_AUTOMATION_GOAL_KEY,
properties: {
placeholder: this.$locale.baseText('personalizationModal.specifyOtherSalesAndMarketingGoal'),
},
shouldDisplay(values): boolean {
const goals = (values as IPersonalizationLatestVersion)[MARKETING_AUTOMATION_GOAL_KEY];
return !!goals && goals.includes(MARKETING_AUTOMATION_OTHER);
},
},
{
name: USAGE_MODE_KEY,
properties: {
type: 'multi-select',
label: this.$locale.baseText('personalizationModal.specifyUsageMode'),
placeholder: this.$locale.baseText('personalizationModal.select'),
options: [
{
label: this.$locale.baseText('personalizationModal.connectToOwnProduct'),
value: USAGE_MODE_CONNECT_TO_PRODUCT,
},
{
label: this.$locale.baseText('personalizationModal.buildBackendServices'),
value: USAGE_MODE_BUILD_BE_SERVICES,
},
{
label: this.$locale.baseText('personalizationModal.manipulateFiles'),
value: USAGE_MODE_MANIPULATE_FILES,
},
],
},
},
{
name: COMPANY_SIZE_KEY,
properties: {
@@ -484,7 +445,7 @@ export default mixins(showMessage, workflowHelpers).extend({
],
},
shouldDisplay(values): boolean {
const companyType = (values as IPersonalizationSurveyAnswersV2)[COMPANY_TYPE_KEY];
const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
return companyType !== PERSONAL_COMPANY_TYPE;
},
},
@@ -500,7 +461,7 @@ export default mixins(showMessage, workflowHelpers).extend({
onSave() {
this.formBus.$emit('submit');
},
async onSubmit(values: IPersonalizationSurveyAnswersV2): Promise<void> {
async onSubmit(values: IPersonalizationLatestVersion): Promise<void> {
this.$data.isSaving = true;
try {