204 lines
14 KiB
HTML
204 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Telvero Sales Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/alpinejs" defer></script>
|
|
<style>[x-cloak] { display: none !important; }</style>
|
|
</head>
|
|
<body class="bg-slate-100 min-h-screen font-sans" x-data="salesApp()" x-init="initData()">
|
|
|
|
<div class="max-w-[1400px] mx-auto p-6">
|
|
<header class="flex justify-between items-center mb-8 bg-white p-6 rounded-2xl shadow-sm border-b-4 border-blue-600">
|
|
<h1 class="text-2xl font-black text-slate-800 tracking-tighter italic">TELVERO <span class="text-blue-600">ORDER ENTRY</span></h1>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Bron:</span>
|
|
<select x-model="meta.mediacode" :class="meta.mediacode ? 'border-blue-500 bg-blue-50' : 'border-red-500 bg-red-50'" class="border-2 rounded-lg font-bold px-4 py-1 text-blue-700 outline-none transition-colors">
|
|
<option value="">-- KIES MEDIACODE --</option>
|
|
<option value="TELVERO-NET5">TELVERO-NET5</option>
|
|
<option value="TELVERO-SBS6">TELVERO-SBS6</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-12 gap-6">
|
|
<div class="col-span-12 lg:col-span-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
|
|
<h2 class="font-bold mb-6 text-slate-400 uppercase text-[10px] tracking-widest border-b pb-2 italic">1. Klantgegevens</h2>
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<input type="text" x-model="form.initials" @blur="formatInitials()" placeholder="Voorletters" class="border p-2.5 rounded-xl w-full outline-none focus:border-blue-400 bg-slate-50">
|
|
<input type="text" x-model="form.lastname" @blur="formatLastname()" placeholder="Achternaam" class="border p-2.5 rounded-xl w-full outline-none focus:border-blue-400 bg-slate-50">
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<input type="text" x-model="form.postcode" placeholder="Postcode" class="border p-2.5 rounded-xl w-full uppercase font-mono">
|
|
<input type="text" x-model="form.houseno" @blur="lookupAddress()" placeholder="Nr." class="border p-2.5 rounded-xl w-full outline-none focus:border-blue-400 bg-slate-50">
|
|
<input type="text" x-model="form.suffix" placeholder="Toev." class="border p-2.5 rounded-xl w-full">
|
|
</div>
|
|
<input type="text" x-model="form.street" placeholder="Straat" class="w-full border p-2.5 rounded-xl bg-slate-200 font-bold text-xs shadow-inner" readonly>
|
|
<input type="text" x-model="form.city" placeholder="Stad" class="w-full border p-2.5 rounded-xl bg-slate-200 font-bold text-xs shadow-inner" readonly>
|
|
<input type="email" x-model="form.email" placeholder="E-mail (Verplicht voor link)" class="border-2 border-amber-300 p-2.5 rounded-xl w-full outline-none focus:border-blue-500 shadow-sm">
|
|
<input type="text" x-model="form.dob" @blur="formatDOB()" placeholder="Geboortedatum (DDMMYYYY)" class="border p-2.5 rounded-xl w-full font-mono">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12 lg:col-span-5 bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
|
|
<h2 class="font-bold mb-6 text-slate-400 uppercase text-[10px] tracking-widest border-b pb-2 italic">2. Productselectie</h2>
|
|
<select x-model="selectedProductId" @change="selectProduct()" class="w-full border-2 border-slate-100 p-4 rounded-xl font-black text-slate-700 mb-6 focus:border-blue-500 outline-none bg-slate-50">
|
|
<option value="">-- Kies Hoofdproduct --</option>
|
|
<template x-for="p in products" :key="p.id">
|
|
<option :value="p.id" x-text="p.name"></option>
|
|
</template>
|
|
</select>
|
|
|
|
<div x-show="variations && variations.length > 0" x-cloak class="mb-6 p-4 bg-blue-50 rounded-2xl border border-blue-100 shadow-inner">
|
|
<select x-model="selectedVariationId" @change="selectVariation()" class="w-full border-2 border-white p-3 rounded-xl font-bold bg-white text-slate-700">
|
|
<option value="">-- Kies Optie --</option>
|
|
<template x-for="v in variations" :key="v.id">
|
|
<option :value="v.id" x-text="getVarName(v) + ' (€' + v.price + ')'"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
|
|
<div x-show="upsellOptions.length > 0" x-cloak class="space-y-3">
|
|
<p class="text-[10px] font-black text-red-500 uppercase tracking-widest italic">Aanbevolen Extra's:</p>
|
|
<template x-for="u in upsellOptions" :key="u.id">
|
|
<div class="flex items-center justify-between p-3 border rounded-xl bg-slate-50">
|
|
<span class="text-xs font-bold" x-text="u.name + ' (€' + u.price + ')'"></span>
|
|
<button @click="toggleUpsell(u)" :class="isInCart(u.id) ? 'bg-red-500' : 'bg-green-600'" class="text-white px-5 py-1.5 rounded-xl text-[10px] font-black shadow-md uppercase transition-transform active:scale-95" x-text="isInCart(u.id) ? 'Verwijder' : 'Voeg toe'"></button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12 lg:col-span-3">
|
|
<div class="bg-slate-900 text-white p-7 rounded-[2rem] shadow-2xl sticky top-6 border border-slate-800">
|
|
<h2 class="font-bold mb-6 border-b border-slate-800 pb-2 text-[10px] uppercase text-slate-500 tracking-widest">Winkelmand</h2>
|
|
<div class="space-y-4 mb-8 min-h-[100px]">
|
|
<template x-for="item in cart" :key="item.id + '-' + (item.variation_id || 0)">
|
|
<div class="flex justify-between text-[11px] items-start">
|
|
<span x-text="item.name" class="opacity-80 leading-tight pr-4"></span>
|
|
<span x-text="'€' + item.price" class="font-bold text-blue-400 whitespace-nowrap"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="mb-8 pt-4 border-t border-slate-800 space-y-2">
|
|
<button @click="payment_method = 'mollie_methods_ideal'" :class="payment_method === 'mollie_methods_ideal' ? 'bg-blue-600 border-blue-400' : 'bg-slate-800 border-slate-700'" class="w-full text-left p-3 rounded-xl border text-[10px] font-bold">SEPA INCASSO (0.01)</button>
|
|
<button @click="payment_method = 'rve_riverty'" :class="payment_method === 'rve_riverty' ? 'bg-orange-600 border-orange-400' : 'bg-slate-800 border-slate-700'" class="w-full text-left p-3 rounded-xl border text-[10px] font-bold uppercase">Riverty Achteraf</button>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mb-8 pt-4 border-t border-slate-800">
|
|
<span class="text-xs font-bold uppercase tracking-widest text-slate-400">Totaal</span>
|
|
<span class="text-3xl font-black text-green-400" x-text="'€' + total"></span>
|
|
</div>
|
|
|
|
<button @click="submitOrder()"
|
|
:disabled="submitting || !form.email || !meta.mediacode || cart.length === 0"
|
|
:class="(!form.email || !meta.mediacode || cart.length === 0) ? 'bg-slate-700 opacity-50 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-500 shadow-blue-500/20 shadow-lg'"
|
|
class="w-full p-5 rounded-2xl font-black text-lg transition active:scale-95 uppercase tracking-tighter">
|
|
<span x-text="submitting ? 'ORDER WORDT VERSTUURD...' : 'ORDER BEVESTIGEN'"></span>
|
|
</button>
|
|
|
|
<p x-show="!meta.mediacode" class="text-[9px] text-red-400 mt-4 text-center font-bold">Vergeet de Mediacode niet!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function salesApp() {
|
|
return {
|
|
products: [], upsellOptions: [], cart: [], activeProduct: null,
|
|
selectedProductId: '', selectedVariationId: '', variations: [],
|
|
payment_method: 'mollie_methods_ideal', submitting: false, addressLoading: false,
|
|
form: { initials: '', lastname: '', postcode: '', houseno: '', suffix: '', street: '', city: '', email: '', dob: '' },
|
|
meta: { mediacode: '' },
|
|
|
|
async initData() {
|
|
const res = await fetch('api.php?action=get_products');
|
|
this.products = await res.json();
|
|
},
|
|
|
|
async lookupAddress() {
|
|
if (this.form.postcode.length >= 6 && this.form.houseno) {
|
|
this.addressLoading = true;
|
|
const res = await fetch(`api.php?action=postcode_check&postcode=${this.form.postcode}&number=${this.form.houseno}`);
|
|
const data = await res.json();
|
|
if (data.street) { this.form.street = data.street.toUpperCase(); this.form.city = data.city.toUpperCase(); }
|
|
this.addressLoading = false;
|
|
}
|
|
},
|
|
|
|
selectProduct() {
|
|
const p = this.products.find(x => x.id == this.selectedProductId);
|
|
if(!p) return;
|
|
this.activeProduct = p; this.variations = []; this.cart = []; this.upsellOptions = []; this.selectedVariationId = '';
|
|
if (p.type === 'variable' && p.variation_details) {
|
|
this.variations = p.variation_details;
|
|
} else {
|
|
this.cart = [{ id: parseInt(p.id), name: p.name, price: p.price }];
|
|
if (p.upsell_ids) this.upsellOptions = this.products.filter(x => p.upsell_ids.includes(x.id));
|
|
}
|
|
},
|
|
|
|
selectVariation() {
|
|
const v = this.variations.find(x => x.id == this.selectedVariationId);
|
|
if(!v) return;
|
|
this.cart = [{
|
|
id: parseInt(this.activeProduct.id), variation_id: parseInt(v.id),
|
|
name: this.activeProduct.name + ' (' + v.attributes.map(a => a.option).join(' ') + ')', price: v.price
|
|
}];
|
|
if (this.activeProduct.upsell_ids) this.upsellOptions = this.products.filter(x => this.activeProduct.upsell_ids.includes(x.id));
|
|
},
|
|
|
|
getVarName(v) { return v.attributes.map(a => a.option).join(' '); },
|
|
toggleUpsell(u) {
|
|
const idx = this.cart.findIndex(i => i.id === u.id);
|
|
idx > -1 ? this.cart.splice(idx, 1) : this.cart.push({ id: parseInt(u.id), name: u.name, price: u.price });
|
|
},
|
|
isInCart(id) { return this.cart.some(i => i.id === id); },
|
|
get total() { return this.cart.reduce((s, i) => s + parseFloat(i.price), 0).toFixed(2); },
|
|
|
|
formatInitials() {
|
|
let v = this.form.initials.replace(/[^a-z]/gi, '').toUpperCase();
|
|
this.form.initials = v.split('').join('.') + (v ? '.' : '');
|
|
},
|
|
formatLastname() { this.form.lastname = this.form.lastname.charAt(0).toUpperCase() + this.form.lastname.slice(1); },
|
|
formatDOB() {
|
|
let d = this.form.dob.replace(/[^0-9]/g, '');
|
|
if(d.length === 8) this.form.dob = `${d.slice(0,2)}-${d.slice(2,4)}-${d.slice(4,8)}`;
|
|
},
|
|
|
|
async submitOrder() {
|
|
this.submitting = true;
|
|
const payload = {
|
|
payment_method: this.payment_method,
|
|
mediacode_internal: this.meta.mediacode,
|
|
billing: {
|
|
first_name: this.form.initials || '', last_name: this.form.lastname || '',
|
|
address_1: (this.form.street + ' ' + this.form.houseno + ' ' + (this.form.suffix || '')).trim(),
|
|
city: this.form.city || '', postcode: this.form.postcode || '', country: 'NL', email: this.form.email
|
|
},
|
|
line_items: this.cart.map(i => ({ product_id: parseInt(i.id), variation_id: parseInt(i.variation_id) || 0, quantity: 1 })),
|
|
meta_data: [
|
|
{ key: '_mediacode', value: this.meta.mediacode },
|
|
{ key: '_billing_birthdate', value: this.form.dob }
|
|
]
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('api.php?action=create_order', { method: 'POST', body: JSON.stringify(payload) });
|
|
const result = await res.json();
|
|
if(result.payment_url) {
|
|
alert("SUCCESVOL! De bestelling is geplaatst en de link is gemaild.");
|
|
window.location.reload();
|
|
} else { alert("Fout: " + result.error); }
|
|
} catch(e) { alert("Systeemfout: " + e.message); }
|
|
this.submitting = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |