Erlaube mehrere OTC-Zahlungsarten
This commit is contained in:
1 parent
5fede22267
commit
99dd615f01
4 files changed
+97
-20
No files matched your search
@@ -401,16 +401,17 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo '</section>';
|
||||
echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-payment-title">';
|
||||
echo '<h2 id="otc-payment-title" class="sg-strong sg-form-sections-card__chapter-title">Bezahlung</h2>';
|
||||
echo '<div class="sg-form-sections-card__field-group">';
|
||||
echo '<label class="sg-label" for="otc-payment-method">Bezahlung</label>';
|
||||
echo '<select class="sg-interaction-element sg-input-single-line" id="otc-payment-method" data-otc-order-payment-method>';
|
||||
echo '<option value="twint">Twint</option>';
|
||||
echo '<option value="card">Kreditkarte</option>';
|
||||
echo '<option value="cash">Barzahlung</option>';
|
||||
echo '<option value="paypal">PayPal</option>';
|
||||
echo '<option value="bank_transfer">Überweisung</option>';
|
||||
echo '<div data-otc-payment-rows>';
|
||||
echo '<div class="sg-form-sections-card__field-group" data-otc-payment-row>';
|
||||
echo '<label class="sg-label" for="otc-payment-method-1">Bezahlart</label>';
|
||||
echo '<select class="sg-interaction-element sg-input-single-line" id="otc-payment-method-1" data-otc-payment-method>';
|
||||
echo '<option value="twint">Twint</option><option value="card">Kreditkarte</option><option value="cash">Barzahlung</option><option value="paypal">PayPal</option><option value="bank_transfer">Überweisung</option>';
|
||||
echo '</select>';
|
||||
echo '<label class="sg-label" for="otc-payment-amount-1">Betrag (CHF)</label>';
|
||||
echo '<input class="sg-interaction-element sg-input-single-line" type="number" id="otc-payment-amount-1" min="0.01" step="0.01" value="0.00" data-otc-payment-amount>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '<button class="sg-interaction-element sg-button sg-button--active" type="button" data-otc-payment-add>+ Bezahlart hinzufügen</button>';
|
||||
echo '</section>';
|
||||
echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-billing-title">';
|
||||
echo '<h2 id="otc-billing-title" class="sg-strong sg-form-sections-card__chapter-title">Rechnungsadresse</h2>';
|
||||
@@ -1001,7 +1002,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " const totalPriceInput = form.querySelector('[data-otc-order-total-price]');";
|
||||
echo " const orderDateInput = form.querySelector('[data-otc-order-date]');";
|
||||
echo " const orderDateDefaultValue = orderDateInput ? orderDateInput.value : '';";
|
||||
echo " const paymentMethodInput = form.querySelector('[data-otc-order-payment-method]');";
|
||||
echo " const paymentRows = form.querySelector('[data-otc-payment-rows]');";
|
||||
echo " const addPaymentButton = form.querySelector('[data-otc-payment-add]');";
|
||||
echo " const firstNameInput = form.querySelector('[data-otc-order-first-name]');";
|
||||
echo " const lastNameInput = form.querySelector('[data-otc-order-last-name]');";
|
||||
echo " const streetInput = form.querySelector('[data-otc-order-street]');";
|
||||
@@ -1061,7 +1063,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " const isValid = totalQty > 0";
|
||||
echo " && totalPrice > 0";
|
||||
echo " && !!getFieldValue(orderDateInput)";
|
||||
echo " && !!getFieldValue(paymentMethodInput)";
|
||||
echo " && paymentRows.querySelectorAll('[data-otc-payment-row]').length > 0";
|
||||
echo " && !!getFieldValue(firstNameInput)";
|
||||
echo " && !!getFieldValue(lastNameInput)";
|
||||
echo " && !!getFieldValue(streetInput)";
|
||||
@@ -1075,8 +1077,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " errorMsg = 'Preis muss größer als 0 sein.';";
|
||||
echo " } else if (!getFieldValue(orderDateInput)) {";
|
||||
echo " errorMsg = 'Bestelldatum auswählen.';";
|
||||
echo " } else if (!getFieldValue(paymentMethodInput)) {";
|
||||
echo " errorMsg = 'Zahlungsart auswählen.';";
|
||||
echo " } else if (getPaymentTotal() !== totalPrice) {";
|
||||
echo " errorMsg = 'Die Zahlungsbeträge müssen dem Gesamtbetrag entsprechen.';";
|
||||
echo " } else if (!getFieldValue(firstNameInput) || !getFieldValue(lastNameInput) || !getFieldValue(streetInput) || !getFieldValue(houseNumberInput) || !getFieldValue(zipInput) || !getFieldValue(cityInput)) {";
|
||||
echo " errorMsg = 'Alle Rechnungsadress-Felder ausfüllen.';";
|
||||
echo " }";
|
||||
@@ -1091,6 +1093,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " };";
|
||||
echo " const resetForm = (preserveSuccess = false) => {";
|
||||
echo " form.reset();";
|
||||
echo " Array.from(paymentRows.querySelectorAll('[data-otc-payment-row]')).slice(1).forEach((row) => row.remove());";
|
||||
echo " clearError();";
|
||||
echo " if (!preserveSuccess) { clearSuccess(); }";
|
||||
echo " if (!preserveSuccess) { updateFormState(); }";
|
||||
@@ -1122,7 +1125,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " toggleOverlay(false);";
|
||||
echo " }";
|
||||
echo " });";
|
||||
echo " [totalPriceInput, orderDateInput, paymentMethodInput, firstNameInput, lastNameInput, streetInput, houseNumberInput, zipInput, cityInput].forEach((input) => {";
|
||||
echo " [totalPriceInput, orderDateInput, firstNameInput, lastNameInput, streetInput, houseNumberInput, zipInput, cityInput].forEach((input) => {";
|
||||
echo " if (!input) { return; }";
|
||||
echo " input.addEventListener('input', updateFormState);";
|
||||
echo " input.addEventListener('change', updateFormState);";
|
||||
@@ -1131,6 +1134,23 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " input.addEventListener('input', updateFormState);";
|
||||
echo " input.addEventListener('change', updateFormState);";
|
||||
echo " });";
|
||||
echo " const getPaymentTotal = () => Math.round(Array.from(paymentRows.querySelectorAll('[data-otc-payment-amount]')).reduce((sum, input) => sum + (parseFloat(input.value || '0') || 0), 0) * 100) / 100;";
|
||||
echo " const bindPaymentRow = (row) => {";
|
||||
echo " row.querySelectorAll('select, input').forEach((input) => { input.addEventListener('input', updateFormState); input.addEventListener('change', updateFormState); });";
|
||||
echo " };";
|
||||
echo " const paymentOptions = '<option value=\"twint\">Twint</option><option value=\"card\">Kreditkarte</option><option value=\"cash\">Barzahlung</option><option value=\"paypal\">PayPal</option><option value=\"bank_transfer\">Überweisung</option>';";
|
||||
echo " const addPaymentRow = () => {";
|
||||
echo " const number = paymentRows.querySelectorAll('[data-otc-payment-row]').length + 1;";
|
||||
echo " const row = document.createElement('div');";
|
||||
echo " row.className = 'sg-form-sections-card__field-group';";
|
||||
echo " row.dataset.otcPaymentRow = '';";
|
||||
echo " row.innerHTML = '<label class=\"sg-label\" for=\"otc-payment-method-' + number + '\">Bezahlart</label><select class=\"sg-interaction-element sg-input-single-line\" id=\"otc-payment-method-' + number + '\" data-otc-payment-method>' + paymentOptions + '</select><label class=\"sg-label\" for=\"otc-payment-amount-' + number + '\">Betrag (CHF)</label><input class=\"sg-interaction-element sg-input-single-line\" type=\"number\" id=\"otc-payment-amount-' + number + '\" min=\"0.01\" step=\"0.01\" value=\"0.00\" data-otc-payment-amount>';";
|
||||
echo " paymentRows.appendChild(row);";
|
||||
echo " bindPaymentRow(row);";
|
||||
echo " updateFormState();";
|
||||
echo " };";
|
||||
echo " addPaymentButton.addEventListener('click', addPaymentRow);";
|
||||
echo " bindPaymentRow(paymentRows.querySelector('[data-otc-payment-row]'));";
|
||||
echo " form.addEventListener('submit', async (event) => {";
|
||||
echo " event.preventDefault();";
|
||||
echo " let submissionSucceeded = false;";
|
||||
@@ -1142,7 +1162,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " products: products,";
|
||||
echo " totalPrice: parseFloat(totalPriceInput.value || '0') || 0,";
|
||||
echo " orderDate: orderDateInput ? orderDateInput.value : '',";
|
||||
echo " paymentMethod: paymentMethodInput ? paymentMethodInput.value : '',";
|
||||
echo " payments: Array.from(paymentRows.querySelectorAll('[data-otc-payment-row]')).map((row) => ({ paymentMethod: row.querySelector('[data-otc-payment-method]').value, amount: parseFloat(row.querySelector('[data-otc-payment-amount]').value || '0') || 0 })),";
|
||||
echo " billing: {";
|
||||
echo " firstName: getFieldValue(firstNameInput),";
|
||||
echo " lastName: getFieldValue(lastNameInput),";
|
||||
|
||||
Reference in new issue
Block a user