Added confirmationModal.vue

src/components/confirmationModal.vue

@@ -1,31 +1,39 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-import './assets/style.scss'
+<script setup lang="ts">
+const emit = defineEmits(['close']);
 
-export default defineComponent({
-  data() {
-    defineModel( return {
-      confirmationURL : String
-    }
-    )
-    return {
+const props = defineProps(
+  {
+    orderUuid : String
+  }
+);
 
-    }
-  },
-  name: 'confirmationModal',
-})
+function confirmOrder() {
+  emit('close');
+  fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + props.orderUuid, {
+    method: 'PUT'
+  });
+}
 </script>
 
 <template>
   <div>
     <div class="modal is-active">
       <div class="modal-background"></div>
-      <div class="modal-content">
-        <div class="box">
-          <p>woop</p>
-        </div>
+      <div class="modal-card p-3">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Uwaga</p>
+          <button class="delete" aria-label="close" @click="$emit('close')"></button>
+        </header>
+        <section class="modal-card-body">
+          Czy napewno chcesz potwierdzić zamówienie? Czynności tej nie można odwrócić.
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons">
+            <button class="button is-success" @click="confirmOrder">Tak</button>
+            <button class="button" @click="$emit('close')">Nie</button>
+          </div>
+        </footer>
       </div>
-      <button class="modal-close" @click="$emit('close')"></button>
     </div>
   </div>
 </template>