Services
-
-
-
- 1
-
+
+
+
-
+
+ 1
+
+
+
+
+ Dameklip
+
+
+
+
725 kr
+ 725 kr
+ -0 kr rabat
+
-
- Dameklip
-
+
+
-
+
+
+
+ Pris
+
+
+
+ Udført af
+
+
+
+
+ Rabat
+
+
+
+
+
+
+
+
-
-
725 kr
-
-
-
- 1
-
+
@@ -712,35 +1072,79 @@
+
+
-
+
+ 1
+
+
+
+
+ Gloss extra langt/tykt hår
+
+
+
+
900 kr
+ 900 kr
+ -0 kr rabat
+
-
Gloss extra langt/tykt hår
-
+
+
-
+
+
+
+ Pris
+
+
+
+ Udført af
+
+
+
+
+ Rabat
+
+
+
+
+
+
+
+
-
-
900 kr
- Produkter
-
-
-
- 1
-
+
+
+
-
+
+ 1
+
+
+
+
+ Olaplex No. 3
+
+
+
+
300 kr
+ 300 kr
+ -0 kr rabat
+
-
- Olaplex No. 3
-
+
+
-
+
+
+ Pris
+
+
+
+ Rabat
+
+
+
+
+
+
+
+
-
-
300 kr
-
-
-
- 2
-
+
@@ -799,12 +1203,22 @@
+
+
-
+
+ 2
+
+
+
+
+ India supercharged mask
+
+
+
+
350 kr
+ 350 kr
+ -0 kr rabat
+
-
India supercharged mask
-
+
+
-
+
+
+ Pris
+
+
+
+ Rabat
+
+
+
+
+
+
+
+
-
-
350 kr
-
+
+
-
+
+
+
Indtast gavekortnummer
+
+
+
+
+
+ Beløb at betale med Kort
@@ -833,6 +1247,7 @@
const total = 2275;
const payments = [];
let currentMethod = 'kort';
+ let currentGiftcard = null; // { number, balance }
const methodLabels = {
'kort': 'Kort',
@@ -862,6 +1277,118 @@
document.getElementById('panel').classList.remove('open');
}
+ function toggleCartItem(item) {
+ // Close other expanded items
+ document.querySelectorAll('.cart-item.expanded').forEach(el => {
+ if (el !== item) el.classList.remove('expanded');
+ });
+ // Toggle this item
+ item.classList.toggle('expanded');
+ }
+
+ function toggleDiscountType(btn) {
+ const container = btn.closest('.discount-type');
+ const previousType = container.querySelector('.discount-type-btn.active')?.dataset.type;
+ const newType = btn.dataset.type;
+
+ // Don't do anything if clicking the same button
+ if (previousType === newType) return;
+
+ container.querySelectorAll('.discount-type-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+
+ // Convert discount value
+ const cartItem = btn.closest('.cart-item');
+ const discountInput = cartItem.querySelector('.edit-discount');
+ const priceInput = cartItem.querySelector('.edit-price');
+
+ if (discountInput && priceInput) {
+ const currentValue = parseFloat(discountInput.value.replace(/\./g, '').replace(',', '.')) || 0;
+ const basePrice = parseFloat(priceInput.value.replace(/\./g, '').replace(',', '.')) || 0;
+
+ if (basePrice > 0 && currentValue > 0) {
+ let newValue;
+ if (previousType === 'pct' && newType === 'kr') {
+ // Converting from % to kr
+ newValue = Math.round(basePrice * currentValue / 100);
+ } else if (previousType === 'kr' && newType === 'pct') {
+ // Converting from kr to %
+ newValue = Math.round((currentValue / basePrice) * 100 * 10) / 10; // 1 decimal
+ }
+ discountInput.value = newValue;
+ }
+
+ updateCartItemDisplay(discountInput);
+ }
+ }
+
+ function updateCartItemDisplay(inputEl) {
+ const cartItem = inputEl.closest('.cart-item');
+ if (!cartItem) return;
+
+ // Get elements
+ const priceInput = cartItem.querySelector('.edit-price');
+ const employeeSelect = cartItem.querySelector('.edit-employee');
+ const discountInput = cartItem.querySelector('.edit-discount');
+ const discountTypeBtn = cartItem.querySelector('.discount-type-btn.active');
+
+ const itemTotal = cartItem.querySelector('.item-total');
+ const itemOriginalPrice = cartItem.querySelector('.item-original-price');
+ const itemDiscount = cartItem.querySelector('.item-discount');
+ const itemEmployee = cartItem.querySelector('.item-employee');
+
+ // Get values
+ const basePrice = parseFloat(priceInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
+ const discountValue = parseFloat(discountInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
+ const discountType = discountTypeBtn?.dataset.type || 'kr';
+ const qty = parseInt(cartItem.querySelector('.qty-val')?.textContent) || 1;
+
+ // Calculate discount
+ let discountAmount = 0;
+ if (discountType === 'kr') {
+ discountAmount = discountValue;
+ } else {
+ discountAmount = (basePrice * discountValue / 100);
+ }
+
+ const finalPrice = Math.max(0, (basePrice - discountAmount) * qty);
+ const totalBeforeDiscount = basePrice * qty;
+
+ // Update display
+ itemTotal.textContent = formatNumber(finalPrice) + ' kr';
+
+ // Show original price and discount if there's a discount
+ if (discountAmount > 0) {
+ itemOriginalPrice.textContent = formatNumber(totalBeforeDiscount) + ' kr';
+ itemOriginalPrice.classList.add('visible');
+
+ if (discountType === 'pct') {
+ itemDiscount.textContent = `-${discountValue}% rabat`;
+ } else {
+ itemDiscount.textContent = `-${formatNumber(discountAmount * qty)} kr rabat`;
+ }
+ itemDiscount.classList.add('visible');
+ } else {
+ itemOriginalPrice.classList.remove('visible');
+ itemDiscount.classList.remove('visible');
+ }
+
+ // Update employee if exists
+ if (employeeSelect && itemEmployee) {
+ itemEmployee.textContent = employeeSelect.value;
+ }
+ }
+
+ // Setup discount type button handlers
+ document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('.discount-type-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ toggleDiscountType(btn);
+ });
+ });
+ });
+
function selectMethod(method) {
currentMethod = method;
@@ -872,23 +1399,153 @@
// Update label
document.getElementById('inputLabel').textContent = `Beløb at betale med ${methodLabels[method]}`;
+ // Show/hide giftcard lookup
+ const giftcardLookup = document.getElementById('giftcardLookup');
+ const btnAddPayment = document.getElementById('btnAddPayment');
+
+ if (method === 'gavekort') {
+ giftcardLookup.classList.add('visible');
+ // Disable add payment until giftcard is looked up
+ if (!currentGiftcard) {
+ btnAddPayment.disabled = true;
+ }
+ } else {
+ giftcardLookup.classList.remove('visible');
+ currentGiftcard = null;
+ resetGiftcardLookup();
+ btnAddPayment.disabled = false;
+ }
+
// Set input to remaining amount
payRest();
}
+ function lookupGiftcard() {
+ const input = document.getElementById('giftcardInput');
+ const result = document.getElementById('giftcardResult');
+ const cardNumber = input.value.trim();
+
+ if (!cardNumber) {
+ result.className = 'giftcard-result visible error';
+ result.innerHTML = 'Indtast venligst et gavekortnummer';
+ return;
+ }
+
+ // Simulate lookup - in real app this would be an API call
+ // For demo: simulate different balances based on card number
+ const simulatedBalance = simulateGiftcardBalance(cardNumber);
+
+ if (simulatedBalance === null) {
+ result.className = 'giftcard-result visible error';
+ result.innerHTML = 'Gavekort ikke fundet';
+ currentGiftcard = null;
+ document.getElementById('btnAddPayment').disabled = true;
+ return;
+ }
+
+ // Success - card found
+ currentGiftcard = {
+ number: cardNumber,
+ balance: simulatedBalance
+ };
+
+ result.className = 'giftcard-result visible success';
+ result.innerHTML = `Gavekort fundet! Saldo: ${formatNumber(simulatedBalance)} kr`;
+
+ // Enable payment button
+ document.getElementById('btnAddPayment').disabled = false;
+
+ // Set payment input to min of remaining and giftcard balance
+ const remaining = getRemaining();
+ const maxPayment = Math.min(remaining, simulatedBalance);
+ const paymentInput = document.getElementById('paymentInput');
+ paymentInput.value = formatNumber(maxPayment);
+
+ // Focus payment input and select the value
+ setTimeout(() => {
+ paymentInput.focus();
+ paymentInput.select();
+ }, 50);
+ }
+
+ function simulateGiftcardBalance(cardNumber) {
+ // Demo simulation: different cards have different balances
+ // Cards starting with "1" = 500 kr, "2" = 1000 kr, "3" = 1500 kr
+ // Any other = 750 kr, empty/invalid = not found
+
+ if (cardNumber.length < 4) return null;
+
+ const firstChar = cardNumber.charAt(0);
+ switch (firstChar) {
+ case '1': return 500;
+ case '2': return 1000;
+ case '3': return 1500;
+ case '0': return null; // Not found
+ default: return 750;
+ }
+ }
+
+ function resetGiftcardLookup() {
+ document.getElementById('giftcardInput').value = '';
+ const result = document.getElementById('giftcardResult');
+ result.className = 'giftcard-result';
+ result.innerHTML = '';
+ }
+
function payRest() {
const remaining = getRemaining();
- document.getElementById('paymentInput').value = formatNumber(remaining);
+ let maxPayment = remaining;
+
+ // For giftcard, limit to available balance
+ if (currentMethod === 'gavekort' && currentGiftcard) {
+ maxPayment = Math.min(remaining, currentGiftcard.balance);
+ }
+
+ document.getElementById('paymentInput').value = formatNumber(maxPayment);
}
function addPayment() {
- const amount = parseAmount(document.getElementById('paymentInput').value);
+ let amount = parseAmount(document.getElementById('paymentInput').value);
if (amount <= 0) return;
- payments.push({
+ // For giftcard payments, validate and limit to balance
+ if (currentMethod === 'gavekort') {
+ if (!currentGiftcard) {
+ alert('Slå gavekortet op først');
+ return;
+ }
+ // Limit to available balance
+ if (amount > currentGiftcard.balance) {
+ amount = currentGiftcard.balance;
+ }
+ }
+
+ const payment = {
method: currentMethod,
amount: amount
- });
+ };
+
+ // Add giftcard details if applicable
+ if (currentMethod === 'gavekort' && currentGiftcard) {
+ payment.giftcardNumber = currentGiftcard.number;
+ payment.giftcardOriginalBalance = currentGiftcard.balance;
+
+ // Reduce the giftcard balance (simulate using it)
+ currentGiftcard.balance -= amount;
+
+ // If balance is 0, reset the giftcard lookup for next use
+ if (currentGiftcard.balance <= 0) {
+ currentGiftcard = null;
+ resetGiftcardLookup();
+ document.getElementById('btnAddPayment').disabled = true;
+ } else {
+ // Update displayed balance
+ const result = document.getElementById('giftcardResult');
+ result.innerHTML = `Gavekort fundet! Resterende saldo: ${formatNumber(currentGiftcard.balance)} kr`;
+ }
+ }
+
+ payments.push(payment);
updatePaymentsList();
updateTotals();
@@ -912,16 +1569,20 @@
return;
}
- container.innerHTML = payments.map((p, i) => `
-
- 
-
Journal
- 📋
+ 
Åbn journal
→
@@ -898,15 +921,15 @@
// Update journal link
const journalLink = document.getElementById('journalLink');
const journalText = journalLink.querySelector('swp-journal-text');
- const journalIcon = journalLink.querySelector('swp-journal-icon');
+ const journalIcon = document.getElementById('journalIcon');
if (hasJournal) {
journalLink.classList.remove('no-journal');
- journalIcon.textContent = '📋';
+ journalIcon.src = 'icons/journal-alt.svg';
journalText.textContent = 'Åbn journal';
} else {
journalLink.classList.add('no-journal');
- journalIcon.textContent = '➕';
+ journalIcon.src = 'icons/square-plus.svg';
journalText.textContent = 'Opret journal';
}
-
- `).join('');
+ `;
+ }).join('');
}
function updateTotals() {
diff --git a/wwwroot/poc-detail-drawer.html b/wwwroot/poc-detail-drawer.html
index cd1a644..cd4148d 100644
--- a/wwwroot/poc-detail-drawer.html
+++ b/wwwroot/poc-detail-drawer.html
@@ -442,7 +442,30 @@
}
swp-journal-icon {
- font-size: 18px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ swp-journal-icon img {
+ width: 20px;
+ height: 20px;
+ filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+ transition: filter 150ms ease;
+ }
+
+ swp-journal-link:hover swp-journal-icon img {
+ filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(93%) contrast(92%);
+ }
+
+ swp-journal-link.no-journal swp-journal-icon img {
+ filter: invert(45%) sepia(8%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
+ }
+
+ swp-journal-link.no-journal:hover swp-journal-icon img {
+ filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(93%) contrast(92%);
}
swp-journal-text {
@@ -827,7 +850,7 @@
${methodLabels[p.method]}
+ container.innerHTML = payments.map((p, i) => {
+ const detail = p.giftcardNumber ? `Kort: ${p.giftcardNumber}` : '';
+ return `
+
+
+
- +${formatNumber(p.amount)} kr
-
-
+
+ +${formatNumber(p.amount)} kr
+
${methodLabels[p.method]}
+ ${detail ? `${detail}
` : ''}
+