| 1 |
<template> |
| 2 |
<div class="wpfnl-wz-center wpfnl-wz-welcome"> |
| 3 |
<div class="wpfnl-wz-welcome-main"> |
| 4 |
<h1 class="wpfnl-wz-h1"> |
| 5 |
Welcome to WPFunnels |
| 6 |
</h1> |
| 7 |
|
| 8 |
<p class="wpfnl-wz-sub"> |
| 9 |
You're minutes away from a higher-converting WooCommerce store. |
| 10 |
</p> |
| 11 |
|
| 12 |
<figure class="wpfnl-wz-art"> |
| 13 |
<img |
| 14 |
:src="welcomeImage" |
| 15 |
alt="A WPFunnels funnel showing landing, checkout, upsell, downsell and thank you steps" |
| 16 |
width="1450" |
| 17 |
height="832" |
| 18 |
/> |
| 19 |
</figure> |
| 20 |
|
| 21 |
<button type="button" class="wpfnl-wz-btn wpfnl-wz-btn--primary wpfnl-wz-btn--lg" @click="submit"> |
| 22 |
Let's Start |
| 23 |
<svg width="15" height="11" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">> |
| 24 |
<path d="M1 6H16M16 6L11 1M16 6L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 25 |
</svg> |
| 26 |
</button> |
| 27 |
</div> |
| 28 |
|
| 29 |
<label class="wpfnl-wz-consent"> |
| 30 |
<input type="checkbox" v-model="consent" /> |
| 31 |
<span class="wpfnl-wz-consent-box" aria-hidden="true"></span> |
| 32 |
<span class="wpfnl-wz-consent-text"> |
| 33 |
Help improve WPFunnels by sharing non-sensitive usage data. We don't collect |
| 34 |
any personal information. |
| 35 |
<a |
| 36 |
:href="privacyUrl" |
| 37 |
class="wpfnl-wz-consent-link" |
| 38 |
target="_blank" |
| 39 |
rel="noopener noreferrer" |
| 40 |
@click.stop |
| 41 |
>Learn more</a> |
| 42 |
</span> |
| 43 |
</label> |
| 44 |
</div> |
| 45 |
</template> |
| 46 |
|
| 47 |
<script> |
| 48 |
import apiFetch from '@wordpress/api-fetch'; |
| 49 |
|
| 50 |
export default { |
| 51 |
name: 'Welcome', |
| 52 |
props: { |
| 53 |
agreeToShare: { |
| 54 |
type: Boolean, |
| 55 |
default: true, |
| 56 |
}, |
| 57 |
}, |
| 58 |
emits: [ 'nav', 'next-step' ], |
| 59 |
data() { |
| 60 |
return { |
| 61 |
consent: this.agreeToShare, |
| 62 |
welcomeImage: window?.setup_wizard_obj?.welcome_image || '', |
| 63 |
// Static — the wizard doesn't otherwise depend on PHP for this, so keep the link on the frontend. |
| 64 |
privacyUrl: 'https://getwpfunnels.com/privacy-policy/', |
| 65 |
contactRequestInFlight: false, |
| 66 |
contactCreated: false, |
| 67 |
}; |
| 68 |
}, |
| 69 |
mounted() { |
| 70 |
this.publishNav(); |
| 71 |
}, |
| 72 |
methods: { |
| 73 |
publishNav() { |
| 74 |
this.$emit( 'nav', { |
| 75 |
label: 'Get started', |
| 76 |
canProceed: true, |
| 77 |
busy: false, |
| 78 |
showBack: false, |
| 79 |
showNext: true, |
| 80 |
} ); |
| 81 |
}, |
| 82 |
|
| 83 |
/** |
| 84 |
* Register the admin as a Mail Mint contact. |
| 85 |
* |
| 86 |
* Only runs when the user has opted in, and only once — the wizard |
| 87 |
* creates the contact here rather than on completion so a user who |
| 88 |
* drops out later is still reachable. |
| 89 |
*/ |
| 90 |
maybeCreateContact() { |
| 91 |
if ( ! this.consent || this.contactCreated || this.contactRequestInFlight ) { |
| 92 |
return; |
| 93 |
} |
| 94 |
|
| 95 |
const wizardObj = window.setup_wizard_obj || {}; |
| 96 |
if ( ! wizardObj.rest_api_url ) { |
| 97 |
return; |
| 98 |
} |
| 99 |
|
| 100 |
this.contactRequestInFlight = true; |
| 101 |
apiFetch( { |
| 102 |
path: `${ wizardObj.rest_api_url }wpfunnels/v1/settings/create-contact/`, |
| 103 |
method: 'POST', |
| 104 |
data: { |
| 105 |
email: wizardObj.admin_email, |
| 106 |
name: wizardObj.admin_name, |
| 107 |
}, |
| 108 |
} ) |
| 109 |
.then( () => { |
| 110 |
this.contactCreated = true; |
| 111 |
} ) |
| 112 |
.catch( ( error ) => { |
| 113 |
console.error( 'Error creating contact:', error ); |
| 114 |
} ) |
| 115 |
.finally( () => { |
| 116 |
this.contactRequestInFlight = false; |
| 117 |
} ); |
| 118 |
}, |
| 119 |
|
| 120 |
/** |
| 121 |
* Called by the body CTA and by the footer's Next button. |
| 122 |
*/ |
| 123 |
submit() { |
| 124 |
this.maybeCreateContact(); |
| 125 |
this.$emit( 'next-step', { agreeToShare: this.consent } ); |
| 126 |
}, |
| 127 |
}, |
| 128 |
}; |
| 129 |
</script> |
| 130 |
|
