feat: create review for order product

src/components.d.ts

@@ -11,7 +11,6 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
-    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
@@ -108,6 +107,7 @@ declare module 'vue' {
     ICart: typeof import('./components/icons/ICart.vue')['default']
     IChat: typeof import('./components/icons/IChat.vue')['default']
     ICheck: typeof import('./components/icons/ICheck.vue')['default']
+    IComment: typeof import('./components/icons/IComment.vue')['default']
     ICompany: typeof import('./components/icons/about/ICompany.vue')['default']
     IContact: typeof import('./components/icons/IContact.vue')['default']
     ICross: typeof import('./components/icons/ICross.vue')['default']

src/components/head/CBMenuCategories.vue

@@ -22,7 +22,7 @@ const appearMenu = () => {
 <template>
   <div class="menu-item-container">
     <div class="menu-item relative">
-      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @mouseover="appearMenu" @click="appearMenu">
+      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @click="appearMenu">
         <i class="fas fa-list-ul mb-0.5" /> {{ t('header.categories') }} <IBCaretDown />
       </p>
       <Transition duration="500" name="nested">

src/components/icons/IComment.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M5 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2z" /><path d="m2.165 15.803l.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7s-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272a1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z" /></g></svg>
+</template>

src/data/review.json

@@ -2,19 +2,48 @@
     "status": true,
     "data": {
         "current_page": 1,
-        "data": [],
-        "first_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/5\/reviews?page=1",
-        "from": null,
+        "data": [
+            {
+                "id": 2,
+                "rating": 5,
+                "comment": "Thank you for you this mouse devide. I like it!",
+                "reply": "",
+                "variations": [
+                    "Black M220"
+                ],
+                "user_id": 21,
+                "shop_id": 6,
+                "product_id": 25,
+                "order_id": null,
+                "create_at": "2022-06-07 17:05:46"
+            },
+            {
+                "id": 3,
+                "rating": 5,
+                "comment": "Thank you for you this mouse devide. I like it!",
+                "reply": "",
+                "variations": [
+                    "Black M220"
+                ],
+                "user_id": 21,
+                "shop_id": 6,
+                "product_id": 25,
+                "order_id": null,
+                "create_at": "2022-06-07 17:06:07"
+            }
+        ],
+        "first_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/25\/reviews?page=1",
+        "from": 1,
         "last_page": 1,
-        "last_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/5\/reviews?page=1",
+        "last_page_url": "http:\/\/tp-o.tk\/api\/v2\/products\/25\/reviews?page=1",
         "links": [
             {
                 "url": null,
                 "label": "« Previous",
                 "active": false
             },
             {
-                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/5\/reviews?page=1",
+                "url": "http:\/\/tp-o.tk\/api\/v2\/products\/25\/reviews?page=1",
                 "label": "1",
                 "active": true
             },
@@ -25,10 +54,10 @@
             }
         ],
         "next_page_url": null,
-        "path": "http:\/\/tp-o.tk\/api\/v2\/products\/5\/reviews",
+        "path": "http:\/\/tp-o.tk\/api\/v2\/products\/25\/reviews",
         "per_page": "10",
         "prev_page_url": null,
-        "to": null,
-        "total": 0
+        "to": 2,
+        "total": 2
     }
 }

src/pages/buyer/order/[order].vue

@@ -6,8 +6,9 @@ meta:
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useOrder } from '~/stores/order'
-import { useLoading} from '~/stores/loading'
+import { useLoading } from '~/stores/loading'
 import { handleDate } from '~/utils/date'
+import { toast } from '~/stores/toast'
 import { useProduct } from '~/stores/product'
 import { getResources } from '~/utils/resources'
 import OrderRequest from '~/services/order-request'
@@ -16,9 +17,10 @@ const router = useRouter()
 const order = useOrder()
 const product = useProduct()
 const loading = useLoading()
+const userToast = toast()
 const { t } = useI18n()
 useHead({
-  title: `order | ${order.savedOrder}`,
+  title: `order | ID = ${order.savedOrder}`,
 })
 
 const statusPercent = (status_id: number) => {
@@ -48,6 +50,18 @@ onMounted(async() => {
   orderImg.value = getResources(orderData.product.images[0])
   loading.isLoading = false
 })
+// ------------------------------------------------
+const isComment = ref<Boolean>(false)
+const payload = reactive({
+  order_id: order.savedOrder,
+  rating: 5,
+  comment: '',
+})
+const handleComment = async() => {
+  await OrderRequest.createOrdersReviews(payload)
+  isComment.value = false
+  userToast.updateToast('success', 'Thanks for your review!', true)
+}
 watchEffect(() => {
   order.setNewOrder(order.savedOrder)
 })
@@ -131,30 +145,48 @@ const onVisitProduct = (prod_id: number, shop_id: number) => {
               </div>
             </div>
             <div>
-              <img :src="orderImg" alt="product_order_img" class="max-w-45 max-h-45 rounded-xl cursor-pointer border-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+              <img :src="orderImg" alt="product_order_img" class="max-w-45 max-h-45 rounded-xl cursor-pointer" @click="onVisitProduct(payget.product_id, payget.shop_id)">
             </div>
           </div>
-          <div class="flex justify-between">
-            <div>
-              <p class="text-xs text-red-300">
-                Address
-              </p>
-              <div class="text-sm text-gray-500">
-                <p>
-                  Name: {{ order.orderAddress.full_name }}
-                </p>
-                <p>Phone: {{ order.orderAddress.phone }}</p>
-                <p>Address: {{ order.orderAddress.address }}, {{ order.orderAddress.town }}, {{ order.orderAddress.city }}, {{ order.orderAddress.state }}</p>
-              </div>
-            </div>
-            <div class="flex justify-center items-end">
-              <button type="button" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:(ring-2 ring-purple-300) dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2 text-center mr-2 flex items-center gap-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
-                <IBOrderArrowRight /> See product
-              </button>
-            </div>
+        </div>
+      </div>
+
+      <div class="col-span-5 grid grid-cols-5">
+        <div class="flex justify-center items-start col-span-2">
+          <button v-if="statusPercent(payget.status_id)>= 75" type="button" class="text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:(ring-2 ring-pink-300) dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2 text-center mr-2 gap-1 flex items-center" @click="isComment = !isComment">
+            <IComment /> Comment
+          </button>
+          <button type="button" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:(ring-2 ring-purple-300) dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2 text-center mr-2 flex items-center gap-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+            <IBOrderArrowRight /> See product
+          </button>
+        </div>
+        <div class="col-span-3">
+          <p class="text-xs text-red-300">
+            Address
+          </p>
+          <div class="text-sm text-gray-500">
+            <p>
+              Name: {{ order.orderAddress.full_name }}
+            </p>
+            <p>Phone: {{ order.orderAddress.phone }}</p>
+            <p>Address: {{ order.orderAddress.address }}, {{ order.orderAddress.town }}, {{ order.orderAddress.city }}, {{ order.orderAddress.state }}</p>
           </div>
         </div>
       </div>
+
+      <Transition name="slide-fade">
+        <div v-if="isComment" class="col-span-5">
+          <div class="flex items-center py-2 px-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+            <button class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd" /></svg>
+            </button>
+            <textarea id="chat" v-model="payload.comment" rows="1" class="block mx-4 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:(ring-blue-500 border-blue-500) dark:(bg-gray-800 border-gray-600 placeholder-gray-400 text-white) dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your message have more 25 characters..." />
+            <button class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600" :class="{'pointer-events-none opacity-50':payload.comment.length < 25}" @click="handleComment">
+              <svg class="w-6 h-6 rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /></svg>
+            </button>
+          </div>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -225,5 +257,19 @@ const onVisitProduct = (prod_id: number, shop_id: number) => {
   transform: scale(1.2);
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
+/* ***************************** */
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
 
 </style>

src/pages/product/[product].vue

@@ -47,7 +47,7 @@ onMounted(async() => {
     loading.isLoading = false
 
     const { data: reviewData } = await ProductRequest.getReviewsProductsById(product.productRequestID, { params: { limit: 10 } })
-    productReview.value = reviewData
+    productReview.value = reviewData.data
   }
 })
 
@@ -357,7 +357,7 @@ const onvisitShop = () => {
       <label>{{ t('product.category') }}</label>
       <div class="text-[#0055BD] cursor-pointer font-medium flex">
         e-shopee >
-        <div v-if="productResponseData.attributes" class="flex gap-7">
+        <div v-if="productResponseData.attributes.length !== 0" class="flex gap-7">
           <p v-for="(attr, i) in productResponseData.attributes" :key="i">
             {{ attr.name }} > {{ attr.value }}
           </p>
@@ -418,7 +418,7 @@ const onvisitShop = () => {
       <h2>{{ t('product.product-evalutions') }}</h2>
     </div>
     <div class="divide-y divide-1 divide-solid divide-gray-200">
-      <div v-for="i in 2" :key="i" class="flex justify-between items-start py-3">
+      <div v-for="(cmt, index) in productReview" :key="index" class="flex justify-between items-start py-3">
         <div class="flex">
           <div class="px-3">
             <img src="https://cf.shopee.vn/file/3922ddaf7b5dde58c3193c6689e7aaca_tn" alt="customer_avatar_img" class="max-w-10 max-h-10 rounded-full">
@@ -428,22 +428,25 @@ const onvisitShop = () => {
               yen050619
             </p>
             <p class="flex gap-0.25">
-              <IStars v-for="i in 5" :key="i" />
+              <IStars v-for="i in cmt.rating" :key="i" />
             </p>
             <p>
-              Very good! I like it.
+              {{ cmt.comment }}
             </p>
             <div class="flex items-center gap-5">
               <p class="flex items-center gap-1.5 cursor-pointer">
                 <IBLike /> 11
               </p>
               <p class="flex items-center gap-1.5 cursor-pointer">
-                <IBChat /> Comment
+                <IComment /> Comment
               </p>
             </div>
           </div>
         </div>
-        <div class="cursor-pointer hover:opacity-60">
+        <div class="cursor-pointer hover:opacity-60 flex items-center gap-5">
+          <p class="text-sm">
+            {{ handleDate(cmt.create_at) }}
+          </p>
           <IBThreeDot />
         </div>
       </div>

src/services/order-request.js

@@ -26,6 +26,12 @@ class OrderRequest {
     return AxiosInstance.get(url, data)
   }
 
+  createOrdersReviews(data) {
+    const url = '/user/reviews'
+    return AxiosInstance.post(url, data)
+  }
+  // ------------ Seller -----------------
+
   markOrdersReadySeller(id, data) {
     const url = `/shop/orders/${id}/ready`
     return AxiosInstance.post(url, data)
@@ -35,6 +41,7 @@ class OrderRequest {
     const url = `/shop/orders/${id}/cancel`
     return AxiosInstance.post(url, data)
   }
+  // ------------------ Admin -------------
 
   markOrdersCancelAdmin(id, data) {
     const url = `/admin/orders/${id}/cancel`