fix dialog option

Author: csteuer

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "codebarista/buybuttonstatesynchronizer",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "Allows multiple plugins to control the buy button state.",
     "type": "shopware-platform-plugin",
     "license": "MIT",

src/Resources/app/storefront/dist/storefront/js/barista-buy-button-state-synchronizer.js

@@ -117,7 +117,7 @@ export default class BuyButtonStateSynchronizer extends Plugin {
       if (event.code == "Enter" || event.code == "NumpadEnter") {
         return this.onBuyButtonClicked(event);
       }
-    })
+    });
   }
 
   buyButtonNodeChanged() {
@@ -155,46 +155,51 @@ export default class BuyButtonStateSynchronizer extends Plugin {
       return true;
     }
 
-    // Create a button for each registered action
-    const actionButtons = [];
-    for (const actionID in window.buyButtonStateSynchronizerActions) {
-      const action = window.buyButtonStateSynchronizerActions[actionID];
-      if (action.label != null) {
-        const actionButton = document.createElement("button");
-        actionButton.classList.add("btn", "btn-primary");
-        actionButton.innerHTML = action.label;
-        actionButton.onclick = (e) => {
-          $("#buy-button-state-synchronizer-modal").modal("hide");
-          action.callback(e);
-        };
-        actionButtons.push(actionButton);
+    const dialog = document.querySelector(
+      "#buy-button-state-synchronizer-modal"
+    );
+
+    if (dialog) {
+      // Create a button for each registered action
+      const actionButtons = [];
+      for (const actionID in window.buyButtonStateSynchronizerActions) {
+        const action = window.buyButtonStateSynchronizerActions[actionID];
+        if (action.label != null) {
+          const actionButton = document.createElement("button");
+          actionButton.classList.add("btn", "btn-primary");
+          actionButton.innerHTML = action.label;
+          actionButton.onclick = (e) => {
+            dialog.close();
+            action.callback(e);
+          };
+          actionButtons.push(actionButton);
+        }
       }
-    }
-    if (actionButtons.length > 0) {
-      // Preserve the cancel button
-      actionButtons.push(
-        document.getElementById(
-          "buy-button-state-synchronizer-modal-cancel-btn"
-        )
-      );
+      if (actionButtons.length === 0) {
+        // If there is no labled action for which a button in the dialog
+        // can be shown we search for an action that we can invoke
+        for (const actionID in window.buyButtonStateSynchronizerActions) {
+          const action = window.buyButtonStateSynchronizerActions[actionID];
+          if (action.callback != null) {
+            action.callback();
+            e.preventDefault();
+            return false;
+          }
+        }
+      }
+      // Add cancel button
+      const actionButton = document.createElement("button");
+      actionButton.classList.add("btn", "btn-secondary");
+      actionButton.innerHTML = dialog.getAttribute("data-cancel-btn-label");
+      actionButton.onclick = () => dialog.close();
+      actionButtons.push(actionButton);
       // Replace all buttons
       document
         .getElementById("buy-button-state-synchronizer-modal-actions")
         .replaceChildren(...actionButtons);
-    } else {
-      // If there is no labled action for which a button in the dialog
-      // can be shown we search for an action that we can invole
-      for (const actionID in window.buyButtonStateSynchronizerActions) {
-        const action = window.buyButtonStateSynchronizerActions[actionID];
-        if (action.callback != null) {
-          action.callback();
-          e.preventDefault();
-          return false;
-        }
-      }
-    }
 
-    $("#buy-button-state-synchronizer-modal").modal("show");
+      dialog.showModal();
+    }
     e.preventDefault();
     return false;
   }

src/Resources/app/storefront/src/buybuttonstatesynchronizer/buybuttonstatesynchronizer.plugin.js

@@ -1,17 +1,22 @@
-#buy-button-state-synchronizer-modal .modal-footer {
+#buy-button-state-synchronizer-modal {
+  border: 0;
+  padding: 1.75rem;
+  box-shadow: 43px 43px -6px rgba(0, 0, 0, 0.2);
+  .modal-footer {
     border-top: 0;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: flex-start;
 
     > button {
-        flex: 1 auto;
-        margin: 0;
+      flex: 1 auto;
+      margin: 0;
     }
+  }
 }
 
 #buy-button-state-synchronizer-modal-cancel-btn {
-    flex: 1 auto;
-    display: flex;
-    justify-content: flex-end;
-}
+  flex: 1 auto;
+  display: flex;
+  justify-content: flex-end;
+}

src/Resources/app/storefront/src/scss/base.scss

@@ -2,26 +2,24 @@
 
 
 {% block page_product_detail_buy_form_inner %}
-    {% if config('BuyButtonStateSynchronizer').config.showDialogInsteadOfDisableButton %}
-        <div id="buy-button-state-synchronizer-modal" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
-            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <p>{{ 'buybuttonstate.product-not-ready' | trans }}</p>
-                    </div>
-                    <div id="buy-button-state-synchronizer-modal-actions" class="modal-footer">
-                        <div id="buy-button-state-synchronizer-modal-cancel-btn">
-                            <button
-                                type="button"
-                                class="btn btn-secondary"
-                                data-dismiss="modal">
-                                {{ 'buybuttonstate.cancel' | trans }}
-                            </button>
-                        </div>
+    {% if config('BaristaBuyButtonStateSynchronizer').config.showDialogInsteadOfDisableButton %}
+        <dialog id="buy-button-state-synchronizer-modal" data-cancel-btn-label="{{ 'buybuttonstate.cancel' | trans }}">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <p>{{ 'buybuttonstate.product-not-ready' | trans }}</p>
+                </div>
+                <div id="buy-button-state-synchronizer-modal-actions" class="modal-footer">
+                    <div id="buy-button-state-synchronizer-modal-cancel-btn">
+                        <button
+                            type="button"
+                            class="btn btn-secondary"
+                            data-dismiss="modal">
+                            {{ 'buybuttonstate.cancel' | trans }}
+                        </button>
                     </div>
                 </div>
             </div>
-        </div>
+        </dialog>
     {% endif %}
     {{ parent() }}
 {% endblock %}