[TAS-2441] ✨ Implement collector memo section

src/components/NFTMessage/Identity.vue

@@ -36,9 +36,12 @@
       >
         {{ userLabel }}
       </div>
-      <Label class="text-like-green" :preset="userLabelSize" align="center">{{
-        userDisplayNameFull | ellipsis
-      }}</Label>
+      <Label
+        class="text-like-green hover:underline"
+        :preset="userLabelSize"
+        align="center"
+        >{{ userDisplayNameFull | ellipsis }}</Label
+      >
     </div>
   </component>
 </template>

src/components/NFTPage/CollectorListDialog.vue

@@ -0,0 +1,91 @@
+<template>
+  <Dialog
+    :open="isOpenDialog"
+    preset="custom"
+    panel-class="overflow-x-auto shadow-lg"
+    panel-component="CardV2"
+    @close="$emit('close')"
+  >
+    <div class="flex justify-between mb-[12px] min-w-[310px]">
+      <Label
+        class="w-min font-600"
+        :text="`${$t('nft_details_page_title_collector')} (${items.length})`"
+        preset="h5"
+        valign="middle"
+        content-class="whitespace-nowrap text-like-green "
+        prepend-class="text-like-green"
+      >
+        <template #prepend>
+          <IconPerson />
+        </template>
+      </Label>
+    </div>
+    <hr class="w-full border-shade-gray" />
+    <div class="min-w-[310px]">
+      <table class="w-full">
+        <tbody class="w-full">
+          <tr class="w-full border-b-shade-gray border-b-[1px]">
+            <td
+              v-for="(text, index) in tableHeaderItems"
+              :key="index"
+              class="py-[8px]"
+            >
+              <Label
+                class="justify-start text-left text-dark-gray text-[12px] font-500"
+                :text="text"
+                tag="div"
+                valign="middle"
+                align="left"
+                content-class="whitespace-nowrap"
+              />
+            </td>
+          </tr>
+          <NFTPageCollectorListItem
+            v-for="owner in items"
+            :key="owner.id"
+            :class-id="classId"
+            :owner="owner"
+            :has-memo="hasMemo"
+          />
+        </tbody>
+      </table>
+    </div>
+  </Dialog>
+</template>
+<script>
+export default {
+  name: 'NFTPageCollectorListDialog',
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+    isOpenDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasMemo() {
+      return this.items.some(item => item.memo);
+    },
+    tableHeaderItems() {
+      if (this.hasMemo) {
+        return [
+          this.$t('nft_details_page_title_collector'),
+          this.$t('nft_message_type_generic'),
+          this.$t('nft_details_page_label_owning'),
+        ];
+      }
+      return [
+        this.$t('nft_details_page_title_collector'),
+        this.$t('nft_details_page_label_owning'),
+      ];
+    },
+  },
+};
+</script>

src/components/NFTPage/CollectorMessageList/Identity.vue

@@ -0,0 +1,103 @@
+<template>
+  <component
+    :is="walletAddress ? 'NuxtLink' : 'div'"
+    :class="[
+      'flex',
+      'phone:flex-col',
+      'items-center',
+
+      'gap-[16px]',
+      'phone:gap-[8px]',
+
+      'pl-[8px]',
+      'pr-[24px]',
+      'py-[8px]',
+      'phone:pr-[12px]',
+
+      'bg-white',
+      'phone:rounded-[14px]',
+      'rounded-full',
+      'cursor-pointer',
+
+      wrapperClasses,
+    ]"
+    :to="toRoute"
+  >
+    <Identity
+      class="flex-shrink-0"
+      :avatar-url="userAvatar"
+      :avatar-size="avatarSize"
+      :is-avatar-outlined="isUserCivicLiker"
+    />
+    <div>
+      <p class="text-like-green hover:underline" align="center">
+        {{ userDisplayNameFull | ellipsisCollectorAddress }}
+      </p>
+    </div>
+  </component>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+import { createUserInfoMixin } from '~/mixins/user-info';
+import { ellipsisCollectorAddress } from '~/util/ui';
+
+const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
+
+export default {
+  name: 'NFTPageCollectorMessageListIdentity',
+  filters: {
+    ellipsisCollectorAddress,
+  },
+  mixins: [userInfoMixin],
+  props: {
+    walletAddress: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'collector',
+    },
+    wrapperClasses: {
+      type: [String, Array],
+      default: undefined,
+    },
+    isShowTypeLabel: {
+      type: Boolean,
+      default: true,
+    },
+    avatarSize: {
+      type: Number,
+      default: 42,
+    },
+  },
+  computed: {
+    toRoute() {
+      if (!this.walletAddress) {
+        return '';
+      }
+
+      return this.localeLocation({
+        name: 'id',
+        params: { id: this.walletAddress },
+        query: { tab: this.isCreatedTab ? 'created' : 'collected' },
+      });
+    },
+  },
+  watch: {
+    walletAddress() {
+      this.lazyGetUserInfoByAddress(this.walletAddress);
+    },
+  },
+  mounted() {
+    if (this.walletAddress) {
+      this.lazyGetUserInfoByAddress(this.walletAddress);
+    }
+  },
+  methods: {
+    ...mapActions(['lazyGetUserInfoByAddress']),
+  },
+};
+</script>

src/components/NFTPage/CollectorMessageList/Item.vue

@@ -0,0 +1,116 @@
+<template>
+  <NuxtLink :to="messagesPageLink">
+    <div
+      :class="[
+        'group',
+        'relative',
+        'flex',
+        'flex-col',
+        'justify-between',
+
+        'p-[12px] laptop:p-[24px]',
+        'pb-[12px] laptop:pb-[20px]',
+
+        'min-w-[195px] laptop:min-w-[240px]',
+        'h-[180px] laptop:h-[204px]',
+        'cursor-pointer',
+
+        'bg-[url(~/assets/images/nft/books/collector-message-item-background.svg)]',
+        'laptop:bg-[url(~/assets/images/nft/books/collector-message-item-background-lg.svg)]',
+        'bg-cover',
+        'bg-center',
+      ]"
+      :style="bgStyle"
+    >
+      <p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>
+      <NFTPageCollectorMessageListIdentity
+        :is-show-type-label="false"
+        :wallet-address="message.id"
+        :avatar-size="32"
+        :wrapper-classes="['!bg-transparent', 'phone:!flex-row']"
+      />
+
+      <Identity
+        v-if="authorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          '!hidden',
+          'transition-all duration-100',
+          authorReplied
+            ? 'group-hover:!block group-hover:right-[8px]'
+            : 'hidden',
+        ]"
+        :avatar-url="creatorAvatar"
+        :avatar-size="20"
+      />
+
+      <svg
+        v-if="authorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          authorReplied ? 'group-hover:right-[22px]' : '',
+        ]"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="10" cy="10" r="9.5" fill="#F7F7F7" stroke="#E1E1E1" />
+        <g opacity="0.5" clip-path="url(#clip0_2298_5781)">
+          <path
+            d="M5.2658 8.70773L8.70338 5.73928C9.00428 5.47941 9.47851 5.69037 9.47851 6.09404V7.65758C12.6158 7.69349 15.1035 8.32226 15.1035 11.2954C15.1035 12.4954 14.3304 13.6843 13.4759 14.3058C13.2093 14.4998 12.8292 14.2563 12.9275 13.9419C13.8132 11.1097 12.5075 10.3578 9.47851 10.3142V12.0312C9.47851 12.4355 9.0039 12.6456 8.70338 12.386L5.2658 9.41726C5.04957 9.23051 5.04927 8.89474 5.2658 8.70773Z"
+            fill="#9B9B9B"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2298_5781">
+            <rect
+              width="10"
+              height="10"
+              fill="white"
+              transform="translate(5.10352 5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  </NuxtLink>
+</template>
+
+<script>
+export default {
+  name: 'NFTPageCollectorMessageListItem',
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+    creatorAvatar: {
+      type: String,
+      default: undefined,
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+  },
+  computed: {
+    buyerMessage() {
+      return this.message?.buyerMessage;
+    },
+    authorReplied() {
+      return this.message?.authorReply;
+    },
+    messagesPageLink() {
+      return this.localeLocation({
+        name: 'nft-class-classId-nftId',
+        params: {
+          classId: this.classId,
+          nftId: this.message?.collectedFirstNFTId,
+        },
+      });
+    },
+  },
+};
+</script>