From 1bd4aa40e639ac89812c14c216273594946677b0 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Thu, 10 Apr 2025 08:58:51 +0200
Subject: [PATCH] move to component file

---
 src/front/components/CreateOfferModal.js | 239 +++++++++++++++++++++++
 src/front/pages/offers.js                | 238 +---------------------
 2 files changed, 240 insertions(+), 237 deletions(-)
 create mode 100644 src/front/components/CreateOfferModal.js

diff --git a/src/front/components/CreateOfferModal.js b/src/front/components/CreateOfferModal.js
new file mode 100644
index 0000000..b5301d1
--- /dev/null
+++ b/src/front/components/CreateOfferModal.js
@@ -0,0 +1,239 @@
+const PublishOfferButton = require('./PublishOfferButton');
+const BuyOrSellButtonGroup = require('./BuyOrSellButtonGroup');
+const PremiumSelector = require('./PremiumSelector');
+const PriceDisplay = require('./PriceDisplay');
+const AmountInput = require('./AmountInput');
+const PlaceInput = require('./PlaceInput');
+const TimeInput = require('./TimeInput');
+const BitcoinMethodCheckboxes = require('./BitcoinMethodCheckboxes');
+const TrustCheckboxes = require('./TrustCheckboxes');
+const BigNotesCheckbox = require('./BigNotesCheckbox');
+const CloseModalButton = require('./CloseModalButton');
+
+class CreateOfferModal {
+  constructor({ parentElement, onCreationCallback, offerService }) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.onCreationCallback = onCreationCallback;
+    this.offerService = offerService;
+
+    this.publishOfferButton = null;
+    this.buyOrSellButtonGroup = null;
+    this.premiumSelector = null;
+    this.amountInput = null;
+    this.placeInput = null;
+    this.timeInput = null;
+    this.btcMethodCheckboxes = null;
+    this.trustCheckboxes = null;
+    this.bigNotesCheckbox = null;
+  }
+
+  render() {
+    const modalRoot = document.createElement('div');
+    this.element = modalRoot;
+    modalRoot.className = 'full-screen-modal-background';
+
+    const modal = document.createElement('div');
+    modal.className = 'full-screen-modal';
+
+    const controls = document.createElement('div');
+    controls.className = 'create-offer-controls';
+
+    const title = document.createElement('h2');
+    title.textContent = 'Añade los detalles de tu oferta';
+    controls.appendChild(title);
+
+    const buyOrSellDiv = document.createElement('div');
+    buyOrSellDiv.className = 'create-offer-step';
+    this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
+      parentElement: buyOrSellDiv,
+    });
+    this.buyOrSellButtonGroup.render();
+    controls.appendChild(buyOrSellDiv);
+
+    const premiumDiv = document.createElement('div');
+    premiumDiv.classList = 'premium-area';
+    premiumDiv.className = 'create-offer-step';
+    const premiumHeading = document.createElement('h3');
+    premiumHeading.textContent = 'Premium';
+    premiumDiv.appendChild(premiumHeading);
+    const premiumContentDiv = document.createElement('div');
+    premiumContentDiv.classList = 'premium-content-area';
+    premiumDiv.appendChild(premiumContentDiv);
+    controls.appendChild(premiumDiv);
+
+    const createOfferEventBus = new EventTarget();
+
+    const mockPriceProvidingCallback = () => {
+      return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
+    };
+
+    this.premiumSelector = new PremiumSelector({
+      parentElement: premiumContentDiv,
+      eventSink: createOfferEventBus,
+    });
+    this.premiumSelector.render();
+
+    const priceDisplay = new PriceDisplay({
+      parentElement: premiumContentDiv,
+      id: 'premium-price-display-area',
+      premiumProvidingCallback: () => {
+        return this.premiumSelector.getPremium();
+      },
+      priceProvidingCallback: mockPriceProvidingCallback,
+    });
+    priceDisplay.render();
+    createOfferEventBus.addEventListener('premium-changed', () => {
+      priceDisplay.updatePrices();
+    });
+
+    const amountDiv = document.createElement('div');
+    amountDiv.className = 'create-offer-step';
+    const amountHeading = document.createElement('h3');
+    amountHeading.textContent = '¿Cuánto?';
+    amountDiv.appendChild(amountHeading);
+    controls.appendChild(amountDiv);
+
+    this.amountInput = new AmountInput({
+      parentElement: amountDiv,
+    });
+
+    this.amountInput.render();
+
+    const placeTimeDiv = document.createElement('div');
+    placeTimeDiv.className = 'create-offer-step';
+    const placeTimeHeading = document.createElement('h3');
+    placeTimeHeading.textContent = '¿Dónde y cuándo?';
+    placeTimeDiv.appendChild(placeTimeHeading);
+    const placeTimeContentDiv = document.createElement('div');
+    placeTimeDiv.appendChild(placeTimeContentDiv);
+    controls.appendChild(placeTimeDiv);
+
+    this.placeInput = new PlaceInput({
+      parentElement: placeTimeContentDiv,
+    });
+
+    this.placeInput.render();
+
+    this.timeInput = new TimeInput({
+      parentElement: placeTimeContentDiv,
+    });
+
+    this.timeInput.render();
+
+    const bitcoinMethodsDiv = document.createElement('div');
+    bitcoinMethodsDiv.className = 'create-offer-step';
+    const bitcoinMethodsHeading = document.createElement('h3');
+    bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?';
+    bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading);
+    const bitcoinMethodsContentDiv = document.createElement('div');
+    bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv);
+    controls.appendChild(bitcoinMethodsDiv);
+
+    this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
+      parentElement: bitcoinMethodsContentDiv,
+    });
+
+    this.btcMethodCheckboxes.render();
+
+    const trustDiv = document.createElement('div');
+    trustDiv.className = 'create-offer-step';
+    const trustHeading = document.createElement('h3');
+    trustHeading.textContent = '¿Quién puede ver la oferta?';
+    trustDiv.appendChild(trustHeading);
+    const trustContentDiv = document.createElement('div');
+    trustDiv.appendChild(trustContentDiv);
+    controls.appendChild(trustDiv);
+
+    this.trustCheckboxes = new TrustCheckboxes({
+      parentElement: trustContentDiv,
+    });
+
+    this.trustCheckboxes.render();
+
+    const otherDiv = document.createElement('div');
+    otherDiv.className = 'create-offer-step';
+    const otherHeading = document.createElement('h3');
+    otherHeading.textContent = 'Extras';
+    otherDiv.appendChild(otherHeading);
+    controls.appendChild(otherDiv);
+
+    this.bigNotesCheckbox = new BigNotesCheckbox({
+      parentElement: otherDiv,
+    });
+
+    this.bigNotesCheckbox.render();
+    //Continue moving components up here
+
+    const submitButtonArea = document.createElement('div');
+    submitButtonArea.classList.add('submit-button-area');
+    this.publishOfferButton = new PublishOfferButton({
+      parentElement: submitButtonArea,
+      id: 'button-submit-offer',
+      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 = new CloseModalButton({
+      parentElement: closeButtonArea,
+      onClickCallback: () => {
+        this.toggle();
+      },
+    });
+
+    closeButton.render();
+
+    controls.appendChild(submitButtonArea);
+    controls.appendChild(closeButtonArea);
+
+    modal.appendChild(controls);
+    modalRoot.appendChild(modal);
+
+    this.parentElement.appendChild(this.element);
+  }
+
+  toggle() {
+    this.element.classList.toggle('shown');
+  }
+
+  async createOffer() {
+    const wants = this.buyOrSellButtonGroup.wants();
+
+    const premium = this.premiumSelector.getPremium();
+    const trade_amount_eur = this.amountInput.intEurAmount;
+    const location_details = this.placeInput.inputText;
+    const time_availability_details = this.timeInput.inputText;
+    const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted;
+    const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted;
+    const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted;
+    const show_offer_to_trusted_trusted =
+      this.trustCheckboxes.showOfferToTrustedTrusted;
+    const show_offer_to_all_members =
+      this.trustCheckboxes.showOfferToAllMembers;
+    const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted;
+
+    const offerDetails = {
+      wants,
+      premium,
+      trade_amount_eur,
+      location_details,
+      time_availability_details,
+      is_onchain_accepted,
+      is_lightning_accepted,
+      show_offer_to_trusted,
+      show_offer_to_trusted_trusted,
+      show_offer_to_all_members,
+      are_big_notes_accepted,
+    };
+
+    await this.offerService.createOffer(offerDetails);
+  }
+}
+
+module.exports = CreateOfferModal;
diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js
index 971722a..a88e96b 100644
--- a/src/front/pages/offers.js
+++ b/src/front/pages/offers.js
@@ -1,244 +1,8 @@
-const PublishOfferButton = require('../components/PublishOfferButton');
-const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
-const PremiumSelector = require('../components/PremiumSelector');
-const PriceDisplay = require('../components/PriceDisplay');
-const AmountInput = require('../components/AmountInput');
-const PlaceInput = require('../components/PlaceInput');
-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 CreateOfferModal = require('../components/CreateOfferModal');
 
 const offerService = require('../services/offerService');
 
-class CreateOfferModal {
-  constructor({ parentElement, onCreationCallback, offerService }) {
-    this.element = null;
-    this.parentElement = parentElement;
-    this.onCreationCallback = onCreationCallback;
-    this.offerService = offerService;
-
-    this.publishOfferButton = null;
-    this.buyOrSellButtonGroup = null;
-    this.premiumSelector = null;
-    this.amountInput = null;
-    this.placeInput = null;
-    this.timeInput = null;
-    this.btcMethodCheckboxes = null;
-    this.trustCheckboxes = null;
-    this.bigNotesCheckbox = null;
-  }
-
-  render() {
-    const modalRoot = document.createElement('div');
-    this.element = modalRoot;
-    modalRoot.className = 'full-screen-modal-background';
-
-    const modal = document.createElement('div');
-    modal.className = 'full-screen-modal';
-
-    const controls = document.createElement('div');
-    controls.className = 'create-offer-controls';
-
-    const title = document.createElement('h2');
-    title.textContent = 'Añade los detalles de tu oferta';
-    controls.appendChild(title);
-
-    const buyOrSellDiv = document.createElement('div');
-    buyOrSellDiv.className = 'create-offer-step';
-    this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
-      parentElement: buyOrSellDiv,
-    });
-    this.buyOrSellButtonGroup.render();
-    controls.appendChild(buyOrSellDiv);
-
-    const premiumDiv = document.createElement('div');
-    premiumDiv.classList = 'premium-area';
-    premiumDiv.className = 'create-offer-step';
-    const premiumHeading = document.createElement('h3');
-    premiumHeading.textContent = 'Premium';
-    premiumDiv.appendChild(premiumHeading);
-    const premiumContentDiv = document.createElement('div');
-    premiumContentDiv.classList = 'premium-content-area';
-    premiumDiv.appendChild(premiumContentDiv);
-    controls.appendChild(premiumDiv);
-
-    const createOfferEventBus = new EventTarget();
-
-    const mockPriceProvidingCallback = () => {
-      return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
-    };
-
-    this.premiumSelector = new PremiumSelector({
-      parentElement: premiumContentDiv,
-      eventSink: createOfferEventBus,
-    });
-    this.premiumSelector.render();
-
-    const priceDisplay = new PriceDisplay({
-      parentElement: premiumContentDiv,
-      id: 'premium-price-display-area',
-      premiumProvidingCallback: () => {
-        return this.premiumSelector.getPremium();
-      },
-      priceProvidingCallback: mockPriceProvidingCallback,
-    });
-    priceDisplay.render();
-    createOfferEventBus.addEventListener('premium-changed', () => {
-      priceDisplay.updatePrices();
-    });
-
-    const amountDiv = document.createElement('div');
-    amountDiv.className = 'create-offer-step';
-    const amountHeading = document.createElement('h3');
-    amountHeading.textContent = '¿Cuánto?';
-    amountDiv.appendChild(amountHeading);
-    controls.appendChild(amountDiv);
-
-    this.amountInput = new AmountInput({
-      parentElement: amountDiv,
-    });
-
-    this.amountInput.render();
-
-    const placeTimeDiv = document.createElement('div');
-    placeTimeDiv.className = 'create-offer-step';
-    const placeTimeHeading = document.createElement('h3');
-    placeTimeHeading.textContent = '¿Dónde y cuándo?';
-    placeTimeDiv.appendChild(placeTimeHeading);
-    const placeTimeContentDiv = document.createElement('div');
-    placeTimeDiv.appendChild(placeTimeContentDiv);
-    controls.appendChild(placeTimeDiv);
-
-    this.placeInput = new PlaceInput({
-      parentElement: placeTimeContentDiv,
-    });
-
-    this.placeInput.render();
-
-    this.timeInput = new TimeInput({
-      parentElement: placeTimeContentDiv,
-    });
-
-    this.timeInput.render();
-
-    const bitcoinMethodsDiv = document.createElement('div');
-    bitcoinMethodsDiv.className = 'create-offer-step';
-    const bitcoinMethodsHeading = document.createElement('h3');
-    bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?';
-    bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading);
-    const bitcoinMethodsContentDiv = document.createElement('div');
-    bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv);
-    controls.appendChild(bitcoinMethodsDiv);
-
-    this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
-      parentElement: bitcoinMethodsContentDiv,
-    });
-
-    this.btcMethodCheckboxes.render();
-
-    const trustDiv = document.createElement('div');
-    trustDiv.className = 'create-offer-step';
-    const trustHeading = document.createElement('h3');
-    trustHeading.textContent = '¿Quién puede ver la oferta?';
-    trustDiv.appendChild(trustHeading);
-    const trustContentDiv = document.createElement('div');
-    trustDiv.appendChild(trustContentDiv);
-    controls.appendChild(trustDiv);
-
-    this.trustCheckboxes = new TrustCheckboxes({
-      parentElement: trustContentDiv,
-    });
-
-    this.trustCheckboxes.render();
-
-    const otherDiv = document.createElement('div');
-    otherDiv.className = 'create-offer-step';
-    const otherHeading = document.createElement('h3');
-    otherHeading.textContent = 'Extras';
-    otherDiv.appendChild(otherHeading);
-    controls.appendChild(otherDiv);
-
-    this.bigNotesCheckbox = new BigNotesCheckbox({
-      parentElement: otherDiv,
-    });
-
-    this.bigNotesCheckbox.render();
-    //Continue moving components up here
-
-    const submitButtonArea = document.createElement('div');
-    submitButtonArea.classList.add('submit-button-area');
-    this.publishOfferButton = new PublishOfferButton({
-      parentElement: submitButtonArea,
-      id: 'button-submit-offer',
-      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 = new CloseModalButton({
-      parentElement: closeButtonArea,
-      onClickCallback: () => {
-        this.toggle();
-      },
-    });
-
-    closeButton.render();
-
-    controls.appendChild(submitButtonArea);
-    controls.appendChild(closeButtonArea);
-
-    modal.appendChild(controls);
-    modalRoot.appendChild(modal);
-
-    this.parentElement.appendChild(this.element);
-  }
-
-  toggle() {
-    this.element.classList.toggle('shown');
-  }
-
-  async createOffer() {
-    const wants = this.buyOrSellButtonGroup.wants();
-
-    const premium = this.premiumSelector.getPremium();
-    const trade_amount_eur = this.amountInput.intEurAmount;
-    const location_details = this.placeInput.inputText;
-    const time_availability_details = this.timeInput.inputText;
-    const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted;
-    const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted;
-    const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted;
-    const show_offer_to_trusted_trusted =
-      this.trustCheckboxes.showOfferToTrustedTrusted;
-    const show_offer_to_all_members =
-      this.trustCheckboxes.showOfferToAllMembers;
-    const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted;
-
-    const offerDetails = {
-      wants,
-      premium,
-      trade_amount_eur,
-      location_details,
-      time_availability_details,
-      is_onchain_accepted,
-      is_lightning_accepted,
-      show_offer_to_trusted,
-      show_offer_to_trusted_trusted,
-      show_offer_to_all_members,
-      are_big_notes_accepted,
-    };
-
-    await this.offerService.createOffer(offerDetails);
-  }
-}
-
 function offersPage() {
   const offerCreatedPopup = new PopupNotification({
     parentElement: document.body,