[TAS-205] ✨ Add 'Collectable Before' feature (#382)

* ✨ Add 'Collectable Before' feature * 🎨 Rename variables and functions * 🥅 Guard `collectExpiryDate` undefined case * 💄 Move controller to 'sales setting' panel
likecoin · Aug 30, 2023 · 429483a · 429483a
1 parent 1db513d
commit 429483a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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: {