wpfunnels / admin / modules / setup-wizard / components / Content / Complete.vue

Complete.vue in WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell 3.10.6, at admin/modules/setup-wizard/components/Content/Complete.vue

230 lines 6.8 KB

Raw Download Zip

1	<template>
2	<div class="wpfnl-mm-complete">
3	<!-- Header -->
4	<div class="wpfnl-mm-complete-header">
5	<h2 class="wpfnl-mm-complete-title">
6	{{ titleText }}
7	</h2>
8	<p class="wpfnl-mm-complete-subtitle">
9	{{ subtitleText }}
10	</p>
11	</div>
12
13	<!-- Video/Preview Section -->
14	<div class="wpfnl-mm-complete-video-wrapper">
15	<div class="wpfnl-mm-complete-video">
16	<!-- Poster Image -->
17	<div class="wpfnl-mm-complete-video-bg" v-show="!isVideoPlaying">
18	<img
19	:src="posterImage"
20	alt="Video Poster"
21	class="wpfnl-mm-complete-video-image"
22	/>
23	<div class="wpfnl-mm-complete-video-overlay"></div>
24	</div>
25	<!-- YouTube iframe -->
26	<iframe
27	v-show="isVideoPlaying"
28	class="wpfnl-mm-complete-video-iframe"
29	:src="videoUrl"
30	title="WPFunnels Tutorial"
31	frameborder="0"
32	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
33	allowfullscreen
34	></iframe>
35	<div class="wpfnl-mm-complete-video-player" v-show="!isVideoPlaying">
36	<button class="wpfnl-mm-complete-play-btn" @click="playVideo">
37	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">>
38	<path d="M4 2L14 8L4 14V2Z" fill="white"/>
39	</svg>
40	</button>
41	<div class="wpfnl-mm-complete-progress-bar">
42	<div class="wpfnl-mm-complete-progress-fill"></div>
43	</div>
44	</div>
45	</div>
46	</div>
47
48	<!-- Buttons Section -->
49	<div class="wpfnl-mm-complete-actions">
50	<div class="wpfnl-mm-complete-buttons">
51	<button class="wpfnl-mm-btn wpfnl-mm-btn-secondary" @click="goToDashboard">
52	Go to Dashboard
53	</button>
54
55	<button class="wpfnl-mm-btn wpfnl-mm-btn-primary" @click="viewFunnel">
56	{{ isStoreCheckout ? 'Go to Editor' : 'Test the Funnel' }}
57	<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">>
58	<path d="M1 6H16M16 6L11 1M16 6L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
59	</svg>
60	</button>
61	</div>
62
63
64	</div>
65	</div>
66	</template>
67
68	<script>
69	import apiFetch from '@wordpress/api-fetch';
70
71	export default {
72	name: 'Complete',
73	props: {
74	funnelId: {
75	type: [Number, String],
76	default: null
77	},
78	firstStepLink: {
79	type: String,
80	default: ''
81	},
82	selectedGoal: {
83	type: String,
84	default: 'sales'
85	},
86	agreeToShare: {
87	type: Boolean,
88	default: false
89	}
90	},
91	data() {
92	return {
93	isVideoPlaying: false,
94	posterImage: this.getPosterImage(),
95	videoUrl: '',
96	contactRequestInFlight: false,
97	contactCreated: false,
98	}
99	},
100	mounted() {
101	this.maybeCreateContact();
102	},
103	computed: {
104	isStoreCheckout() {
105	return this.selectedGoal === 'improve-checkout';
106	},
107	titleText() {
108	if (this.isStoreCheckout) {
109	return `Your store checkout is ready! 🎉`;
110	}
111	return `Your funnel is live 🎉`;
112	},
113	subtitleText() {
114	if (this.isStoreCheckout) {
115	return `Your optimized checkout is set up. Customers will now experience a streamlined checkout flow designed to reduce cart abandonment and boost conversions.`;
116	}
117	if (this.selectedGoal === 'leads') {
118	return `Your first funnel is set up. Visitors opting in here will now see your next offer. Once leads start coming in, we'll show you exactly how this funnel is growing your list.`;
119	}
120	return `Your first funnel is set up. Customers who purchase this product will now see your order bump and upsell offers. Once real orders start coming in, we'll show you exactly how much additional revenue this funnel generates.`;
121	},
122	infoText() {
123	if (this.isStoreCheckout) {
124	return `You can customize your checkout page further from the funnel editor.`;
125	}
126	if (this.selectedGoal === 'leads') {
127	return `Once this funnel starts bringing in leads, you can clone it for your other offers in just a few clicks.`;
128	}
129	return `Once you see this funnel working, you can clone it for your other products in a few clicks.`;
130	}
131	},
132	methods: {
133	maybeCreateContact() {
134	if (!this.agreeToShare \|\| this.contactCreated \|\| this.contactRequestInFlight) {
135	return;
136	}
137
138	const wizardObj = window.setup_wizard_obj \|\| {};
139	const restApiUrl = wizardObj.rest_api_url;
140	if (!restApiUrl) {
141	return;
142	}
143
144	const payload = {
145	email: wizardObj.admin_email,
146	name: wizardObj.admin_name
147	};
148
149	this.contactRequestInFlight = true;
150	apiFetch({
151	path: `${restApiUrl}wpfunnels/v1/settings/create-contact/`,
152	method: 'POST',
153	data: payload
154	})
155	.then(() => {
156	this.contactCreated = true;
157	})
158	.catch(error => {
159	console.error('Error creating contact:', error);
160	})
161	.finally(() => {
162	this.contactRequestInFlight = false;
163	});
164	},
165	getPosterImage() {
166	// Use the video poster from setup wizard object
167	const wizardObj = window.setup_wizard_obj \|\| {}
168	return wizardObj.wizard_video_poster \|\| ''
169	},
170	handleCompleteStep(action) {
171	// Emit event to parent component
172	const wizardObj = window.setup_wizard_obj \|\| {}
173	const restApiUrl = wizardObj.rest_api_url \|\| wizardObj.rest_url \|\| ''
174	const requestArgs = {
175	method: 'POST',
176	data: {
177	funnelId: this.funnelId,
178	action: action,
179	goal: this.selectedGoal
180	}
181	}
182
183	if (restApiUrl) {
184	const normalizedRestUrl = restApiUrl.endsWith('/') ? restApiUrl : `${restApiUrl}/`
185	requestArgs.url = `${normalizedRestUrl}wpfunnels/v1/setup-wizard/complete-step`
186	} else {
187	requestArgs.path = '/wpfunnels/v1/setup-wizard/complete-step'
188	}
189
190	apiFetch(requestArgs)
191
192	},
193	viewFunnel() {
194	this.maybeCreateContact();
195	this.handleCompleteStep('viewFunnel')
196	const wizardObj = window.setup_wizard_obj \|\| {}
197	// For store checkout, redirect to the funnel editor
198	if (this.isStoreCheckout) {
199	const adminUrl = wizardObj.admin_url \|\| ''
200	window.location.href = `${adminUrl}admin.php?page=edit_funnel&id=${this.funnelId}`
201	return
202	}
203	// Open the first step preview in a new tab
204	if (this.firstStepLink) {
205	window.open(this.firstStepLink, '_blank')
206	} else {
207	console.error('No first step link available')
208	alert('Unable to open the funnel preview. Please go to the dashboard to view your funnel.')
209	window.location.href = wizardObj.dashboard_url \|\| `${wizardObj.admin_url}admin.php?page=wpfunnels`
210	}
211	},
212	goToDashboard() {
213	this.maybeCreateContact();
214	this.handleCompleteStep('goToDashboard')
215	// Navigate to the funnels dashboard
216	const wizardObj = window.setup_wizard_obj \|\| {}
217	window.location.href = wizardObj.dashboard_url \|\| `${wizardObj.admin_url}admin.php?page=wpfunnels`
218	},
219	playVideo() {
220	// Set video URL with autoplay and show the iframe
221	this.videoUrl = 'https://www.youtube.com/embed/GrzIRl5jfBE?autoplay=1&rel=0'
222	this.isVideoPlaying = true
223	},
224	showHelp() {
225	window.open('https://getwpfunnels.com/docs/', '_blank')
226	}
227	}
228	}
229	</script>
230