feat: UI changes

spa/src/views/Checkout.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 safe-top">
-    <h2 class="text-2xl">
+  <div class="max-w-3xl mx-auto space-y-6 pb-30 safe-top">
+    <h2 class="text-2xl text-center">
       Оформление заказа
     </h2>
 
@@ -10,42 +10,39 @@
             v-model="checkout.customer.firstName"
             placeholder="Введите имя"
             :error="checkout.validationErrors.firstName"
+            :maxlength="32"
             @clearError="checkout.clearError('firstName')"
         />
 
         <TgInput
             v-model="checkout.customer.lastName"
             placeholder="Введите фамилию"
+            :maxlength="32"
             :error="checkout.validationErrors.lastName"
             @clearError="checkout.clearError('lastName')"
         />
 
+        <IMaskComponent
+            v-model="checkout.customer.phone"
+            type="tel"
+            class="input input-lg w-full"
+            mask="+{7} (000) 000-00-00"
+            placeholder="Введите телефон"
+            :unmask="true"
+        />
+
         <TgInput
             v-model="checkout.customer.email"
             type="email"
-            placeholder="Введите email"
+            placeholder="Введите email (опционально)"
+            :maxlength="96"
             :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="Комментарий"
+            placeholder="Комментарий (опционально)"
             :error="checkout.validationErrors.comment"
             @clearError="checkout.clearError('comment')"
         />
@@ -73,6 +70,7 @@ import TgInput from "@/components/Form/TgInput.vue";
 import TgTextarea from "@/components/Form/TgTextarea.vue";
 import {useRouter} from "vue-router";
 import {computed, ref} from "vue";
+import {IMaskComponent} from "vue-imask";
 
 const checkout = useCheckoutStore();
 const router = useRouter();