From 2474ab30ba21fee66092d23902e3c9d0b30357fa Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Mon, 20 Jan 2025 04:16:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Add=20Chinese=20language=20suppo?=
 =?UTF-8?q?rt=20for=20labels=20(#266)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🌐 Add Chinese language support for labels

* 🚸 Enable custom message page for manual delivery

* 🌐 Update labels translations

* 💬 Update translation

---------

Co-authored-by: William Chong <6198816+williamchong@users.noreply.github.com>
---
 components/ShippingRates/RateTable.vue        |  2 +-
 components/StripeConnectCard.vue              |  2 +-
 pages/mint-nft/index.vue                      | 27 ++++++++------
 pages/nft-book-store/collection/new.vue       | 24 ++++++------
 .../collection/status/[collectionId].vue      |  8 ++--
 .../collection/status/[collectionId]/edit.vue | 20 +++++-----
 pages/nft-book-store/new.vue                  | 37 ++++++++++++-------
 pages/nft-book-store/status/[classId].vue     | 12 +++---
 .../status/[classId]/edit/[editionIndex].vue  | 20 +++++-----
 .../status/[classId]/edit/new.vue             | 20 +++++-----
 10 files changed, 92 insertions(+), 80 deletions(-)

diff --git a/components/ShippingRates/RateTable.vue b/components/ShippingRates/RateTable.vue
index af5c89260..b310568b3 100644
--- a/components/ShippingRates/RateTable.vue
+++ b/components/ShippingRates/RateTable.vue
@@ -4,7 +4,7 @@
       <div class="flex flex-row justify-between items-center">
         <div class="flex justify-start items-center gap-[8px]">
           <h3 class="font-bold font-mono">
-            Shipping Options
+            Shipping Options / 實體書運送選項
           </h3>
           <slot name="header" />
         </div>
diff --git a/components/StripeConnectCard.vue b/components/StripeConnectCard.vue
index 3c4a9d447..04c49e20a 100644
--- a/components/StripeConnectCard.vue
+++ b/components/StripeConnectCard.vue
@@ -10,7 +10,7 @@
   >
     <template #header>
       <h3 class="font-bold font-mono">
-        Connect to a Stripe Account
+        Connect to a Stripe Account / 連接 Stripe 帳戶
       </h3>
       <UToggle
         v-model="isStripeConnectChecked"
diff --git a/pages/mint-nft/index.vue b/pages/mint-nft/index.vue
index 1c0858fcd..bb3dadaea 100644
--- a/pages/mint-nft/index.vue
+++ b/pages/mint-nft/index.vue
@@ -282,12 +282,12 @@
                   Mint NFT by filling required information
                 </h3>
               </template>
-              <UForm :validate="validate" :state="state">
-                <UFormGroup label="NFT ID Prefix:" name="prefix" required>
+              <UForm :validate="validate" :state="state" class="flex flex-col gap-[12px]">
+                <UFormGroup label="NFT ID Prefix / 前綴（書本編號）" name="prefix" required>
                   <UInput v-model="state.nftIdPrefix" placeholder="English only ex.MoneyVerse" />
                 </UFormGroup>
 
-                <UFormGroup label="Number of NFT to mint:" required>
+                <UFormGroup label="Number of NFT to mint / 鑄造數量（此批）" required>
                   <UInput
                     v-model="nftMintCount"
                     placeholder="0-100"
@@ -297,19 +297,19 @@
                   />
                 </UFormGroup>
 
-                <UFormGroup label="Image URL:" required>
+                <UFormGroup label="Image URL / 封面網址" required>
                   <UInput v-model="imageUrl" placeholder="ipfs:// ... or ar://...." />
                 </UFormGroup>
 
-                <UFormGroup label="External URL (optional):">
+                <UFormGroup label="External URL (optional) / 外部網址（選填）">
                   <UInput v-model="externalUrl" placeholder="https://" />
                 </UFormGroup>
 
-                <UFormGroup label="URI (optional):">
+                <UFormGroup label="URI (optional) / 元資料網址（選填）">
                   <UInput v-model="uri" placeholder="https://" />
                 </UFormGroup>
 
-                <UFormGroup v-if="isCreatingClass" label="Max number of supply for this NFT Class (optional):">
+                <UFormGroup v-if="isCreatingClass" label="Max number of supply for this NFT Class (optional) / 最大供應量（選填）">
                   <template
                     v-if="classMaxSupply && classMaxSupply < nftMintCount"
                     #help
@@ -405,11 +405,14 @@
             target="_blank"
             :to="`${likerLandURL}/nft/class/${encodeURIComponent(classId)}`"
           />
-          <UButton
-            :to="{ name: 'nft-book-store-new', query: { class_id: classId, count: nftMintCount } }"
-            label="Continue to publish NFT Book"
-            variant="solid"
-          />
+          <div class="p-[4px] border-[2px] border-[#f59e0b] rounded-[0.375rem]">
+            <UButton
+              :to="{ name: 'nft-book-store-new', query: { class_id: classId, count: nftMintCount } }"
+              label="Continue to publish NFT Book / 繼續上架"
+              variant="solid"
+              color="orange"
+            />
+          </div>
         </template>
       </UCard>
 
diff --git a/pages/nft-book-store/collection/new.vue b/pages/nft-book-store/collection/new.vue
index 2a2ed479c..1558689dd 100644
--- a/pages/nft-book-store/collection/new.vue
+++ b/pages/nft-book-store/collection/new.vue
@@ -61,19 +61,19 @@
             Pricing and Availability
           </h3>
         </template>
-        <UFormGroup :label="`Price(USD) of this collection (Minimal ${MINIMAL_PRICE} or $0 (free))`">
+        <UFormGroup :label="`Price(USD) of this collection (Minimal ${MINIMAL_PRICE} or $0 (free)) / 版本定價（美金）`">
           <UInput v-model="price.price" type="number" step="0.01" :min="MINIMAL_PRICE" @input="onPriceChange" />
         </UFormGroup>
 
         <URadioGroup
           v-model="price.deliveryMethod"
           :disabled="price.isPhysicalOnly"
-          legend="Delivery method of this collection"
+          legend="Delivery method of this collection / 自動或手動發書"
           :options="deliverMethodOptions"
         />
         <UFormGroup v-if="price.deliveryMethod === 'auto'">
           <template #label>
-            Memo of this collection
+            Memo of this collection / 自動發書留言
             <ToolTips>
               <template #image>
                 <img
@@ -91,7 +91,7 @@
         </UFormGroup>
         <UFormGroup
           v-else
-          label="Is Physical only good"
+          label="Is Physical only good / 只含實體書"
           :ui="{ label: { base: 'font-mono font-bold' } }"
         >
           <UCheckbox
@@ -102,7 +102,7 @@
         </UFormGroup>
         <UFormGroup>
           <template #label>
-            Allow custom price
+            Allow custom price / 開啟打賞功能
             <ToolTips :image-style="{ width: '300px' }">
               <template #image>
                 <img
@@ -120,7 +120,7 @@
             label="Allow user to pay more than defined price"
           />
         </UFormGroup>
-        <UFormGroup label="Unlist Edition">
+        <UFormGroup label="Unlist Edition / 暫時下架">
           <UCheckbox
             v-model="price.isUnlisted"
             name="isUnlisted"
@@ -145,7 +145,7 @@
         </template>
         <UFormGroup label="Product Name" :ui="{ container: 'space-y-2' }">
           <template #label>
-            Product Name
+            Product Name / 產品名稱（英文）
             <ToolTips :image-style="{ width: '250px' }">
               <template #image>
                 <img
@@ -158,7 +158,7 @@
             </ToolTips>
           </template>
           <UInput v-model="nameEn" placeholder="Product name in English" />
-          <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional)</span>
+          <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional) / 描述（選填）</span>
           <md-editor
             v-model="descriptionEn"
             language="en-US"
@@ -171,7 +171,7 @@
         </UFormGroup>
         <UFormGroup :ui="{ container: 'space-y-2 my-[20px]' }">
           <template #label>
-            產品名稱
+            產品名稱（中文）
             <ToolTips :image-style="{ width: '250px' }">
               <template #image>
                 <img
@@ -235,7 +235,7 @@
       >
         <template #header>
           <h4 class="text-sm font-bold font-mono">
-            Email to receive sales notifications
+            Email to receive sales notifications / 欲收到銷售通知的電郵
           </h4>
           <div class="flex gap-2">
             <UInput
@@ -326,7 +326,7 @@
             >
               <template #header>
                 <h4 class="text-sm font-bold font-mono">
-                  Share sales data to wallets
+                  Share sales data to wallets / 分享銷售數據給特定地址
                 </h4>
                 <div class="flex gap-2">
                   <UInput
@@ -382,7 +382,7 @@
             <UCard :ui="{ body: { base: 'space-y-8' } }">
               <template #header>
                 <h3 class="font-bold font-mono">
-                  DRM Options
+                  DRM Options / 數位版權管理選項
                 </h3>
               </template>
 
diff --git a/pages/nft-book-store/collection/status/[collectionId].vue b/pages/nft-book-store/collection/status/[collectionId].vue
index 3f8e18414..69d6aed21 100644
--- a/pages/nft-book-store/collection/status/[collectionId].vue
+++ b/pages/nft-book-store/collection/status/[collectionId].vue
@@ -188,7 +188,7 @@
       >
         <template #header>
           <h4 class="text-sm font-bold font-mono">
-            Email to receive sales notifications
+            Email to receive sales notifications / 欲收到銷售通知的電郵
           </h4>
 
           <div class="flex gap-2">
@@ -236,7 +236,7 @@
       <UCard :ui="{ body: { padding: '' } }">
         <template #header>
           <h3 class="font-bold font-mono">
-            Sales Channel Summary
+            Sales Channel Summary / 銷售渠道摘要
           </h3>
         </template>
 
@@ -307,7 +307,7 @@
             >
               <template #header>
                 <h4 class="text-sm font-bold font-mono">
-                  Share sales data to wallets
+                  Share sales data to wallets / 分享銷售數據給特定地址
                 </h4>
                 <div class="flex gap-2">
                   <UInput
@@ -369,7 +369,7 @@
             >
               <template #header>
                 <h3 class="font-bold font-mono">
-                  Copy Purchase Link
+                  Copy Purchase Link / 複製購買連結
                 </h3>
               </template>
 
diff --git a/pages/nft-book-store/collection/status/[collectionId]/edit.vue b/pages/nft-book-store/collection/status/[collectionId]/edit.vue
index bc5897e6b..0f507a0c0 100644
--- a/pages/nft-book-store/collection/status/[collectionId]/edit.vue
+++ b/pages/nft-book-store/collection/status/[collectionId]/edit.vue
@@ -63,23 +63,23 @@
               Pricing and Availability
             </h3>
           </template>
-          <UFormGroup :label="`Price(USD) of this collection (Minimal ${MINIMAL_PRICE} or $0 (free))`">
+          <UFormGroup :label="`Price(USD) of this collection (Minimal ${MINIMAL_PRICE} or $0 (free)) / 版本定價（美金）`">
             <UInput v-model="price" type="number" step="0.01" :min="MINIMAL_PRICE" />
           </UFormGroup>
-          <UFormGroup :label="`Total number of NFT for sale of this collection`">
+          <UFormGroup :label="`Total number of NFT for sale of this collection / 此定價上架的數量`">
             <UInput v-model="stock" type="number" step="1" :min="minStock" />
           </UFormGroup>
 
           <URadioGroup
             v-model="deliveryMethod"
             :disabled="oldIsAutoDeliver || isPhysicalOnly"
-            legend="Delivery method of this collection"
+            legend="Delivery method of this collection / 自動或手動發書"
             :options="deliverMethodOptions"
           />
 
           <UFormGroup v-if="isAutoDeliver">
             <template #label>
-              Memo of this collection
+              Memo of this collection / 自動發書留言
               <ToolTips>
                 <template #image>
                   <img
@@ -97,7 +97,7 @@
           </UFormGroup>
           <UFormGroup
             v-else
-            label="Is Physical only good"
+            label="Is Physical only good / 只含實體書"
             :ui="{ label: { base: 'font-mono font-bold' } }"
           >
             <UCheckbox
@@ -108,7 +108,7 @@
           </UFormGroup>
           <UFormGroup>
             <template #label>
-              Allow custom price
+              Allow custom price / 開啟打賞功能
               <ToolTips :image-style="{ width: '300px' }">
                 <template #image>
                   <img
@@ -126,7 +126,7 @@
               label="Allow user to pay more than defined price"
             />
           </UFormGroup>
-          <UFormGroup label="Unlist Edition">
+          <UFormGroup label="Unlist Edition / 暫時下架">
             <UCheckbox
               v-model="isUnlisted"
               name="isUnlisted"
@@ -151,7 +151,7 @@
           </template>
           <UFormGroup label="Product Name" :ui="{ container: 'space-y-2' }">
             <template #label>
-              Product Name
+              Product Name / 產品名稱（英文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img
@@ -164,7 +164,7 @@
               </ToolTips>
             </template>
             <UInput v-model="nameEn" placeholder="Product name in English" />
-            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional)</span>
+            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional) / 描述（選填）</span>
             <md-editor
               v-model="descriptionEn"
               language="en-US"
@@ -177,7 +177,7 @@
           </UFormGroup>
           <UFormGroup :ui="{ container: 'space-y-2 my-[20px]' }">
             <template #label>
-              產品名稱
+              產品名稱（中文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img
diff --git a/pages/nft-book-store/new.vue b/pages/nft-book-store/new.vue
index 04ce8b233..670ddfea9 100644
--- a/pages/nft-book-store/new.vue
+++ b/pages/nft-book-store/new.vue
@@ -39,7 +39,7 @@
           <UInput v-else :value="classId" :readonly="true" />
         </UFormGroup>
 
-        <UFormGroup label="Table Of Content">
+        <UFormGroup label="Table Of Content / 章節目錄">
           <UTextarea v-model="tableOfContents" />
         </UFormGroup>
       </UCard>
@@ -73,7 +73,7 @@
                 </h3>
               </template>
               <UFormGroup
-                :label="`Unit Price in USD (Minimum ${MINIMAL_PRICE}, or 0 for free)`"
+                :label="`Unit Price in USD (Minimum ${MINIMAL_PRICE}, or 0 for free) / 版本定價（美金）`"
               >
                 <UInput
                   :value="p.price"
@@ -84,25 +84,27 @@
                 />
               </UFormGroup>
               <UFormGroup
-                :label="`Total number of NFT ${hasMultiplePrices ? 'edition' : 'ebook'} for sale`"
+                :label="`Total number of NFT ${hasMultiplePrices ? 'edition' : 'ebook'} for sale / 此定價的銷售數量`"
               >
                 <UInput
                   :value="p.stock"
                   type="number"
                   step="1"
                   :min="0"
+                  :max="Number(route.query.count) || undefined"
                   @input="(e) => updatePrice(e, 'stock', index)"
                 />
               </UFormGroup>
               <URadioGroup
                 v-model="p.deliveryMethod"
                 :disabled="p.isPhysicalOnly"
-                :legend="`Delivery method of this ${priceItemLabel}`"
+                :legend="`Delivery method of this ${priceItemLabel} / 自動或手動發書`"
                 :options="deliverMethodOptions"
+                @change="handleDeliveryMethodChange"
               />
               <UFormGroup v-if="p.deliveryMethod === 'auto'">
                 <template #label>
-                  {{ `Memo of this ${priceItemLabel}` }}
+                  {{ `Memo of this ${priceItemLabel} / 自動發書留言` }}
                   <ToolTips>
                     <template #image>
                       <img
@@ -121,7 +123,7 @@
               </UFormGroup>
               <UFormGroup
                 v-else
-                label="Is Physical only good"
+                label="Is Physical only good / 只含實體書"
               >
                 <UCheckbox
                   v-model="p.isPhysicalOnly"
@@ -132,7 +134,7 @@
 
               <UFormGroup>
                 <template #label>
-                  Allow custom price
+                  Allow custom price / 開啟打賞功能
                   <ToolTips :image-style="{ width: '300px' }">
                     <template #image>
                       <img
@@ -150,7 +152,7 @@
                   label="Allow user to pay more than defined price"
                 />
               </UFormGroup>
-              <UFormGroup label="Unlist Edition">
+              <UFormGroup label="Unlist Edition / 暫時下架">
                 <UCheckbox
                   v-model="p.isUnlisted"
                   name="isUnlisted"
@@ -174,7 +176,7 @@
               </template>
               <UFormGroup label="Product Name" :ui="{ container: 'space-y-2' }">
                 <template #label>
-                  Product Name
+                  Product Name / 產品名稱（英文）
                   <ToolTips :image-style="{ width: '250px' }">
                     <template #image>
                       <img
@@ -191,7 +193,7 @@
                   :value="p.nameEn"
                   @input="(e) => updatePrice(e, 'nameEn', index)"
                 />
-                <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional)</span>
+                <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional) / 描述（選填）</span>
                 <md-editor
                   v-model="p.descriptionEn"
                   language="en-US"
@@ -204,7 +206,7 @@
               </UFormGroup>
               <UFormGroup :ui="{ container: 'space-y-2 my-[20px]' }">
                 <template #label>
-                  產品名稱
+                  產品名稱（中文）
                   <ToolTips :image-style="{ width: '250px' }">
                     <template #image>
                       <img
@@ -280,7 +282,7 @@
       >
         <template #header>
           <h4 class="text-sm font-bold font-mono">
-            Email to receive sales notifications
+            Email to receive sales notifications / 欲收到銷售通知的電郵
           </h4>
 
           <div class="flex gap-2">
@@ -372,7 +374,7 @@
             >
               <template #header>
                 <h4 class="text-sm font-bold font-mono">
-                  Share sales data to wallets
+                  Share sales data to wallets / 分享銷售數據給特定地址
                 </h4>
                 <div class="flex gap-2">
                   <UInput
@@ -428,7 +430,7 @@
             <UCard :ui="{ body: { base: 'space-y-8' } }">
               <template #header>
                 <h3 class="font-bold font-mono">
-                  DRM Options
+                  DRM Options / 數位版權管理選項
                 </h3>
               </template>
 
@@ -908,6 +910,13 @@ async function submitEditedClass () {
 function onSubmit () {
   return isEditMode.value ? submitEditedClass() : submitNewClass()
 }
+
+function handleDeliveryMethodChange (value: string) {
+  if (value === 'manual') {
+    enableCustomMessagePage.value = true
+  }
+}
+
 </script>
 <style scoped>
 .classIdInput {
diff --git a/pages/nft-book-store/status/[classId].vue b/pages/nft-book-store/status/[classId].vue
index 127d865a2..1b2356b26 100644
--- a/pages/nft-book-store/status/[classId].vue
+++ b/pages/nft-book-store/status/[classId].vue
@@ -276,7 +276,7 @@
       >
         <template #header>
           <h4 class="text-sm font-bold font-mono">
-            Email to receive sales notifications
+            Email to receive sales notifications / 欲收到銷售通知的電郵
           </h4>
 
           <div class="flex gap-2">
@@ -324,7 +324,7 @@
       <UCard :ui="{ body: { padding: '' } }">
         <template #header>
           <h3 class="font-bold font-mono">
-            Sales Channel Summary
+            Sales Channel Summary / 銷售渠道摘要
           </h3>
         </template>
 
@@ -378,7 +378,7 @@
         </div>
         <template v-if="shouldShowAdvanceSettings">
           <div class="mt-[24px] flex flex-col gap-[12px]">
-            <UFormGroup label="Table Of Content">
+            <UFormGroup label="Table Of Content / 章節目錄">
               <UTextarea v-model="tableOfContents" />
             </UFormGroup>
 
@@ -399,7 +399,7 @@
             >
               <template #header>
                 <h4 class="text-sm font-bold font-mono">
-                  Share sales data to wallets
+                  Share sales data to wallets / 分享銷售數據給特定地址
                 </h4>
                 <div class="flex gap-2">
                   <UInput
@@ -457,7 +457,7 @@
             <UCard :ui="{ body: { base: 'space-y-8' } }">
               <template #header>
                 <h3 class="font-bold font-mono">
-                  DRM Options
+                  DRM Options / 數位版權管理選項
                 </h3>
               </template>
 
@@ -503,7 +503,7 @@
             >
               <template #header>
                 <h3 class="font-bold font-mono">
-                  Copy Purchase Link
+                  Copy Purchase Link / 複製購買連結
                 </h3>
               </template>
 
diff --git a/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue b/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
index a3aa5296a..e19c59251 100644
--- a/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
+++ b/pages/nft-book-store/status/[classId]/edit/[editionIndex].vue
@@ -62,23 +62,23 @@
               Pricing and Availability
             </h3>
           </template>
-          <UFormGroup :label="`Price(USD) of this ${priceItemLabel} (Minimal ${MINIMAL_PRICE} or $0 (free))`">
+          <UFormGroup :label="`Price(USD) of this ${priceItemLabel} (Minimal ${MINIMAL_PRICE} or $0 (free)) / 版本定價（美金）`">
             <UInput v-model="price" type="number" step="0.01" :min="MINIMAL_PRICE" />
           </UFormGroup>
-          <UFormGroup :label="`Total number of NFT for sale of this ${priceItemLabel}`">
+          <UFormGroup :label="`Total number of NFT for sale of this ${priceItemLabel} / 此定價上架的數量`">
             <UInput v-model="stock" type="number" step="1" :min="minStock" />
           </UFormGroup>
 
           <URadioGroup
             v-model="deliveryMethod"
             :disabled="oldIsAutoDeliver || isPhysicalOnly"
-            :legend="`Delivery method of this ${priceItemLabel}`"
+            :legend="`Delivery method of this ${priceItemLabel} / 自動或手動發書`"
             :options="deliverMethodOptions"
           />
 
           <UFormGroup v-if="isAutoDeliver">
             <template #label>
-              {{ `Memo of this ${priceItemLabel}` }}
+              {{ `Memo of this ${priceItemLabel} / 自動發書留言` }}
               <ToolTips>
                 <template #image>
                   <img
@@ -94,7 +94,7 @@
           </UFormGroup>
           <UFormGroup
             v-else
-            label="Is Physical only good"
+            label="Is Physical only good / 只含實體書"
             :ui="{ label: { base: 'font-mono font-bold' } }"
           >
             <UCheckbox
@@ -105,7 +105,7 @@
           </UFormGroup>
           <UFormGroup>
             <template #label>
-              Allow custom price
+              Allow custom price / 開啟打賞功能
               <ToolTips :image-style="{ width: '300px' }">
                 <template #image>
                   <img
@@ -123,7 +123,7 @@
               label="Allow user to pay more than defined price"
             />
           </UFormGroup>
-          <UFormGroup label="Unlist Edition">
+          <UFormGroup label="Unlist Edition / 暫時下架">
             <UCheckbox
               v-model="isUnlisted"
               name="isUnlisted"
@@ -148,7 +148,7 @@
           </template>
           <UFormGroup label="Product Name" :ui="{ container: 'space-y-2' }">
             <template #label>
-              Product Name
+              Product Name / 產品名稱（英文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img
@@ -161,7 +161,7 @@
               </ToolTips>
             </template>
             <UInput v-model="nameEn" placeholder="Product name in English" />
-            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional)</span>
+            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional) / 描述（選填）</span>
             <md-editor
               v-model="descriptionEn"
               language="en-US"
@@ -174,7 +174,7 @@
           </UFormGroup>
           <UFormGroup :ui="{ container: 'space-y-2 my-[20px]' }">
             <template #label>
-              產品名稱
+              產品名稱（中文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img
diff --git a/pages/nft-book-store/status/[classId]/edit/new.vue b/pages/nft-book-store/status/[classId]/edit/new.vue
index d15f4221a..0e6213e99 100644
--- a/pages/nft-book-store/status/[classId]/edit/new.vue
+++ b/pages/nft-book-store/status/[classId]/edit/new.vue
@@ -62,23 +62,23 @@
               Pricing and Availability
             </h3>
           </template>
-          <UFormGroup :label="`Price(USD) of this ${priceItemLabel} (Minimal ${MINIMAL_PRICE} or $0 (free))`">
+          <UFormGroup :label="`Price(USD) of this ${priceItemLabel} (Minimal ${MINIMAL_PRICE} or $0 (free)) / 版本定價（美金）`">
             <UInput v-model="price" type="number" step="0.01" :min="MINIMAL_PRICE" />
           </UFormGroup>
-          <UFormGroup :label="`Total number of NFT for sale of this ${priceItemLabel}`">
+          <UFormGroup :label="`Total number of NFT for sale of this ${priceItemLabel} / 此定價上架的數量`">
             <UInput v-model="stock" type="number" step="1" :min="0" />
           </UFormGroup>
 
           <URadioGroup
             v-model="deliveryMethod"
             :disabled="isPhysicalOnly"
-            :legend="`Delivery method of this ${priceItemLabel}`"
+            :legend="`Delivery method of this ${priceItemLabel} / 自動或手動發書`"
             :options="deliverMethodOptions"
           />
 
           <UFormGroup v-if="deliveryMethod === 'auto'">
             <template #label>
-              {{ `Memo of this ${priceItemLabel}` }}
+              {{ `Memo of this ${priceItemLabel} / 自動發書留言` }}
               <ToolTips>
                 <template #image>
                   <img
@@ -97,7 +97,7 @@
           </UFormGroup>
           <UFormGroup
             v-else
-            label="Is Physical only good"
+            label="Is Physical only good / 只含實體書"
           >
             <UCheckbox
               v-model="isPhysicalOnly"
@@ -107,7 +107,7 @@
           </UFormGroup>
           <UFormGroup>
             <template #label>
-              Allow custom price
+              Allow custom price / 開啟打賞功能
               <ToolTips :image-style="{ width: '300px' }">
                 <template #image>
                   <img
@@ -125,7 +125,7 @@
               label="Allow user to pay more than defined price"
             />
           </UFormGroup>
-          <UFormGroup label="Unlist Edition">
+          <UFormGroup label="Unlist Edition / 暫時下架">
             <UCheckbox
               v-model="isUnlisted"
               name="isUnlisted"
@@ -150,7 +150,7 @@
           </template>
           <UFormGroup label="Product Name" :ui="{ container: 'space-y-2' }">
             <template #label>
-              Product Name
+              Product Name / 產品名稱（英文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img
@@ -166,7 +166,7 @@
               v-model="nameEn"
               placeholder="Product name in English"
             />
-            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional)</span>
+            <span class="block text-[14px] text-[#374151] mt-[8px]">Description (Optional) / 描述（選填）</span>
             <md-editor
               v-model="descriptionEn"
               language="en-US"
@@ -179,7 +179,7 @@
           </UFormGroup>
           <UFormGroup :ui="{ container: 'space-y-2 my-[20px]' }">
             <template #label>
-              產品名稱
+              產品名稱（中文）
               <ToolTips :image-style="{ width: '250px' }">
                 <template #image>
                   <img