From bb7841c0df981b35bb4d8905f7910d086157b32e Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Fri, 4 Feb 2022 14:24:44 +0000
Subject: [PATCH] Show subscription badge on profile page

---
 src/api/relationships.ts |  2 ++
 src/views/Profile.vue    | 28 ++++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/api/relationships.ts b/src/api/relationships.ts
index 0ea817c..4e417f3 100644
--- a/src/api/relationships.ts
+++ b/src/api/relationships.ts
@@ -7,6 +7,8 @@ export interface Relationship {
   following: boolean,
   followed_by: boolean,
   requested: boolean,
+  subscription_to: boolean,
+  subscription_from: boolean,
 }
 
 export async function follow(
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 4190d0f..634aa9b 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -8,7 +8,11 @@
         <div class="avatar-menu-group">
           <div class="avatar-group">
             <avatar :profile="profile"></avatar>
-            <div class="badge" v-if="isFollowedBy()">Follows you</div>
+            <div class="badges">
+              <div class="badge" v-if="isFollowedBy()">Follows you</div>
+              <div class="badge" v-if="isSubscriptionValid()">Subscription</div>
+              <div class="badge" v-if="isSubscriber()">Subscriber</div>
+            </div>
           </div>
           <div
             v-if="!isLocalUser() || canConnectWallet() || canConfigureSubscription()"
@@ -218,6 +222,20 @@ export default class ProfileView extends Vue {
     return this.relationship.followed_by
   }
 
+  isSubscriptionValid(): boolean {
+    if (!this.relationship) {
+      return false
+    }
+    return this.relationship.subscription_to
+  }
+
+  isSubscriber(): boolean {
+    if (!this.relationship) {
+      return false
+    }
+    return this.relationship.subscription_from
+  }
+
   canFollow(): boolean {
     if (!this.relationship) {
       return false
@@ -393,7 +411,7 @@ $avatar-size: 170px;
     flex-direction: row;
     flex-grow: 1;
     flex-wrap: wrap;
-    gap: $block-inner-padding;
+    gap: $block-inner-padding / 2 $block-inner-padding;
   }
 
   .avatar {
@@ -405,6 +423,12 @@ $avatar-size: 170px;
     width: $avatar-size;
   }
 
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $block-inner-padding / 2 $block-inner-padding;
+  }
+
   .badge {
     border: 1px solid $btn-text-color;
     border-radius: $btn-border-radius;