✨ Add 'Collectable Before' feature

likecoin · Aug 15, 2023 · f3fa5f6 · f3fa5f6
1 parent b8b8ac6
commit f3fa5f6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/components/NFTMint/WriterMessage.vue b/components/NFTMint/WriterMessage.vue
@@ -149,6 +149,15 @@
           </select>
         </div>
       </div>
+      <div
+        class="flex flex-col justify-start gap-[32px] p-[20px] pb-[24px] border-2 border-[#E6F4F2] rounded-[16px] w-full"
+      >
+        <label>
+          <input v-model="shouldShowCollectableBeforeDateInput" type="checkbox"  @change="resetCollectableBeforeDate" />
+          {{ $t('NFTPortal.label.collectableBefore.input') }}
+        </label>
+        <input v-if=shouldShowCollectableBeforeDateInput ref="collectableBeforeDateInput" type="date" :min="tomorrow" @change="updateCollectableBeforeDate($event)" />
+      </div>
     </template>
   </div>
 </template>
@@ -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 collectableBeforeDate!: string
 
   userInfo: any = undefined
   avatar: string = ''
   displayName: string = this.address
   shouldShowSettings = true
   shouldShowAdvancedSettings = false
+  shouldShowCollectableBeforeDateInput = 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)
   }
 
+  resetCollectableBeforeDate(value: Event) {
+    const { checked } = (value.target as HTMLInputElement)
+    if (!checked) {
+      this.$emit('update:collectableBeforeDate', '')
+      this.$emit('update-collectable-before-date', '')
+    }
+  }
+
+  updateCollectableBeforeDate(value: Event) {
+    const date = (value.target as HTMLInputElement).value
+    this.$emit('update:collectableBeforeDate', date)
+    this.$emit('update-collectable-before-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.collectableBefore.input": "Set collectable expiration date",
   "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"
+        :collectable-before-date.sync="collectableBeforeDate"
         @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
 
+  collectableBeforeDate: string = ''
+
   get isUserISCNOwner(): boolean {
     if (!this.iscnOwner) return false
     return (this.iscnOwner === this.address)
@@ -484,6 +487,10 @@ export default class NFTTestMintPage extends Vue {
     return this.initialBatch === -1
   }
 
+  get collectableBefore() {
+    return Date.parse(this.collectableBeforeDate);
+  }
+
   async mounted() {
     try {
       await Promise.all([
@@ -850,6 +857,7 @@ export default class NFTTestMintPage extends Vue {
           initialBatch: this.initialBatch,
           reservedNftCount: this.reserveNft,
           isFree: this.isFree,
+          collectableBefore: this.collectableBefore,
         },
         {
           params: {