close button works

src/front/components/CloseModalButton.js

@@ -0,0 +1,21 @@
+class CloseModalButton {
+  constructor({ parentElement, id, onClickCallback }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.onClickCallback = onClickCallback;
+  }
+
+  render() {
+    const closeButton = document.createElement('button');
+    closeButton.className = 'close-offer button-secondary button-medium';
+    closeButton.textContent = 'Volver';
+
+    closeButton.addEventListener('click', this.onClickCallback);
+
+    this.element = closeButton;
+    this.parentElement.appendChild(this.element);
+  }
+}
+
+module.exports = CloseModalButton;

src/front/pages/offers.js

@@ -8,6 +8,7 @@ const TimeInput = require('../components/TimeInput');
 const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes');
 const TrustCheckboxes = require('../components/TrustCheckboxes');
 const BigNotesCheckbox = require('../components/BigNotesCheckbox');
+const CloseModalButton = require('../components/CloseModalButton');
 const PopupNotification = require('../components/PopupNotification');
 
 const offerService = require('../services/offerService');
@@ -179,16 +180,21 @@ class CreateOfferModal {
       onClickCallback: async () => {
         await this.createOffer();
         await this.onCreationCallback();
+        this.toggle();
       },
     });
     this.publishOfferButton.render();
 
     const closeButtonArea = document.createElement('div');
     closeButtonArea.className = 'close-offer-controls-area';
-    const closeButton = document.createElement('button');
+    const closeButton = new CloseModalButton({
-    closeButton.className = 'close-offer button-secondary button-medium';
+      parentElement: closeButtonArea,
-    closeButton.textContent = 'Volver';
+      onClickCallback: () => {
-    closeButtonArea.appendChild(closeButton);
+        this.toggle();
+      },
+    });
+
+    closeButton.render();
 
     controls.appendChild(submitButtonArea);
     controls.appendChild(closeButtonArea);
@@ -234,8 +240,6 @@ class CreateOfferModal {
     };
 
     await this.offerService.createOffer(offerDetails);
-
-    this.toggle();
   }
 }
 
@@ -278,18 +282,10 @@ function offersPage() {
     'button-start-create-offer'
   );
   const buttonViewMyOffers = document.getElementById('button-view-my-offers');
-  const closeOffer = document.getElementById('close-offer');
-  const createOfferModalRoot = document.getElementById(
-    'create-offer-modal-root'
-  );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
   const ownOffersContainer = document.getElementById('own-offers-container');
 
-  function toggleCreateOfferModal() {
-    createOfferModalRoot.classList.toggle('shown');
-  }
-
   function toggleViewMyOffersPanel() {
     viewMyOffersRoot.style.display =
       viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
@@ -714,7 +710,7 @@ function offersPage() {
   }
 
   buttonStartCreateOffer.addEventListener('click', () => {
-    toggleCreateOfferModal();
+    createOfferModal.toggle();
   });
 
   buttonViewMyOffers.addEventListener('click', async () => {
@@ -723,10 +719,6 @@ function offersPage() {
     toggleViewMyOffersPanel();
   });
 
-  closeOffer.addEventListener('click', () => {
-    toggleCreateOfferModal();
-  });
-
   const myOffers = new MyOffers(ownOffersContainer);
 }