File: D:/HostingSpaces/SBogers10/rentman2019.komma.pro/resources/assets/js/components/createPlan.vue
<template>
<div class="create-plan">
<div class="create-plan__main">
<div class="c-switch">
<input class="c-switch__input" id="switch-create-plan-1" type="checkbox" @change="changeCurrency">
<label class="c-switch__label" for="switch-create-plan-1" data-checked="EUR" data-unchecked="USD">
</label>
</div>
<div class="u-margin-top-32 create-plan__core-product">
<h3 class="create-plan__subtitle">{{ this.$root.coreProduct.translation.name }}</h3>
<small>{{ displayCorrectCurrency(this.$root.coreProduct.euro_price, this.$root.coreProduct.dollar_price) }} / {{ trans('month') }}</small>
<p class="create-plan__description u-margin-top-16">{{ this.$root.coreProduct.translation.description }}</p>
<ul class="create-plan__checks">
<li v-for="spec in this.$root.coreProduct.translation.specs">{{ spec }}</li>
</ul>
<div @click="openPopup" class="create-plan__read-more create-plan__read-more--nm">{{ trans('see_features') }} <span></span></div>
</div>
<product-pop-up :active="popupOpened" v-on:close="closePopup" :product="this.$root.coreProduct" />
<hr>
<h5 class="create-plan__title">{{ trans('products') }}</h5>
<h3 class=" u-margin-top-32 create-plan__subtitle">{{ trans('products_subtitle_text') }}</h3>
<!-- <p>{{ trans('products_subtitle_text') }}</p>-->
<div class="create-plan__product-container">
<template v-for="product in this.$root.selectableProducts">
<single-product :product="product" ref="product"/>
<open-close-products v-if="product.hinted_products.length > 0" :name="product.translation.name">
<template v-for="hintedProduct in product.hinted_products">
<single-product :product="hintedProduct" ref="product"/>
</template>
</open-close-products>
</template>
</div>
</div>
<div class="create-plan__sidebar" ref="sidebar">
<div class="create-plan__heading">
{{ trans('summary') }}
</div>
<div class="create-plan__cart-overview">
<div class="create-plan__cart-product">
<strong>{{ trans('rentman_title') }}</strong>
<div class="create-plan__cart-label">
<span>{{ displayCorrectCurrency($root.coreProduct.euro_price, $root.coreProduct.dollar_price) }}</span> / {{ trans('month') }}
</div>
</div>
<template v-for="cartState in $root.productsInCart">
<cart-product
:price-per-warehouse="getProductById(cartState.id).price_per_warehouse == 1"
:product="getProductById(cartState.id)"
:cart-state="cartState" />
</template>
<p v-if="!productsInCart.length > 0" class="create-plan__cart-label">{{ trans('add_products') }}</p>
</div>
<div class="create-plan__footer footer-row">
<div>
<strong>{{ trans('power_users') }}
<span class="c-tooltip c-tooltip--dark-pop-up js-pricing-prevent-click" :data-tooltip="trans('power_user_tooltip')"></span>
</strong>
<div class="create-plan--small-label"> {{ getPriceEachPowerUser() }} {{ trans('power_user') }} / {{ trans('month') }}</div>
</div>
<!-- <div>-->
<!-- <strong>{{ trans('basic_users') }}-->
<!-- <span class="c-tooltip c-tooltip--dark-pop-up js-pricing-prevent-click" :data-tooltip="trans('basic_user_tooltip')"></span>-->
<!-- </strong>-->
<!-- <div class="create-plan--small-label"> {{ getPriceEachPowerUser() }} {{ trans('power_user') }} / {{ trans('month') }}</div>-->
<!-- </div>-->
<div class="create-plan-product__numbers" :class="{'c-tooltip c-tooltip--element c-tooltip--dark-pop-up c-tooltip--small': !productsInCart.length > 0}" :data-tooltip="trans('add_product_first')">
<button @click="$root.powerUsers++" :disabled="!productsInCart.length > 0">+</button>
<input type="number" min="1" :value="$root.powerUsers" @change="changePowerUsersAmount" :disabled="!productsInCart.length > 0">
<button :disabled="$root.powerUsers === 1 || !productsInCart.length > 0" @click="$root.powerUsers--">-</button>
</div>
</div>
<div class="create-plan__footer footer-row create-plan__footer--no-bt">
<div>
<strong>{{ trans('basic_users') }}
<span class="c-tooltip c-tooltip--dark-pop-up js-pricing-prevent-click" :data-tooltip="trans('basic_user_tooltip')"></span>
</strong>
<div class="create-plan--small-label">{{trans('always_free')}}</div>
</div>
</div>
<div class="create-plan__footer">
<div class="footer-subtotal">
<span>{{ trans('platform_fee') }}</span>
<span v-if="this.$root.powerUsers < this.$root.powerUserLimit">{{ displayCorrectCurrency(this.$root.coreProduct.euro_price, this.$root.coreProduct.dollar_price) }}</span>
<span v-else>--</span>
</div>
<div class="footer-subtotal">
<span>{{ $root.powerUsers }} {{ $root.powerUsers === 1 ? trans('power_user') : trans('power_users') }}</span>
<span v-if="this.$root.powerUsers < this.$root.powerUserLimit">{{ getPriceEachPowerUser(true) }}</span>
<span v-else>--</span>
</div>
<!-- <div class="footer-subtotal" v-if="$root.hasAddons && this.$root.powerUsers < this.$root.powerUserLimit" >-->
<!-- <span>{{ trans('addons') }}</span>-->
<!-- <span>{{ getAddonsPrice() }}</span>-->
<!-- </div>-->
<div class="footer-total">
<strong>{{ trans('total') }}</strong>
<span v-if="this.$root.powerUsers < this.$root.powerUserLimit">{{ getTotalPrice() }}</span>
<span v-else>{{ trans('lets_talk') }}</span>
</div>
<div class="custom-plan-notice" v-if="this.$root.powerUsers >= this.$root.powerUserLimit">
<h4>{{ trans('custom_plan') }}</h4>
<p>{{ trans('custom_plan_sub') }}</p>
</div>
<a :href="trans('try_free_link')" class="c-button c-button--filled" v-if="this.$root.powerUsers < this.$root.powerUserLimit">
<span class="c-button__text">{{ trans('try_free') }}</span>
</a>
<a :href="trans('speak_expert_link')" class="c-button" :class="{'c-button--filled': this.$root.powerUsers >= this.$root.powerUserLimit}">
<span class="c-button__text">{{ trans('speak_expert') }}</span>
</a>
</div>
</div>
<div class="create-plan__sidebar--mobile">
<strong>{{ trans('total') }}: {{ getTotalPrice(false) }}</strong>
<span class="c-button c-button--filled" @click="scrollToSummary"><span class="c-button__text">{{ trans('see_summary') }}</span></span>
</div>
<div class="create-plan__scroll-up">
<span @click="scrollToSummary">{{ trans('price_breakdown') }}</span>
</div>
</div>
</template>
<script>
import SingleProduct from "./singleProduct";
import CartProduct from "./cartProduct";
import OpenCloseProducts from "./openCloseProducts";
import mixin from "../createPlan/mixins";
import ProductPopUp from "./productPopUp";
export default {
name: "createPlan",
mixins: [mixin],
components: {ProductPopUp, OpenCloseProducts, CartProduct, SingleProduct},
data() {
return {
popupOpened: false,
}
},
watch: {
productsInCart: function (newstate, oldstate) {
this.updateProducts()
},
powerUsers: function (newstate, oldstate) {
}
},
computed: {
productsInCart() {
return this.$root.productsInCart
},
// isPowerUserLimit() {
// return this.$root.powerUsers >= this.$root.powerUserLimit
// }
},
methods: {
updateProducts() {
this.$refs.product.forEach((product, index) => {
if (!this.productsInCart.find((p) => p.id === product.product.id)) {
this.$refs.product[index].cartState = null
}
})
},
changeCurrency(value) {
this.$root.currencyEuro = !value.target.checked
},
getPriceEachPowerUser(multiplyByUsers = false) {
let total_euro = 0
let total_dollar = 0
this.$root.productsInCart.forEach((cartState) => {
const product = this.$root.products.find(p => p.id == cartState.id)
if (product.price_per_warehouse == 1) {
total_euro += cartState.amount * parseFloat(product.euro_price);
total_dollar += cartState.amount * parseFloat(product.dollar_price);
}
else if(product.levels.length > 0) {
const level = product.levels[cartState.level]
total_euro += parseFloat(level[1])
total_dollar += parseFloat(level[2])
}
else if(product.pricing_product_type == 'normal') {
total_euro += parseFloat(product.euro_price) * cartState.amount
total_dollar += parseFloat(product.dollar_price) * cartState.amount
}
else if(product.pricing_product_type == 'levels') {
total_euro += parseFloat(product.euro_price) * cartState.amount
total_dollar += parseFloat(product.dollar_price) * cartState.amount
}
})
if(!multiplyByUsers) return this.displayCorrectCurrency(total_euro, total_dollar)
return this.displayCorrectCurrency(total_euro * this.$root.powerUsers, total_dollar * this.$root.powerUsers)
},
// getAddonsPrice() {
//
// let total_euro = 0
// let total_dollar = 0
//
// this.$root.productsInCart.forEach((cartState) => {
// const product = this.$root.products.find(p => p.id == cartState.id)
// // if the price depends on the number of warehouses
// if (product.price_per_warehouse == 1) {
// const amountOfProductInCart = this.$root.productsInCart.find(p => p.id == product.id).amount;
// const amountOfPowerUsers = this.$root.powerUsers
// total_euro = amountOfProductInCart * amountOfPowerUsers * product.euro_price;
// total_dollar = amountOfProductInCart* amountOfPowerUsers * product.dollar_price;
// }
// // otherwise, just add up
// else if(product.pricing_product_type == 'addon' || 'levels') {
// total_euro = parseFloat(product.euro_price) * cartState.amount
// total_dollar += parseFloat(product.dollar_price) * cartState.amount
// }
// })
// return this.displayCorrectCurrency(total_euro, total_dollar)
// },
getTotalPrice() {
let base_price_euro = parseFloat(this.$root.coreProduct.euro_price)
let base_price_dollar = parseFloat(this.$root.coreProduct.dollar_price)
let each_power_user_euro = 0
let each_power_user_dollar = 0
this.$root.productsInCart.forEach((cartState) => {
const product = this.$root.products.find(p => p.id == cartState.id)
if (product.price_per_warehouse == 1) {
// console.log(cartState.amount * parseFloat(product.euro_price))
each_power_user_euro += cartState.amount * parseFloat(product.euro_price);
each_power_user_dollar += cartState.amount * parseFloat(product.dollar_price);
}
else if(product.levels.length > 0) {
const level = product.levels[cartState.level]
each_power_user_euro += parseFloat(level[1])
each_power_user_dollar += parseFloat(level[2])
}
else if(product.pricing_product_type == 'normal') {
each_power_user_euro += parseFloat(product.euro_price) * cartState.amount
each_power_user_dollar += parseFloat(product.dollar_price) * cartState.amount
}
else if(product.pricing_product_type == 'addon') {
each_power_user_euro += parseFloat(product.euro_price) * cartState.amount
each_power_user_dollar += parseFloat(product.dollar_price) * cartState.amount
}
else if(product.pricing_product_type == 'levels') {
each_power_user_euro += parseFloat(product.euro_price) * cartState.amount
each_power_user_dollar += parseFloat(product.dollar_price) * cartState.amount
}
})
let total_euro = (each_power_user_euro * this.$root.powerUsers) + base_price_euro
let total_dollar = (each_power_user_dollar * this.$root.powerUsers) + base_price_dollar
return this.displayCorrectCurrency(total_euro, total_dollar)
},
changePowerUsersAmount(event) {
let amount = parseInt(event.target.value)
if (amount >= 0) this.$root.powerUsers = amount
},
getProductById(id) {
return this.$root.products.find(product => product.id == id);
},
scrollToSummary() {
this.$refs.sidebar.scrollIntoView({behavior: "smooth"})
},
openPopup() {
history.replaceState("", document.title, window.location.pathname + '#' + this.slugify(this.$root.coreProduct.translation.name));
this.popupOpened = true
},
closePopup() {
history.replaceState("", document.title, window.location.pathname);
this.popupOpened = false
}
},
}
</script>