feat: create new order

spa/src/views/Cart.vue

@@ -86,7 +86,11 @@
           </div>
         </div>
 
-        <button class="btn btn-primary" :disabled="cart.canCheckout === false">Перейти к оформлению</button>
+        <button
+            class="btn btn-primary"
+            :disabled="cart.canCheckout === false"
+            @click="goToCheckout"
+        >Перейти к оформлению</button>
       </div>
     </div>
 
@@ -108,8 +112,10 @@ import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
 import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
 import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
 import {computed} from "vue";
+import {useRouter} from "vue-router";
 
 const cart = useCartStore();
+const router = useRouter();
 
 // const componentMap = {
 //   radio: OptionRadio,
@@ -127,4 +133,8 @@ function removeItem(cartId) {
   cart.removeItem(cartId);
   window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
 }
+
+function goToCheckout() {
+  router.push({name: 'checkout'});
+}
 </script>

spa/src/views/Checkout.vue

@@ -1,13 +1,75 @@
 <template>
   <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
     <h2 class="text-2xl">
-      Корзина
-      <span class="loading loading-spinner loading-md"></span>
+      Оформление заказа
     </h2>
-  </div>
 
+    <div class="card card-border bg-base-100 w-full">
+      <div class="card-body">
+        <TgInput
+            v-model="checkout.customer.firstName"
+            placeholder="Введите имя"
+            :error="checkout.validationErrors.firstName"
+            @clearError="checkout.clearError('firstName')"
+        />
+
+        <TgInput
+            v-model="checkout.customer.lastName"
+            placeholder="Введите фамилию"
+            :error="checkout.validationErrors.lastName"
+            @clearError="checkout.clearError('lastName')"
+        />
+
+        <TgInput
+            v-model="checkout.customer.email"
+            type="email"
+            placeholder="Введите email"
+            :error="checkout.validationErrors.email"
+            @clearError="checkout.clearError('email')"
+        />
+
+        <TgInput
+            v-model="checkout.customer.phone"
+            type="tel"
+            placeholder="Введите телефон"
+            :error="checkout.validationErrors.phone"
+            @clearError="checkout.clearError('phone')"
+        />
+
+        <TgInput
+            v-model="checkout.customer.address"
+            placeholder="Адрес доставки"
+            :error="checkout.validationErrors.address"
+            @clearError="checkout.clearError('address')"
+        />
+
+        <TgTextarea
+            v-model="checkout.customer.comment"
+            placeholder="Комментарий"
+            :error="checkout.validationErrors.comment"
+            @clearError="checkout.clearError('comment')"
+        />
+      </div>
+    </div>
+
+    <div
+        class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
+      <button class="btn btn-primary w-full" @click="onCreateBtnClick">Создать заказ</button>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import {useCheckoutStore} from "@/stores/CheckoutStore.js";
+import TgInput from "@/components/Form/TgInput.vue";
+import TgTextarea from "@/components/Form/TgTextarea.vue";
+import {useRouter} from "vue-router";
 
+const checkout = useCheckoutStore();
+const router = useRouter();
+
+async function onCreateBtnClick() {
+  await checkout.makeOrder();
+  router.push({name: 'order_created'});
+}
 </script>

spa/src/views/OrderCreated.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
+    <div class="flex flex-col justify-center items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-20 text-success">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+      </svg>
+
+      <p class="text-lg mb-3">Ваш заказ создан!</p>
+      <RouterLink class="btn btn-primary" to="/">На главную</RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>