Improves coupon code and discord role cards and adds mentions to sugg…

…ested x post
thxprotocol · Jun 28, 2024 · 4ac8038 · 4ac8038
1 parent 50c88f3
commit 4ac8038
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 49 deletions.
diff --git a/apps/api/src/app/services/RewardCouponService.ts b/apps/api/src/app/services/RewardCouponService.ts
@@ -1,4 +1,4 @@
-import { CouponCode, RewardCoupon, RewardCouponPayment } from '../models';
+import { Brand, CouponCode, Pool, RewardCoupon, RewardCouponPayment } from '../models';
 import { IRewardService } from './interfaces/IRewardService';
 
 export default class RewardCouponService implements IRewardService {
@@ -21,7 +21,16 @@ export default class RewardCouponService implements IRewardService {
 
     async decoratePayment(payment: TRewardPayment) {
         const code = await CouponCode.findById(payment.couponCodeId);
-        return { ...payment.toJSON(), code: code && code.code };
+        const pool = await Pool.findById(payment.poolId);
+        const brand = await Brand.findOne({ poolId: pool.id });
+        const reward = await RewardCoupon.findById(code.couponRewardId);
+
+        return {
+            ...payment.toJSON(),
+            code: code && code.code,
+            brand: { name: pool && pool.settings.title, logoImgURL: brand && brand.logoImgUrl },
+            reward: { title: reward && reward.title, webshopURL: reward && reward.webshopURL },
+        };
     }
 
     async getValidationResult({ reward }: { reward: TReward; account?: TAccount }) {

diff --git a/apps/app/components.d.ts b/apps/app/components.d.ts
@@ -139,6 +139,7 @@ declare module 'vue' {
     BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
     BContainer: typeof import('bootstrap-vue-next')['BContainer']
     BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownDevider: typeof import('bootstrap-vue-next')['BDropdownDevider']
     BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
     BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
     BDropdownText: typeof import('bootstrap-vue-next')['BDropdownText']

diff --git a/apps/app/src/components/blockquote/BaseBlockquoteTwitterQuery.vue b/apps/app/src/components/blockquote/BaseBlockquoteTwitterQuery.vue
@@ -29,19 +29,19 @@
         <blockquote v-if="operators.hashtags && operators.hashtags.length" class="mb-1">
             <div class="card-text ps-2 position-relative">
                 <div class="d-flex text-opaque pb-1">Your post contains hashtags:</div>
-                <em v-for="hashtag of operators.hashtags">#{{ hashtag }}</em>
+                <em v-for="hashtag of operators.hashtags" class="me-1">#{{ hashtag }}</em>
             </div>
         </blockquote>
         <blockquote v-if="operators.mentions && operators.mentions.length" class="mb-1">
             <div class="card-text ps-2 position-relative">
                 <div class="d-flex text-opaque pb-1">Your post mentions:</div>
-                <em v-for="mention of operators.mentions">@{{ mention }}</em>
+                <em v-for="mention of operators.mentions" class="me-1">@{{ mention }}</em>
             </div>
         </blockquote>
         <blockquote v-if="operators.url && operators.url.length" class="mb-1">
             <div class="card-text ps-2 position-relative">
                 <div class="d-flex text-opaque pb-1">Your post contains URL:</div>
-                <span v-for="(url, index) of operators.url">
+                <span v-for="(url, index) of operators.url" class="me-1">
                     <code> https://{{ url }} </code>
                     <span v-if="index === operators.url.length">,</span>
                 </span>

diff --git a/apps/app/src/components/card/BaseCardCouponCode.vue b/apps/app/src/components/card/BaseCardCouponCode.vue
@@ -1,40 +1,55 @@
 <template>
-    <b-card body-class="d-flex align-items-center py-2">
-        <div class="pe-3">
-            <i class="fas fa-tags text-primary"></i>
-        </div>
-        <div class="flex-grow-1 d-flex align-items-center justify-content-between">
-            <b-link
-                v-if="isURL"
-                size="sm"
-                style="text-align: left"
-                class="d-flex align-items-center text-accent text-decoration-underline"
-                @click="isModalURLShown = true"
-            >
-                <div class="truncate-text-ellipsis">{{ token.code }}</div>
-                <i class="fas fa-external-link-alt ms-3" />
-            </b-link>
-            <div v-else-if="code" class="mb-0 d-flex align-items-center w-100 text-accent">
-                <strong class="truncate-text" style="letter-spacing: 0.25rem">{{ code }}</strong>
-                <b-button variant="link" size="sm" class="ms-auto" @click="isVisible = !isVisible">
-                    <i class="fas fa-eye" />
-                </b-button>
+    <b-card body-class="py-2">
+        <div class="d-flex">
+            <div class="pe-3">
+                <b-img
+                    v-if="token.brand.logoImgURL"
+                    v-b-tooltip
+                    lazy
+                    :src="token.brand.logoImgURL"
+                    height="25"
+                    :title="`${token.brand.name}${token.reward.title ? `: ${token.reward.title}` : ''}`"
+                />
+                <i v-else class="fas fa-tags text-primary"></i>
+            </div>
+            <div class="flex-grow-1 d-flex align-items-center justify-content-between">
+                <b-link
+                    v-if="isURL"
+                    size="sm"
+                    style="text-align: left"
+                    class="d-flex align-items-center text-accent text-decoration-underline"
+                    @click="isModalURLShown = true"
+                >
+                    <div class="truncate-text-ellipsis">{{ token.code }}</div>
+                    <i class="fas fa-external-link-alt ms-3" />
+                </b-link>
+                <div v-else-if="code" class="mb-0 d-flex align-items-center w-100 text-accent">
+                    <strong class="truncate-text" style="letter-spacing: 0.25rem">{{ code }}</strong>
+                    <b-button variant="link" size="sm" class="ms-auto" @click="isVisible = !isVisible">
+                        <i class="fas fa-eye" />
+                    </b-button>
+                </div>
+                <span v-else>Code not found.</span>
             </div>
-            <span v-else>Code not found.</span>
+            <b-dropdown v-if="token.reward.webshopURL" variant="link" size="sm" no-caret end>
+                <template #button-content>
+                    <i class="fas fa-ellipsis-h ml-0 text-muted"></i>
+                </template>
+                <b-dropdown-item
+                    v-if="token.reward.webshopURL"
+                    target="_blank"
+                    :href="token.reward.webshopURL"
+                    link-class="d-flex justify-content-between align-items-center"
+                >
+                    Use this code
+                    <i class="fas fa-caret-right text-opaque"></i>
+                </b-dropdown-item>
+                <b-dropdown-divider />
+                <b-dropdown-text class="text-end small text-opaque">
+                    {{ format(new Date(token.createdAt), 'MMMM do hh:mm') }}
+                </b-dropdown-text>
+            </b-dropdown>
         </div>
-        <b-dropdown v-if="token.webshopURL" variant="link" size="sm" no-caret end>
-            <template #button-content>
-                <i class="fas fa-ellipsis-h ml-0 text-muted"></i>
-            </template>
-            <b-dropdown-item
-                target="_blank"
-                :href="token.webshopURL"
-                link-class="d-flex justify-content-between align-items-center"
-            >
-                Use this code
-                <i class="fas fa-caret-right text-opaque"></i>
-            </b-dropdown-item>
-        </b-dropdown>
     </b-card>
     <BaseModalExternalURL :show="isModalURLShown" :url="token.code" @hidden="isModalURLShown = false" />
 </template>
@@ -44,6 +59,7 @@ import { mapStores } from 'pinia';
 import { defineComponent, PropType } from 'vue';
 import { useWalletStore } from '../../stores/Wallet';
 import { useAccountStore } from '../../stores/Account';
+import { format } from 'date-fns';
 import BaseModalExternalURL from '../../components/modal/BaseModalExternalURL.vue';
 
 export default defineComponent({
@@ -58,10 +74,7 @@ export default defineComponent({
         },
     },
     data() {
-        return {
-            isVisible: false,
-            isModalURLShown: false,
-        };
+        return { format, isVisible: false, isModalURLShown: false };
     },
     computed: {
         ...mapStores(useAccountStore, useWalletStore),

diff --git a/apps/app/src/components/card/BaseCardDiscord.vue b/apps/app/src/components/card/BaseCardDiscord.vue
@@ -70,7 +70,6 @@ export default defineComponent({
     },
     async mounted() {
         const { data } = await axios('https://discord.com/api/guilds/836147176270856243/widget.json');
-        console.log(data);
         this.presenceCount = data.presence_count;
         this.members = data.members;
         this.inviteURL = data.instant_invite;

diff --git a/apps/app/src/components/card/BaseCardDiscordRole.vue b/apps/app/src/components/card/BaseCardDiscordRole.vue
@@ -24,18 +24,23 @@
                 />
             </b-badge>
         </div>
-        <b-dropdown v-if="token.discordServerURL" variant="link" size="sm" no-caret end>
+        <b-dropdown variant="link" size="sm" no-caret end>
             <template #button-content>
                 <i class="fas fa-ellipsis-h ml-0 text-muted"></i>
             </template>
             <b-dropdown-item
+                v-if="token.discordServerURL"
                 target="_blank"
                 :href="token.discordServerURL"
                 link-class="d-flex justify-content-between align-items-center"
             >
                 Server URL
                 <i class="fas fa-caret-right text-opaque"></i>
             </b-dropdown-item>
+            <b-dropdown-divider />
+            <b-dropdown-text class="text-end small text-opaque">
+                {{ format(new Date(token.createdAt), 'MMMM do hh:mm') }}
+            </b-dropdown-text>
         </b-dropdown>
     </b-card>
 </template>
@@ -45,6 +50,7 @@ import { mapStores } from 'pinia';
 import { defineComponent, PropType } from 'vue';
 import { useWalletStore } from '../../stores/Wallet';
 import { useAccountStore } from '../../stores/Account';
+import { format } from 'date-fns';
 
 export default defineComponent({
     name: 'BaseCardCouponCode',
@@ -56,6 +62,7 @@ export default defineComponent({
     },
     data() {
         return {
+            format,
             isVisible: false,
             isModalURLShown: false,
         };

diff --git a/apps/app/src/components/card/BaseCardQuestSocial.vue b/apps/app/src/components/card/BaseCardQuestSocial.vue
@@ -139,11 +139,14 @@ export default defineComponent({
     methods: {
         queryToURL(quest: TQuestSocial) {
             if (!quest.contentMetadata || !quest.contentMetadata.operators) return 'https://x.com';
-            const { text, hashtags, url } = quest.contentMetadata.operators;
+            const { mentions, text, hashtags, url } = quest.contentMetadata.operators;
             const intentURL = new URL('https://x.com/intent/tweet');
-            intentURL.searchParams.append('text', text);
+            const message = mentions.length ? mentions.map((m) => `@${m}`).join(' ') + ` ${text}` : text;
+            intentURL.searchParams.append('text', message);
             intentURL.searchParams.append('hashtags', hashtags.join(','));
-            intentURL.searchParams.append('url', url[0]);
+            if (url.length) {
+                intentURL.searchParams.append('url', url[0]);
+            }
             return intentURL.toString();
         },
         onClickCancel() {

diff --git a/apps/app/src/types/interfaces/rewards.d.ts b/apps/app/src/types/interfaces/rewards.d.ts
@@ -88,8 +88,15 @@ type TRewardCustomPayment = TBaseRewardPayment & {
 
 type TRewardCouponPayment = TBaseRewardPayment & {
     code: string;
-    webshopURL: string;
     couponCodeId: string;
+    brand: {
+        name: string;
+        logoImgURL: string;
+    };
+    reward: {
+        title: string;
+        webshopURL: string;
+    };
 };
 
 type TRewardDiscordRolePayment = TRewardPayment & {