Darken expired subscriptions on subscription setup page

src/api/subscriptions.ts

@@ -232,6 +232,7 @@ export interface Subscription {
   id: number,
   sender: Profile,
   sender_address: string,
+  expires_at: string,
 }
 
 export async function getSubscribers(

src/components/SubscriptionSetup.vue

@@ -38,6 +38,7 @@
       <div
         v-for="subscription in subscribers"
         class="subscriber"
+        :class="{ expired: !isSubscriptionActive(subscription) }"
         :key="subscription.id"
         @click="onSubscriberSelected(subscription)"
       >
@@ -69,6 +70,8 @@
 import { onMounted, watch } from "vue"
 import { $, $$, $ref } from "vue/macros"
 
+import { DateTime } from "luxon"
+
 import { Profile, ProfileWrapper } from "@/api/users"
 import {
   configureSubscriptions,
@@ -241,6 +244,11 @@ async function onEnableSubscriptions() {
   isLoading = false
 }
 
+function isSubscriptionActive(subscription: Subscription): boolean {
+  const expiresAt = DateTime.fromISO(subscription.expires_at)
+  return expiresAt > DateTime.now()
+}
+
 function onSubscriberSelected(subscription: Subscription) {
   subscriberAddress = subscription.sender_address
   subscriptionState = null
@@ -351,6 +359,10 @@ async function onWithdrawReceived() {
   input {
     width: 400px;
   }
+
+  .subscriber.expired {
+    opacity: 0.5;
+  }
 }
 
 .loader {