feat: add sub price and period to the subcard and subinfo popup on su… (#962)

* feat: add sub price and period to the subcard and subinfo popup on sub page

* feat: adding currency, amount and period from backend

* fix: lint issues

* fix: fixing build by adding return type to computed

Co-authored-by: Irshad PI <[email protected]>

Author: ldmweb

src/backend/subscription.ts

@@ -4,6 +4,9 @@ export interface ISubscriptionResponse {
 	subscriptionId: string
 	authorID: string
 	username: string
+	amount: number
+	period: string
+	currency: string
 	tier: { name: string; id: string }
 	createdAt: number
 	isActive: boolean

src/components/popups/SubInfosPopup.vue

@@ -27,6 +27,11 @@
 					<div class="bg-neutral ml-4 bg-opacity-25 rounded-3xl border border-neutral px-3 py-1 text-neutral text-xs">
 						{{ s.tier.name }}
 					</div>
+					<div class="flex justify-center items-end ml-4 text-neutral">
+						<p class="font-semibold text-lg">{{ currency }}{{ s.amount }}</p>
+						<p>/</p>
+						<p>{{ s.period }}</p>
+					</div>
 				</div>
 				<button class="focus:outline-none bg-gray1 dark:bg-gray5 rounded-full p-1" @click="$emit(`close`)">
 					<CloseIcon />
@@ -124,7 +129,7 @@ import DownloadIcon from '@/components/icons/Download.vue'
 import BasicConfirmAlert from '@/components/popups/BasicConfirmAlert.vue'
 import { ActionType, ISubscriptionWithProfile, namespace as subscriptionNamespace } from '@/store/subscriptions'
 import { getSubscriptionTransactions, SubsTransaction } from '@/backend/subscription'
-import { getBillingPortalUrl } from '@/backend/payment'
+import { getBillingPortalUrl, getCurrencySymbol } from '@/backend/payment'
 
 interface IData {
 	avatar: string | ArrayBuffer
@@ -147,6 +152,11 @@ export default Vue.extend({
 			showAlert: false,
 		}
 	},
+	computed: {
+		currency(): string {
+			return getCurrencySymbol(this.s.currency)
+		},
+	},
 	async created() {
 		if (this.s.avatar) {
 			this.avatar = await getPhotoFromIPFS(this.s.avatar)

src/components/subscriptions/SubCard.vue

@@ -32,6 +32,11 @@
 		>
 			<CrownIcon class="text-neutral mr-2 w-5 h-5" /><span class="truncate text-neutral">{{ s.tier.name }}</span>
 		</div>
+		<div class="flex justify-center items-end mb-4 text-neutral">
+			<p class="font-semibold text-lg">{{ currency }}{{ s.amount }}</p>
+			<p>/</p>
+			<p>{{ s.period }}</p>
+		</div>
 		<p class="text-gray5 dark:text-gray3 text-sm w-full mb-2">
 			Subscribed since <span class="font-semibold">{{ $formatDate(s.createdAt, true) }}</span>
 		</p>
@@ -55,6 +60,7 @@ import CrownIcon from '@/components/icons/Crown.vue'
 import MoreIcon from '@/components/icons/More.vue'
 import PenIcon from '@/components/icons/Pencil.vue'
 import { ISubscriptionWithProfile } from '@/store/subscriptions'
+import { getCurrencySymbol } from '@/backend/payment'
 
 interface IData {
 	avatar: string | ArrayBuffer
@@ -77,6 +83,11 @@ export default Vue.extend({
 			showPopup: false,
 		}
 	},
+	computed: {
+		currency(): string {
+			return getCurrencySymbol(this.s.currency)
+		},
+	},
 	async created() {
 		if (this.s.avatar) {
 			this.avatar = await getPhotoFromIPFS(this.s.avatar)