From d8492ae8739bf37a03aab71f0b14e18b3d68ce9e Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Tue, 28 Jan 2025 06:58:50 +0300
Subject: [PATCH] feat: show order

---
 src/App.vue               |  1 -
 src/components/Drawer.vue | 21 +++++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1b15adf..e2676cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,7 +120,6 @@
       })
     } finally {
       isCreatingOrder.value = false;
-      showDrawer.value = false;
     }
   }
 
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
index aeb4e43..4da7bd3 100644
--- a/src/components/Drawer.vue
+++ b/src/components/Drawer.vue
@@ -1,7 +1,7 @@
 <script setup>
   import DrawerHead from './DrawerHead.vue'
   import CartItemList from '@/components/CartItemList.vue'
-  import { inject, onMounted, onUnmounted } from 'vue'
+  import { inject, onMounted, onUnmounted, ref } from 'vue'
   import { decimalFormatter } from '@/utils/helpers.js'
   import InfoBlock from '@/components/InfoBlock.vue'
 
@@ -12,6 +12,8 @@
     isCreatingOrder,
   } = inject('cart')
 
+  const orderDetails = ref({});
+
   defineProps({
     cart: {
       type: Array,
@@ -26,6 +28,10 @@
   onUnmounted(() => {
     document.body.style.overflow = 'unset'
   })
+
+  const onClickHandler = async () => {
+    orderDetails.value = await createOrder();
+  }
 </script>
 
 <template>
@@ -58,7 +64,7 @@
         </div>
 
         <button
-          @click="createOrder"
+          @click="onClickHandler"
           class="mt-5 bg-lime-500 w-full rounded-xl py-3 text-white transition disabled:bg-slate-300 hover:bg-lime-600 active:bg-lime-700"
           :disabled="isCreatingOrder"
         >
@@ -67,15 +73,18 @@
       </div>
     </div>
 
+    <InfoBlock
+      v-else-if="orderDetails.id"
+      title="Заказ оформлен"
+      :description="`Ваш заказ №${orderDetails.id} скоро будет передан курьерской службе`"
+      image-url="/order-success-icon.png"
+    />
+
     <InfoBlock
       v-else
       title="Корзина пуста"
       description="Добавьте хотябы одну пару кроссовок, чтобы сделать заказ"
       image-url="/package-icon.png"
     />
-<!--    <h2 v-else class="text-lg font-bold text-center mt-10 text-slate-500">-->
-<!--      В корзине нет товаров-->
-<!--    </h2>-->
-
   </div>
 </template>