mirror of
https://github.com/Bigherollc/wticreatorstudio.git
synced 2026-01-16 19:05:08 -05:00
RegistrationFormSteps Module Update
Monthly and Yearly subscription
This commit is contained in:
Leonard Biano
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"/js/register.js": "/js/register.js?id=4496ec62160cbadc4733ac554b1b08dd",
|
||||
"/css/register.css": "/css/register.css?id=9a13495806234e1850a6e831a065ca99",
|
||||
"/js/register.js": "/js/register.js?id=abd1415d215b382699c39d06add37fb7",
|
||||
"/css/register.css": "/css/register.css?id=aafe52430d016e7da871a5ded7272d9d",
|
||||
"/css/base.css": "/css/base.css?id=098c47fab7cda21288aa1efbde99a6f1"
|
||||
}
|
||||
|
||||
@@ -19,15 +19,15 @@
|
||||
|
||||
<CreditsDialog ref="creditsDialog" :categories="categories"></CreditsDialog>
|
||||
</div>
|
||||
<!-- <div class="col-md-3 py-2">
|
||||
<div class="col-md-3 py-2">
|
||||
<p class="fieldset">
|
||||
<input type="radio" v-model="duration" name="duration" value="12-months" id="12-months" checked>
|
||||
<label for="12-months">12 Months</label>
|
||||
<input type="radio" v-model="duration" name="duration" value="6-months" id="6-months">
|
||||
<label for="6-months">6 Months</label>
|
||||
<input type="radio" v-model="duration" name="duration" value="monthly" id="monthly" checked>
|
||||
<label for="monthly">Monthly</label>
|
||||
<input type="radio" v-model="duration" name="duration" value="upfront" id="upfront">
|
||||
<label for="upfront">Yearly</label>
|
||||
<span class="pricing-switch"></span>
|
||||
</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="text-center my-2">Your Card will not be charged until your account is approved.</h5>
|
||||
@@ -37,34 +37,39 @@
|
||||
<li class=" col exclusive" v-for="subscription in filteredPlans" >
|
||||
<ul class="pricing-wrapper">
|
||||
|
||||
<label class="d-block" v-for="(price, key) in subscription.prices" :key="price.id">
|
||||
<input type="radio" name="subscription_price_id" :value="price.id" :id="`subscription-plan-price-${price.id}`" :data-subscription-plan-price-id="price.id" :data-subscription-plan-id="subscription.id" :data-subscription-plan="subscription.title" :data-subscription-price-payment-mode="price.payment" :data-subscription-plan-popular="subscription.popular" :data-subscription-price-monthly="price.price / price.custom_interval" :data-subscription-price-total="price.price" :data-subscription-interval="price.custom_interval" :data-subscription-interval-type="price.custom_interval_type" :data-subscription-discount="0" class="subscription-plan d-none" :checked=" subscription.popular && price.custom_interval == 12">
|
||||
<li :data-type="`${ price.custom_interval }-months`" :class="`${key == 0 ? 'is-visible' : 'is-hidden' }`">
|
||||
<header class="pricing-header pb-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div><h2>{{ subscription.title }}</h2></div>
|
||||
|
||||
<div v-show="subscription.popular"><p class="mb-0 badge bg-warning text-dark fs-7"><i class="fas fa-fire text-danger"></i> Popular</p></div>
|
||||
<label class="d-block" v-for="(price, key) in subscription.filtered_prices" :key="price.id">
|
||||
<input type="radio" name="subscription_price_id" :value="price.id" :id="`subscription-plan-price-${price.id}`" :data-subscription-plan="subscription.title" :data-subscription-plan-popular="subscription.popular" :data-subscription-price-monthly="price.price / price.custom_interval" :data-subscription-price-total="price.price" :data-subscription-interval="price.custom_interval" :data-subscription-interval-type="price.custom_interval_type" :data-subscription-discount="0" class="subscription-plan d-none" :checked=" subscription.popular && price.payment == duration">
|
||||
<li :data-type="price.payment" :class="`${key == 0 ? 'is-visible' : 'is-hidden' }`">
|
||||
<header class="pricing-header pb-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div><h2>{{ subscription.title }}</h2></div>
|
||||
|
||||
<div v-show="subscription.popular"><p class="mb-0 badge bg-warning text-dark fs-7"><i class="fas fa-fire text-danger"></i> Popular</p></div>
|
||||
|
||||
</div>
|
||||
<div class="price pb-1" data-plan-id="`${ subscription.id }}" data-plan-price-id="`${ price.id }}" data-plan-price="`${ price.price }}" data-plan-price-monthly="`${ price.price / price.custom_interval }}" data-plan-interval="`${ price.custom_interval }}">
|
||||
<span class="currency">$</span>
|
||||
<span v-if="price.payment == 'monthly'">
|
||||
<span class="value">{{ (price.price / price.custom_interval).toFixed(2) }}</span>
|
||||
<span class="duration">month</span>
|
||||
</span>
|
||||
<span v-else-if="price.payment == 'upfront'">
|
||||
<span class="value">{{ (price.price).toFixed(2) }}</span>
|
||||
<span class="duration">year</span>
|
||||
</span>
|
||||
<p class="discount" v-if="applied_coupon && coupon_discount.plan_ids != null && coupon_discount.plan_ids.includes(price.id)">
|
||||
<span v-html="discountedPrice(coupon_discount.duration,coupon_discount.type,price.price,(price.price / price.custom_interval),coupon_discount.discount,coupon_discount.payment_mode,price)"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="price pb-1" data-plan-id="`${ subscription.id }}" data-plan-price-id="`${ price.id }}" data-plan-price="`${ price.price }}" data-plan-price-monthly="`${ price.price / price.custom_interval }}" data-plan-interval="`${ price.custom_interval }}">
|
||||
<span class="currency">$</span>
|
||||
<span class="value">{{ (price.price / price.custom_interval).toFixed(2) }}</span>
|
||||
<span class="duration">mo</span>
|
||||
<p class="discount" v-show="price.payment == 'upfront'">({{ price.price }} paid yearly)</p>
|
||||
<p class="discount" v-if="applied_coupon && coupon_discount.plan_ids != null && coupon_discount.plan_ids.includes(price.id)">
|
||||
<span v-html="discountedPrice(coupon_discount.duration,coupon_discount.type,price.price,(price.price / price.custom_interval),coupon_discount.discount,coupon_discount.payment_mode,price)"></span>
|
||||
</p>
|
||||
|
||||
</header>
|
||||
<div class="pricing-body">
|
||||
<div class="details" v-html="planDescription(subscription.description,price.total_credits,price.per_month_credits)"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
<div class="pricing-body">
|
||||
<div class="details" v-html="planDescription(subscription.description,price.total_credits,price.per_month_credits)"></div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</label>
|
||||
</li>
|
||||
</label>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
@@ -122,7 +127,7 @@ export default {
|
||||
applying_coupon: false,
|
||||
applied_coupon: false,
|
||||
coupon_discount: null,
|
||||
duration: '12-months'
|
||||
duration: 'monthly'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -142,17 +147,17 @@ export default {
|
||||
},
|
||||
filteredPlans(){
|
||||
const e = this;
|
||||
const duration = parseInt(e.duration.replace("-months", ""));
|
||||
|
||||
let filteredPlans = [];
|
||||
let tempPlans = e.subscription_plans;
|
||||
|
||||
|
||||
|
||||
if(tempPlans != null){
|
||||
|
||||
for (let i = 0; i < tempPlans.length; i++) {
|
||||
for (let p = 0; p < tempPlans[i].prices.length; p++) {
|
||||
if(tempPlans[i].prices[p].custom_interval == duration){
|
||||
if(tempPlans[i].prices[p].payment === e.duration){
|
||||
tempPlans[i].filtered_prices = [];
|
||||
tempPlans[i].filtered_prices.push(tempPlans[i].prices[p]);
|
||||
filteredPlans.push(tempPlans[i]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,7 +241,7 @@ input[type=radio]:checked + label, input[type=radio][name=duration]:hover + labe
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
min-height: 450px;
|
||||
min-height: 430px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user