🔀 Merge #2010 into deploy/rinkeby

src/components/Icon/Info.vue

@@ -1,15 +1,8 @@
 <template>
-  <svg fill="none" viewBox="0 0 16 16">
-    <g clip-path="url(#a)">
-      <path
-        fill="currentColor"
-        d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"
-      />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path fill="#fff" d="M0 0h16v16H0z" />
-      </clipPath>
-    </defs>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none">
+    <path
+      fill="currentColor"
+      d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"
+    />
   </svg>
 </template>

src/components/NFTBook/SpecTableValue.vue

@@ -6,7 +6,7 @@
       class="relative z-[300] hidden group laptop:block"
       @mouseenter="hoverTooltip"
     >
-      <IconInfo class="w-[16px]" />
+      <IconInfo class="w-[16px] h-[16px]" />
       <NFTBookTooltip
         class="hidden group-hover:block"
         :tooltip-text="tooltipText"
@@ -19,7 +19,7 @@
       class="cursor-pointer laptop:hidden"
       @click="onclickShowTooltip"
     >
-      <IconInfo class="w-[16px]" />
+      <IconInfo class="w-[16px] h-[16px]" />
     </div>
     <BottomDialog
       v-if="showTooltip"

src/locales/en.json

@@ -385,6 +385,7 @@
   "index_intro_description_liker_land": "Liker Land",
   "index_intro_more_button": "More about our story",
   "index_intro_title": "Ebook Store x Digital Publishing",
+  "index_latest_books_title": "Latest Books",
   "index_page_all_stories_matter_blog_content": "Liker Land Writing NFT widget lets you start a paid subscription or publish paid posts based on your open content from any writing platform such as WordPress, or Substack etc.",
   "index_page_all_stories_matter_blog_heading": "Blogs",
   "index_page_all_stories_matter_cta_button": "Publish your story",
@@ -622,12 +623,12 @@
   "nft_collect_modal_subtitle_select_collect_method": "Select a collect method",
   "nft_collect_modal_title_collect": "Collect NFT",
   "nft_collect_modal_title_collecting": "Collecting NFT",
-  "nft_collector_message_label": "Collector's message",
-  "nft_collector_message_view_all": "View all",
   "nft_collection_content_label": "Content in this collection",
   "nft_collection_hint": "This book is part of a collection",
   "nft_collection_label": "Collection",
   "nft_collection_num_of_books": "This collection includes {num} books.",
+  "nft_collector_message_label": "Collector's message",
+  "nft_collector_message_view_all": "View all",
   "nft_details_page_activity_list_event": "Event",
   "nft_details_page_activity_list_event_buy_nft": "Purchase",
   "nft_details_page_activity_list_event_collect": "Collect",
@@ -674,8 +675,8 @@
   "nft_details_page_label_access_methods": "Access Method",
   "nft_details_page_label_access_methods_downloadable": "Read online / Download",
   "nft_details_page_label_access_methods_tooltip_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",
-  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",
   "nft_details_page_label_access_methods_tooltip_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",
   "nft_details_page_label_access_methods_tooltips_title_drm_free": "DRM-Free Content",
   "nft_details_page_label_access_methods_web_only": "Read Online",
   "nft_details_page_label_ar_view_in_mobile": "Experience your NFT live",
@@ -999,14 +1000,14 @@
     "language": "Language",
     "title": "Settings"
   },
-  "shopping_cart_checkoutd": "Checkout",
   "shopping_cart_checkout_button_by_card": "Checkout by card",
   "shopping_cart_checkout_button_by_LIKE": "Checkout by LIKE",
+  "shopping_cart_checkoutd": "Checkout",
   "shopping_cart_empty_notice": "Shopping cart is empty",
   "shopping_cart_empty_notice_button": "Browse Bookstore",
   "shopping_cart_error_insufficient_balance": "Insufficient balance, you only have {balance}",
-  "shopping_cart_list_coupon_title": "Discount (if applicable)",
   "shopping_cart_list_coupon_text": "Calculated at next step",
+  "shopping_cart_list_coupon_title": "Discount (if applicable)",
   "shopping_cart_list_header_item": "Item",
   "shopping_cart_list_header_price": "Price",
   "shopping_cart_list_header_quantity": "Quantity",

src/locales/zh-Hant.json

@@ -385,6 +385,7 @@
   "index_intro_description_liker_land": "Liker Land",
   "index_intro_more_button": "了解更多我們的故事",
   "index_intro_title": "電子書店 x 數位出版",
+  "index_latest_books_title": "最新上架",
   "index_page_all_stories_matter_blog_content": "Liker Land Writing NFT 小插件助你在保持內容開放的同時，提供付費訂閱服務或收費內容項目，支援 WordPress 或 Substack 等寫作平台。",
   "index_page_all_stories_matter_blog_heading": "部落格",
   "index_page_all_stories_matter_cta_button": "發佈故事",
@@ -622,12 +623,12 @@
   "nft_collect_modal_subtitle_select_collect_method": "請選擇收藏方法",
   "nft_collect_modal_title_collect": "收藏作品",
   "nft_collect_modal_title_collecting": "正在收藏作品",
-  "nft_collector_message_label": "收藏者的留言",
-  "nft_collector_message_view_all": "顯示全部",
   "nft_collection_content_label": "套裝內容",
   "nft_collection_hint": "此本書收錄在套裝中",
   "nft_collection_label": "組合套裝",
   "nft_collection_num_of_books": "此套裝內含{num}本書",
+  "nft_collector_message_label": "收藏者的留言",
+  "nft_collector_message_view_all": "顯示全部",
   "nft_details_page_activity_list_event": "事件",
   "nft_details_page_activity_list_event_buy_nft": "購買",
   "nft_details_page_activity_list_event_collect": "收集",
@@ -674,8 +675,8 @@
   "nft_details_page_label_access_methods": "閱讀方式",
   "nft_details_page_label_access_methods_downloadable": "站內閱讀 / 檔案下載",
   "nft_details_page_label_access_methods_tooltip_text_drm": "指設有數位版權管理技術的電子書，讀者可以於我們的站內開啟及閱讀內容。",
-  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM 內容",
   "nft_details_page_label_access_methods_tooltip_text_drm_free": "指沒有數位版權管理技術的電子書，讀者可以自由下載和傳輸電子書到不同裝置。",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM 內容",
   "nft_details_page_label_access_methods_tooltips_title_drm_free": "不設 DRM 內容",
   "nft_details_page_label_access_methods_web_only": "站內閱讀",
   "nft_details_page_label_ar_view_in_mobile": "將你的 NFT 帶到現實",
@@ -1005,8 +1006,8 @@
   "shopping_cart_empty_notice": "購物車是空的",
   "shopping_cart_empty_notice_button": "瀏覽書店",
   "shopping_cart_error_insufficient_balance": "餘額不足，你只有 {balance}",
-  "shopping_cart_list_coupon_title": "優惠(如適用)",
   "shopping_cart_list_coupon_text": "將於下一步計算",
+  "shopping_cart_list_coupon_title": "優惠(如適用)",
   "shopping_cart_list_header_item": "購物明細",
   "shopping_cart_list_header_price": "單價",
   "shopping_cart_list_header_quantity": "數量",

src/pages/index.vue

@@ -370,28 +370,21 @@
       </div>
     </section>
 
-    <section
-      id="bookstore"
-      class="w-full laptop:max-w-[1920px] mx-auto mt-[3rem]"
-    >
-      <div :class="['desktop:flex', 'gap-[16px]', paddingClass]">
-        <div
+    <section id="featured-books" :class="bookstoreSectionClass">
+      <div :class="['w-full', 'desktop:flex', 'gap-[16px]', paddingClass]">
+        <h2
           :class="[
             bookstoreSectionStickyClass,
+            bookstoreSectionTitleClass,
 
             'self-start',
 
             'mb-[1rem] desktop:mb-0',
 
-            'text-[1.75rem] desktop:text-[2.5rem]',
-            'font-[600]',
-            'font-serif',
-
             'desktop:vertical-lr',
           ]"
-        >
-          {{ $t('index_bookstore_title') }}
-        </div>
+          v-text="$t('index_bookstore_title')"
+        />
 
         <div
           :class="[
@@ -402,18 +395,20 @@
             'flex-grow',
           ]"
         >
-          <div v-if="stickyBookstoreItem" class="col-span-2">
+          <div v-if="stickyEditorialBookstoreItem" class="col-span-2">
             <NFTBookItemCardV2
               :class="[bookstoreSectionStickyClass, 'w-full']"
               class-cover-frame-aspect-ratio="min-h-[360px] desktop:min-h-[0] desktop:aspect-[4/5]"
-              :item-id="stickyBookstoreItem.classId"
+              :item-id="stickyEditorialBookstoreItem.classId"
               preset="shelf"
               theme="spencer"
               :cover-resize="300"
-              :is-link-disabled="stickyBookstoreItem.isMultiple"
+              :is-link-disabled="stickyEditorialBookstoreItem.isMultiple"
               :is-lazy-loaded="false"
               link-medium="index_sticky_item"
-              @click-cover="handleClickItem($event, stickyBookstoreItem)"
+              @click-cover="
+                handleClickItem($event, stickyEditorialBookstoreItem)
+              "
             />
           </div>
 
@@ -428,7 +423,10 @@
               'desktop:mt-0',
             ]"
           >
-            <li v-for="item in bookstoreItemsInGrid" :key="item.classId">
+            <li
+              v-for="item in editorialBookstoreItemsInGrid"
+              :key="item.classId"
+            >
               <NFTBookItemCardV2
                 :item-id="item.classId"
                 class-cover-frame-aspect-ratio="min-h-[360px] laptop:min-h-[0] aspect-[4/5]"
@@ -443,7 +441,7 @@
       </div>
 
       <Swiper
-        class="relative block desktop:hidden mt-[32px] right-0"
+        class="w-full relative block desktop:hidden mt-[32px] right-0"
         :options="{
           slidesOffsetBefore: 16,
           slidesOffsetAfter: 16,
@@ -459,7 +457,7 @@
         @sliderMove="handleSwiperBookstoreSwiper"
       >
         <SwiperSlide
-          v-for="item in bookstoreItemsInGrid"
+          v-for="item in editorialBookstoreItemsInGrid"
           :key="item.classId"
           style="width: 220px"
         >
@@ -472,15 +470,14 @@
         </SwiperSlide>
       </Swiper>
 
-      <div
-        class="flex justify-center item-center pt-[4rem] px-[10px] pb-[5rem]"
-      >
-        <ButtonV2
-          :text="$t('index_bookstore_more_button')"
-          :to="localeLocation({ name: 'store' })"
-          @click.native="handleClickBookstoreMore"
-        />
-      </div>
+      <ButtonV2
+        class="self-center"
+        :text="$t('index_bookstore_more_button')"
+        :to="
+          localeLocation({ name: 'store', ll_medium: 'index_grid_item_more' })
+        "
+        @click.native="handleClickBookstoreMore"
+      />
 
       <Dialog
         :open="dialogNFTClassList.length > 0"
@@ -505,6 +502,49 @@
       </Dialog>
     </section>
 
+    <section id="latest-books" :class="[bookstoreSectionClass, paddingClass]">
+      <h2
+        :class="bookstoreSectionTitleClass"
+        v-text="$t('index_latest_books_title')"
+      />
+
+      <ul
+        :class="[
+          'w-full',
+          'grid',
+          'grid-cols-2',
+          'sm:grid-cols-3',
+          'laptop:grid-cols-3',
+          'desktop:grid-cols-4',
+          'desktopLg:grid-cols-5',
+          'gap-x-[16px] sm:gap-x-[20px] gap-y-[40px]',
+          'items-stretch',
+        ]"
+      >
+        <li v-for="item in latestBookstoreItems" :key="item.id">
+          <NFTBookItemCardV2
+            :item-id="item.classId"
+            class-cover-frame-aspect-ratio="aspect-[4/5]"
+            :is-link-disabled="item.isMultiple"
+            link-medium="index_latest_item"
+            @click-cover="handleClickItem($event, item)"
+          />
+        </li>
+      </ul>
+
+      <ButtonV2
+        class="self-center"
+        :text="$t('index_bookstore_more_button')"
+        :to="
+          localeLocation({
+            name: 'store',
+            query: { tag: 'latest', ll_medium: 'index_latest_more' },
+          })
+        "
+        @click.native="handleClickLatestMore"
+      />
+    </section>
+
     <div class="overflow-hidden">
       <section
         id="features"
@@ -809,6 +849,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
 
 import bookstoreMixin from '~/mixins/bookstore';
@@ -853,7 +894,13 @@ export default {
   },
   async fetch({ store }) {
     try {
-      await store.dispatch('fetchBookstoreCMSProductsForLandingPage');
+      await Promise.all([
+        store.dispatch('fetchBookstoreCMSProductsForLandingPage'),
+        store.dispatch(
+          'lazyFetchBookstoreCMSProductsByTagId',
+          'landing-latest'
+        ),
+      ]);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
@@ -864,7 +911,9 @@ export default {
     const description = this.$t('og_description');
 
     const classIds = Array.from(
-      new Set(this.bookstoreItems.map(b => b.classIds || b.classId).flat())
+      new Set(
+        this.editorialBookstoreItems.map(b => b.classIds || b.classId).flat()
+      )
     );
     const links = [];
     classIds.forEach(classId =>
@@ -927,9 +976,29 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['nftGetBookstoreCMSProductsByTagId']),
     isEnglish() {
       return this.$i18n.locale === 'en';
     },
+    bookstoreSectionClass() {
+      return [
+        'flex',
+        'flex-col',
+        'gap-[40px]',
+        'w-full',
+        'laptop:max-w-[1920px]',
+        'mx-auto',
+        'pt-[3rem]',
+        'pb-[5rem]',
+      ];
+    },
+    bookstoreSectionTitleClass() {
+      return [
+        'text-[1.75rem] desktop:text-[2.5rem]',
+        'font-[600]',
+        'font-serif',
+      ];
+    },
     paddingClass() {
       return 'px-[16px] laptop:px-[32px] desktop:px-[48px]';
     },
@@ -947,18 +1016,24 @@ export default {
     bookstoreSectionStickyClass() {
       return 'desktop:sticky desktop:top-[124px]';
     },
-    bookstoreItems() {
+    editorialBookstoreItems() {
       return this.nftBookstoreCMSProductsForLandingPage.filter(
         item =>
           !item.locales ||
           item.locales.some(locale => this.$i18n.locale.includes(locale))
       );
     },
-    stickyBookstoreItem() {
-      return this.bookstoreItems[0];
+    stickyEditorialBookstoreItem() {
+      return this.editorialBookstoreItems[0];
+    },
+    editorialBookstoreItemsInGrid() {
+      return this.editorialBookstoreItems.slice(1, 10);
     },
-    bookstoreItemsInGrid() {
-      return this.bookstoreItems.slice(1, 10);
+    latestBookstoreItems() {
+      return this.nftGetBookstoreCMSProductsByTagId('landing-latest').slice(
+        0,
+        10
+      );
     },
     signatureBannerNames() {
       return fisherShuffle([...SIGNATURE_BANNER_NAMES]);
@@ -1063,6 +1138,9 @@ export default {
     handleClickBookstoreMore() {
       logTrackerEvent(this, 'IndexPage', 'IndexClickBookstoreMore', '', 1);
     },
+    handleClickLatestMore() {
+      logTrackerEvent(this, 'IndexPage', 'IndexClickLatestMore', '', 1);
+    },
     handleClickFeatureSupportAuthor() {
       logTrackerEvent(
         this,