diff --git a/public/css/offers.css b/public/css/offers.css index 6942f0a..6a4e706 100644 --- a/public/css/offers.css +++ b/public/css/offers.css @@ -221,10 +221,8 @@ font-size: 0.9em; } -#create-offer-controls { +.create-offer-controls { text-align: center; - overflow-y: auto; - max-height: 800px; padding: 20px; } @@ -243,7 +241,7 @@ margin-top: 0; } -#close-offer-controls-area { +.close-offer-controls-area { display: flex; justify-content: end; } @@ -386,7 +384,7 @@ width: 33%; } -#close-offer { +.close-offer { margin-left: auto; margin-right: auto; } diff --git a/public/css/seca.css b/public/css/seca.css index 1cc3034..35b6217 100644 --- a/public/css/seca.css +++ b/public/css/seca.css @@ -141,6 +141,8 @@ h1 { padding: 10px; width: fit-content; max-width: 95%; + max-height: 90vh; + overflow: auto; margin: 20px auto; } diff --git a/src/front/components/BigNotesCheckbox.js b/src/front/components/BigNotesCheckbox.js index 005502c..6361a72 100644 --- a/src/front/components/BigNotesCheckbox.js +++ b/src/front/components/BigNotesCheckbox.js @@ -7,7 +7,6 @@ class BigNotesCheckbox { render() { const container = document.createElement('div'); - container.id = 'large-bills-area'; container.className = 'checkbox-row'; const checkbox = document.createElement('input'); diff --git a/src/front/components/CloseModalButton.js b/src/front/components/CloseModalButton.js new file mode 100644 index 0000000..b857ea5 --- /dev/null +++ b/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; 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/components/OfferCard.js b/src/front/components/OfferCard.js new file mode 100644 index 0000000..5c11452 --- /dev/null +++ b/src/front/components/OfferCard.js @@ -0,0 +1,374 @@ +class OfferCard { + constructor({ offerData, deleteButtonCallback }) { + this.uuid = offerData.uuid; + this.public_key = offerData.public_key; + this.wants = offerData.wants; + this.premium = offerData.premium; + this.trade_amount_eur = offerData.trade_amount_eur; + this.location_details = offerData.location_details; + this.time_availability_details = offerData.time_availability_details; + this.show_offer_to_trusted = offerData.show_offer_to_trusted; + this.show_offer_to_trusted_trusted = + offerData.show_offer_to_trusted_trusted; + this.show_offer_to_all_members = offerData.show_offer_to_all_members; + this.is_onchain_accepted = offerData.is_onchain_accepted; + this.is_lightning_accepted = offerData.is_lightning_accepted; + this.are_big_notes_accepted = offerData.are_big_notes_accepted; + this.created_at = offerData.created_at; + this.last_updated_at = offerData.last_updated_at; + + this.deleteButtonCallback = deleteButtonCallback; + } + + buildHTML() { + const offerCard = document.createElement('div'); + offerCard.classList.add('myoffer-card'); + offerCard.classList.add('shadowed-round-area'); + + const tradeDescDiv = document.createElement('div'); + tradeDescDiv.classList.add('trade-desc'); + + const youBuyText = document.createElement('p'); + youBuyText.classList.add('offer-card-content-title'); + youBuyText.innerText = 'Compras'; + tradeDescDiv.append(youBuyText); + + const youBuyData = document.createElement('p'); + youBuyData.classList.add('offer-card-content-data'); + if (this.wants === 'BTC') { + youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`; + } + if (this.wants === 'EUR') { + youBuyData.innerText = `${this.trade_amount_eur} €`; + } + tradeDescDiv.append(youBuyData); + + const youSellText = document.createElement('p'); + youSellText.classList.add('offer-card-content-title'); + youSellText.innerText = 'Vendes'; + tradeDescDiv.append(youSellText); + + const youSellData = document.createElement('p'); + youSellData.classList.add('offer-card-content-data'); + if (this.wants === 'BTC') { + youSellData.innerText = `${this.trade_amount_eur} €`; + } + if (this.wants === 'EUR') { + youSellData.innerText = `${this.trade_amount_eur * 1021} sats`; + } + tradeDescDiv.append(youSellData); + + const premiumDescDiv = document.createElement('div'); + premiumDescDiv.classList.add('premium-desc'); + + const premiumTitle = document.createElement('p'); + premiumTitle.classList.add('offer-card-content-title'); + premiumTitle.innerText = 'Premium'; + premiumDescDiv.append(premiumTitle); + + const premiumData = document.createElement('p'); + premiumData.classList.add('offer-card-content-data'); + premiumData.innerText = `${this.premium * 100} %`; + premiumDescDiv.append(premiumData); + + const offerPriceTitle = document.createElement('p'); + offerPriceTitle.classList.add('offer-card-content-title'); + offerPriceTitle.innerText = 'Precio oferta'; + premiumDescDiv.append(offerPriceTitle); + + const offerPriceData = document.createElement('p'); + offerPriceData.classList.add('offer-card-content-data'); + offerPriceData.innerText = `90000 €/BTC`; + premiumDescDiv.append(offerPriceData); + + const marketPriceTitle = document.createElement('p'); + marketPriceTitle.classList.add('offer-card-content-title'); + marketPriceTitle.innerText = 'Precio mercado'; + premiumDescDiv.append(marketPriceTitle); + + const marketPriceData = document.createElement('p'); + marketPriceData.innerText = `88000 €/BTC`; + premiumDescDiv.append(marketPriceData); + + const whereDescDiv = document.createElement('div'); + whereDescDiv.classList.add('where-desc'); + + const whereDescTitle = document.createElement('p'); + whereDescTitle.classList.add('offer-card-content-title'); + whereDescTitle.innerText = 'Dónde'; + whereDescDiv.append(whereDescTitle); + + const whereDescData = document.createElement('p'); + whereDescData.classList.add('offer-long-text'); + whereDescData.innerText = `${this.location_details}`; + whereDescDiv.append(whereDescData); + + const whenDescDiv = document.createElement('div'); + whenDescDiv.classList.add('when-desc'); + + const whenDescTitle = document.createElement('p'); + whenDescTitle.classList.add('offer-card-content-title'); + whenDescTitle.innerText = 'Cúando'; + whenDescDiv.append(whenDescTitle); + + const whenDescData = document.createElement('p'); + whenDescData.classList.add('offer-long-text'); + whenDescData.innerText = `${this.time_availability_details}`; + whenDescDiv.append(whenDescData); + + const bitcoinMethodsDiv = document.createElement('div'); + bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); + + const bitcoinMethodsTitle = document.createElement('p'); + bitcoinMethodsTitle.classList.add('offer-card-content-title'); + bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados'; + bitcoinMethodsDiv.append(bitcoinMethodsTitle); + + const onchainAcceptedContainer = document.createElement('div'); + onchainAcceptedContainer.classList.add('left-icon-checkboxed-field'); + if (this.is_onchain_accepted) { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-lasecagold.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } else { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-gray.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } + const lightningAcceptedContainer = document.createElement('div'); + + lightningAcceptedContainer.classList.add('left-icon-checkboxed-field'); + if (this.is_lightning_accepted) { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } else { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-gray.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } + + bitcoinMethodsDiv.append( + onchainAcceptedContainer, + lightningAcceptedContainer + ); + + const visibilityDiv = document.createElement('div'); + visibilityDiv.classList.add('visibility-desc'); + + const visibilityTitle = document.createElement('p'); + visibilityTitle.classList.add('offer-card-content-title'); + visibilityTitle.innerText = 'Visibilidad'; + visibilityDiv.append(visibilityTitle); + + const showOfferToTrustedContainer = document.createElement('div'); + showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field'); + + if (this.show_offer_to_trusted) { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-lasecagold.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-gray.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } + + const showOfferToTrustedTrustedContainer = document.createElement('div'); + showOfferToTrustedTrustedContainer.classList.add( + 'right-icon-checkboxed-field' + ); + + if (this.show_offer_to_trusted_trusted) { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } + + const showOfferToAllMembersContainer = document.createElement('div'); + showOfferToAllMembersContainer.classList.add('right-icon-checkboxed-field'); + + if (this.show_offer_to_all_members) { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } else { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-gray.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } + visibilityDiv.append( + showOfferToTrustedContainer, + showOfferToTrustedTrustedContainer, + showOfferToAllMembersContainer + ); + + const otherOfferFeaturesDiv = document.createElement('div'); + otherOfferFeaturesDiv.classList.add('other-desc'); + + const otherOfferFeaturesTitle = document.createElement('p'); + otherOfferFeaturesTitle.classList.add('offer-card-content-title'); + otherOfferFeaturesTitle.innerText = 'Otros'; + otherOfferFeaturesDiv.append(otherOfferFeaturesTitle); + + const areBigNotesAcceptedContainer = document.createElement('div'); + areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field'); + + if (this.are_big_notes_accepted) { + const areBigNotesAcceptedIcon = document.createElement('img'); + areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg'; + const areBigNotesAcceptedText = document.createElement('p'); + areBigNotesAcceptedText.innerText = 'Billetes grandes'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + areBigNotesAcceptedContainer.append( + areBigNotesAcceptedIcon, + areBigNotesAcceptedText, + checkIcon + ); + } else { + const areBigNotesAcceptedIcon = document.createElement('img'); + areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg'; + const areBigNotesAcceptedText = document.createElement('p'); + areBigNotesAcceptedText.innerText = 'Billetes grandes'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + areBigNotesAcceptedContainer.append( + areBigNotesAcceptedIcon, + areBigNotesAcceptedText, + checkIcon + ); + } + + otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer); + + const actionButtonsArea = document.createElement('p'); + actionButtonsArea.classList.add('offer-action-buttons-area'); + + const editActionArea = document.createElement('div'); + editActionArea.classList.add('offer-action-area'); + editActionArea.classList.add('subtle-box'); + const editActionIcon = document.createElement('img'); + editActionIcon.src = '/img/edit.svg'; + const editActionText = document.createElement('p'); + editActionText.innerText = 'Editar'; + editActionArea.append(editActionIcon, editActionText); + + const deleteActionArea = document.createElement('div'); + deleteActionArea.classList.add('offer-action-area'); + deleteActionArea.classList.add('subtle-box'); + const deleteActionIcon = document.createElement('img'); + deleteActionIcon.src = '/img/trash-can-darkred.svg'; + const deleteActionText = document.createElement('p'); + deleteActionText.innerText = 'Eliminar'; + deleteActionArea.append(deleteActionIcon, deleteActionText); + deleteActionArea.addEventListener('click', async () => { + await this.deleteButtonCallback(); + }); + + actionButtonsArea.append(editActionArea, deleteActionArea); + + offerCard.append( + tradeDescDiv, + premiumDescDiv, + whereDescDiv, + whenDescDiv, + bitcoinMethodsDiv, + visibilityDiv, + otherOfferFeaturesDiv, + actionButtonsArea + ); + + return offerCard; + } +} + +module.exports = OfferCard; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index 95ccde8..01c6ab3 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -1,246 +1,9 @@ -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 PopupNotification = require('../components/PopupNotification'); +const CreateOfferModal = require('../components/CreateOfferModal'); +const OfferCard = require('../components/OfferCard'); const offerService = require('../services/offerService'); -class CreateOfferModal { - // Stop relying on IDs - 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.id = 'create-offer-modal-root'; - modalRoot.className = 'full-screen-modal-background'; - - const modal = document.createElement('div'); - modal.className = 'full-screen-modal'; - modal.id = 'create-offer-root'; - - const controls = document.createElement('div'); - controls.id = '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.id = 'amount-area'; - 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.id = 'other-area'; - 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.publishOfferButton.render(); - - const closeButtonArea = document.createElement('div'); - closeButtonArea.id = 'close-offer-controls-area'; - const closeButton = document.createElement('button'); - closeButton.id = 'close-offer'; - closeButton.className = 'button-secondary button-medium'; - closeButton.textContent = 'Volver'; - closeButtonArea.appendChild(closeButton); - - 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); - - this.toggle(); - } -} - function offersPage() { const offerCreatedPopup = new PopupNotification({ parentElement: document.body, @@ -280,398 +43,14 @@ 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'; } - class Offer { - constructor(offerData) { - this.uuid = offerData.uuid; - this.public_key = offerData.public_key; - this.wants = offerData.wants; - this.premium = offerData.premium; - this.trade_amount_eur = offerData.trade_amount_eur; - this.location_details = offerData.location_details; - this.time_availability_details = offerData.time_availability_details; - this.show_offer_to_trusted = offerData.show_offer_to_trusted; - this.show_offer_to_trusted_trusted = - offerData.show_offer_to_trusted_trusted; - this.show_offer_to_all_members = offerData.show_offer_to_all_members; - this.is_onchain_accepted = offerData.is_onchain_accepted; - this.is_lightning_accepted = offerData.is_lightning_accepted; - this.are_big_notes_accepted = offerData.are_big_notes_accepted; - this.created_at = offerData.created_at; - this.last_updated_at = offerData.last_updated_at; - } - - buildHTML() { - const offerCard = document.createElement('div'); - offerCard.classList.add('myoffer-card'); - offerCard.classList.add('shadowed-round-area'); - - const tradeDescDiv = document.createElement('div'); - tradeDescDiv.classList.add('trade-desc'); - - const youBuyText = document.createElement('p'); - youBuyText.classList.add('offer-card-content-title'); - youBuyText.innerText = 'Compras'; - tradeDescDiv.append(youBuyText); - - const youBuyData = document.createElement('p'); - youBuyData.classList.add('offer-card-content-data'); - if (this.wants === 'BTC') { - youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`; - } - if (this.wants === 'EUR') { - youBuyData.innerText = `${this.trade_amount_eur} €`; - } - tradeDescDiv.append(youBuyData); - - const youSellText = document.createElement('p'); - youSellText.id = 'you-sell-title'; - youSellText.classList.add('offer-card-content-title'); - youSellText.innerText = 'Vendes'; - tradeDescDiv.append(youSellText); - - const youSellData = document.createElement('p'); - youSellData.classList.add('offer-card-content-data'); - if (this.wants === 'BTC') { - youSellData.innerText = `${this.trade_amount_eur} €`; - } - if (this.wants === 'EUR') { - youSellData.innerText = `${this.trade_amount_eur * 1021} sats`; - } - tradeDescDiv.append(youSellData); - - const premiumDescDiv = document.createElement('div'); - premiumDescDiv.classList.add('premium-desc'); - - const premiumTitle = document.createElement('p'); - premiumTitle.classList.add('offer-card-content-title'); - premiumTitle.innerText = 'Premium'; - premiumDescDiv.append(premiumTitle); - - const premiumData = document.createElement('p'); - premiumData.classList.add('offer-card-content-data'); - premiumData.innerText = `${this.premium * 100} %`; - premiumDescDiv.append(premiumData); - - const offerPriceTitle = document.createElement('p'); - offerPriceTitle.classList.add('offer-card-content-title'); - offerPriceTitle.innerText = 'Precio oferta'; - premiumDescDiv.append(offerPriceTitle); - - const offerPriceData = document.createElement('p'); - offerPriceData.classList.add('offer-card-content-data'); - offerPriceData.innerText = `90000 €/BTC`; - premiumDescDiv.append(offerPriceData); - - const marketPriceTitle = document.createElement('p'); - marketPriceTitle.classList.add('offer-card-content-title'); - marketPriceTitle.innerText = 'Precio mercado'; - premiumDescDiv.append(marketPriceTitle); - - const marketPriceData = document.createElement('p'); - marketPriceData.innerText = `88000 €/BTC`; - premiumDescDiv.append(marketPriceData); - - const whereDescDiv = document.createElement('div'); - whereDescDiv.classList.add('where-desc'); - - const whereDescTitle = document.createElement('p'); - whereDescTitle.classList.add('offer-card-content-title'); - whereDescTitle.innerText = 'Dónde'; - whereDescDiv.append(whereDescTitle); - - const whereDescData = document.createElement('p'); - whereDescData.classList.add('offer-long-text'); - whereDescData.innerText = `${this.location_details}`; - whereDescDiv.append(whereDescData); - - const whenDescDiv = document.createElement('div'); - whenDescDiv.classList.add('when-desc'); - - const whenDescTitle = document.createElement('p'); - whenDescTitle.classList.add('offer-card-content-title'); - whenDescTitle.innerText = 'Cúando'; - whenDescDiv.append(whenDescTitle); - - const whenDescData = document.createElement('p'); - whenDescData.classList.add('offer-long-text'); - whenDescData.innerText = `${this.time_availability_details}`; - whenDescDiv.append(whenDescData); - - const bitcoinMethodsDiv = document.createElement('div'); - bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); - - const bitcoinMethodsTitle = document.createElement('p'); - bitcoinMethodsTitle.classList.add('offer-card-content-title'); - bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados'; - bitcoinMethodsDiv.append(bitcoinMethodsTitle); - - const onchainAcceptedContainer = document.createElement('div'); - onchainAcceptedContainer.classList.add('left-icon-checkboxed-field'); - if (this.is_onchain_accepted) { - const onchainIcon = document.createElement('img'); - onchainIcon.src = '/img/chains-lasecagold.svg'; - const onchainText = document.createElement('p'); - onchainText.innerText = 'Onchain'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); - } else { - const onchainIcon = document.createElement('img'); - onchainIcon.src = '/img/chains-gray.svg'; - const onchainText = document.createElement('p'); - onchainText.innerText = 'Onchain'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); - } - const lightningAcceptedContainer = document.createElement('div'); - - lightningAcceptedContainer.classList.add('left-icon-checkboxed-field'); - if (this.is_lightning_accepted) { - const lightningIcon = document.createElement('img'); - lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; - const lightningText = document.createElement('p'); - lightningText.innerText = 'Lightning'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - lightningAcceptedContainer.append( - lightningIcon, - lightningText, - checkIcon - ); - } else { - const lightningIcon = document.createElement('img'); - lightningIcon.src = '/img/bolt-lightning-gray.svg'; - const lightningText = document.createElement('p'); - lightningText.innerText = 'Lightning'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - lightningAcceptedContainer.append( - lightningIcon, - lightningText, - checkIcon - ); - } - - bitcoinMethodsDiv.append( - onchainAcceptedContainer, - lightningAcceptedContainer - ); - - const visibilityDiv = document.createElement('div'); - visibilityDiv.classList.add('visibility-desc'); - - const visibilityTitle = document.createElement('p'); - visibilityTitle.classList.add('offer-card-content-title'); - visibilityTitle.innerText = 'Visibilidad'; - visibilityDiv.append(visibilityTitle); - - const showOfferToTrustedContainer = document.createElement('div'); - showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field'); - - if (this.show_offer_to_trusted) { - const showOfferToTrustedIcon = document.createElement('img'); - showOfferToTrustedIcon.src = '/img/user-lasecagold.svg'; - const showOfferToTrustedText = document.createElement('p'); - showOfferToTrustedText.innerText = 'Confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToTrustedContainer.append( - showOfferToTrustedIcon, - showOfferToTrustedText, - checkIcon - ); - } else { - const showOfferToTrustedIcon = document.createElement('img'); - showOfferToTrustedIcon.src = '/img/user-gray.svg'; - const showOfferToTrustedText = document.createElement('p'); - showOfferToTrustedText.innerText = 'Confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToTrustedContainer.append( - showOfferToTrustedIcon, - showOfferToTrustedText, - checkIcon - ); - } - - const showOfferToTrustedTrustedContainer = document.createElement('div'); - showOfferToTrustedTrustedContainer.classList.add( - 'right-icon-checkboxed-field' - ); - - if (this.show_offer_to_trusted_trusted) { - const showOfferToTrustedTrustedIcon = document.createElement('img'); - showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg'; - const showOfferToTrustedTrustedText = document.createElement('p'); - showOfferToTrustedTrustedText.innerText = 'Sus confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToTrustedTrustedContainer.append( - showOfferToTrustedTrustedIcon, - showOfferToTrustedTrustedText, - checkIcon - ); - } else { - const showOfferToTrustedTrustedIcon = document.createElement('img'); - showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg'; - const showOfferToTrustedTrustedText = document.createElement('p'); - showOfferToTrustedTrustedText.innerText = 'Sus confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToTrustedTrustedContainer.append( - showOfferToTrustedTrustedIcon, - showOfferToTrustedTrustedText, - checkIcon - ); - } - - const showOfferToAllMembersContainer = document.createElement('div'); - showOfferToAllMembersContainer.classList.add( - 'right-icon-checkboxed-field' - ); - - if (this.show_offer_to_all_members) { - const showOfferToAllMembersIcon = document.createElement('img'); - showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg'; - const showOfferToAllMembersText = document.createElement('p'); - showOfferToAllMembersText.innerText = 'Todos'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToAllMembersContainer.append( - showOfferToAllMembersIcon, - showOfferToAllMembersText, - checkIcon - ); - } else { - const showOfferToAllMembersIcon = document.createElement('img'); - showOfferToAllMembersIcon.src = '/img/many-users-gray.svg'; - const showOfferToAllMembersText = document.createElement('p'); - showOfferToAllMembersText.innerText = 'Todos'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToAllMembersContainer.append( - showOfferToAllMembersIcon, - showOfferToAllMembersText, - checkIcon - ); - } - visibilityDiv.append( - showOfferToTrustedContainer, - showOfferToTrustedTrustedContainer, - showOfferToAllMembersContainer - ); - - const otherOfferFeaturesDiv = document.createElement('div'); - otherOfferFeaturesDiv.classList.add('other-desc'); - - const otherOfferFeaturesTitle = document.createElement('p'); - otherOfferFeaturesTitle.classList.add('offer-card-content-title'); - otherOfferFeaturesTitle.innerText = 'Otros'; - otherOfferFeaturesDiv.append(otherOfferFeaturesTitle); - - const areBigNotesAcceptedContainer = document.createElement('div'); - areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field'); - - if (this.are_big_notes_accepted) { - const areBigNotesAcceptedIcon = document.createElement('img'); - areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg'; - const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - areBigNotesAcceptedContainer.append( - areBigNotesAcceptedIcon, - areBigNotesAcceptedText, - checkIcon - ); - } else { - const areBigNotesAcceptedIcon = document.createElement('img'); - areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg'; - const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - areBigNotesAcceptedContainer.append( - areBigNotesAcceptedIcon, - areBigNotesAcceptedText, - checkIcon - ); - } - - otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer); - - const actionButtonsArea = document.createElement('p'); - actionButtonsArea.classList.add('offer-action-buttons-area'); - - const editActionArea = document.createElement('div'); - editActionArea.classList.add('offer-action-area'); - editActionArea.classList.add('subtle-box'); - const editActionIcon = document.createElement('img'); - editActionIcon.src = '/img/edit.svg'; - const editActionText = document.createElement('p'); - editActionText.innerText = 'Editar'; - editActionArea.append(editActionIcon, editActionText); - - const deleteActionArea = document.createElement('div'); - deleteActionArea.classList.add('offer-action-area'); - deleteActionArea.classList.add('subtle-box'); - const deleteActionIcon = document.createElement('img'); - deleteActionIcon.src = '/img/trash-can-darkred.svg'; - const deleteActionText = document.createElement('p'); - deleteActionText.innerText = 'Eliminar'; - deleteActionArea.append(deleteActionIcon, deleteActionText); - deleteActionArea.addEventListener('click', async () => { - await deleteOfferByUuid(this.uuid); - await myOffers.getOffersFromApi(); - await myOffers.render(); - offerDeletedPopup.displayTemporarily(3000); - }); - - actionButtonsArea.append(editActionArea, deleteActionArea); - - offerCard.append( - tradeDescDiv, - premiumDescDiv, - whereDescDiv, - whenDescDiv, - bitcoinMethodsDiv, - visibilityDiv, - otherOfferFeaturesDiv, - actionButtonsArea - ); - - return offerCard; - } - } class MyOffers { constructor(ownOffersContainerElement) { @@ -687,7 +66,17 @@ function offersPage() { const offersData = (await offersResponse.json()).data; if (offersResponse.ok) { for (const record of offersData) { - this.offers.push(new Offer(record)); + this.offers.push( + new OfferCard({ + offerData: record, + deleteButtonCallback: async () => { + await offerService.deleteOffer(record.uuid); + await this.getOffersFromApi(); + await this.render(); + offerDeletedPopup.displayTemporarily(3000); + }, + }) + ); } } } @@ -706,17 +95,8 @@ function offersPage() { } } - async function deleteOfferByUuid(offerUuid) { - await fetch(`/api/offer/${offerUuid}`, { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json', - }, - }); - } - buttonStartCreateOffer.addEventListener('click', () => { - toggleCreateOfferModal(); + createOfferModal.toggle(); }); buttonViewMyOffers.addEventListener('click', async () => { @@ -725,10 +105,6 @@ function offersPage() { toggleViewMyOffersPanel(); }); - closeOffer.addEventListener('click', () => { - toggleCreateOfferModal(); - }); - const myOffers = new MyOffers(ownOffersContainer); } diff --git a/src/front/services/loginService.js b/src/front/services/loginService.js index e97196a..852b438 100644 --- a/src/front/services/loginService.js +++ b/src/front/services/loginService.js @@ -4,14 +4,9 @@ const requestAndRespondLoginChallenge = async ({ onRejectedPubKeyCallback, onRejectedSignatureCallback, }) => { - onRejectedPubKeyCallback = () => { - document.querySelector('#rejected-nostr-nudges').style.display = 'block'; - }; - onRejectedSignatureCallback = onRejectedPubKeyCallback; - let challengeResponse; try { - challengeResponse = await fetch('/api/login/nostr-challenge', { + challengeResponse = await fetch(constants.API_PATHS.loginNostrChallenge, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -49,7 +44,7 @@ const requestAndRespondLoginChallenge = async ({ let verifyResponse; try { - verifyResponse = await fetch('/api/login/nostr-verify', { + verifyResponse = await fetch(constants.API_PATHS.loginNostrVerify, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(signedEvent), diff --git a/src/front/services/offerService.js b/src/front/services/offerService.js index 7b5151c..591a0f0 100644 --- a/src/front/services/offerService.js +++ b/src/front/services/offerService.js @@ -10,6 +10,16 @@ const createOffer = async (offerDetails) => { }); }; +const deleteOffer = async (offerUuid) => { + await fetch(`${constants.API_PATHS.offer}/${offerUuid}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }); +}; + module.exports = { createOffer, + deleteOffer, };