wpfunnels / admin / modules / template-library / Components / SingleTemplate.vue

SingleTemplate.vue in WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell 3.13.1, at admin/modules/template-library/Components/SingleTemplate.vue

290 lines 8.3 KB

Raw Download Zip

1	<template>
2	<div class="create-funnel__single-template">
3	<span class="pro-tag freemium-tag" v-if=" 'freemium' === templateType">Freemium</span>
4
5	<div class="templates-title-wrapper" v-if="showStepsPreview">
6	<span class="back" @click="toggleStepsPreview">
7	<svg width="30" height="30" fill="none" stroke="#363B4E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" class="icon icon-tabler icon-tabler-arrow-narrow-left" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">><path stroke="none" d="M0 0h24v24H0z"/><path d="M5 12h14M5 12l4 4m-4-4l4-4"/></svg>
8	</span>
9	<h2 class="title">
10	{{ stepCount > 1 ? stepCount + ' Steps' : stepCount + ' Step' }}
11	</h2>
12	</div>
13
14	<div class="wpfnl-single-remote-wrapper" :class="classNames" v-if="!showStepsPreview">
15	<div class="wpfnl-single-remote-template">
16	<div class="importar-loader" v-show="loader">
17	<span class="title-wrapper">
18	<span class="title">{{ loaderMessage }}</span>
19	<span class="dot-wrapper">
20	<span class="dot-one">.</span>
21	<span class="dot-two">.</span>
22	<span class="dot-three">.</span>
23	</span>
24	</span>
25	</div>
26
27	<div class="template-action" v-show="!loader">
28	<a
29	href="#"
30	v-if="!isAddNewFunnelButtonDisabled"
31	v-show="(isProActivated && isPro) \|\| !isPro"
32	class="btn-default import wpfnl-import-funnel"
33	@click="startImportTemplate"
34	v-bind:style="{ 'pointer-events': disabled ? 'none' : '' }"
35	>
36	Import
37	</a>
38
39	<a
40	v-show="!isProActivated && isPro"
41	href="https://getwpfunnels.com/pricing/"
42	class="btn-default upgrade-to-pro"
43	style="width:max-content;"
44	target="_blank"
45	>
46	Upgrade to Pro
47	</a>
48
49	<a href="#" class="btn-default steps-preview" @click="toggleStepsPreview"> Preview </a>
50	</div>
51
52	<div class="template-image-wrapper" :style="{ backgroundImage: `url(${previewImage})` }" >
53	</div>
54	</div>
55
56	<div class="funnel-template-info">
57	<span class="title">{{ templatedata.title }}</span>
58	<span class="steps">{{ stepCount }} steps</span>
59	</div>
60	</div>
61	</div>
62	</template>
63
64	<script>
65	import apiFetch from '@wordpress/api-fetch'
66	const nonce = window.template_library_object.nonce
67	apiFetch.use(apiFetch.createNonceMiddleware(nonce))
68	var j = jQuery.noConflict()
69	export default {
70	name: 'SingleTemplate',
71	props: {
72	templatedata: Object,
73	activeCategory: String,
74	templateType: String,
75	freeProFilter: String,
76	isPro: Boolean,
77	type: String,
78	showStepsPreview: Boolean,
79	isAddNewFunnelButtonDisabled: Boolean,
80	},
81	data: function() {
82	let freePro = 'free'
83	if (this.isPro) {
84	freePro = 'pro'
85	} else {
86	freePro = 'free'
87	}
88	return {
89	classNames: this?.templatedata?.wpf_funnel_industry
90	? 'slug' in this?.templatedata?.wpf_funnel_industry
91	? this.templatedata.wpf_funnel_industry.slug
92	: ''
93	: '',
94	proUrl: window.template_library_object.pro_url,
95	freePro: freePro,
96	freProSelector: this.isPro ? 'pro' : 'free',
97	steps: this.templatedata.steps,
98	loader: false,
99	loaderMessage: '',
100	showStepPreviewClass: '',
101	showBackBtn: false,
102	disabled: false,
103	isProActivated: window.WPFunnelVars.isProActivated,
104	isStoreCheckout: window.template_library_object.isStoreCheckout \|\| false,
105	}
106	},
107	computed: {
108	previewImage: function() {
109	if ( this.isStoreCheckout && this.templatedata.steps ) {
110	const checkoutStep = this.templatedata.steps.find( s => s.step_type === 'checkout' );
111	if ( checkoutStep && checkoutStep.featured_image ) {
112	return checkoutStep.featured_image;
113	}
114	}
115	return this.templatedata.featured_image;
116	},
117	displaySteps: function() {
118	if (!this.steps) return [];
119
120	// Filter for Store Checkout - only show one checkout and one thankyou
121	if (this.isStoreCheckout) {
122	let filtered = [];
123	let hasCheckout = false;
124	let hasThankyou = false;
125
126	this.steps.forEach(step => {
127	if (step.step_type === 'checkout' && !hasCheckout) {
128	filtered.push(step);
129	hasCheckout = true;
130	} else if (step.step_type === 'thankyou' && !hasThankyou) {
131	filtered.push(step);
132	hasThankyou = true;
133	}
134	});
135
136	return filtered;
137	}
138
139	return this.steps;
140	},
141	stepCount: function() {
142	return this.displaySteps.length;
143	}
144	},
145	mounted() {
146	this.steps = this.templatedata.steps
147	},
148	watch: {
149	data: function(newData) {
150	this.steps = newtemplatedata.steps_order
151	},
152	templatedata: function() {
153	this.steps = this.templatedata.steps
154	},
155	},
156	methods: {
157	startImportTemplate: function(e) {
158	e.preventDefault()
159	if (this.isAddNewFunnelButtonDisabled) return false
160	j('.wpfnl-create-funnel__templates-wrapper .not-clickable-overlay').addClass('template-importing').show();
161
162	this.disabled = true
163	this.loader = true
164	this.loaderMessage = 'Getting ready to import'
165
166	let data = {
167	action: 'wpfunnel_import_funnel',
168	steps: this.steps,
169	source: 'remote',
170	name: this.templatedata.title,
171	remoteID: this.templatedata.ID,
172	type: this.type,
173	is_store_checkout: this.isStoreCheckout ? true : false,
174	},
175	that = this,
176	_steps = this.filterSteps(this.steps)
177
178
179	wpAjaxHelperRequest('wpfunnel-import-funnel', data)
180	.success(function(response) {
181	let looper = j.Deferred().resolve(),
182	stepCount = 0,
183	importedSteps = [];
184	j.when.apply(j, j.map( _steps, function(step, index) {
185	if ( that.shouldImportStep( step.step_type ) ) {
186	looper = looper.then(function() {
187	return that.createStep( step, response.funnelID, index, that ).then(function( response ) {
188	stepCount++;
189	importedSteps.push( response.stepID )
190	});
191	});
192	}
193	return looper;
194	}),
195	)
196	.then(function() {
197	that.afterFunnelCreationRedirect(response.funnelID, importedSteps, that.templateType )
198	})
199	})
200	.error(function(response) {
201	console.log(response.statusText)
202	})
203	},
204	shouldImportStep: function(stepType) {
205	let isProActivated = window.WPFunnelVars.isProActivated == 1;
206	if ( isProActivated ) {
207	return true
208	}
209	return !['downsell'].includes(stepType);
210	},
211	filterSteps: function(steps) {
212	let isProActivated = window.WPFunnelVars.isProActivated == 1;
213
214	// Filter for Store Checkout - only checkout and thankyou (one of each)
215	if (this.isStoreCheckout) {
216	let filtered = [];
217	let hasCheckout = false;
218	let hasThankyou = false;
219
220	steps.forEach(step => {
221	if (step.step_type === 'checkout' && !hasCheckout) {
222	filtered.push(step);
223	hasCheckout = true;
224	} else if (step.step_type === 'thankyou' && !hasThankyou) {
225	filtered.push(step);
226	hasThankyou = true;
227	}
228	});
229
230	return filtered;
231	}
232
233	if (isProActivated) {
234	return steps;
235	} else {
236	return steps.filter((step, index, self) => {
237	return step.step_type !== 'downsell' &&
238	index === self.findIndex(s => s.step_type === step.step_type);
239	});
240	}
241	},
242	createStep: function(step, funnelID, index, that) {
243	let deferred = j.Deferred(),
244	payload = {
245	step: step,
246	funnelID: funnelID,
247	source: 'remote',
248	importType: 'templates',
249	}
250	apiFetch({
251	path: `${window.WPFunnelVars.rest_api_url}wpfunnels/v1/steps/wpfunnel-import-step`,
252	method: 'POST',
253	data: payload
254	})
255	.then(function(response) {
256	that.loaderMessage = `Importing Step: ` + (parseInt(index) + 1)
257	deferred.resolve(response)
258	})
259	.catch(function(error) {
260	deferred.reject(response)
261	})
262	return deferred.promise()
263	},
264	afterFunnelCreationRedirect: function( funnelId, importedSteps, templateType = 'free' ) {
265	var payload = {
266	funnelID : funnelId,
267	templateType : templateType,
268	importedSteps : importedSteps,
269	source : 'remote',
270	is_store_checkout : this.isStoreCheckout ? true : false,
271	}
272	wpAjaxHelperRequest('wpfunnel-after-funnel-creation', payload)
273	.success(function(response) {
274	window.location = response.redirectLink
275	})
276	.error(function(response) {
277	console.log(response)
278	})
279	},
280	toggleStepsPreview: function(e) {
281	e.preventDefault()
282	this.$emit('toggleStepsPreview')
283	// Pass filtered steps to parent for Store Checkout
284	this.$emit('initSteps', this.displaySteps)
285	this.$emit('setActiveTemplate', this.templatedata)
286	},
287	},
288	}
289	</script>
290