From 42faef5f217fbed0e5b0a3a00395127f6d4c7c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bettina=20Br=C3=B6thaler?= <b.broethaler@pixelpoems.com>
Date: Wed, 27 Sep 2023 16:05:10 +0200
Subject: [PATCH] Added nojquery for addressbook display logic

---
 .../dist/javascript/CheckoutPage.nojquery.js  | 41 +++++++++++++++++++
 src/Checkout/Component/AddressBook.php        |  5 ++-
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 client/dist/javascript/CheckoutPage.nojquery.js

diff --git a/client/dist/javascript/CheckoutPage.nojquery.js b/client/dist/javascript/CheckoutPage.nojquery.js
new file mode 100644
index 000000000..6e540c5c2
--- /dev/null
+++ b/client/dist/javascript/CheckoutPage.nojquery.js
@@ -0,0 +1,41 @@
+/**
+ *     Addressbook checkout component
+ *     This handles a dropdown or radio buttons containing existing addresses or payment methods,
+ *     with one of the options being "create a new ____". When that last option is selected, the
+ *     other fields need to be shown, otherwise they need to be hidden.
+ */
+function onExistingValueChange() {
+    let existingValues = document.querySelectorAll('.hasExistingValues');
+    if(!existingValues) return;
+
+    existingValues.forEach(function (container, idx) {
+        let toggle = document.querySelector('.existingValues select, .existingValues input:checked');
+
+        // visible if the value is not an ID (numeric)
+        let toggleState = Number.isNaN(parseInt(toggle.value));
+        let toggleFields = container.querySelectorAll(".field:not(.existingValues)");
+
+        // animate the fields - hide or show
+        if (toggleFields && toggleFields.length > 0) {
+            toggleFields.forEach(field => {
+                field.style.display = toggleState ? '' : 'none';
+            })
+        }
+
+        // clear them out
+        toggleFields.forEach(field => {
+            field.querySelectorAll('input, select, textarea').forEach(f => {
+                f.value = '';
+                f.disabled = toggleState ? '' : 'disabled';
+            });
+        });
+    });
+}
+
+let selectors = document.querySelectorAll('.existingValues select');
+if(selectors) selectors.forEach(selector => selector.addEventListener('change', onExistingValueChange));
+
+let inputs = document.querySelectorAll('.existingValues input[type=radio]')
+if(inputs) inputs.forEach(input => input.addEventListener('click', onExistingValueChange));
+
+onExistingValueChange(); // handle initial state
diff --git a/src/Checkout/Component/AddressBook.php b/src/Checkout/Component/AddressBook.php
index 276a34805..90b76b5ab 100644
--- a/src/Checkout/Component/AddressBook.php
+++ b/src/Checkout/Component/AddressBook.php
@@ -37,10 +37,11 @@ public function getFormFields(Order $order)
         if ($existingaddressfields = $this->getExistingAddressFields()) {
             if ($jquery = $this->config()->get('jquery_file')) {
                 Requirements::javascript($jquery);
+                Requirements::javascript('silvershop/core:client/dist/javascript/CheckoutPage.js');
+            } else {
+                Requirements::javascript('silvershop/core:client/dist/javascript/CheckoutPage.nojquery.js');
             }
 
-            Requirements::javascript('silvershop/core:client/dist/javascript/CheckoutPage.js');
-
             // add the fields for a new address after the dropdown field
             $existingaddressfields->merge($fields);
             // group under a composite field (invisible by default) so we