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

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

203 lines 4.7 KB

Raw Download Zip

1	<template>
2	<main class="wpfnl-wz-body">
3	<Welcome
4	v-if="1 === currentStep"
5	ref="step"
6	:agreeToShare="agreeToShare"
7	@nav="bubbleNav"
8	@next-step="bubbleNext"
9	/>
10
11	<Setup
12	v-else-if="2 === currentStep"
13	ref="step"
14	@nav="bubbleNav"
15	@next-step="bubbleNext"
16	/>
17
18	<ChooseTemplate
19	v-else-if="3 === currentStep"
20	ref="step"
21	:builder="builder"
22	:prefetchedTemplates="prefetchedTemplates"
23	@nav="bubbleNav"
24	@next-step="bubbleNext"
25	/>
26
27	<Complete
28	v-else-if="4 === currentStep"
29	ref="step"
30	:funnelId="funnelId"
31	:firstStepLink="firstStepLink"
32	@nav="bubbleNav"
33	/>
34
35	<!-- Exit confirmation -->
36	<div
37	v-if="isExitModalVisible"
38	class="wpfnl-wz-modal-overlay"
39	role="dialog"
40	aria-modal="true"
41	aria-labelledby="wpfnl-wz-exit-title"
42	@click.self="closeExitModal"
43	>
44	<div class="wpfnl-wz-modal">
45	<div class="wpfnl-wz-modal-head">
46	<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">>
47	<circle cx="24" cy="24" r="24" fill="#FEF3C7" />
48	<path d="M24 16V24M24 28H24.02M38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
49	</svg>
50	<h2 id="wpfnl-wz-exit-title" class="wpfnl-wz-modal-title">Exit Setup Wizard?</h2>
51	<p class="wpfnl-wz-modal-text">
52	Are you sure you want to exit? Your progress won't be saved and you'll need to start over later.
53	</p>
54	</div>
55
56	<div class="wpfnl-wz-modal-actions">
57	<button type="button" class="wpfnl-wz-btn wpfnl-wz-btn--ghost" @click="closeExitModal">
58	Continue Setup
59	</button>
60	<button type="button" class="wpfnl-wz-btn wpfnl-wz-btn--danger" @click="confirmExit">
61	Yes, Exit
62	</button>
63	</div>
64	</div>
65	</div>
66	</main>
67	</template>
68
69	<script>
70	import Setup from './Setup.vue';
71	import Welcome from './Welcome.vue';
72	import ChooseTemplate from './ChooseTemplate.vue';
73	import Complete from './Complete.vue';
74
75	/**
76	* Telemetry step slugs, mirroring the map in Wizard.vue.
77	*/
78	const STEP_NAMES = {
79	1: 'welcome',
80	2: 'required_installation',
81	3: 'choose_template',
82	4: 'complete',
83	};
84
85	export default {
86	name: 'Content',
87	components: {
88	Setup,
89	Welcome,
90	ChooseTemplate,
91	Complete,
92	},
93	props: {
94	currentStep: {
95	type: Number,
96	default: 1,
97	},
98	builder: {
99	type: String,
100	default: 'gutenberg',
101	},
102	funnelId: {
103	type: [ Number, String ],
104	default: null,
105	},
106	firstStepLink: {
107	type: String,
108	default: '',
109	},
110	agreeToShare: {
111	type: Boolean,
112	default: true,
113	},
114	prefetchedTemplates: {
115	type: Array,
116	default: () => [],
117	},
118	},
119	emits: [ 'nav', 'next-step', 'prev-step', 'exit' ],
120	data() {
121	return {
122	isExitModalVisible: false,
123	};
124	},
125	methods: {
126	/**
127	* Hand the currently mounted step component back to Wizard so the
128	* footer's Next button can delegate to it.
129	*
130	* @return {Object\|null} Active step component instance.
131	*/
132	activeStep() {
133	return this.$refs.step \|\| null;
134	},
135
136	bubbleNav( state ) {
137	this.$emit( 'nav', state );
138	},
139
140	bubbleNext( data ) {
141	this.$emit( 'next-step', data );
142	},
143
144	showExitModal() {
145	this.isExitModalVisible = true;
146	},
147
148	closeExitModal() {
149	this.isExitModalVisible = false;
150	},
151
152	confirmExit() {
153	this.trackAbandoned( () => {
154	window.location.href = window.setup_wizard_obj?.dashboard_url \|\| '/wp-admin/';
155	} );
156	},
157
158	/**
159	* Report the exit before navigating away.
160	*
161	* Leaving from the template picker without generating is reported as
162	* `skipped` rather than `abandoned` — the user saw the offer and
163	* declined it, which is a different signal from dropping out earlier.
164	* Uses fetch + keepalive rather than apiFetch so the request survives
165	* the navigation that follows.
166	*
167	* @param {Function} callback Runs once the request settles.
168	*/
169	trackAbandoned( callback ) {
170	const wizardObj = window.setup_wizard_obj \|\| {};
171	const restApiUrl = wizardObj.rest_api_url \|\| '';
172
173	if ( ! restApiUrl ) {
174	callback();
175	return;
176	}
177
178	const base = restApiUrl.endsWith( '/' ) ? restApiUrl : `${ restApiUrl }/`;
179	const eventType = 3 === this.currentStep ? 'skipped' : 'abandoned';
180
181	fetch( `${ base }wpfunnels/v1/setup-wizard/track-step`, {
182	method: 'POST',
183	keepalive: true,
184	headers: {
185	'Content-Type': 'application/json',
186	'X-WP-Nonce': wizardObj.nonce \|\| '',
187	},
188	body: JSON.stringify( {
189	event_type: eventType,
190	step_name: STEP_NAMES[ this.currentStep ] \|\| 'unknown',
191	step_index: this.currentStep,
192	goal: 'improve-checkout',
193	time_on_step: 0,
194	total_steps: 4,
195	} ),
196	} )
197	.catch( () => {} )
198	.finally( callback );
199	},
200	},
201	};
202	</script>
203