Checkout fixes and improvements (#6181)

* Adjust to new payment method IDs

* Sound improvements

* NFC: Handle no data/empty tag case

Fixes #6154.
This commit is contained in:
d11n 2024-09-02 11:20:29 +02:00 committed by GitHub
parent 9c8fe9277d
commit b49f6c3f86
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 24 deletions

View File

@ -24,14 +24,14 @@ Vue.component("lnurl-withdraw-checkout", {
} = this.model
const lnurlwAvailable =
// Either we have LN or LNURL available directly
!!availablePaymentMethods.find(pm => ['BTC_LNURLPAY', 'BTC_LightningLike'].includes(pm.paymentMethodId)) ||
!!availablePaymentMethods.find(pm => ['BTC-LNURL', 'BTC-LN'].includes(pm.paymentMethodId)) ||
// Or the BIP21 payment URL flags Lightning support
!!paymentUrl.match(/lightning=ln/i)
const isAvailable = activePaymentMethodId === 'BTC_LNURLPAY' || (
const isAvailable = activePaymentMethodId === 'BTC-LNURL' || (
// Unified QR/BIP21 case
(activePaymentMethodId === 'BTC' && isUnified && lnurlwAvailable) ||
(activePaymentMethodId === 'BTC-CHAIN' && isUnified && lnurlwAvailable) ||
// Lightning with LNURL available
(activePaymentMethodId === 'BTC_LightningLike' && lnurlwAvailable))
(activePaymentMethodId === 'BTC-LN' && lnurlwAvailable))
return isAvailable && (this.nfcSupported || this.testFallback)
},
testFallback () {
@ -100,7 +100,7 @@ Vue.component("lnurl-withdraw-checkout", {
const body = JSON.stringify({ lnurl: data, invoiceId: this.model.invoiceId, amount: this.amount })
const opts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }
const response = await fetch(this.url, opts)
// Handle response
try {
const result = await response.text()

View File

@ -92,6 +92,7 @@ function initApp() {
const srvModel = initialSrvModel;
return {
srvModel,
audioContext: new AudioContext(),
displayPaymentDetails: false,
remainingSeconds: srvModel.expirationSeconds,
emailAddressInput: "",
@ -345,17 +346,12 @@ function initApp() {
return value ? value.replace(/\n/ig, '<br>') : '';
},
playSound (soundName) {
// sound
const sound = this[soundName + 'Sound'];
if (sound && !sound.playing) {
const { audioContext, audioBuffer } = sound;
const source = audioContext.createBufferSource();
source.onended = () => { sound.playing = false; };
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();
sound.playing = true;
}
const audioBuffer = this[soundName + 'Sound'];
if (!audioBuffer || this.audioContext.state === 'suspended') return;
const source = this.audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(this.audioContext.destination);
source.start();
},
async celebratePayment (duration) {
// sound
@ -375,12 +371,10 @@ function initApp() {
}
},
async prepareSound (url) {
const audioContext = new AudioContext();
const response = await fetch(url)
if (!response.ok) return console.error(`Could not load payment sound, HTTP error ${response.status}`);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
return { audioContext, audioBuffer, playing: false };
return await this.audioContext.decodeAudioData(arrayBuffer);
},
async setupNFC () {
try {
@ -402,12 +396,16 @@ function initApp() {
};
await ndef.scan({ signal: this.nfc.readerAbortController.signal })
ndef.onreadingerror = () => this.reportNfcError('Could not read NFC tag')
ndef.onreadingerror = () => this.handleNFCError('Could not read NFC tag')
ndef.onreading = async ({ message }) => {
const record = message.records[0]
const textDecoder = new TextDecoder('utf-8')
const decoded = textDecoder.decode(record.data)
this.$emit('read-nfc-data', decoded)
if (record && record.data) {
const textDecoder = new TextDecoder('utf-8')
const decoded = textDecoder.decode(record.data)
this.$emit('read-nfc-data', decoded)
} else {
this.handleNFCError('Could not read NFC tag: No data')
}
}
if (inModal) {
@ -442,7 +440,8 @@ function initApp() {
handleNFCResult() { // child component reports result for handling the data
this.$set(this.nfc, 'submitting', false);
},
handleNFCError(message) { // internal or via child component reporting failure of handling the data
handleNFCError(message) {
// internal or via child component reporting failure of handling the data
this.playSound('error');
this.$set(this.nfc, 'submitting', false);
this.$set(this.nfc, 'errorMessage', message);