Use payment options to determine subscription page location

src/api/users.ts

@@ -1,3 +1,5 @@
+import { RouteLocationRaw } from "vue-router"
+
 import { BACKEND_URL } from "@/constants"
 import { createDidFromEthereumAddress } from "@/utils/did"
 import { PAGE_SIZE, http } from "./common"
@@ -8,6 +10,13 @@ export interface ProfileField {
   verified_at: string | null;
 }
 
+export interface ProfilePaymentOption {
+  type: string,
+  name?: string,
+  href?: string,
+  price?: number,
+}
+
 interface Source {
   note: string | null;
   fields: ProfileField[];
@@ -23,13 +32,12 @@ export interface Profile {
   avatar: string | null;
   header: string | null;
   identity_proofs: ProfileField[];
+  payment_options: ProfilePaymentOption[];
   fields: ProfileField[];
 
   followers_count: number;
   following_count: number;
   statuses_count: number;
-
-  subscription_page_url: string | null;
 }
 
 export interface User extends Profile {
@@ -56,6 +64,28 @@ export class ProfileWrapper {
     return null
   }
 
+  getSubscriptionPageLocation(): string | RouteLocationRaw | null {
+    console.log(this.payment_options)
+    for (const option of this.payment_options) {
+      if (
+        option.type === "link" &&
+        option.name === "EthereumSubscription" &&
+        option.href
+      ) {
+        return option.href
+      } else if (
+        option.type === "ethereum-subscription" ||
+        option.type === "monero-subscription"
+      ) {
+        return {
+          name: "profile-subscription",
+          params: { profileId: this.id },
+        }
+      }
+    }
+    return null
+  }
+
 }
 
 interface UserCreateForm {

src/components/Subscription.vue

@@ -143,11 +143,11 @@ const guest: Profile = {
   avatar: null,
   header: null,
   identity_proofs: [],
+  payment_options: [],
   fields: [],
   followers_count: 0,
   following_count: 0,
   statuses_count: 0,
-  subscription_page_url: null,
 }
 
 const { currentUser } = $(useCurrentUser())

src/views/Profile.vue

@@ -85,24 +85,24 @@
               <template v-else>Unfollow</template>
             </button>
             <template v-if="canSubscribe()">
-              <router-link
-                v-if="isLocalUser()"
-                class="btn"
-                title="Pay for subscription"
-                :to="{ name: 'profile-subscription', params: { profileId: profile.id } }"
-              >
-                Subscribe
-              </router-link>
               <a
-                v-else-if="profile.subscription_page_url"
+                v-if="typeof profile.getSubscriptionPageLocation() === 'string'"
                 class="btn"
                 title="Pay for subscription"
-                :href="profile.subscription_page_url"
+                :href="profile.getSubscriptionPageLocation() as string"
                 target="_blank"
                 rel="noreferrer"
               >
                 Subscribe
               </a>
+              <router-link
+                v-else-if="profile.getSubscriptionPageLocation() !== null"
+                class="btn"
+                title="Pay for subscription"
+                :to="profile.getSubscriptionPageLocation()"
+              >
+                Subscribe
+              </router-link>
             </template>
           </div>
         </div>
@@ -461,7 +461,7 @@ function canSubscribe(): boolean {
     Boolean(blockchain?.features.subscriptions) &&
     profile !== null &&
     profile.getVerifiedEthereumAddress() !== null &&
-    profile.subscription_page_url !== null &&
+    profile.getSubscriptionPageLocation() !== null &&
     !isCurrentUser()
   )
 }