140 lines
4.5 KiB
JavaScript
140 lines
4.5 KiB
JavaScript
/**
|
|
* Forms Component - Handles form data and validation
|
|
*/
|
|
const FormsComponent = {
|
|
/**
|
|
* Initialize forms state
|
|
* @returns {Object}
|
|
*/
|
|
getInitialState() {
|
|
return {
|
|
form: {
|
|
initials: '',
|
|
lastname: '',
|
|
postcode: '',
|
|
houseno: '',
|
|
suffix: '',
|
|
street: '',
|
|
city: '',
|
|
email: '',
|
|
phone: ''
|
|
},
|
|
meta: {
|
|
mediacode: ''
|
|
},
|
|
addressError: ''
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Get forms methods for Alpine.js component
|
|
* @returns {Object}
|
|
*/
|
|
getMethods() {
|
|
return {
|
|
/**
|
|
* Format initials with dots (e.g., "JK" -> "J.K.")
|
|
*/
|
|
formatInitials() {
|
|
let v = this.form.initials.replace(/[^a-z]/gi, '').toUpperCase();
|
|
this.form.initials = v.split('').join('.') + (v ? '.' : '');
|
|
},
|
|
|
|
/**
|
|
* Capitalize first letter of lastname
|
|
*/
|
|
formatLastname() {
|
|
this.form.lastname = this.form.lastname.charAt(0).toUpperCase() + this.form.lastname.slice(1);
|
|
},
|
|
|
|
/**
|
|
* Lookup address by postcode and house number
|
|
*/
|
|
async lookupAddress() {
|
|
this.addressError = '';
|
|
|
|
if (this.form.postcode.length >= 6 && this.form.houseno) {
|
|
try {
|
|
const data = await ApiService.lookupPostcode(this.form.postcode, this.form.houseno);
|
|
|
|
if (data.street) {
|
|
this.form.street = data.street.toUpperCase();
|
|
this.form.city = data.city.toUpperCase();
|
|
} else if (data.error) {
|
|
this.addressError = data.error;
|
|
} else {
|
|
this.addressError = 'Adres niet gevonden';
|
|
}
|
|
} catch (e) {
|
|
this.addressError = 'Fout bij ophalen adres';
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reset form for new order
|
|
*/
|
|
resetForm() {
|
|
this.form = {
|
|
initials: '',
|
|
lastname: '',
|
|
postcode: '',
|
|
houseno: '',
|
|
suffix: '',
|
|
street: '',
|
|
city: '',
|
|
email: '',
|
|
phone: ''
|
|
};
|
|
this.addressError = '';
|
|
},
|
|
|
|
/**
|
|
* Build order payload from form data
|
|
* @returns {Object}
|
|
*/
|
|
buildOrderPayload() {
|
|
const address = (this.form.street + ' ' + this.form.houseno + ' ' + (this.form.suffix || '')).trim();
|
|
|
|
return {
|
|
mediacode_internal: this.meta.mediacode,
|
|
shipping_total: this.shipping,
|
|
billing: {
|
|
first_name: this.form.initials,
|
|
last_name: this.form.lastname,
|
|
address_1: address,
|
|
city: this.form.city,
|
|
postcode: this.form.postcode,
|
|
country: 'NL',
|
|
email: this.form.email,
|
|
phone: this.form.phone
|
|
},
|
|
shipping: {
|
|
first_name: this.form.initials,
|
|
last_name: this.form.lastname,
|
|
address_1: address,
|
|
city: this.form.city,
|
|
postcode: this.form.postcode,
|
|
country: 'NL',
|
|
email: this.form.email,
|
|
phone: this.form.phone
|
|
},
|
|
line_items: this.cart.map(i => ({
|
|
product_id: i.id,
|
|
variation_id: i.variation_id || 0,
|
|
quantity: 1
|
|
}))
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Validate form before submission
|
|
* @returns {boolean}
|
|
*/
|
|
isFormValid() {
|
|
return this.form.email && this.meta.mediacode && this.cart.length > 0;
|
|
}
|
|
};
|
|
}
|
|
};
|