Merge main nach fix/4.6.1: SmartCheckout „Bestellabschluss“ von Daniel

Daniels Commit 52df56d7 lag nur auf main. Changelog in der kurzen Form, Übersetzungen beider Seiten zusammengeführt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 108 insertions, 7 deletions

diff --git a/views/js/smartcheckout.js b/views/js/smartcheckout.js
index 20674f8..9c4f4f1 100644
--- a/views/js/smartcheckout.js
+++ b/views/js/smartcheckout.js
@@ -46,11 +46,25 @@
 				queued: false,
 				queuedUpload: null,
 				submitting: false,
+				confirm: false,
 				timer: null
 			};
 
 		},
 
+		computed: {
+
+			/**
+			 * Sind Bestellbedingungen und Bestellbutton zu sehen? Beim Bestellabschluss „Zusammenfassung vor Abschluss“ erst im Bestätigungsschritt
+			 */
+			showFinal: function() {
+
+				return (this.state.finish !== 'confirm' || this.confirm);
+
+			} // showFinal()
+
+		},
+
 		created: function() {
 
 			this.syncForm(true);
@@ -65,8 +79,8 @@
 			// Nach einem abgelehnten Bestellversuch steht der Kunde vor dem ersten Fehler
 			if (this.state.errors.length !== 0) this.$nextTick(this.focusError);
 
-			// Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung beim Betreten der Seite
-			if (this.state.warranty && this.state.warranty.popup === true && this.state.empty !== true) this.garanPopup = true;
+			// Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung beim Betreten der Seite, mit Bestätigungsschritt erst dort
+			if (this.state.warranty && this.state.warranty.popup === true && this.state.empty !== true && this.state.finish !== 'confirm') this.garanPopup = true;
 
 			// Die Lightbox des Gewährleistungslabels lässt sich mit Esc schließen
 			var self = this;
@@ -77,10 +91,13 @@
 
 			});
 
-			// Zurück aus dem Seiten-Cache des Browsers (z.B. Zurück-Button nach dem Zahlungsanbieter): Layer wieder entfernen
+			// Zurück aus dem Seiten-Cache des Browsers (z.B. Zurück-Button nach dem Zahlungsanbieter): Layer entfernen, Eingaben wieder bearbeitbar
 			window.addEventListener('pageshow', function(event) {
 
-				if (event.persisted) self.submitting = false;
+				if (!event.persisted) return;
+
+				self.submitting = false;
+				self.confirm = false;
 
 			});
 
@@ -157,7 +174,7 @@
 			selectChoice: function(type, id, event) {
 
 				if (event && event.target && typeof event.target.closest === 'function' && event.target.closest('.sc_choice_head') !== null) return;
-				if (this.form[type] === id) return;
+				if (this.form[type] === id || this.confirm) return;
 
 				this.form[type] = id;
 				this.refresh();
@@ -242,7 +259,8 @@
 
 				var el_form = document.getElementById('wpsg_smartcheckout_form');
 
-				if (el_form === null) return;
+				// Im Bestätigungsschritt sind die Eingaben gesperrt und würden ohne sie übertragen
+				if (el_form === null || this.confirm) return;
 
 				// Dateien der direkt hochzuladenden Felder sofort sichern: der Block wird mit der nächsten Antwort neu aufgebaut
 				var arUpload = [];
@@ -358,6 +376,8 @@
 
 					}
 
+					if (action === 'confirm') self.afterConfirm(result.confirm === true);
+
 					if (self.queuedUpload !== null) {
 
 						var upload = self.queuedUpload;
@@ -477,8 +497,75 @@
 			}, // focusError()
 
 			/**
-			 * Blockt das Absenden, solange der Server noch rechnet
+			 * Prüft die Angaben und wechselt in den Bestätigungsschritt (Bestellabschluss „Zusammenfassung vor Abschluss“)
+			 *
+			 * Die Pflichtfelder der Eingaben prüft zuerst der Browser, Bestellbedingungen und AGB erst der Bestätigungsschritt.
 			 */
+			startConfirm: function() {
+
+				if (this.busy) return;
+
+				var el_fieldset = el_root.querySelector('.sc_fieldset');
+
+				if (el_fieldset !== null && typeof el_fieldset.reportValidity === 'function' && !el_fieldset.reportValidity()) return;
+
+				// Eine noch ausstehende Änderung geht in derselben Anfrage mit
+				if (this.timer !== null) {
+
+					window.clearTimeout(this.timer);
+					this.timer = null;
+
+				}
+
+				this.send('confirm');
+
+			}, // startConfirm()
+
+			/**
+			 * Antwort auf startConfirm(): bei bestandener Prüfung Eingaben sperren, sonst zum ersten Fehler
+			 */
+			afterConfirm: function(bConfirm) {
+
+				var self = this;
+
+				if (!bConfirm) {
+
+					this.$nextTick(this.focusError);
+
+					return;
+
+				}
+
+				this.confirm = true;
+
+				// Das GARAN-Gewährleistungslabel erscheint wie in der klassischen Zusammenfassung
+				if (this.state.warranty && this.state.warranty.popup === true && this.garanConfirmed !== true) this.garanPopup = true;
+
+				this.$nextTick(function() {
+
+					var el_note = el_root.querySelector('.sc_confirm_note');
+
+					if (el_note !== null) el_note.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+				});
+
+			}, // afterConfirm(bConfirm)
+
+			/**
+			 * Verlässt den Bestätigungsschritt, die Eingaben sind wieder bearbeitbar
+			 */
+			editConfirm: function() {
+
+				this.confirm = false;
+
+				this.$nextTick(function() {
+
+					el_root.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+				});
+
+			}, // editConfirm()
+
 			/**
 			 * Berechnet neu, wenn sich eine Eingabe in einem Block der Module ändert (z.B. Lieferadresse, Produktvariablen)
 			 *
@@ -698,6 +785,20 @@
 
 				}
 
+				/*
+				 * Gesperrte Felder würden nicht übertragen. Der Browser stellt die Formulardaten erst nach diesem Ereignis
+				 * zusammen, deshalb hier direkt im DOM freigeben und nicht über Vue (das aktualisiert erst später).
+				 */
+				if (this.confirm) {
+
+					el_root.querySelectorAll('fieldset.sc_fieldset').forEach(function(el) {
+
+						el.disabled = false;
+
+					});
+
+				}
+
 				// Ab hier wird tatsächlich bestellt: Layer über die Seite, bis der Browser die nächste Seite lädt
 				this.submitting = true;