[TAS-2441] ✨ Implement collector memo section

src/components/CollapsibleCard.vue

@@ -83,10 +83,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    defaultOpen: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
-      isOpen: true,
+      isOpen: this.defaultOpen,
     };
   },
   computed: {

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/ChainDataSection/index.vue

@@ -2,6 +2,7 @@
   <CollapsibleCard
     :title="$t('nft_details_page_activity_list_title')"
     :has-content-padding="false"
+    :default-open="false"
   >
     <template #titleIcon>
       <IconActivity />

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,104 @@
+<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"
+        v-text="formattedUserDisplayNameFull"
+      />
+    </div>
+  </component>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+import { createUserInfoMixin } from '~/mixins/user-info';
+import { ellipsis } from '~/util/ui';
+
+const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
+
+export default {
+  name: 'NFTPageCollectorMessageListIdentity',
+  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' },
+      });
+    },
+    formattedUserDisplayNameFull() {
+      return ellipsis(this.userDisplayNameFull, 13, 0);
+    },
+  },
+  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,110 @@
+<template>
+  <NuxtLink :to="messagesPageLink">
+    <div
+      :class="[
+        'group',
+        'relative',
+        'flex',
+        'flex-col',
+        'justify-between',
+
+        'p-[16px] 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',
+      ]"
+    >
+      <p class="block text-[16px] line-clamp-4" v-text="buyerMessage" />
+      <NFTPageCollectorMessageListIdentity
+        :is-show-type-label="false"
+        :wallet-address="message.id"
+        :avatar-size="24"
+        :wrapper-classes="[
+          '!bg-transparent',
+          'phone:!flex-row',
+          '!pl-[0px]',
+          '!gap-[12px]',
+          '!text-[14px]',
+        ]"
+      />
+
+      <Identity
+        v-if="hasAuthorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          '!hidden',
+          'transition-all duration-100',
+          hasAuthorReplied
+            ? 'group-hover:!block group-hover:right-[8px]'
+            : 'hidden',
+        ]"
+        :avatar-url="creatorAvatar"
+        :avatar-size="20"
+      />
+
+      <svg
+        v-if="hasAuthorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          { 'group-hover:right-[22px]': hasAuthorReplied },
+        ]"
+        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" />
+        <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"
+          opacity="0.5"
+        />
+      </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;
+    },
+    hasAuthorReplied() {
+      return this.message?.authorReply;
+    },
+    messagesPageLink() {
+      return this.localeLocation({
+        name: 'nft-class-classId-nftId',
+        params: {
+          classId: this.classId,
+          nftId: this.message?.collectedFirstNFTId,
+        },
+      });
+    },
+  },
+};
+</script>