💄 Update & refactor new coupon UI (#105)

components/NewCouponModal.vue

@@ -0,0 +1,147 @@
+<template>
+  <UModal v-model="isModalOpen">
+    <UCard
+      :ui="{
+        body: { base: 'space-y-4' },
+        footer: { base: 'flex justify-end gap-2' }
+      }"
+    >
+      <template #header>
+        <h3 class="font-bold font-mono">
+          New Coupon
+        </h3>
+      </template>
+
+      <UFormGroup label="Coupon Code">
+        <UInput
+          v-model="coupon.id"
+          placeholder="coupon_code"
+          :ui="{ base: 'font-mono' }"
+        />
+      </UFormGroup>
+      <UFormGroup
+        label="Discount Multiplier"
+        description="Between 0.01x and 1x"
+      >
+        <div class="flex gap-4 items-center">
+          <URange
+            v-model="couponDiscount"
+            :step="5"
+          />
+          <UInput
+            v-model="coupon.discount"
+            type="number"
+            :step="0.01"
+            :min="0.01"
+            :max="1.0"
+            :ui="{ base: 'min-w-[80px] text-right' }"
+          />
+        </div>
+
+        <template #help>
+          <ul class="flex gap-1">
+            <li v-for="({ label, value }) in discountShortcuts" :key="label">
+              <UButton
+                :label="label"
+                :color="couponDiscount === value ? 'primary' : 'gray'"
+                size="2xs"
+                @click="couponDiscount = value "
+              />
+            </li>
+          </ul>
+        </template>
+      </UFormGroup>
+
+      <UFormGroup label="Expiry Date">
+        <UInput
+          v-model="coupon.expireTs"
+          type="date"
+        />
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="gray"
+          @click="isModalOpen = false"
+        />
+        <UButton
+          label="Add"
+          :disabled="!(coupon.id && coupon.discount)"
+          @click="handleClickAddButton"
+        />
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:modelValue', isOpen: boolean): void
+  (e: 'add', coupon: {
+    id: string
+    discount: number
+    expireTs: number | null
+  }): void
+}>()
+
+const isModalOpen = computed({
+  get () {
+    return !!route.query.new_coupon
+  },
+  set (value) {
+    emit('update:modelValue', value)
+
+    router.replace({
+      query: {
+        ...route.query,
+        new_coupon: value ? '1' : undefined
+      }
+    })
+  }
+})
+
+const coupon = ref({
+  id: '',
+  discount: 1.0,
+  expireTs: ''
+})
+
+const discountShortcuts = [50, 70, 80, 85, 90, 95].map(value => ({ label: `${100 - value}%`, value }))
+
+const couponDiscount = computed({
+  get () {
+    return coupon.value.discount * 100
+  },
+  set (value) {
+    coupon.value.discount = value / 100
+  }
+})
+
+watch(() => props.modelValue, (isOpen) => {
+  isModalOpen.value = isOpen
+  if (isOpen) {
+    coupon.value = {
+      id: '',
+      discount: 1.0,
+      expireTs: ''
+    }
+  }
+}, { immediate: true })
+
+function handleClickAddButton () {
+  isModalOpen.value = false
+  emit('add', {
+    ...coupon.value,
+    expireTs: coupon.value.expireTs ? new Date(coupon.value.expireTs).getTime() : null
+  })
+}
+</script>

pages/nft-book-store/collection/status/[collectionId].vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="space-y-4">
+  <main class="space-y-10 pb-10">
     <h1 class="text-lg font-bold font-mono">
       NFT Book Collection Status "{{ collectionName }}"
     </h1>
@@ -233,57 +233,35 @@
         }"
       >
         <template #header>
-          <h4 class="text-sm font-bold font-mono">
-            Coupon codes
-          </h4>
+          <h3 class="font-bold font-mono">
+            Coupon Codes
+          </h3>
+          <UButton
+            label="Add New"
+            icon="i-heroicons-plus-circle"
+            variant="outline"
+            color="primary"
+            @click="isShowNewCouponModal = true"
+          />
         </template>
 
         <UTable
+          v-if="couponsTableRows.length"
           :columns="[
-            { key: 'id', label: 'code', sortable: true },
-            { key: 'discount', label: 'discount multiplier' },
-            { key: 'expireTs', label: 'expireTs' },
+            { key: 'id', label: 'Code', sortable: true },
+            { key: 'discount', label: 'Discount Multiplier' },
+            { key: 'expireTs', label: 'Expiry Date' },
           ]"
           :rows="couponsTableRows"
-        />
-        <h5>New Coupon</h5>
-        <UFormGroup
-          label="New coupon code"
-          :ui="{ label: { base: 'font-mono font-bold' } }"
-        >
-          <UInput
-            v-model="newCoupon.id"
-            placeholder="coupon_code"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Coupon discount multiplier, 0.01x - 1x"
-          :ui="{ label: { base: 'font-mono font-bold' } }"
-        >
-          <UInput
-            v-model="newCoupon.discount"
-            type="number"
-            min="0.01"
-            max="1"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Coupon expire date"
-          :ui="{ label: { base: 'font-mono font-bold' } }"
         >
-          <UInput
-            v-model="newCoupon.expireTs"
-            type="date"
-          />
-        </UFormGroup>
-
-        <UButton
-          label="Add"
-          :disabled="!(newCoupon.id && newCoupon.discount)"
-          @click="addCouponCode"
-        />
+          <template #id-data="{ row }">
+            <span class="font-mono">{{ row.id }}</span>
+          </template>
+        </UTable>
       </UCard>
 
+      <NewCouponModal v-model="isShowNewCouponModal" @add="addCouponCode" />
+
       <UCard :ui="{ body: { base: 'space-y-8' } }">
         <template #header>
           <h3 class="font-bold font-mono">
@@ -540,11 +518,6 @@ const searchInput = ref('')
 const moderatorWallets = ref<string[]>([])
 const moderatorWalletsGrants = ref<any>({})
 const coupons = ref<any>({})
-const newCoupon = ref<any>({
-  id: '',
-  discount: 1.0,
-  expireTs: ''
-})
 const notificationEmails = ref<string[]>([])
 const moderatorWalletInput = ref('')
 const notificationEmailInput = ref('')
@@ -554,6 +527,7 @@ const stripeConnectWalletInput = ref('')
 const mustClaimToView = ref(false)
 const hideDownload = ref(false)
 const useLikerLandPurchaseLink = ref(true)
+const isShowNewCouponModal = ref(false)
 
 const collectionName = computed(() => collectionStore.getCollectionById(collectionId.value as string)?.name)
 const ownerWallet = computed(() => collectionListingInfo?.value?.ownerWallet)
@@ -910,17 +884,10 @@ async function hardSetStatusToCompleted (purchase: any) {
   collectionListingInfo.value.pendingNFTCount -= 1
 }
 
-function addCouponCode () {
-  console.log(coupons.value)
-  coupons.value[newCoupon.value.id] = {
-    discount: newCoupon.value.discount,
-    expireTs: newCoupon.value.expireTs ? new Date(newCoupon.value.expireTs).getTime() : null,
-    email: newCoupon.value.email
-  }
-  newCoupon.value = {
-    id: '',
-    discount: 1.0,
-    expireTs: ''
+function addCouponCode (coupon: any) {
+  coupons.value[coupon.id] = {
+    discount: coupon.discount,
+    expireTs: coupon.expireTs
   }
   updateSettings()
 }