Hi,
We are using vue-form-generator and implemented a multi steps screen to post an Ad/Trade for users to buy or sell items. Here is the code for the 2nd screen when users get to select different subscription packages(plans). That means users can use 6 Free Trades as a free plan and once they consume all the Free Trades plan, they will be able to buy a paid plan(package):
<!--This is a multi step(screens) form and first step is introduction screen and second step is where user enters
a category and based on that category we prompts Next screen–>
<tab-content v-if="step === 2">
<div style="height: auto;" class="price_package">
<p id="progres_radio" class="progress_bar1"></p>
<p id="consumerTwoRadio" class="progress_percent2"></p>
<h1 class="preview_adttl" style="margin-top: -24px;">Post Trade</h1>
{% comment %} {% if plan_expires == 'expired' %}
<p>Your current month plan is expired. please renew to new plan.</p>
{% endif %} {% endcomment %}
<div class="radio_select">
<p class="head-trades" >Free Trades: </p>
{% if planValue == "6" or freePackage == "True" %}
<p class="sixfreetrade">
<input type="radio" id="consumer" name="flag"
class="classnameee" value="6 Free Trades" disabled >
{% if freePackage == "True" and consumed_ads_free == 6 %}
<span style="position: relative;top: 22px;" > All 6 free trades are consumed.</span>
{% comment %} class="postad_p" Please select a paid subscription below if you want to post additional Trades {% endcomment %}
{% elif freePackage == "True" %}
<span style="position: relative;top: 22px;" >6 Free Trades </span>
{% endif %}
</p>
{% elif planValue != "6" %}
<p class="sixfreetrade">
<input type="radio" id="consumer" name="flag"
v-model="subscribe" value="6 Free Trades">
<span style="position: relative;top: 22px;" >6 Free Trades </span>
</p>
{% endif %}
<div style="position: relative;top: 15px;
left: 23px;">
</div>
<div v-if="subscribe == '6 Free Trades'" style="position: relative;top: 28px;">
{% if cust_package %}
{% comment %} {% if freePackage == '6 Free Trades' %} {% endcomment %}
<p>* You consumed {{consumed_ads_free}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% comment %} {% endif %} {% endcomment %}
{% endif %}
</div>
<br>
{% if cust_package == '6 Free Trades' %}
<p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p>
{% comment %} {% elif cust_package == " " %}
<p style="font-size: small;color: #921dcf;" ></p> {% endcomment %}
{% elif cust_package == "" %}
<p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p>
{% endif %}
<hr style="position: relative;top: -4px;border-color: lightgray;">
<p class="head-trades" style="top: -11px;"> Subscribe for more Trades:</p>
{% if cust_package and package_value != 0%}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">120 Trades for $24.99 </span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
{% elif cust_package and package_value == 0 %}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe">
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
{% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe">
<span style="" class="Business_postadTrade">30 Trades for $12.99</span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
<p>* Want more trades, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe">
<span style="" class="Business_postadTrade">120 Trades for $12.99</span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
{% comment %} <p>* Want more trades, please upgrade higher package</p> {% endcomment %}
{% endif %}
{% endif %}
</div>
{% else %}
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
</p>
<div v-if="subscribe == '15 Trades for $6.99'">
{% if cust_package %}
{% if cust_package == '15 Trades for $6.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
<p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 15 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
</p>
<div v-if="subscribe == '30 Trades for $12.99'">
{% if cust_package %}
{% if cust_package == '30 Trades for $12.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 30 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
<p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio" id="business"
name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
<span style="" class="Business_postadTrade">120 Trades for $12.99</span>
</p>
<div v-if="subscribe == '120 Trades for $24.99'">
{% if cust_package %}
{% if cust_package == '120 Trades for $24.99' %}
{% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
<p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade * Please upgrade higher subscription if you want more Trades to post</p>
{% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
<p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% else %}
<p>* You consumed 0 trades and left with 120 trades.</p>
<p>* Want more trades in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div>
{% endif %}
{% comment %} <p class="sixfreetrade">
<input style="position: relative;width: 4%;left: 1px;"
type="radio"
id="business" name="flag"
value="Unlimited for $99.00" v-model="subscribe">
<span style="" class="Business_postadTrade">Unlimited for $99.00</span>
</p> {% endcomment %}
{% comment %} <div v-if="subscribe == 'Unlimited for $99.00'">
{% if cust_package %}
{% if cust_package == 'Unlimited for $99.00' %}
<p>* You consumed {{consumed_ads}} ads and left with {{package_value}} ads.</p>
<p>* Want more ads in this month, please upgrade higher package</p>
{% else %}
<p>* You consumed 0 ads and left with Unlimited ads.</p>
<p>* Want more ads in this month, please upgrade higher package</p>
{% endif %}
{% endif %}
</div> {% endcomment %}
<span class="prev_next" style="top: 11px;left: 51%;">
<button class="prev_next_btn" @click.prevent="prev_first()">Previous</button>
<button class="step1_next" style="position: relative; left: 0px;
top: 0px;"
@click.prevent="next_first()"
:disabled="isdisabled" id="buttonDisabled">
Next
</button>
</span>
</div>
</div>
As a next step, we need to add new logic or condition here: When the User consumed all 6 Free Trades, package_value becomes 0 (zero) and then the Next button is disabled. So the User is supposed to select paid plan(package) then ´Next´ button should be enabled, but we are stuck in this screen to enable and disable ´Next´ button for selecting a paid plan(package).
I´m new to vue-form-generator because the source code is inherited from the previous developer. I appreciate it if someone can review the above code and help us?
Thanks in advance