| 1 |
<template> |
| 2 |
<div class="wpfnl-mm-setup-wizard-content"> |
| 3 |
<!-- Common Steps --> |
| 4 |
<Welcome |
| 5 |
v-if="currentStep === 1" |
| 6 |
@next-step="handleNextStep" |
| 7 |
@prev-step="handlePrevStep" |
| 8 |
/> |
| 9 |
|
| 10 |
<Setup |
| 11 |
v-if="currentStep === 2" |
| 12 |
:selectedGoal="selectedGoal" |
| 13 |
@next-step="handleNextStep" |
| 14 |
@prev-step="handlePrevStep" |
| 15 |
/> |
| 16 |
|
| 17 |
<ChooseGoal |
| 18 |
v-if="currentStep === 3" |
| 19 |
:builder="selectedBuilder" |
| 20 |
@next-step="handleNextStep" |
| 21 |
@prev-step="handlePrevStep" |
| 22 |
/> |
| 23 |
|
| 24 |
<!-- Dynamic Steps based on Goal --> |
| 25 |
|
| 26 |
<!-- order-value: ChooseTemplate -> BuildFunnel -> Complete --> |
| 27 |
<ChooseTemplate |
| 28 |
v-if="currentStep === 4 && selectedGoal === 'order-value'" |
| 29 |
:goal="selectedGoal" |
| 30 |
:builder="selectedBuilder" |
| 31 |
@next-step="handleNextStep" |
| 32 |
@prev-step="handlePrevStep" |
| 33 |
/> |
| 34 |
|
| 35 |
<BuildFunnel |
| 36 |
v-if="currentStep === 5 && selectedGoal === 'order-value'" |
| 37 |
:template="selectedTemplate" |
| 38 |
:goal="selectedGoal" |
| 39 |
:builder="selectedBuilder" |
| 40 |
@next-step="handleNextStep" |
| 41 |
@prev-step="handlePrevStep" |
| 42 |
/> |
| 43 |
|
| 44 |
<Complete |
| 45 |
v-if="currentStep === 6 && selectedGoal === 'order-value'" |
| 46 |
:funnelId="funnelId" |
| 47 |
:firstStepLink="firstStepLink" |
| 48 |
:selectedGoal="selectedGoal" |
| 49 |
:agreeToShare="agreeToShare" |
| 50 |
/> |
| 51 |
|
| 52 |
<!-- improve-checkout: ChooseTemplate -> GenerateFunnel -> Complete --> |
| 53 |
<ChooseTemplate |
| 54 |
v-if="currentStep === 4 && selectedGoal === 'improve-checkout'" |
| 55 |
:goal="selectedGoal" |
| 56 |
:builder="selectedBuilder" |
| 57 |
@next-step="handleNextStep" |
| 58 |
@prev-step="handlePrevStep" |
| 59 |
/> |
| 60 |
|
| 61 |
<GenerateFunnel |
| 62 |
v-if="currentStep === 5 && selectedGoal === 'improve-checkout'" |
| 63 |
:template="selectedTemplate" |
| 64 |
:goal="selectedGoal" |
| 65 |
:builder="selectedBuilder" |
| 66 |
:mainProduct="mainProduct" |
| 67 |
:orderBump="orderBump" |
| 68 |
:upsellProduct="upsellProduct" |
| 69 |
@next-step="handleNextStep" |
| 70 |
@prev-step="handlePrevStep" |
| 71 |
/> |
| 72 |
|
| 73 |
<Complete |
| 74 |
v-if="currentStep === 6 && selectedGoal === 'improve-checkout'" |
| 75 |
:funnelId="funnelId" |
| 76 |
:firstStepLink="firstStepLink" |
| 77 |
:selectedGoal="selectedGoal" |
| 78 |
:agreeToShare="agreeToShare" |
| 79 |
/> |
| 80 |
|
| 81 |
<!-- sales: ProductSync -> ChooseTemplate -> GenerateFunnel -> Complete --> |
| 82 |
<ProductSync |
| 83 |
v-if="currentStep === 4 && selectedGoal === 'sales'" |
| 84 |
:goal="selectedGoal" |
| 85 |
:builder="selectedBuilder" |
| 86 |
:selectedProductId="selectedProductId" |
| 87 |
@next-step="handleNextStep" |
| 88 |
@prev-step="handlePrevStep" |
| 89 |
/> |
| 90 |
|
| 91 |
<ChooseTemplate |
| 92 |
v-if="currentStep === 5 && selectedGoal === 'sales'" |
| 93 |
:goal="selectedGoal" |
| 94 |
:builder="selectedBuilder" |
| 95 |
@next-step="handleNextStep" |
| 96 |
@prev-step="handlePrevStep" |
| 97 |
/> |
| 98 |
|
| 99 |
<GenerateFunnel |
| 100 |
v-if="currentStep === 6 && selectedGoal === 'sales'" |
| 101 |
:template="selectedTemplate" |
| 102 |
:goal="selectedGoal" |
| 103 |
:builder="selectedBuilder" |
| 104 |
:selectedProduct="selectedProduct" |
| 105 |
:mainProduct="mainProduct" |
| 106 |
:orderBump="orderBump" |
| 107 |
:upsellProduct="upsellProduct" |
| 108 |
@next-step="handleNextStep" |
| 109 |
@prev-step="handlePrevStep" |
| 110 |
/> |
| 111 |
|
| 112 |
<Complete |
| 113 |
v-if="currentStep === 7 && selectedGoal === 'sales'" |
| 114 |
:funnelId="funnelId" |
| 115 |
:firstStepLink="firstStepLink" |
| 116 |
:selectedGoal="selectedGoal" |
| 117 |
:agreeToShare="agreeToShare" |
| 118 |
/> |
| 119 |
|
| 120 |
<div class="wpfnl-mm-help-btn"> |
| 121 |
<button class="wpfnl-mm-help-btn-circle" @click="showHelp"> |
| 122 |
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none">> |
| 123 |
<path d="M3.33203 0.235352C5.47393 -0.253449 7.61976 0.613333 8.55859 2.32812C9.33918 3.75474 9.12761 5.42966 7.99805 6.70312C7.6808 7.06053 7.34119 7.37444 7.00879 7.68066C6.23955 8.39045 5.70822 8.90509 5.56836 9.60938L5.54492 9.75293V9.76367L5.54004 10.2842C5.53577 10.8632 5.06526 11.328 4.48828 11.3281H4.47852C3.89713 11.3229 3.42931 10.8469 3.43457 10.2656L3.44043 9.69043V9.68945C3.44043 9.66013 3.44126 9.62985 3.44434 9.60059L3.44531 9.59961C3.60093 7.96652 4.68307 6.96278 5.58105 6.13477C5.8834 5.85561 6.1754 5.5871 6.42383 5.30664L6.42285 5.30566C6.72981 4.95955 7.19762 4.22567 6.71191 3.33887C6.43459 2.83155 5.95887 2.5097 5.43066 2.34473C4.90323 2.18009 4.31698 2.16973 3.80371 2.28711C2.7091 2.5372 2.30991 3.47128 2.1709 3.98926C2.02032 4.55057 1.44282 4.8834 0.880859 4.7334C0.319196 4.58278 -0.014292 4.00565 0.135742 3.44434C0.586504 1.76221 1.75249 0.596951 3.33203 0.235352Z" fill="white" stroke="white" stroke-width="0.2"/> |
| 124 |
<path d="M3.74121 12.9888C4.12882 12.6015 4.83802 12.6015 5.22559 12.9888L5.22656 12.9897C5.42546 13.1834 5.53605 13.4566 5.53613 13.73C5.53613 14.008 5.42666 14.2767 5.23242 14.4771C5.03181 14.6722 4.76248 14.7827 4.4834 14.7827C4.20964 14.7827 3.93533 14.6718 3.74121 14.478L3.74023 14.4771L3.66992 14.4009C3.51523 14.215 3.42969 13.9748 3.42969 13.73C3.42977 13.4566 3.54122 13.1834 3.74023 12.9897L3.74121 12.9888Z" fill="white" stroke="white" stroke-width="0.2"/> |
| 125 |
</svg> |
| 126 |
</button> |
| 127 |
</div> |
| 128 |
|
| 129 |
<!-- Exit Confirmation Modal --> |
| 130 |
<div class="wpfnl-exit-modal-overlay" v-if="isExitModalVisible" @click.self="closeExitModal"> |
| 131 |
<div class="wpfnl-exit-modal"> |
| 132 |
<div class="wpfnl-exit-modal-header"> |
| 133 |
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">> |
| 134 |
<circle cx="24" cy="24" r="24" fill="#FEF3C7"/> |
| 135 |
<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"/> |
| 136 |
</svg> |
| 137 |
<h3 class="wpfnl-exit-modal-title">Exit Setup Wizard?</h3> |
| 138 |
<p class="wpfnl-exit-modal-description"> |
| 139 |
Are you sure you want to exit? Your progress won't be saved and you'll need to start over later. |
| 140 |
</p> |
| 141 |
</div> |
| 142 |
|
| 143 |
<div class="wpfnl-exit-modal-actions"> |
| 144 |
<button class="wpfnl-exit-modal-btn wpfnl-exit-modal-btn-secondary" @click="closeExitModal"> |
| 145 |
Continue Setup |
| 146 |
</button> |
| 147 |
<button class="wpfnl-exit-modal-btn wpfnl-exit-modal-btn-danger" @click="confirmExit"> |
| 148 |
Yes, Exit |
| 149 |
</button> |
| 150 |
</div> |
| 151 |
</div> |
| 152 |
</div> |
| 153 |
</div> |
| 154 |
</template> |
| 155 |
|
| 156 |
<script> |
| 157 |
import ChooseGoal from './ChooseGoal.vue' |
| 158 |
import Setup from './Setup.vue' |
| 159 |
import ChooseTemplate from './ChooseTemplate.vue' |
| 160 |
import BuildFunnel from './BuildFunnel.vue' |
| 161 |
import Complete from './Complete.vue' |
| 162 |
import Welcome from './Welcome.vue' |
| 163 |
import ProductSync from './ProductSync.vue' |
| 164 |
import GenerateFunnel from './GenerateFunnel.vue' |
| 165 |
|
| 166 |
export default { |
| 167 |
name: 'Content', |
| 168 |
components: { |
| 169 |
ChooseGoal, |
| 170 |
Setup, |
| 171 |
ChooseTemplate, |
| 172 |
BuildFunnel, |
| 173 |
Complete, |
| 174 |
Welcome, |
| 175 |
ProductSync, |
| 176 |
GenerateFunnel, |
| 177 |
}, |
| 178 |
props: { |
| 179 |
currentStep: { |
| 180 |
type: Number, |
| 181 |
default: 1 |
| 182 |
}, |
| 183 |
selectedGoal: { |
| 184 |
type: String, |
| 185 |
default: '' |
| 186 |
}, |
| 187 |
selectedBuilder: { |
| 188 |
type: String, |
| 189 |
default: '' |
| 190 |
}, |
| 191 |
selectedTemplate: { |
| 192 |
type: Object, |
| 193 |
default: null |
| 194 |
}, |
| 195 |
selectedProductId: { |
| 196 |
type: [Number, String], |
| 197 |
default: null |
| 198 |
}, |
| 199 |
selectedProduct: { |
| 200 |
type: Object, |
| 201 |
default: null |
| 202 |
}, |
| 203 |
funnelId: { |
| 204 |
type: [Number, String], |
| 205 |
default: null |
| 206 |
}, |
| 207 |
firstStepLink: { |
| 208 |
type: String, |
| 209 |
default: '' |
| 210 |
}, |
| 211 |
agreeToShare: { |
| 212 |
type: Boolean, |
| 213 |
default: false |
| 214 |
}, |
| 215 |
mainProduct: { |
| 216 |
type: Object, |
| 217 |
default: null |
| 218 |
}, |
| 219 |
orderBump: { |
| 220 |
type: Object, |
| 221 |
default: null |
| 222 |
}, |
| 223 |
upsellProduct: { |
| 224 |
type: Object, |
| 225 |
default: null |
| 226 |
} |
| 227 |
}, |
| 228 |
data() { |
| 229 |
return { |
| 230 |
isExitModalVisible: false |
| 231 |
} |
| 232 |
}, |
| 233 |
mounted() { |
| 234 |
|
| 235 |
}, |
| 236 |
methods: { |
| 237 |
handleNextStep(data) { |
| 238 |
this.$emit('next-step', data); |
| 239 |
}, |
| 240 |
handlePrevStep() { |
| 241 |
this.$emit('prev-step'); |
| 242 |
}, |
| 243 |
showHelp() { |
| 244 |
window.open('https://getwpfunnels.com/docs/getting-started-with-wpfunnels/', '_blank'); |
| 245 |
}, |
| 246 |
showExitModal() { |
| 247 |
this.isExitModalVisible = true |
| 248 |
}, |
| 249 |
closeExitModal() { |
| 250 |
this.isExitModalVisible = false |
| 251 |
}, |
| 252 |
confirmExit() { |
| 253 |
window.location.href = window.setup_wizard_obj.dashboard_url || '/wp-admin/'; |
| 254 |
} |
| 255 |
} |
| 256 |
} |
| 257 |
</script> |
| 258 |
|
| 259 |
<style scoped> |
| 260 |
/* Exit Modal */ |
| 261 |
.wpfnl-exit-modal-overlay { |
| 262 |
position: fixed; |
| 263 |
top: 0; |
| 264 |
left: 0; |
| 265 |
right: 0; |
| 266 |
bottom: 0; |
| 267 |
background: rgba(0, 0, 0, 0.5); |
| 268 |
display: flex; |
| 269 |
align-items: center; |
| 270 |
justify-content: center; |
| 271 |
z-index: 10000; |
| 272 |
animation: fadeIn 0.2s ease; |
| 273 |
} |
| 274 |
|
| 275 |
@keyframes fadeIn { |
| 276 |
from { |
| 277 |
opacity: 0; |
| 278 |
} |
| 279 |
to { |
| 280 |
opacity: 1; |
| 281 |
} |
| 282 |
} |
| 283 |
|
| 284 |
.wpfnl-exit-modal { |
| 285 |
background: #FFFFFF; |
| 286 |
border-radius: 16px; |
| 287 |
padding: 32px; |
| 288 |
max-width: 440px; |
| 289 |
width: 90%; |
| 290 |
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15); |
| 291 |
animation: slideUp 0.3s ease; |
| 292 |
} |
| 293 |
|
| 294 |
@keyframes slideUp { |
| 295 |
from { |
| 296 |
transform: translateY(20px); |
| 297 |
opacity: 0; |
| 298 |
} |
| 299 |
to { |
| 300 |
transform: translateY(0); |
| 301 |
opacity: 1; |
| 302 |
} |
| 303 |
} |
| 304 |
|
| 305 |
.wpfnl-exit-modal-header { |
| 306 |
display: flex; |
| 307 |
flex-direction: column; |
| 308 |
align-items: center; |
| 309 |
text-align: center; |
| 310 |
margin-bottom: 24px; |
| 311 |
} |
| 312 |
|
| 313 |
.wpfnl-exit-modal-header svg { |
| 314 |
margin-bottom: 16px; |
| 315 |
} |
| 316 |
|
| 317 |
.wpfnl-exit-modal-title { |
| 318 |
font-size: 20px; |
| 319 |
font-weight: 700; |
| 320 |
font-family: 'DM Sans', sans-serif; |
| 321 |
color: #363B4E; |
| 322 |
margin: 0 0 12px 0; |
| 323 |
letter-spacing: -0.5px; |
| 324 |
} |
| 325 |
|
| 326 |
.wpfnl-exit-modal-description { |
| 327 |
font-size: 14px; |
| 328 |
font-weight: 400; |
| 329 |
font-family: 'DM Sans', sans-serif; |
| 330 |
color: #6E7A85; |
| 331 |
line-height: 1.6; |
| 332 |
margin: 0; |
| 333 |
} |
| 334 |
|
| 335 |
.wpfnl-exit-modal-actions { |
| 336 |
display: flex; |
| 337 |
gap: 12px; |
| 338 |
justify-content: center; |
| 339 |
} |
| 340 |
|
| 341 |
.wpfnl-exit-modal-btn { |
| 342 |
padding: 12px 24px; |
| 343 |
border-radius: 8px; |
| 344 |
font-size: 14px; |
| 345 |
font-weight: 600; |
| 346 |
font-family: 'DM Sans', sans-serif; |
| 347 |
cursor: pointer; |
| 348 |
transition: all 0.3s ease; |
| 349 |
border: none; |
| 350 |
min-width: 140px; |
| 351 |
} |
| 352 |
|
| 353 |
.wpfnl-exit-modal-btn-secondary { |
| 354 |
background: #F6F5FA; |
| 355 |
color: #363B4E; |
| 356 |
border: 1px solid #ECEBF0; |
| 357 |
} |
| 358 |
|
| 359 |
.wpfnl-exit-modal-btn-secondary:hover { |
| 360 |
background: #ECEBF0; |
| 361 |
border-color: #6E42D3; |
| 362 |
} |
| 363 |
|
| 364 |
.wpfnl-exit-modal-btn-danger { |
| 365 |
background: #EF4444; |
| 366 |
color: #FFFFFF; |
| 367 |
} |
| 368 |
|
| 369 |
.wpfnl-exit-modal-btn-danger:hover { |
| 370 |
background: #DC2626; |
| 371 |
} |
| 372 |
</style> |
