Use ajax in the dialog

Author: loevgaard

src/Controller/RestockNotificationRequestAction.php

@@ -10,6 +10,7 @@
 use Setono\SyliusRestockNotificationPlugin\Form\Type\RestockNotificationShopRequestType;
 use Setono\SyliusRestockNotificationPlugin\Model\RestockNotificationRequestInterface;
 use Symfony\Component\Form\FormFactoryInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Session\Session;
@@ -29,9 +30,12 @@ public function __construct(
         $this->managerRegistry = $managerRegistry;
     }
 
-    public function __invoke(Request $request): RedirectResponse
+    public function __invoke(Request $request): RedirectResponse|JsonResponse
     {
-        $form = $this->formFactory->create(RestockNotificationShopRequestType::class, $this->restockNotificationRequestFactory->createWithChannelAndLocaleContext());
+        $form = $this->formFactory->create(
+            RestockNotificationShopRequestType::class,
+            $this->restockNotificationRequestFactory->createWithChannelAndLocaleContext(),
+        );
         $form->handleRequest($request);
 
         if ($form->isSubmitted() && $form->isValid()) {
@@ -43,13 +47,31 @@ public function __invoke(Request $request): RedirectResponse
             $manager->persist($data);
             $manager->flush();
 
+            if ($request->isXmlHttpRequest()) {
+                return new JsonResponse([
+                    'success' => true,
+                ]);
+            }
+
             self::addFlash($request, 'success', 'setono_sylius_restock_notification.restock_notification_request_created');
 
             return self::createRedirect($request, $this->urlGenerator->generate('sylius_shop_product_show', [
                 'slug' => $data->getProductVariant()?->getProduct()?->getSlug(),
             ]));
         }
 
+        if ($request->isXmlHttpRequest()) {
+            $errors = [];
+            foreach ($form->getErrors(true) as $error) {
+                $errors[] = $error->getMessage();
+            }
+
+            return new JsonResponse([
+                'success' => false,
+                'errors' => $errors,
+            ]);
+        }
+
         self::addFlash($request, 'error', 'setono_sylius_restock_notification.restock_notification_request_failed');
 
         return self::createRedirect($request, $this->urlGenerator->generate('sylius_shop_homepage'));

src/Resources/config/validation/RestockNotificationRequest.xml

@@ -11,6 +11,7 @@
                 <value>email</value>
             </option>
             <option name="groups">setono_sylius_restock_notification</option>
+            <option name="message">setono_sylius_restock_notification.restock_notification_request.unique</option>
         </constraint>
         <property name="channel">
             <constraint name="NotBlank">

src/Resources/public/css/styles.css

@@ -1,14 +1,19 @@
 /**
  * Style the <dialog>
  */
-dialog.ssrn-dialog {
+.ssrn-dialog {
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 20px;
     position: relative;
+    max-width: 400px;
 }
 
-dialog.ssrn-dialog button.close {
+.ssrn-dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.75);
+}
+
+.ssrn-dialog button.close {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -21,6 +26,28 @@ dialog.ssrn-dialog button.close {
     outline: none;
 }
 
+.ssrn-dialog.success form {
+    display: none;
+}
+
+.ssrn-dialog.success .ssrn-success-message {
+    display: block !important;
+}
+
+.ssrn-dialog.error .ssrn-error-message {
+    display: block !important;
+}
+
+.ssrn-success-message {
+    color: green;
+    display: none;
+}
+
+.ssrn-error-message {
+    color: red;
+    display: none;
+}
+
 dialog.ssrn-dialog h4 {
     font-size: 20px;
     margin: 0 0 10px;

src/Resources/public/js/dialog.js

@@ -31,6 +31,42 @@ export default class Dialog {
      */
     show(product) {
         const element = this.#getElement();
+
+        element.querySelector('form').addEventListener('submit', (event) => {
+            event.preventDefault();
+
+            /** @type {HTMLFormElement} */
+            const form = event.target;
+
+            const formData = new FormData(form);
+
+            fetch(form.action, {
+                method: form.method || 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+            })
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then((result) => {
+                    if(result.success) {
+                        element.classList.add('success');
+                    } else {
+                        element.classList.add('error');
+                        element.querySelector('.ssrn-error-message').innerHTML = result.errors.join('<br>');
+                    }
+                })
+                .catch((error) => {
+                    element.classList.add('error');
+                    console.error(error.message);
+                });
+        });
+
         element.querySelector('.product-variant').value = product.code;
         element.showModal();
     }

src/Resources/translations/validators.en.yml

@@ -0,0 +1,3 @@
+setono_sylius_restock_notification:
+    restock_notification_request:
+        unique: You already subscribed to get a notification when this product is back in stock.

src/Resources/views/shop/_dialog.html.twig

@@ -5,6 +5,7 @@
         {{ include('@SetonoSyliusRestockNotificationPlugin/shop/dialog/_close_button.html.twig') }}
         {{ include('@SetonoSyliusRestockNotificationPlugin/shop/dialog/_heading.html.twig') }}
         {{ include('@SetonoSyliusRestockNotificationPlugin/shop/dialog/_body.html.twig') }}
+        {{ include('@SetonoSyliusRestockNotificationPlugin/shop/dialog/_messages.html.twig') }}
         {{ include('@SetonoSyliusRestockNotificationPlugin/shop/dialog/_form.html.twig') }}
     </dialog>
 </template>

src/Resources/views/shop/dialog/_messages.html.twig

@@ -0,0 +1,3 @@
+{# todo translate #}
+<div class="ssrn-success-message">You will receive an email when the product is back in stock</div>
+<div class="ssrn-error-message">Something went wrong. Please try again.</div>