Implement patronage update

.dynamic/client/patron.html

@@ -30,7 +30,7 @@
 
     <ul>
       <li><strong>Patron since:</strong> ${patronSinceRelative} (${patronSinceAbsolute})</strong>
-      <li><strong>Amount:</strong> €${patronageAmount}/month</li>
+      <li><strong>Amount:</strong> €<span id='patronageAmountDisplay'>${patronageAmount}</span>/month</li>
       <li><strong>Last payment:</strong> ${currentPeriodStartRelative} (${currentPeriodStartAbsolute})</li>
       <li><strong>Next payment:</strong> ${currentPeriodEndRelative} (${currentPeriodEndAbsolute})</li>
     </ul>
@@ -43,7 +43,7 @@
       <label for='amount'>Amount (€/month):<label>
       <input id='patronageAmount' type='text' value='${patronageAmount}'>
       <br><br>
-      <input type='submit' value='Update my patronage' />
+      <input id='updateButton' type='submit' value='Update my patronage' />
     </form>
 
     <h2>Pause your patronage</h2>
@@ -64,6 +64,8 @@
 
     <script>
       const subscriptionId = '${subscriptionId}'
+      const planId = '${planId}'
+      const itemId = '${itemId}'
       const currentAmount = ${patronageAmount}
 
       ${sweetAlert2}

.dynamic/client/patron.js

 window.addEventListener('load', _ => {
 
   $ = document.querySelector.bind(document)
-  const SweetAlert2 = Swal
+  const Modal = Swal
 
   const socket = new WebSocket(`wss://${window.location.hostname}/patron`)
 
@@ -11,8 +11,31 @@ window.addEventListener('load', _ => {
 
   // Display received messages.
   socket.onmessage = message => {
-    // message = JSON.parse(message.data)
-    $('#received').innerHTML += `<li>${message}</li>`
+    response = JSON.parse(message.data)
+
+    if (response.error) {
+      Modal.fire(
+        'Error',
+        error,
+        'error'
+      )
+      return
+    }
+
+    switch (response.for) {
+      case 'update':
+        $('#updateButton').value = 'Update my patronage'
+        $('#updateButton').disabled = false
+        $('#patronageAmount').value = ''
+        $('#patronageAmountDisplay').innerHTML = response.amount
+        Modal.fire(
+          'Patronage updated',
+          `Your patronage has been updated to €${response.amount}/month, starting with your next payment. Thank you for supporting us.`,
+          'success'
+        )
+        break;
+    }
+
   }
 
   //
@@ -21,7 +44,7 @@ window.addEventListener('load', _ => {
 
   async function confirmCancellation () {
     // return window.confirm('Are you sure you want to cancel your patronage?')
-    return (await SweetAlert2.fire({
+    return (await Modal.fire({
       title: 'Are you sure you want to cancel your patronage?',
       text: "",
       type: 'warning',
@@ -40,9 +63,15 @@ window.addEventListener('load', _ => {
       const command = {
         action: commandName,
         subscriptionId,
+        planId,
+        itemId
       }
 
-      if (commandName === 'update') command.amount = $('#patronageAmount').value
+      if (commandName === 'update') {
+        command.amount = $('#patronageAmount').value
+        $('#updateButton').value = 'Updating…'
+        $('#updateButton').disabled = true
+      }
 
       let proceed = true
       if (commandName === 'cancel') proceed = await confirmCancellation()
@@ -50,12 +79,6 @@ window.addEventListener('load', _ => {
       if (!proceed) return
 
       socket.send(JSON.stringify(command))
-
-      // Swal.fire(
-      //   'Patronage canceled',
-      //   'Thank you for supporting us. If you have any feedback, please contact hello@small-tech.org.',
-      //   'success'
-      // )
     })
   }
 

.dynamic/https/get/patron.js

@@ -41,6 +41,9 @@ module.exports = async (request, response, next) => {
   const subscriptionId = subscription.id
   const subscriptionStatus = subscription.status
 
+  const itemId = subscription.items.data[0].id
+  const planId = subscription.plan.id
+
   const patronSince = timestampToDate(subscription.billing_cycle_anchor)
   const patronSinceMoment = moment(patronSince)
   const patronSinceRelative = patronSinceMoment.fromNow()
@@ -58,8 +61,6 @@ module.exports = async (request, response, next) => {
 
   const patronageAmount = subscription.quantity
 
-  console.log(subscription.billing_cycle_anchor)
-
   // Newly-created?
   let newPatronMessage = ''
   // TODO: Base the display of this message on whether it is 1+ day after the subscription was created or not.

.dynamic/wss/patron.js

+const stripe = require('stripe')('sk_test_GT9DfvDjhljTdIe3rKyEHtyU00RVQ0FCNP')
+
 module.exports = (webSocket, request) => {
-  console.log('Socket route ready')
-  webSocket.on('message', (data) => {
-    console.log('Received:', JSON.parse(data))
+  webSocket.on('message', async data => {
+
+    const command = JSON.parse(data)
+
+    switch (command.action) {
+      case 'update':
+        let result
+        try {
+          result = await stripe.subscriptions.update(command.subscriptionId, {
+            prorate: false,
+            items: [{
+              id: command.itemId,
+              plan: command.planId,
+              quantity: command.amount
+            }]
+          })
+        } catch (error) {
+          webSocket.send(JSON.stringify({for: command.action, error}))
+        }
+        webSocket.send(JSON.stringify({for: command.action, amount: result.quantity}))
+        break;
+      case 'pause':
+        console.log('PAUSE')
+        break;
+      case 'cancel':
+        console.log('CANCEL')
+        break;
+      default:
+        console.log(`Unknown command received: ${command.action}`)
+    }
   })
 }