Fix coupon reward payments list and reward supply for coupon codes

apps/api/src/app/services/RewardCoinService.ts

@@ -3,6 +3,7 @@ import {
     ERC20Document,
     RewardCoin,
     RewardCoinDocument,
+    RewardCoinPaymentDocument,
     Transaction,
     WalletDocument,
 } from '@thxnetwork/api/models';
@@ -27,8 +28,8 @@ export default class RewardCoinService implements IRewardService {
         return { ...reward.toJSON(), erc20 };
     }
 
-    async decoratePayment(payment: TBaseRewardPayment) {
-        return payment;
+    async decoratePayment(payment: RewardCoinPaymentDocument) {
+        return payment.toJSON();
     }
 
     findById(id: string) {

apps/api/src/app/services/RewardCouponService.ts

@@ -9,14 +9,14 @@ export default class RewardCouponService implements IRewardService {
 
     async decorate({ reward }) {
         const couponCodes = await CouponCode.find({ couponRewardId: reward._id });
-        const progress = {
+        const limitSupply = {
             count: await this.models.payment.countDocuments({
-                rewardId: reward._id,
+                rewardId: reward.id,
             }),
-            limit: couponCodes.length,
+            max: couponCodes.length,
         };
 
-        return { ...reward.toJSON(), progress, limit: couponCodes.length };
+        return { ...reward.toJSON(), limitSupply };
     }
 
     async decoratePayment(payment: TRewardPayment) {

apps/api/src/app/services/RewardCustomService.ts

@@ -1,4 +1,4 @@
-import { Identity, RewardCustom, RewardCustomPayment, Webhook } from '../models';
+import { Identity, RewardCustom, RewardCustomPayment, RewardCustomPaymentDocument, Webhook } from '../models';
 import { IRewardService } from './interfaces/IRewardService';
 import { Event } from '@thxnetwork/common/enums';
 import WebhookService from './WebhookService';
@@ -14,8 +14,8 @@ export default class RewardCustomService implements IRewardService {
         return { ...reward.toJSON(), isDisabled: !identities.length };
     }
 
-    async decoratePayment(payment: TRewardPayment): Promise<TRewardPayment> {
-        return payment;
+    async decoratePayment(payment: RewardCustomPaymentDocument): Promise<TRewardPayment> {
+        return payment.toJSON();
     }
 
     async getValidationResult({ reward, account }: { reward: TReward; account?: TAccount }) {

apps/api/src/app/services/RewardService.ts

@@ -96,10 +96,10 @@ export default class RewardService {
                             author: {
                                 username: owner.username,
                             },
+                            limitSupply,
                             // Decorated properties may override generic properties
                             ...decorated,
                             limit,
-                            limitSupply,
                         };
                     } catch (error) {
                         logger.error(error);
@@ -174,12 +174,11 @@ export default class RewardService {
                 const payments = await serviceMap[rewardVariant].models.payment.find({ sub });
                 const callback = payments.map(async (p: Document & TRewardPayment) => {
                     const decorated = await serviceMap[rewardVariant].decoratePayment(p);
-                    return { ...decorated.toJSON(), rewardVariant };
+                    return { ...decorated, rewardVariant };
                 });
                 return await Promise.all(callback);
             }),
         );
-
         return payments
             .filter((result) => result.status === 'fulfilled')
             .map((result: any) => result.value)

apps/app/src/components/card/BaseCardReward.vue

@@ -33,14 +33,8 @@
                 <div v-if="reward.limitSupply.max" class="d-flex align-items-center">
                     <span class="card-text me-1"> Supply: </span>
                     <b-badge variant="primary" class="ms-1 p-1 px-2 bg-primary">
-                        <span
-                            :class="{
-                                'text-danger': progressPercentage >= 0.9,
-                                'text-warning': progressPercentage > 0.75 && progressPercentage < 0.9,
-                                'text-accent': progressPercentage >= 0 && progressPercentage <= 0.75,
-                            }"
-                        >
-                            {{ reward.limitSupply.count }}
+                        <span :class="limitSupplyVariant">
+                            {{ reward.limitSupply.max - reward.limitSupply.count }}
                         </span>
                         <span class="card-text">/{{ reward.limitSupply.max }}</span>
                     </b-badge>
@@ -63,8 +57,8 @@
                     {{ btnLabel }}
                     <b-progress
                         v-if="reward.limit.max"
-                        v-b-tooltip
-                        variant="primary"
+                        v-b-tooltip.bottom
+                        :variant="limitVariant"
                         :title="`You can purchase this reward ${reward.limit.max} times.`"
                         :value="reward.limit.count"
                         :max="reward.limit.max"
@@ -118,6 +112,16 @@ export default defineComponent({
     },
     computed: {
         ...mapStores(useAccountStore),
+        limitSupplyVariant() {
+            if (this.limitSupplyPerct >= 0.9) return 'text-danger';
+            if (this.limitSupplyPerct > 0.75 && this.limitSupplyPerct < 0.9) return 'text-warning';
+            if (this.limitSupplyPerct >= 0 && this.limitSupplyPerct <= 0.75) return 'text-success';
+        },
+        limitVariant() {
+            if (this.limitPerct >= 0.75) return 'danger';
+            if (this.limitPerct > 0.5 && this.limitPerct < 0.75) return 'warning';
+            if (this.limitPerct >= 0 && this.limitPerct <= 0.5) return 'success';
+        },
         btnLabel() {
             if (this.reward.isLimitSupplyReached) {
                 return 'Sold out';
@@ -138,10 +142,14 @@ export default defineComponent({
         isDisabled() {
             return !this.reward.isAvailable;
         },
-        progressPercentage: function () {
-            if (!this.reward.limitSupply.max) return 100;
+        limitSupplyPerct: function () {
+            if (!this.reward.limitSupply.max) return 1;
             return this.reward.limitSupply.count / this.reward.limitSupply.max;
         },
+        limitPerct: function () {
+            if (!this.reward.limit.max) return 1;
+            return this.reward.limit.count / this.reward.limit.max;
+        },
         expiryDate: function () {
             return !this.reward.isExpired && this.reward.expiry
                 ? formatDistance(new Date(this.reward.expiry.date), new Date(this.reward.expiry.now), {

apps/app/src/stores/Wallet.ts

@@ -216,21 +216,22 @@ export const useWalletStore = defineStore('wallet', {
             this.erc721[index] = { ...token, component: 'BaseCardERC721' };
         },
         async list() {
-            if (!this.wallet) return;
             const { api } = useAccountStore();
             this.isLoading = true;
 
-            const [erc20, erc721, erc1155, payments] = await Promise.all([
-                api.erc20.list({ walletId: this.wallet._id }),
-                api.erc721.list({ walletId: this.wallet._id }),
-                api.erc1155.list({ walletId: this.wallet._id }),
+            const [payments] = await Promise.all([
+                // api.erc20.list(this.wallet ? { walletId: this.wallet._id } : {}),
+                // api.erc721.list(this.wallet ? { walletId: this.wallet._id } : {}),
+                // api.erc1155.list(this.wallet ? { walletId: this.wallet._id } : {}),
                 api.request.get('/v1/rewards/payments'),
             ]);
 
+            console.log(payments);
+
             // TODO Refactor to using a component map with r.variant as key
-            this.erc20 = erc20.map((t: TERC20Token) => ({ ...t, component: 'BaseCardERC20' }));
-            this.erc721 = erc721.map((t: TERC721Token) => ({ ...t, component: 'BaseCardERC721' }));
-            this.erc1155 = erc1155.map((t: TERC721Token) => ({ ...t, component: 'BaseCardERC721' }));
+            // this.erc20 = erc20.map((t: TERC20Token) => ({ ...t, component: 'BaseCardERC20' }));
+            // this.erc721 = erc721.map((t: TERC721Token) => ({ ...t, component: 'BaseCardERC721' }));
+            // this.erc1155 = erc1155.map((t: TERC721Token) => ({ ...t, component: 'BaseCardERC721' }));
             this.couponCodes = payments
                 .filter((p: { rewardVariant: RewardVariant }) => p.rewardVariant === RewardVariant.Coupon)
                 .map((t: TRewardCouponPayment[]) => ({