popup with object

src/front/components/PopupNotification.js

@@ -9,7 +9,7 @@ class PopupNotification {
   render() {
     const div = document.createElement('div');
     div.id = this.id;
-    div.className = 'top-notification-good';
+    div.className = 'top-notification-good max-size-zero';
 
     div.innerHTML = `<img src="/img/circle-check-white.svg" />
     <p>${this.text}</p>`;
@@ -21,5 +21,19 @@ class PopupNotification {
   display() {
     this.element.classList.add('revealed');
   }
+
+  displayTemporarily(milliseconds) {
+    if (!milliseconds) {
+      milliseconds = 1000;
+    }
+    this.element.classList.remove('max-size-zero');
+    this.element.classList.add('revealed');
+    setTimeout(() => {
+      this.element.classList.remove('revealed');
+    }, milliseconds);
+    setTimeout(() => {
+      this.element.classList.add('max-size-zero');
+    }, milliseconds + 1000);
+  }
 }
 module.exports = PopupNotification;

src/front/pages/offers.js

@@ -8,18 +8,7 @@ const TimeInput = require('../components/TimeInput');
 const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes');
 const TrustCheckboxes = require('../components/TrustCheckboxes');
 const BigNotesCheckbox = require('../components/BigNotesCheckbox');
-
-const offerCreatedPopup = document.getElementById('offer-created-confirmation');
-function toggleOfferCreatedAlert() {
-  offerCreatedPopup.classList.remove('max-size-zero');
-  offerCreatedPopup.classList.add('revealed');
-  setTimeout(() => {
-    offerCreatedPopup.classList.remove('revealed');
-  }, 3000);
-  setTimeout(() => {
-    offerCreatedPopup.classList.add('max-size-zero');
-  }, 4000);
-}
+const PopupNotification = require('../components/PopupNotification');
 
 class CreateOfferModal {
   // Actual creation logic to be provided by a service
@@ -254,12 +243,18 @@ class CreateOfferModal {
 }
 
 function offersPage() {
+  const offerCreatedPopup = new PopupNotification({
+    parentElement: document.body,
+    text: '¡Oferta creada! Puedes verla en tus ofertas.',
+  });
+
+  offerCreatedPopup.render();
   const createOfferModal = new CreateOfferModal({
     parentElement: document.body,
     onCreationCallback: async () => {
       await myOffers.getOffersFromApi();
       await myOffers.render();
-      await toggleOfferCreatedAlert();
+      offerCreatedPopup.displayTemporarily(3000);
     },
   });
   createOfferModal.render();

src/views/offers.ejs

@@ -31,13 +31,6 @@
         <p>Vaya, no hay nada por aquí...</p>
       </div>
     </div>
-    <div
-      id="offer-created-confirmation"
-      class="top-notification-good max-size-zero"
-    >
-      <img src="/img/circle-check-white.svg" />
-      <p>¡Oferta creada! Puedes verla en tus ofertas.</p>
-    </div>
     <div
       id="offer-deleted-confirmation"
       class="top-notification-good max-size-zero"