Add annotation for subscription page link

src/components/SubscriptionMonero.vue

@@ -21,7 +21,7 @@
       <input
         type="text"
         v-model="senderAcct"
-        placeholder="Enter your username or fediverse address (user@example.org)"
+        placeholder="Enter your username or Fediverse address (username@example.org)"
       >
       <button
         type="submit"

src/components/SubscriptionSettingsMonero.vue

@@ -11,9 +11,14 @@
         Subscriptions are not enabled
       </template>
     </div>
-    <div class="payment-page" v-if="subscriptionOption !== null && !isLoading">
-      <router-link :to="{ name: 'profile-subscription', params: { profileId: ensureCurrentUser().id } }">
-        Payment page
+    <div class="subscription-page" v-if="subscriptionOption !== null && !isLoading">
+      <div>
+        Subscribers can pay for subscription by navigating to
+        <br>
+        your personal subscription page:
+      </div>
+      <router-link :to="getSubscriptionPagePath()">
+        {{ getSubscriptionPageUrl() }}
       </router-link>
     </div>
     <form v-if="canEnableSubscriptions()">
@@ -44,6 +49,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue"
 import { $, $ref } from "vue/macros"
+import { useRouter } from "vue-router"
 
 import {
   getSubscriptionOptions,
@@ -57,6 +63,7 @@ import {
 import Loader from "@/components/Loader.vue"
 import { useCurrentUser } from "@/store/user"
 
+const router = useRouter()
 const {
   ensureAuthToken,
   ensureCurrentUser,
@@ -81,6 +88,18 @@ async function loadSubscriptionConfig() {
   }) || null
 }
 
+function getSubscriptionPagePath(): string {
+  const route = router.resolve({
+    name: "profile-subscription",
+    params: { profileId: ensureCurrentUser().id },
+  })
+  return route.fullPath
+}
+
+function getSubscriptionPageUrl(): string {
+  return window.location.origin + getSubscriptionPagePath()
+}
+
 function canEnableSubscriptions(): boolean {
   return (
     !isLoading &&
@@ -126,7 +145,11 @@ async function enableSubscriptions() {
   }
 }
 
-.payment-page {
+.subscription-page {
+  display: flex;
+  flex-direction: column;
+  gap: $block-inner-padding / 2;
+
   a {
     font-size: 16px;
     text-decoration: underline;