move into its own file

src/front/components/BitcoinMethodCheckboxes.js

@@ -0,0 +1,78 @@
+class BitcoinMethodCheckboxes {
+  constructor({ parentElement }) {
+    this.onchainContainer = null;
+    this.onchainCheckboxElement = null;
+    this.lightningContainer = null;
+    this.lightningCheckboxElement = null;
+    this.parentElement = parentElement;
+  }
+
+  render() {
+    this.onchainContainer = this.buildCheckbox({
+      id: 'onchain',
+      label: 'Onchain',
+    });
+    this.onchainCheckboxElement = this.onchainContainer.querySelector('input');
+
+    this.lightningContainer = this.buildCheckbox({
+      id: 'lightning',
+      label: 'Lightning',
+    });
+    this.lightningCheckboxElement =
+      this.lightningContainer.querySelector('input');
+
+    for (const btcMethodCheckbox of [
+      this.onchainCheckboxElement,
+      this.lightningCheckboxElement,
+    ]) {
+      btcMethodCheckbox.addEventListener('click', () => {
+        this.validateBitcoinMethodCheckboxes(btcMethodCheckbox);
+      });
+    }
+
+    this.parentElement.appendChild(this.onchainContainer);
+    this.parentElement.appendChild(this.lightningContainer);
+  }
+
+  buildCheckbox({ id, label }) {
+    const checkboxContainer = document.createElement('div');
+    checkboxContainer.className = 'checkbox-row';
+    checkboxContainer.id = `${id}-checkbox-area`;
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.name = id;
+    checkbox.id = `${id}-checkbox`;
+    checkbox.checked = true;
+
+    const labelElement = document.createElement('label');
+    labelElement.htmlFor = checkbox.id;
+    labelElement.textContent = label;
+
+    checkboxContainer.appendChild(checkbox);
+    checkboxContainer.appendChild(labelElement);
+
+    return checkboxContainer;
+  }
+
+  validateBitcoinMethodCheckboxes(clickedCheckbox) {
+    let checkedCount = [
+      this.onchainCheckboxElement,
+      this.lightningCheckboxElement,
+    ].filter((cb) => cb.checked).length;
+    console.log(checkedCount);
+    if (checkedCount === 0) {
+      clickedCheckbox.checked = true;
+    }
+  }
+
+  get isOnchainAccepted() {
+    return this.onchainCheckboxElement.checked;
+  }
+
+  get isLightningAccepted() {
+    return this.lightningCheckboxElement.checked;
+  }
+}
+
+module.exports = BitcoinMethodCheckboxes;

src/front/pages/offers.js

@@ -5,83 +5,7 @@ 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');
-class BitcoinMethodCheckboxes {
-  constructor({ parentElement }) {
-    this.onchainContainer = null;
-    this.onchainCheckboxElement = null;
-    this.lightningContainer = null;
-    this.lightningCheckboxElement = null;
-    this.parentElement = parentElement;
-  }
-
-  render() {
-    this.onchainContainer = this.buildCheckbox({
-      id: 'onchain',
-      label: 'Onchain',
-    });
-    this.onchainCheckboxElement = this.onchainContainer.querySelector('input');
-
-    this.lightningContainer = this.buildCheckbox({
-      id: 'lightning',
-      label: 'Lightning',
-    });
-    this.lightningCheckboxElement =
-      this.lightningContainer.querySelector('input');
-
-    for (const btcMethodCheckbox of [
-      this.onchainCheckboxElement,
-      this.lightningCheckboxElement,
-    ]) {
-      btcMethodCheckbox.addEventListener('click', () => {
-        this.validateBitcoinMethodCheckboxes(btcMethodCheckbox);
-      });
-    }
-
-    this.parentElement.appendChild(this.onchainContainer);
-    this.parentElement.appendChild(this.lightningContainer);
-  }
-
-  buildCheckbox({ id, label }) {
-    const checkboxContainer = document.createElement('div');
-    checkboxContainer.className = 'checkbox-row';
-    checkboxContainer.id = `${id}-checkbox-area`;
-
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.name = id;
-    checkbox.id = `${id}-checkbox`;
-    checkbox.checked = true;
-
-    const labelElement = document.createElement('label');
-    labelElement.htmlFor = checkbox.id;
-    labelElement.textContent = label;
-
-    checkboxContainer.appendChild(checkbox);
-    checkboxContainer.appendChild(labelElement);
-
-    return checkboxContainer;
-  }
-
-  validateBitcoinMethodCheckboxes(clickedCheckbox) {
-    let checkedCount = [
-      this.onchainCheckboxElement,
-      this.lightningCheckboxElement,
-    ].filter((cb) => cb.checked).length;
-    console.log(checkedCount);
-    if (checkedCount === 0) {
-      clickedCheckbox.checked = true;
-    }
-  }
-
-  get isOnchainAccepted() {
-    return this.onchainCheckboxElement.checked;
-  }
-
-  get isLightningAccepted() {
-    return this.lightningCheckboxElement.checked;
-  }
-}
 
 function offersPage() {
   const createOfferEventBus = new EventTarget();