104 lines
3.3 KiB
JavaScript
104 lines
3.3 KiB
JavaScript
class SubscriptionForm {
|
|
form
|
|
stripe_price_input
|
|
total_quantity_input
|
|
products_and_quantities
|
|
weight_per_item = '0'
|
|
weight_unit = 'lb'
|
|
products
|
|
max_quantity = 20
|
|
|
|
constructor(form) {
|
|
this.form = document.querySelector(form)
|
|
this.stripe_price_input = this.form.querySelector('input[name=stripe_price_id]')
|
|
this.products = this.form.querySelectorAll('input[name^=product_]')
|
|
this.total_quantity_input = this.form.querySelector('input[name=total_quantity]')
|
|
this.total_weight_input = this.form.querySelector('input[name=total_weight]')
|
|
this.products_and_quantities = this.form.querySelector('input[name=products_and_quantities]')
|
|
this.submitBtn = this.form.querySelector('input[type=submit]')
|
|
|
|
this.connect()
|
|
}
|
|
|
|
connect() {
|
|
this.form.addEventListener('change', this.change.bind(this))
|
|
const formData = new FormData(this.form)
|
|
}
|
|
|
|
change(event) {
|
|
if (event.target.name == 'stripe_product') {
|
|
this.stripe_price_input.value = event.target.parentElement.querySelector('select[name=stripe_price]').value
|
|
const values = event.target.dataset.weight.split(':')
|
|
this.weight_per_item = values[0]
|
|
this.weight_unit = values[1]
|
|
} else if (event.target.name == 'stripe_price') {
|
|
this.stripe_price_input.value = event.target.value
|
|
} else if (event.target.name.includes('product_')) {
|
|
const selected = Array.from(this.products).filter(item => item.value > 0)
|
|
this.total_quantity_input.value = this.total_qty
|
|
this.products_and_quantities.value = JSON.stringify(
|
|
selected.map(item => {
|
|
return {'pk': item.dataset.id, 'name': item.name.slice(8), 'quantity': Number(item.value)}
|
|
})
|
|
)
|
|
}
|
|
|
|
this.total_weight_input.value = this.total_weight
|
|
|
|
this.checkMaxQuantity()
|
|
|
|
this.submitBtn.disabled = !this.isValid
|
|
}
|
|
|
|
checkMaxQuantity() {
|
|
if (this.total_qty < this.max_quantity) {
|
|
Array.from(this.products).map(input => input.max = this.max_quantity)
|
|
} else {
|
|
Array.from(this.products).map(input => {
|
|
if (input.value == '') {
|
|
input.max = 0
|
|
} else {
|
|
input.max = input.value
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
get isValid() {
|
|
return this.validate();
|
|
}
|
|
|
|
validate() {
|
|
const inputs = new Set();
|
|
[this.stripe_price_input,
|
|
this.total_quantity_input,
|
|
this.total_weight_input,
|
|
this.products_and_quantities].forEach(input => {
|
|
if (input.value == '') {
|
|
inputs.add(false)
|
|
}
|
|
});
|
|
if (this.total_qty < 1) {
|
|
inputs.add(false)
|
|
}
|
|
const valid = (inputs.has(false)) ? false : true;
|
|
|
|
return valid;
|
|
}
|
|
|
|
get total_qty() {
|
|
return Array.from(this.products).reduce((total, current) => {
|
|
return total + Number(current.value)
|
|
}, 0)
|
|
}
|
|
|
|
get total_weight() {
|
|
const weight = this.total_qty * Number(this.weight_per_item)
|
|
return `${weight}:${this.weight_unit}`
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new SubscriptionForm('.subscription-create-form')
|
|
})
|