← All changes | admin/assets/js/components/Views/Settings.js +153 -94 3.1.21 → 3.1.27 View file →

		@@ -1,10 +1,12 @@
1	1	import CustomSelect from '../Forms/CustomSelect.js';
2	2	import SyncFields from '../Forms/SyncFields.js';
3	3	import eventBus from '../eventBus.js';
4	4	import ApiMixin from '../Api/ApiMixin.js';
5		-import {loadStart, loadEnd} from "../Plugins/Loader.js";
	5	+import { loadStart, loadEnd } from "../Plugins/Loader.js";
6	6
	7	+const POSTHOG_SURVEY_URL = 'https://eu.posthog.com/external_surveys/019f4c72-484a-0000-6cf7-722469ae076c';
	8	+
7	9	const template = `
8	10	<div v-if="syncInProgress || asyncSyncInProgress" class="woo-ml-sync-loading-container" data-testid="sync-in-progress">
9	11	<strong>Sync in progress...</strong>
10	12	<p>This will continue as long as you stay on this page.
		@@ -12,8 +14,28 @@
12	14	<div class="woo-ml-sync-progress-bar"></div>
13	15	</div>
14	16	<form method="post" id="updateSettingsForm">
15	17	<div class="settings-block">
	18	+ <div class="woo-ml-survey-card" v-if="shouldShowSurvey">
	19	+ <p class="woo-ml-survey-title">How are you finding this integration so far?</p>
	20	+ <div class="woo-ml-survey-emojis">
	21	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Very unsatisfied">😫</button>
	22	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Unsatisfied">😠</button>
	23	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Somewhat unsatisfied">😕</button>
	24	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Neutral">😐</button>
	25	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Somewhat satisfied">🙂</button>
	26	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Satisfied">😊</button>
	27	+ <button type="button" @click="openSurvey" class="woo-ml-survey-emoji" title="Very satisfied">🤩</button>
	28	+ </div>
	29	+ <div class="woo-ml-survey-labels">
	30	+ <span>Very unsatisfied</span>
	31	+ <span>Very satisfied</span>
	32	+ </div>
	33	+ </div>
	34	+ <div class="woo-ml-survey-card" v-if="shouldShowSurveyThanks">
	35	+ <p class="woo-ml-survey-title">Thanks for sharing!</p>
	36	+ <p class="woo-ml-survey-thanks-text"><a href="${POSTHOG_SURVEY_URL}" target="_blank" rel="noopener noreferrer">Relaunch survey</a></p>
	37	+ </div>
16	38	<div class="settings-block-fixed">
17	39
18	40	<h2 class="settings-block-header">Synchronization settings</h2>
19	41	<div class="form-group-ml vertical">
		@@ -143,11 +165,11 @@
143	165	name="checkout_position"
144	166	:disabled="!settings.subscribeOnCheckout"
145	167	v-model="settings.selectedCheckoutPosition"
146	168	>
147		- <option
148		- v-for="(checkoutPosition, key) in checkoutPositions"
149		- :key="key"
	169	+ <option
	170	+ v-for="(checkoutPosition, key) in checkoutPositions"
	171	+ :key="key"
150	172	:value="key"
151	173	>
152	174	{{ checkoutPosition }}
153	175	</option>
		@@ -301,9 +323,9 @@
301	323	},
302	324	template,
303	325	mixins: [ApiMixin],
304	326	props: {
305		- group: {
	327	+ group: {
306	328	type: Object,
307	329	required: false
308	330	},
309	331	fields: {
		@@ -311,94 +333,96 @@
311	333	required: false
312	334	},
313	335	},
314	336	data() {
315		- return {
316		- ignoredProducts: woo_mailerlite_admin_data.ignoredProducts,
317		- productsUrl: woo_mailerlite_admin_data.productsUrl,
318		- groups: [
319		- {
320		- value: 1,
321		- text: 'Group 1'
322		- },
323		- {
324		- value: 2,
325		- text: 'Group 2'
326		- },
327		- {
328		- value: 3,
329		- text: 'Group 3'
330		- },
331		- ],
332		- selectedGroup: woo_mailerlite_admin_data.selectedGroup ?? null,
333		- syncFields: [
334		- {
335		- value: 'name',
336		- text: 'Name',
337		- default: true
338		- },
339		- {
340		- value: 'email',
341		- text: 'Email',
342		- default: true
343		- },
344		- {
345		- value: 'company',
346		- text: 'Company'
347		- },
348		- {
349		- value: 'city',
350		- text: 'City'
351		- },
352		- {
353		- value: 'zip',
354		- text: 'ZIP'
355		- },
356		- {
357		- value: 'state',
358		- text: 'State'
359		- },
360		- {
361		- value: 'country',
362		- text: 'Country'
363		- },
364		- {
365		- value: 'phone',
366		- text: 'Phone'
367		- },
368		- ],
369		- accountConnected: true,
370		- totalTrackedResources: 0,
371		- totalUntrackedResources: woo_mailerlite_admin_data.sync.totalUntrackedResources ?? 0,
372		- syncInProgress: woo_mailerlite_admin_data.sync.syncInProgress,
373		- lastCustomerSync: 1,
374		- newMLSync: 0,
375		- settings: {
376		- languageField: false,
377		- subscribeOnCheckout: false,
378		- resubscribe: false,
379		- selectedCheckoutPosition: woo_mailerlite_admin_data.selectedCheckoutPosition ?? 'checkout_billing',
380		- checkoutPreselect: false,
381		- checkoutHidden: false,
382		- syncAfterCheckout: false,
383		- checkoutLabel: 'Yes, I want to receive your newsletter.',
384		- doubleOptIn: false,
385		- popUps: false,
386		- autoUpdatePlugin: false,
387		- },
388		- debugMode: woo_mailerlite_admin_data?.debugMode ?? false,
389		- platform: woo_mailerlite_admin_data?.account?.platform === 'rewrite' ? 1 : 2,
390		- checkoutPositions: {
391		- 'checkout_billing' :'After billing details',
392		- 'checkout_billing_email' : 'After billing email address',
393		- 'checkout_shipping' :'After shipping details',
394		- 'checkout_after_customer_details' :'After customer details',
395		- 'review_order_before_submit' : 'Before submit button',
396		- },
397		- isLoading: false,
398		- selectedSyncFields: [],
399		- asyncSyncInProgress: woo_mailerlite_admin_data.asyncSync,
400		- }
	337	+ return {
	338	+ ignoredProducts: woo_mailerlite_admin_data.ignoredProducts,
	339	+ productsUrl: woo_mailerlite_admin_data.productsUrl,
	340	+ groups: [
	341	+ {
	342	+ value: 1,
	343	+ text: 'Group 1'
	344	+ },
	345	+ {
	346	+ value: 2,
	347	+ text: 'Group 2'
	348	+ },
	349	+ {
	350	+ value: 3,
	351	+ text: 'Group 3'
	352	+ },
	353	+ ],
	354	+ selectedGroup: woo_mailerlite_admin_data.selectedGroup ?? null,
	355	+ syncFields: [
	356	+ {
	357	+ value: 'name',
	358	+ text: 'Name',
	359	+ default: true
	360	+ },
	361	+ {
	362	+ value: 'email',
	363	+ text: 'Email',
	364	+ default: true
	365	+ },
	366	+ {
	367	+ value: 'company',
	368	+ text: 'Company'
	369	+ },
	370	+ {
	371	+ value: 'city',
	372	+ text: 'City'
	373	+ },
	374	+ {
	375	+ value: 'zip',
	376	+ text: 'ZIP'
	377	+ },
	378	+ {
	379	+ value: 'state',
	380	+ text: 'State'
	381	+ },
	382	+ {
	383	+ value: 'country',
	384	+ text: 'Country'
	385	+ },
	386	+ {
	387	+ value: 'phone',
	388	+ text: 'Phone'
	389	+ },
	390	+ ],
	391	+ accountConnected: true,
	392	+ totalTrackedResources: 0,
	393	+ totalUntrackedResources: woo_mailerlite_admin_data.sync.totalUntrackedResources ?? 0,
	394	+ syncInProgress: woo_mailerlite_admin_data.sync.syncInProgress,
	395	+ lastCustomerSync: 1,
	396	+ newMLSync: 0,
	397	+ settings: {
	398	+ languageField: false,
	399	+ subscribeOnCheckout: false,
	400	+ resubscribe: false,
	401	+ selectedCheckoutPosition: woo_mailerlite_admin_data.selectedCheckoutPosition ?? 'checkout_billing',
	402	+ checkoutPreselect: false,
	403	+ checkoutHidden: false,
	404	+ syncAfterCheckout: false,
	405	+ checkoutLabel: 'Yes, I want to receive your newsletter.',
	406	+ doubleOptIn: false,
	407	+ popUps: false,
	408	+ autoUpdatePlugin: false,
	409	+ },
	410	+ debugMode: woo_mailerlite_admin_data?.debugMode ?? false,
	411	+ platform: woo_mailerlite_admin_data?.account?.platform === 'rewrite' ? 1 : 2,
	412	+ checkoutPositions: {
	413	+ 'checkout_billing': 'After billing details',
	414	+ 'checkout_billing_email': 'After billing email address',
	415	+ 'checkout_shipping': 'After shipping details',
	416	+ 'checkout_after_customer_details': 'After customer details',
	417	+ 'review_order_before_submit': 'Before submit button',
	418	+ },
	419	+ isLoading: false,
	420	+ selectedSyncFields: [],
	421	+ asyncSyncInProgress: woo_mailerlite_admin_data.asyncSync,
	422	+ surveyClicked: false,
	423	+ surveyFirstSeen: null,
	424	+ }
401	425	},
402	426	mounted() {
403	427	eventBus.on('sync-completed', (sync) => {
404	428	this.syncInProgress = false
		@@ -408,9 +432,9 @@
408	432	this.totalUntrackedResources = untracked
409	433	});
410	434
411	435	eventBus.on('reset-integration', (untracked) => {
412		- this.resetPlugin()
	436	+ this.resetPlugin()
413	437	});
414	438
415	439	},
416	440	created() {
		@@ -431,10 +455,40 @@
431	455	}
432	456	if (this.group) {
433	457	this.selectedGroup = this.group;
434	458	}
	459	+ this.surveyClicked = localStorage.getItem('woo_ml_survey_clicked') === '1';
	460	+
	461	+ if (localStorage.getItem('woo_ml_survey_first_seen') === null) {
	462	+ localStorage.setItem('woo_ml_survey_first_seen', new Date().toISOString());
	463	+ }
	464	+ this.surveyFirstSeen = localStorage.getItem('woo_ml_survey_first_seen');
435	465	},
436	466	computed: {
	467	+ surveyActive() {
	468	+ if (this.surveyFirstSeen === null) {
	469	+ return false;
	470	+ }
	471	+
	472	+ const expiry = new Date(this.surveyFirstSeen);
	473	+ expiry.setDate(expiry.getDate() + 10);
	474	+
	475	+ return new Date() < expiry;
	476	+ },
	477	+ shouldShowSurvey() {
	478	+ if (this.surveyClicked) {
	479	+ return false;
	480	+ }
	481	+
	482	+ return this.surveyActive;
	483	+ },
	484	+ shouldShowSurveyThanks() {
	485	+ if (this.surveyClicked) {
	486	+ return this.surveyActive;
	487	+ }
	488	+
	489	+ return false;
	490	+ },
437	491	syncMessage() {
438	492	const count = this.totalUntrackedResources;
439	493	return count === 1
440	494	? `Synchronize ${count} untracked resource`
		@@ -474,9 +528,9 @@
474	528	async resetSync() {
475	529	loadStart(this.$refs.resetSyncBtn)
476	530	const resetData = await this.resetResources()
477	531	loadEnd(this.$refs.resetSyncBtn)
478		- eventBus.emit('reset-completed', resetData.data?.totalUntrackedResources ?? 0 );
	532	+ eventBus.emit('reset-completed', resetData.data?.totalUntrackedResources ?? 0);
479	533	},
480	534	syncResources() {
481	535	this.syncResources()
482	536	},
		@@ -511,9 +565,14 @@
511	565	loadStart(this.$refs.enableDebugMode)
512	566	const response = await this.debugModeEnable()
513	567	this.debugMode = response
514	568	loadEnd(this.$refs.enableDebugMode)
515		- }
	569	+ },
	570	+ openSurvey() {
	571	+ this.surveyClicked = true;
	572	+ localStorage.setItem('woo_ml_survey_clicked', '1');
	573	+ window.open(POSTHOG_SURVEY_URL, '_blank', 'noopener,noreferrer');
	574	+ },
516	575	}
517	576	};
518	577
519	578	export default Settings;