| 1 |
<template> |
| 2 |
<div id="wpfnl-create-steps_inner-content" class="wpfnl-create-step_inner-content"> |
| 3 |
<div class="not-clickable-overlay"> |
| 4 |
<span class="import-message">Creating Step...</span> |
| 5 |
</div> |
| 6 |
|
| 7 |
<div id="wpfnl-create-step__template-wrapper" class="wpfnl-create-step__template-wrapper template-library-modal__body"> |
| 8 |
|
| 9 |
<div class="steps-template__filter-wrapper"> |
| 10 |
<span class="wpfnl-modal-close" @click="hideStepImporter"> |
| 11 |
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">> |
| 12 |
<path d="M13.25 14C13.25 14.4142 13.5858 14.75 14 14.75C14.4142 14.75 14.75 14.4142 14.75 14H13.25ZM1 5L0.46967 4.46967C0.255171 4.68417 0.191005 5.00676 0.30709 5.28701C0.423176 5.56727 0.696653 5.75 1 5.75L1 5ZM5.53033 1.53033C5.82322 1.23744 5.82322 0.762563 5.53033 0.46967C5.23744 0.176777 4.76256 0.176777 4.46967 0.46967L5.53033 1.53033ZM4.46967 9.53033C4.76256 9.82322 5.23744 9.82322 5.53033 9.53033C5.82322 9.23744 5.82322 8.76256 5.53033 8.46967L4.46967 9.53033ZM1.53033 4.46967C1.23744 4.17678 0.762563 4.17678 0.46967 4.46967C0.176777 4.76256 0.176777 5.23744 0.46967 5.53033L1.53033 4.46967ZM14.75 14V8H13.25V14H14.75ZM14.75 8C14.75 5.92893 13.0711 4.25 11 4.25V5.75C12.2426 5.75 13.25 6.75736 13.25 8H14.75ZM11 4.25H1V5.75H11V4.25ZM1.53033 5.53033L5.53033 1.53033L4.46967 0.46967L0.46967 4.46967L1.53033 5.53033ZM5.53033 8.46967L1.53033 4.46967L0.46967 5.53033L4.46967 9.53033L5.53033 8.46967Z" fill="#7A8B9A"/> |
| 13 |
</svg> |
| 14 |
</span> |
| 15 |
|
| 16 |
<StepCategorySelect :categories="stepCategories" :active-category="activeStepCategory" @doStepCatFilter="doStepCatFilter"/> |
| 17 |
|
| 18 |
<ul class="pro-free__filter"> |
| 19 |
<li data-filter="all" :class="stepTemplateType == 'all' ? 'active' : '' " @click="doStepFreeProFilter('all')">all</li> |
| 20 |
<li data-filter="free" :class="stepTemplateType == 'free' ? 'active' : '' " @click="doStepFreeProFilter('free')">free</li> |
| 21 |
<li data-filter="pro" :class="stepTemplateType == 'pro' ? 'active' : '' " @click="doStepFreeProFilter('pro')"> |
| 22 |
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">> |
| 23 |
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1L14 7L19 3L17 13H3L1 3L6 7L10 1Z" stroke="#7A8B9A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> |
| 24 |
</svg> |
| 25 |
Premium |
| 26 |
</li> |
| 27 |
</ul> |
| 28 |
|
| 29 |
<!-- <div class="wpfnl-template__serarch-field"> |
| 30 |
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="32" height="32" viewBox="0 0 28 28" stroke-width="1.5" stroke="#7A8B9A" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
| 31 |
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> |
| 32 |
<circle cx="10" cy="10" r="7" /> |
| 33 |
<line x1="21" y1="21" x2="15" y2="15" /> |
| 34 |
</svg> |
| 35 |
|
| 36 |
<input type="search" name="step-template-search" placeholder="Search"> |
| 37 |
</div> --> |
| 38 |
</div> |
| 39 |
|
| 40 |
|
| 41 |
<ul class="wpfnl-create-step__filter-nav" id="wpfnl-create-step__filter-nav"> |
| 42 |
<li :class="{ active : activeItem == 'landing' }" id="create-step-landing" data-filter="landing" @click="doStepFilter">Landing</li> |
| 43 |
<li :class="{ active : activeItem == 'checkout' }" id="create-step-checkout" data-filter="checkout" @click="doStepFilter" :disabled="'lead'==this.funnelType">Checkout</li> |
| 44 |
<li :class="{ active : activeItem == 'thankyou' }" id="create-step-thankyou" data-filter="thankyou" @click="doStepFilter" >Thankyou</li> |
| 45 |
|
| 46 |
<!-- for upsell check if pro activated or not --> |
| 47 |
<li :class="{ active : activeItem == 'upsell' }" data-filter="upsell" :id="'create-step-upsell'" @click="doStepFilter" :disabled="'lead'==this.funnelType">Upsell</li> |
| 48 |
|
| 49 |
<!-- for downsell check if pro activated or not --> |
| 50 |
<li v-if="!isPro" class="disabled"> |
| 51 |
Downsell |
| 52 |
<a :href="proUrl " target="_blank" title="Click to Upgrade Pro"> |
| 53 |
<span class="pro-tag">coming soon</span> |
| 54 |
</a> |
| 55 |
</li> |
| 56 |
<li v-else data-filter="downsell" :class="{ active : activeItem == 'downsell' }" :id="isPro ? 'create-step-downsell' : ''" @click="doStepFilter" :disabled="'lead'==this.funnelType">Downsell </li> |
| 57 |
</ul> |
| 58 |
|
| 59 |
<div class="wpfnl-step__templates-wrapper-before"> |
| 60 |
<div class="wpfnl-step__templates-wrapper"> |
| 61 |
<div class="wpfnl-step__single-template create__from-scratch"> |
| 62 |
<a href="#" id="wpfnl-create-step" class="btn-default" :data-step-type="activeStep" :data-funnel-id="funnelID" @click="createStep" v-bind:style='{"pointer-events" : (disabled? "none" : "" )}'>Start From scratch</a> |
| 63 |
|
| 64 |
<div class="template-preview-image"> |
| 65 |
<div class="step-image-wrapper"> |
| 66 |
</div> |
| 67 |
</div> |
| 68 |
<div class="step-template-info"> |
| 69 |
<span class="title">title</span> |
| 70 |
</div> |
| 71 |
</div> |
| 72 |
|
| 73 |
<SingleStep |
| 74 |
v-for="(step, index) in steps" |
| 75 |
:step="step" |
| 76 |
:key="index" |
| 77 |
:funnelID="funnelID" |
| 78 |
:activeStep="activeStep" |
| 79 |
v-if="activeStep === step?.step_type" |
| 80 |
/> |
| 81 |
</div> |
| 82 |
</div> |
| 83 |
</div> |
| 84 |
</div> |
| 85 |
</template> |
| 86 |
<script> |
| 87 |
import SingleStep from './SingleStep.vue' |
| 88 |
import StepCategorySelect from './StepCategorySelect.vue' |
| 89 |
var j = jQuery.noConflict(); |
| 90 |
export default { |
| 91 |
name: 'StepImporter', |
| 92 |
components: { |
| 93 |
SingleStep, |
| 94 |
StepCategorySelect |
| 95 |
}, |
| 96 |
props: { |
| 97 |
steps: Array, |
| 98 |
categories: Array, |
| 99 |
activeStepCategory: String, |
| 100 |
activeStep: String, |
| 101 |
stepTemplateType: String, |
| 102 |
stepCategories: Array, |
| 103 |
}, |
| 104 |
data: function () { |
| 105 |
return { |
| 106 |
activeClass : '', |
| 107 |
activeCat : 'all', |
| 108 |
isPro : window.template_library_object.is_pro, |
| 109 |
proUrl : window.template_library_object.pro_url, |
| 110 |
funnelID : window.template_library_object.funnel_id, |
| 111 |
funnelType : window.WPFunnelVars.individual_funnel_type, |
| 112 |
activeItem : 'landing', |
| 113 |
disabled: false, |
| 114 |
} |
| 115 |
}, |
| 116 |
methods: { |
| 117 |
doStepFilter: function (e) { |
| 118 |
this.$emit('setActiveStep', e.currentTarget.getAttribute('data-filter') ) |
| 119 |
this.$emit('doStepFilter', e.currentTarget.getAttribute('data-filter') ) |
| 120 |
this.activeItem = e.currentTarget.getAttribute('data-filter'); |
| 121 |
}, |
| 122 |
doStepCatFilter: function (value) { |
| 123 |
this.$emit('doStepCatFilter', value ) |
| 124 |
}, |
| 125 |
doStepFreeProFilter: function (value) { |
| 126 |
this.$emit('doStepFreeProFilter', value ) |
| 127 |
}, |
| 128 |
|
| 129 |
createStep: function (e) { |
| 130 |
e.preventDefault() |
| 131 |
|
| 132 |
j('.wpfnl-create-step_inner-content .not-clickable-overlay .import-message').css("display", "inline-block"); |
| 133 |
j('.wpfnl-create-step_inner-content .not-clickable-overlay').css({ |
| 134 |
"background-color": "rgba(0, 0, 0, 0.3)", |
| 135 |
"display": "flex" |
| 136 |
}); |
| 137 |
|
| 138 |
this.disabled = true; |
| 139 |
var that = this, |
| 140 |
payload = { |
| 141 |
'funnel_id' : window.template_library_object.funnel_id, |
| 142 |
'step_type' : this.activeItem, |
| 143 |
}; |
| 144 |
wpAjaxHelperRequest( "create-step", payload ) |
| 145 |
.success( function( response ) { |
| 146 |
payload.step_id = response.step_id; |
| 147 |
payload.step_edit_link = response.step_edit_link; |
| 148 |
payload.step_view_link = response.step_view_link; |
| 149 |
that.$emit('hideStepImporter'); |
| 150 |
that.$emit('renderNode', payload); |
| 151 |
that.disabled = false; |
| 152 |
j('.wpfnl-create-step_inner-content .not-clickable-overlay .import-message').css("display", "none"); |
| 153 |
j('.wpfnl-create-step_inner-content .not-clickable-overlay').css({ |
| 154 |
"display": "none" |
| 155 |
}); |
| 156 |
}) |
| 157 |
.error( function( response ) { |
| 158 |
console.log(response) |
| 159 |
}); |
| 160 |
}, |
| 161 |
renderNode: function (data) { |
| 162 |
this.$emit('renderNode', data ) |
| 163 |
}, |
| 164 |
|
| 165 |
hideStepImporter: function (e) { |
| 166 |
e.preventDefault(); |
| 167 |
this.$emit('hideStepImporter'); |
| 168 |
} |
| 169 |
} |
| 170 |
} |
| 171 |
</script> |
| 172 |
|
