...
 
Commits (3)
......@@ -3,11 +3,16 @@
text-align: center;
}
.your-patronage-is-paused-message {
#your-patronage-is-paused-message, #offline-message {
font-size: 1.5em;
text-align: center;
border-radius: 6px;
background-color: #FEE59E;
color: #783806;
padding: 0.25em;
}
\ No newline at end of file
}
#offline-message {
background-color: #C7D4CC;
color: #304349;
}
......@@ -28,15 +28,19 @@
<section id='active-patronage' ${isActive ? '' : 'hidden'}>
<h1>Your patronage</h1>
<p id='offline-message' hidden>You’re offline.</p>
<section id='resume-your-patronage' ${isPaused ? '' : 'hidden'}>
<p class='your-patronage-is-paused-message'>Your patronage is paused.</p>
<p id='your-patronage-is-paused-message'>Your patronage is paused.</p>
<h2>Resume your patronage</h2>
<p>This will resume your patronage effective immediately. You can pause it again at any point.</p>
<form id='resume'>
<input id='resume-button' type='submit' value='Resume my patronage' />
<fieldset id='resume-fields'>
<input id='resume-button' type='submit' value='Resume my patronage' />
</fieldset>
</form>
</section>
......@@ -62,10 +66,12 @@
<p>This will update your patronage amount effective immediately.</p>
<form id='update'>
<label for='amount'>Amount (€/month):<label>
<input id='patronageAmount' type='text' value='${patronageAmount}'>
<br><br>
<input id='update-button' type='submit' value='Update my patronage' />
<fieldset id='update-fields' disabled>
<label for='amount'>Amount (€/month):<label>
<input id='patronageAmount' type='text' value='${patronageAmount}'>
<br><br>
<input id='update-button' type='submit' value='Update my patronage' />
</fieldset>
</form>
</section>
......@@ -75,7 +81,9 @@
<p>This will pause your patronage effective immediately. You can resume it again at any point.</p>
<form id='pause'>
<input id='pause-button' type='submit' value='Pause my patronage' />
<fieldset id='pause-fields' disabled>
<input id='pause-button' type='submit' value='Pause my patronage' />
</fieldset>
</form>
</section>
......@@ -85,7 +93,9 @@
<p>This will stop your monthly patronage effective immediately.</p>
<form id='cancel'>
<input id='cancel-button' type='submit' value='Cancel my patronage' />
<fieldset id='cancel-fields' disabled>
<input id='cancel-button' type='submit' value='Cancel my patronage' />
</fieldset>
</form>
</section>
</section>
......
const $ = document.querySelector.bind(document)
window.addEventListener('load', _ => {
$ = document.querySelector.bind(document)
const Modal = Swal
const socket = new WebSocket(`wss://${window.location.hostname}/patron`)
// Display the state of the connection.
socket.onopen = _ => { $('#status').innerHTML = '<span style="color: green">Online</span>' }
socket.onclose = _ => { $('#status').innerHTML = 'Offline' }
// Handle connectivity.
socket.onopen = _ => {
$('#status').innerHTML = '<span style="color: green">Online</span>'
enableActions()
}
socket.onclose = _ => {
$('#status').innerHTML = 'Offline'
enableActions(false)
$('#offline-message').hidden = false
}
socket.onerror = error => {
Modal.fire('Connection error', error, 'error')
}
// Display received messages.
socket.onmessage = message => {
response = JSON.parse(message.data)
if (response.error) {
Modal.fire('Error', error, 'error')
Modal.fire('Server error', error, 'error')
return
}
......@@ -75,7 +90,15 @@ window.addEventListener('load', _ => {
}
//
// Interface
// Connectivity.
//
function enableActions (enabled = true) {
['update', 'pause', 'resume', 'cancel'].forEach(action => $(`#${action}-fields`).disabled = !enabled)
}
//
// Interface.
//
async function confirmCancellation () {
......@@ -103,6 +126,13 @@ window.addEventListener('load', _ => {
itemId
}
// Sanity check: socket must be open.
// (Note: our validation should have caught this by this stage and it’s a bug if it hasn’t.)
if (socket.readyState !== WebSocket.OPEN) {
Modal.fire('Not connected', `Sorry, we cannot ${command.action} your patronage right now as we cannot connect to the server.`, 'error')
return
}
if (commandName === 'update') {
command.amount = $('#patronageAmount').value
$('#update-button').value = 'Updating…'
......@@ -128,7 +158,12 @@ window.addEventListener('load', _ => {
$('#cancel-button').value = 'Cancelling…'
}
socket.send(JSON.stringify(command))
try {
socket.send(JSON.stringify(command))
} catch (error) {
console.log('Cannot send message', error)
Modal.fire('Cannot send message', error, 'error')
}
})
}
......
......@@ -34,11 +34,16 @@ module.exports = (webSocket, request) => {
const command = JSON.parse(data)
console.log(` 🤗 Patronage: ${command.action} ${command.itemId} ${command.action === 'update' ? `(to €${command.amount}/month)` : ''}`)
let result
switch (command.action) {
case 'update':
// Update the patronage amount, starting with the next payment (not prorated).
try {
result = await stripe.subscriptions.update(
......