feat: UI changes

2025-08-16 21:53:55 +03:00
parent d7df5a4b5c
commit d522cbef83
13 changed files with 173 additions and 39 deletions
--- a/spa/package-lock.json
+++ b/spa/package-lock.json
@@ -16,6 +16,7 @@
        "pinia": "^3.0.3",
        "swiper": "^11.2.10",
        "vue": "^3.5.17",
+        "vue-imask": "^7.6.1",
        "vue-router": "^4.5.1",
        "vue-tg": "^0.9.0-beta.10"
      },
@@ -74,6 +75,18 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.28.3.tgz",
+      "integrity": "sha512-LKYxD2CIfocUFNREQ1yk+dW+8OH8CRqmgatBZYXb+XhuObO8wsDpEoCNri5bKld9cnj8xukqZjxSX8p1YiRF8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js-pure": "^3.43.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/types": {
      "version": "7.28.0",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.0.tgz",
@@ -1410,6 +1423,17 @@
        "url": "https://github.com/sponsors/mesqueeb"
      }
    },
+    "node_modules/core-js-pure": {
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.45.0.tgz",
+      "integrity": "sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/crypto-js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
@@ -1590,6 +1614,18 @@
      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
      "license": "MIT"
    },
+    "node_modules/imask": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/imask/-/imask-7.6.1.tgz",
+      "integrity": "sha512-sJlIFM7eathUEMChTh9Mrfw/IgiWgJqBKq2VNbyXvBZ7ev/IlO6/KQTKlV/Fm+viQMLrFLG/zCuudrLIwgK2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.24.4"
+      },
+      "engines": {
+        "npm": ">=4.0.0"
+      }
+    },
    "node_modules/is-what": {
      "version": "4.1.16",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
@@ -2305,6 +2341,45 @@
        }
      }
    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-imask": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/vue-imask/-/vue-imask-7.6.1.tgz",
+      "integrity": "sha512-/5ZVNerI9Dn6gZ/cSCYGiZK4JHdwsEBgHBTRpVwS2U0URxK/Jt5FlQuoL1DhbxC6t4ElcVMWYOvkE2hR8hdt1w==",
+      "license": "MIT",
+      "dependencies": {
+        "imask": "^7.6.1",
+        "vue-demi": "^0.14.7"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
--- a/spa/package.json
+++ b/spa/package.json
@@ -17,6 +17,7 @@
    "pinia": "^3.0.3",
    "swiper": "^11.2.10",
    "vue": "^3.5.17",
+    "vue-imask": "^7.6.1",
    "vue-router": "^4.5.1",
    "vue-tg": "^0.9.0-beta.10"
  },
--- a/spa/src/components/CartButton.vue
+++ b/spa/src/components/CartButton.vue
@@ -24,7 +24,7 @@ const router = useRouter();
 const route = useRoute();

 const isCartBtnShow = computed(() => {
-  return route.name !== 'cart' && route.name !== 'checkout';
+  return route.name !== 'cart' && route.name !== 'checkout' && route.name !== 'order_created';
 });


--- a/spa/src/components/Form/TgInput.vue
+++ b/spa/src/components/Form/TgInput.vue
@@ -3,11 +3,12 @@
    <input
        :type="type"
        :inputmode="inputMode"
-        class="input w-full"
+        class="input input-lg w-full"
        :class="error ? 'input-error' : ''"
        :placeholder="placeholder"
        v-model="model"
        @input="$emit('clearError')"
+        :maxlength="maxlength"
    />
    <p v-if="error" class="label">{{ error }}</p>
  </fieldset>
@@ -32,6 +33,11 @@ const props = defineProps({
    type: String,
    default: 'text',
  },
+
+  maxlength: {
+    type: Number,
+    default: 1000,
+  }
 });
 const emits = defineEmits(['clearError']);

--- a/spa/src/components/Form/TgTextarea.vue
+++ b/spa/src/components/Form/TgTextarea.vue
@@ -1,12 +1,13 @@
 <template>
  <fieldset class="fieldset mb-0">
    <textarea
-        class="input w-full h-30"
+        class="input input-lg w-full h-50"
        :class="error ? 'input-error' : ''"
        :placeholder="placeholder"
        v-model="model"
        @input="$emit('clearError')"
-        rows="5"
+        rows="8"
+        :maxlength="maxlength"
    />
    <p v-if="error" class="label">{{ error }}</p>
  </fieldset>
@@ -25,6 +26,11 @@ const props = defineProps({
    type: String,
    default: null,
  },
+
+  maxlength: {
+    type: Number,
+    default: 1000,
+  }
 });
 const emits = defineEmits(['clearError']);
 </script>
--- a/spa/src/stores/CheckoutStore.js
+++ b/spa/src/stores/CheckoutStore.js
@@ -15,6 +15,8 @@ export const useCheckoutStore = defineStore('checkout', {
            tgData: null,
        },

+        order: null,
+
        isLoading: false,
        validationErrors: {},
    }),
@@ -50,7 +52,10 @@ export const useCheckoutStore = defineStore('checkout', {
                }

                this.customer.tgData = data;
-                await storeOrder(this.customer);
+
+                const response = await storeOrder(this.customer);
+                this.order = response.data;
+
                await window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
                await useCartStore().getProducts();
            } catch (error) {
--- a/spa/src/style.css
+++ b/spa/src/style.css
@@ -37,7 +37,7 @@ html {
 }

 .safe-top {
-    margin-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
 }

 .swiper-pagination-bullets > .swiper-pagination-bullet {
--- a/spa/src/views/Checkout.vue
+++ b/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();
--- a/spa/src/views/OrderCreated.vue
+++ b/spa/src/views/OrderCreated.vue
@@ -1,16 +1,43 @@
 <template>
  <div class="safe-top 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>
+    <div class="flex flex-col justify-center items-center px-5">
+      <div class="mb-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-25 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>
+      </div>
+
+      <p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
+      <p class="text-center mb-4">Ваш заказ успешно оформлен и будет обработан в ближайшее время.</p>
+
+      <ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
+        <li class="list-row flex justify-between">
+          <div>Номер заказа:</div>
+          <div class="font-bold">#{{ checkout.order.id }}</div>
+        </li>
+
+        <li class="list-row flex justify-between">
+          <div>Дата:</div>
+          <div class="font-bold">{{ checkout.order.created_at }}</div>
+        </li>
+
+        <li class="list-row flex justify-between">
+          <div>Сумма:</div>
+          <div class="font-bold">{{ checkout.order.total }}</div>
+        </li>
+      </ul>
+
+      <p class="text-xs text-neutral mb-10">
+        Подтверждение отправлено Вам в личных сообщениях.
+      </p>

-      <p class="text-lg mb-3">Ваш заказ создан!</p>
      <RouterLink class="btn btn-primary" to="/">На главную</RouterLink>
    </div>
  </div>
 </template>

-<script setup lang="ts">
+<script setup>
+import {useCheckoutStore} from "@/stores/CheckoutStore.js";

+const checkout = useCheckoutStore();
 </script>