From 429483a573c9f3132d26e6b84adc7e7da097102d Mon Sep 17 00:00:00 2001
From: Wei-Jun Hung <33746295+WeiJun0827@users.noreply.github.com>
Date: Wed, 30 Aug 2023 18:09:59 +0800
Subject: [PATCH] =?UTF-8?q?[TAS-205]=20=E2=9C=A8=20Add=20'Collectable=20Be?=
 =?UTF-8?q?fore'=20feature=20(#382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Add 'Collectable Before' feature

* 🎨 Rename variables and functions

* 🥅 Guard `collectExpiryDate` undefined case

* 💄 Move controller to 'sales setting' panel
---
 components/NFTMint/WriterMessage.vue | 29 ++++++++++++++++++++++++++++
 locales/en.json                      |  1 +
 pages/nft/iscn/_iscnId.vue           | 11 +++++++++++
 3 files changed, 41 insertions(+)

diff --git a/components/NFTMint/WriterMessage.vue b/components/NFTMint/WriterMessage.vue
index ee7eb5f6..a4b7f872 100644
--- a/components/NFTMint/WriterMessage.vue
+++ b/components/NFTMint/WriterMessage.vue
@@ -148,6 +148,15 @@
             </option>
           </select>
         </div>
+        <div
+          class="flex justify-between gap-[12px] text-dark-gray text-[14px] items-center"
+        >
+          <label>
+            <input v-model="shouldShowCollectExpiryDateInput" type="checkbox"  @change="resetCollectExpiryDate" />
+            {{ $t('NFTPortal.label.collectExpiryDate.input') }}
+          </label>
+          <input v-if=shouldShowCollectExpiryDateInput ref="collectExpiryDateInput" type="date" :min="tomorrow" @change="updateCollectExpiryDate($event)" />
+        </div>  
       </div>
     </template>
   </div>
@@ -169,12 +178,18 @@ export default class WriterMessage extends Vue {
   @Prop(Number) readonly reserveAmount!: number
   @Prop(Number) readonly mintAmount!: number
   @Prop(Number) readonly maxMintAmount!: number
+  @Prop(String) readonly collectExpiryDate!: string
 
   userInfo: any = undefined
   avatar: string = ''
   displayName: string = this.address
   shouldShowSettings = true
   shouldShowAdvancedSettings = false
+  shouldShowCollectExpiryDateInput = false
+  tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
+    .toISOString()
+    .split('T')[0]
+
   initialBatchOptions = [
     { batch: -1, price: this.$t('NFTPortal.label.initialBatch.free') },
     { batch: 0, price: 8 },
@@ -202,6 +217,20 @@ export default class WriterMessage extends Vue {
     this.$emit('update-mint-amount', mintAmount)
   }
 
+  resetCollectExpiryDate(value: Event) {
+    const { checked } = (value.target as HTMLInputElement)
+    if (!checked) {
+      this.$emit('update:collectExpiryDate', '')
+      this.$emit('update-collect-expiry-date', '')
+    }
+  }
+
+  updateCollectExpiryDate(value: Event) {
+    const date = (value.target as HTMLInputElement).value
+    this.$emit('update:collectExpiryDate', date)
+    this.$emit('update-collect-expiry-date', date)
+  }
+
   async mounted() {
     try {
       const { data } = await this.$axios.get(
diff --git a/locales/en.json b/locales/en.json
index 8a24c416..3cfc9aa4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -263,6 +263,7 @@
   "NFTPortal.errorMessage.metadata.noURL": "Warning: No URL in ISCN's metadata {more}.",
   "NFTPortal.errorMessage.metadata.noURL.learnMore": "learn more",
   "NFTPortal.label.classId": "Class ID",
+  "NFTPortal.label.collectExpiryDate.input": "Set a deadline for collection",
   "NFTPortal.label.creator": "Creator",
   "NFTPortal.label.defaultDescription": "(no description)",
   "NFTPortal.label.detailsPage": "NFT Details Page :",
diff --git a/pages/nft/iscn/_iscnId.vue b/pages/nft/iscn/_iscnId.vue
index 2deb4c1d..ae86066f 100644
--- a/pages/nft/iscn/_iscnId.vue
+++ b/pages/nft/iscn/_iscnId.vue
@@ -35,6 +35,7 @@
         :mint-amount.sync="mintAmount"
         :max-mint-amount="maxMintAmount"
         :reserve-amount.sync="reserveNft"
+        :collect-expiry-date.sync="collectExpiryDate"
         @message-change="(value) => (message = value)"
         @update-mint-amount.once="handleInputMintAmount"
         @update-reserve.once="handleInputReserveNft"
@@ -266,6 +267,8 @@ export default class NFTTestMintPage extends Vue {
   initialBatch: number = 4
   shouldShowNoUrlWarning: boolean = false
 
+  collectExpiryDate: string = ''
+
   get isUserISCNOwner(): boolean {
     if (!this.iscnOwner) return false
     return (this.iscnOwner === this.address)
@@ -484,6 +487,13 @@ export default class NFTTestMintPage extends Vue {
     return this.initialBatch === -1
   }
 
+  get collectExpiryAt() {
+    if (this.collectExpiryDate) {
+      return Date.parse(this.collectExpiryDate);
+    }
+    return undefined;
+  }
+
   async mounted() {
     try {
       await Promise.all([
@@ -850,6 +860,7 @@ export default class NFTTestMintPage extends Vue {
           initialBatch: this.initialBatch,
           reservedNftCount: this.reserveNft,
           isFree: this.isFree,
+          collectExpiryAt: this.collectExpiryAt,
         },
         {
           params: {