| 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" @click="playVideo"></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 |
const wizardObj = window.setup_wizard_obj || {} |
| 172 |
const restApiUrl = wizardObj.rest_api_url || wizardObj.rest_url || '' |
| 173 |
const totalSteps = this.selectedGoal === 'sales' ? 7 |
| 174 |
: (this.selectedGoal === 'order-value' || this.selectedGoal === 'improve-checkout') ? 6 |
| 175 |
: 5; |
| 176 |
const requestArgs = { |
| 177 |
method: 'POST', |
| 178 |
data: { |
| 179 |
funnelId: this.funnelId, |
| 180 |
action: action, |
| 181 |
goal: this.selectedGoal, |
| 182 |
total_steps: totalSteps, |
| 183 |
} |
| 184 |
} |
| 185 |
|
| 186 |
if (restApiUrl) { |
| 187 |
const normalizedRestUrl = restApiUrl.endsWith('/') ? restApiUrl : `${restApiUrl}/` |
| 188 |
requestArgs.url = `${normalizedRestUrl}wpfunnels/v1/setup-wizard/complete-step` |
| 189 |
} else { |
| 190 |
requestArgs.path = '/wpfunnels/v1/setup-wizard/complete-step' |
| 191 |
} |
| 192 |
|
| 193 |
return apiFetch(requestArgs).catch(() => {}) |
| 194 |
}, |
| 195 |
async viewFunnel() { |
| 196 |
this.maybeCreateContact(); |
| 197 |
await this.handleCompleteStep('viewFunnel') |
| 198 |
const wizardObj = window.setup_wizard_obj || {} |
| 199 |
if (this.isStoreCheckout) { |
| 200 |
const adminUrl = wizardObj.admin_url || '' |
| 201 |
window.location.href = `${adminUrl}admin.php?page=edit_funnel&id=${this.funnelId}` |
| 202 |
return |
| 203 |
} |
| 204 |
if (this.firstStepLink) { |
| 205 |
window.open(this.firstStepLink, '_blank') |
| 206 |
} else { |
| 207 |
window.location.href = wizardObj.dashboard_url || `${wizardObj.admin_url}admin.php?page=wpfunnels` |
| 208 |
} |
| 209 |
}, |
| 210 |
async goToDashboard() { |
| 211 |
this.maybeCreateContact(); |
| 212 |
await this.handleCompleteStep('goToDashboard') |
| 213 |
const wizardObj = window.setup_wizard_obj || {} |
| 214 |
window.location.href = wizardObj.dashboard_url || `${wizardObj.admin_url}admin.php?page=wpfunnels` |
| 215 |
}, |
| 216 |
playVideo() { |
| 217 |
// Set video URL with autoplay and show the iframe |
| 218 |
this.videoUrl = 'https://www.youtube.com/embed/GrzIRl5jfBE?autoplay=1&rel=0' |
| 219 |
this.isVideoPlaying = true |
| 220 |
}, |
| 221 |
showHelp() { |
| 222 |
window.open('https://getwpfunnels.com/docs/', '_blank') |
| 223 |
} |
| 224 |
} |
| 225 |
} |
| 226 |
</script> |
| 227 |
|
