offerdeleted popup

src/front/pages/offers.js

@@ -247,8 +247,14 @@ function offersPage() {
     parentElement: document.body,
     text: '¡Oferta creada! Puedes verla en tus ofertas.',
   });
-
   offerCreatedPopup.render();
+
+  const offerDeletedPopup = new PopupNotification({
+    parentElement: document.body,
+    text: '¡Oferta eliminada!',
+  });
+  offerDeletedPopup.render();
+
   const createOfferModal = new CreateOfferModal({
     parentElement: document.body,
     onCreationCallback: async () => {
@@ -280,10 +286,6 @@ function offersPage() {
   );
   const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 
-  const offerDeletedPopup = document.getElementById(
-    'offer-deleted-confirmation'
-  );
-
   const ownOffersContainer = document.getElementById('own-offers-container');
 
   function toggleCreateOfferModal() {
@@ -294,18 +296,6 @@ function offersPage() {
     viewMyOffersRoot.style.display =
       viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
   }
-
-  function toggleOfferDeletedAlert() {
-    offerDeletedPopup.classList.remove('max-size-zero');
-    offerDeletedPopup.classList.add('revealed');
-    setTimeout(() => {
-      offerDeletedPopup.classList.remove('revealed');
-    }, 3000);
-    setTimeout(() => {
-      offerDeletedPopup.classList.add('max-size-zero');
-    }, 4000);
-  }
-
   class Offer {
     constructor(offerData) {
       this.uuid = offerData.uuid;
@@ -663,7 +653,7 @@ function offersPage() {
         await deleteOfferByUuid(this.uuid);
         await myOffers.getOffersFromApi();
         await myOffers.render();
-        toggleOfferDeletedAlert();
+        offerDeletedPopup.displayTemporarily(3000);
       });
 
       actionButtonsArea.append(editActionArea, deleteActionArea);

src/views/offers.ejs

@@ -31,14 +31,7 @@
         <p>Vaya, no hay nada por aquí...</p>
       </div>
     </div>
-    <div
-      id="offer-deleted-confirmation"
-      class="top-notification-good max-size-zero"
-    >
-      <img src="/img/circle-check-white.svg" />
-      <p>¡Oferta eliminada!</p>
-    </div>
-
+    
     <script src="/javascript/offers.bundle.js"></script>
   </body>
 </html>