@mixd-id/web-scaffold 0.1.240411024 → 0.1.240411025

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411024",
+  "version": "0.1.240411025",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Checkout.vue

@@ -1,21 +1,33 @@
 <template>
 	<div :class="$style.el">
 
-    <div v-if="readyState === 2" class="flex justify-center items-center min-h-[80vh]">
+    <div v-if="order === 'loading'" class="flex justify-center items-center min-h-[80vh]">
       Loading...
     </div>
 
-    <div v-else-if="!order" class="flex flex-col gap-4 justify-center items-center min-h-[80vh] p-8">
-      <div class="text-center">
-        <h1>Cart is Empty</h1>
-        <p class="max-w-[480px]">Your order is empty, if you're interested in our products, browse products from our catalog by clicking button below.</p>
-      </div>
-      <router-link to="/" class="text-primary">Browse Catalog</router-link>
+    <div v-else-if="order instanceof Error"
+         class="flex flex-col gap-4 justify-center items-center min-h-[80vh] p-8">
+      <slot name="error" :error="order">
+        <component v-if="items"
+                   v-for="component in items"
+                   :is="component"
+                   :key="component"
+                   :="component" />
+        <div v-else class="flex flex-col gap-3 items-center justify-center">
+          <h1>Error</h1>
+          <p class="max-w-[480px]">{{ order.message }}</p>
+        </div>
+      </slot>
     </div>
 
     <div v-else class="flex flex-col md:flex-row md:gap-8 min-h-[100vh]">
 
       <div class="flex-1 flex flex-col gap-5">
+
+        <div class="p-5">
+          <h3>Checkout</h3>
+        </div>
+
         <div v-if="order.customerId">
           <div class="px-5">
             <small class="text-text-400">Customer</small>
@@ -28,10 +40,10 @@
         </div>
 
         <div v-else>
-          <div class="px-5">
-            <small class="text-text-400">Customer</small>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="flex-1 text-text-400">Customer</small>
           </div>
-          <div class="bg-base-300 flex flex-col gap-3 p-5 py-3">
+          <div class="mt-1 bg-base-300 flex flex-col gap-3 p-5 py-3">
             <div>
               <small>Name</small>
               <Textbox v-model="order.customerName" />
@@ -47,17 +59,36 @@
           </div>
         </div>
 
+        <div>
+          <div class="px-5">
+            <small class="text-text-400">Products</small>
+          </div>
+
+          <div class="mt-1 p-5 bg-base-300 flex flex-col gap-3">
+            <div v-for="item in order.items" class="flex flex-row gap-3">
+              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-50" />
+              <div class="flex-1 flex flex-col gap1">
+                <small>{{ item.code }}</small>
+                <strong>{{ item.name }}</strong>
+                <label>{{ item.qty }}x {{ item.price.toLocaleString() }}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div>
           <div class="px-5 flex flex-row gap-2">
-            <small class="text-text-400 flex-1">Delivery</small>
+            <small class="text-text-400 flex-1">Delivery Address</small>
             <button type="button" class="text-primary text-sm"
-                    @click="$refs.deliveryAddress.open()">
+                    @click="$router.push({ query:$route.query, hash:'#select-delivery' })">
               Choose Address
             </button>
           </div>
-          <div class="bg-base-300 flex flex-col p-5 py-3">
+          <div class="bg-base-300 flex flex-col gap-5 p-5 py-3 mt-1">
 
-            <div v-if="order.deliveryAddressId">
+            <div class="flex flex-col gap-1">
+              <small>{{ order.deliveryType }}</small>
+              <strong>{{ order.deliveryContactName }}</strong>
               <p>{{ order.deliveryAddress }}</p>
               <p>
                 {{ order.deliveryProvinceName }}
@@ -73,6 +104,30 @@
               </p>
             </div>
 
+            <div class="h-[1px] bg-text-50"></div>
+
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <small>Courier</small>
+                <Dropdown v-model.number="order.deliveryCourierId">
+                  <option disabled selected>Select Courier</option>
+                  <option v-for="courier in couriers" :value="courier.id">
+                    {{ courier.name }}
+                  </option>
+                </Dropdown>
+              </div>
+
+              <div>
+                <small>Package</small>
+                <Dropdown v-model.number="order.deliveryPackageId">
+                  <option disabled selected>Select Package</option>
+                  <option v-for="obj in courierPackages" :value="obj.id">
+                    {{ obj.name }}
+                  </option>
+                </Dropdown>
+              </div>
+            </div>
+
           </div>
         </div>
 
@@ -80,18 +135,42 @@
           <div class="px-5 flex flex-row gap-2">
             <small class="text-text-400">Payment</small>
           </div>
-          <div class="bg-base-300 p-5 py-3 grid grid-cols-2 gap-3">
+          <div class="bg-base-300 p-5 py-3 grid md:grid-cols-2 gap-3">
 
             <Radio v-for="paymentType of paymentTypes"
                    :class="`${$style.paymentType}${paymentType.id === order.paymentTypeId ? ' ' + $style.paymentTypeSelected : ''}`"
                    v-model.number="order.paymentTypeId"
-                   :value="paymentType.id"
-                   :custom="true">
+                   :value="paymentType.id">
               {{ paymentType.name }}
             </Radio>
 
           </div>
         </div>
+
+        <div>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="text-text-400">Summary</small>
+          </div>
+          <div class="bg-base-300 mt-1 p-5 flex flex-col gap-3">
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Total Products</label>
+              <strong>{{ (order.subTotal ?? 0).toLocaleString() }}</strong>
+            </div>
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Discount</label>
+              <strong>{{ (order.discountAmount ?? 0).toLocaleString() }}</strong>
+            </div>
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Delivery Charge</label>
+              <strong>{{ (order.deliveryCharge ?? 0).toLocaleString() }}</strong>
+            </div>
+
+          </div>
+        </div>
+
       </div>
 
       <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-text-50">
@@ -101,7 +180,7 @@
         </div>
         <div v-else class="flex-1"></div>
         <Button ref="paymentBtn"
-                class="px-3"
+                class="px-8 font-bold"
                 :state="canPayment ? 1 : -1"
                 @click="payment">
           Payment
@@ -121,37 +200,25 @@
 
     </div>
 
-    <Modal ref="deliveryAddress" width="480" height="600">
-      <template v-slot:head>
-        <div class="relative p-5">
-          <h3>Select Address</h3>
-          <div class="absolute top-0 right-0 p-2">
-            <button type="button" class="p-2" @click="$refs.deliveryAddress.close()">
-              <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </template>
-
+    <Modal hash="#select-delivery"
+           width="400"
+           height="640"
+           :dismissable="true">
       <template #default="{ context }">
-        <div class="flex-1 p-5 flex flex-col">
-
-          <div v-for="deliveryAddress in deliveryAddresses">
-            {{ deliveryAddress }}
+        <div class="flex-1 flex flex-col">
+          <div class="absolute top-0 right-0">
+            <button type="button"
+                    class="p-5"
+                    @click="$router.replace({ query:$route.query, hash:'' })">
+              <svg width="19" height="19" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+            </button>
           </div>
 
-          <button type="button" class="p-3 text-center">
-            New Address
-          </button>
-
-        </div>
-      </template>
-
-      <template v-slot:foot>
-        <div class="p-5">
-
+          <CheckoutDelivery class="flex-1"
+                            :api-url="apiUrl"
+                            ref="checkoutDelivery"
+                            :items="deliveryAddresses"
+                            @apply="setDelivery" />
         </div>
       </template>
     </Modal>
@@ -162,28 +229,45 @@
 <script>
 
 import axios from "axios";
+import CheckoutDelivery from "./CheckoutDelivery.vue";
 
 export default {
 
+  components: {CheckoutDelivery},
+
+  inject: [ 'toast' ],
+
   computed: {
 
     canPayment(){
       return this.apiUrl &&
           this.order
+    },
+
+    courierPackages(){
+      const courier = (this.couriers ?? [])
+          .find(_ => _.id === this.order.deliveryCourierId)
+
+      return courier?.packages
     }
 
   },
 
   props: {
 
-    apiUrl: String
+    apiUrl: {
+      type: String,
+      required: true
+    },
+
+    items: Array
 
   },
 
   methods: {
 
     load(uid){
-      this.readyState = 2
+      this.order = 'loading'
       axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
         params: {
           uid
@@ -193,16 +277,39 @@ export default {
             this.order = res.data.order
             this.deliveryAddresses = res.data.deliveryAddresses
             this.paymentTypes = res.data.paymentTypes
-            this.readyState = 1
-          })
-          .catch(err => {
-            this.readyState = -1
-            this.error = err
           })
+          .catch(err => this.order = err)
+    },
+
+    loadCouriers(){
+      if(!this.apiUrl)
+        return console.warn('Unable to load couriers, apiUrl not set')
+
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-couriers'
+        }
+      })
+        .then(res => this.couriers = res.data)
+        .catch(err => this.toast(err))
     },
 
     payment(){
 
+    },
+
+    update(){
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        _action: 'update',
+        order: this.order
+      })
+        .then(res => Object.assign(this.order, res.data))
+        .catch(err => this.toast(err))
+    },
+
+    setDelivery(address){
+      Object.assign(this.order, address)
+      this.$router.replace({ query:this.$route.query, hash:'' })
     }
 
   },
@@ -212,14 +319,14 @@ export default {
       order: null,
       paymentTypes: null,
       deliveryAddresses: null,
-      readyState: 1,
-      error: null
+
+      couriers: null
     }
   },
 
   mounted() {
     if(this.$editMode.value > 0){
-      this.load('dummy')
+      this.order = {}
     }
   },
 
@@ -232,6 +339,15 @@ export default {
           this.load(uid)
         }
       }
+    },
+
+    'order.deliveryAddress': {
+      immediate: true,
+      handler(deliveryAddress){
+        if(deliveryAddress){
+          this.loadCouriers()
+        }
+      }
     }
 
   }
@@ -247,7 +363,7 @@ export default {
 }
 
 .paymentType{
-  @apply border-[1px] border-text-50 rounded-lg;
+  @apply rounded-lg;
   @apply p-2 text-sm;
 }
 .paymentTypeSelected{

package/src/components/CheckoutDelivery.vue

@@ -0,0 +1,267 @@
+<template>
+	<div class="flex-1 flex flex-col">
+
+    <div class="p-5">
+      <h3>Select Delivery</h3>
+    </div>
+
+    <div v-if="!newItem" class="flex flex-col divide-y divide-text-50">
+      <div v-for="item in items"
+           class="p-5 py-3 flex flex-col cursor-pointer"
+           @click="apply(item)">
+        <small>{{ item.deliveryType }}</small>
+        <strong>{{ item.deliveryContactName }}</strong>
+        <p>{{ item.deliveryAddress }}</p>
+      </div>
+
+      <button type="button" class="p-6 text-primary" @click="addNew">
+        New Address
+      </button>
+    </div>
+
+    <div v-else class="flex-1 flex flex-col gap-5">
+
+      <div class="flex-1 overflow-y-auto flex flex-col gap-5 p-5">
+        <div>
+          <small>Type</small>
+          <Dropdown v-model="newItem.deliveryType">
+            <option>Home</option>
+            <option>Office</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Contact Name</small>
+          <Textbox v-model="newItem.deliveryContactName" />
+        </div>
+
+        <div>
+          <small>Address</small>
+          <Textarea v-model="newItem.deliveryAddress" rows="3" />
+        </div>
+
+        <div>
+          <small>Province</small>
+          <Dropdown v-model="newItem.deliveryProvinceName">
+            <option disabled selected>Choose Province</option>
+            <option v-for="province in provinces" :value="province.name">
+              {{ province.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>City</small>
+          <Dropdown v-model="newItem.deliveryCityName">
+            <option disabled selected>Choose City</option>
+            <option v-for="city in cities" :value="city.name">
+              {{ city.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>District</small>
+          <Dropdown v-model="newItem.deliveryDistrictName">
+            <option disabled selected>Choose District</option>
+            <option v-for="district in districts" :value="district.name">
+              {{ district.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Sub District</small>
+          <Dropdown v-model="newItem.deliverySubDistrictName"
+                    @change="setPostalCode(newItem.deliverySubDistrictName)">
+            <option disabled selected>Choose Sub District</option>
+            <option v-for="subDistrict in subDistricts" :value="subDistrict.name">
+              {{ subDistrict.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Postal Code</small>
+          <Textbox v-model="newItem.deliveryPostalCode" />
+        </div>
+      </div>
+
+      <div class="p-5">
+        <Button class="w-full"
+                :state="canSave ? 1 : -1"
+                @click="apply(newItem)">Set Address</Button>
+      </div>
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default{
+
+  emits: [ 'apply' ],
+
+  computed: {
+
+    canSave(){
+      return this.newItem &&
+          this.newItem.deliveryType &&
+          this.newItem.deliveryContactName &&
+          this.newItem.deliveryAddress &&
+          this.newItem.deliveryProvinceName &&
+          this.newItem.deliveryCityName &&
+          this.newItem.deliveryDistrictName &&
+          this.newItem.deliverySubDistrictName &&
+          this.newItem.deliveryPostalCode
+    }
+
+  },
+
+  props: {
+
+    apiUrl: {
+      type: String,
+      required: true
+    },
+
+    items: Array
+
+  },
+
+  data(){
+    return {
+      newItem: null,
+
+      provinces: null,
+      cities: null,
+      districts: null,
+      subDistricts: null
+    }
+  },
+
+  methods: {
+
+    addNew(){
+      this.newItem = {}
+      this.loadProvinces()
+    },
+
+    apply(item){
+      this.$emit('apply', JSON.parse(JSON.stringify(item)))
+    },
+
+    loadProvinces(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-provinces'
+        }
+      })
+        .then(res => {
+          this.provinces = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadCities(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-cities',
+          province: this.newItem.deliveryProvinceName
+        }
+      })
+        .then(res => {
+          this.cities = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadDistricts(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-districts',
+          province: this.newItem.deliveryProvinceName,
+          city: this.newItem.deliveryCityName
+        }
+      })
+        .then(res => {
+          this.districts = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadSubDistricts(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-sub-districts',
+          province: this.newItem.deliveryProvinceName,
+          city: this.newItem.deliveryCityName,
+          district: this.newItem.deliveryDistrictName
+        }
+      })
+        .then(res => {
+          this.subDistricts = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    setPostalCode(subDistrictName){
+      const subDistrict = (this.subDistricts ?? []).find(item => item.name === subDistrictName)
+      this.newItem.deliveryPostalCode = subDistrict?.postalCode ?? ''
+    },
+
+  },
+
+  watch: {
+
+    'newItem.deliveryProvinceName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadCities()
+      }
+    },
+
+    'newItem.deliveryCityName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadDistricts()
+      }
+    },
+
+    'newItem.deliveryDistrictName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadSubDistricts()
+      }
+    }
+
+  }
+
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Modal.vue

@@ -404,6 +404,7 @@ html[data-theme='dark'] .overlay{
 @media screen and (max-width: 640px){
 
 	.modal {
+    width: 100% !important;
 		max-height: 90vh;
 	}
 
@@ -429,11 +430,5 @@ html[data-theme='dark'] .overlay{
 
 }
 
-@media screen and (min-width: 640px) {
-
-	.modal {
-	}
-
-}
 
 </style>