feat: menu page (#136)

Author: hmbanan666

apps/storefront-telegram/app/components/CitySelector.vue

@@ -21,7 +21,7 @@
             size="xl"
             class="ring-muted font-medium"
             :label="city.name"
-            @click="clientStore.updateCity(city.id)"
+            @click="handleClick(city.id)"
           />
         </div>
       </div>
@@ -30,5 +30,11 @@
 </template>
 
 <script setup lang="ts">
+const { vibrate } = useFeedback()
 const clientStore = useClientStore()
+
+function handleClick(id: string) {
+  vibrate('success')
+  clientStore.updateCity(id)
+}
 </script>

apps/storefront-telegram/app/components/Navigation.vue

@@ -32,8 +32,8 @@ const mainRoutes = computed<NavigationRoute[]>(() => [
     icon: 'i-lucide-user',
   },
   {
-    path: '/navigation',
-    name: 'navigation',
+    path: '/menu',
+    name: 'menu',
     title: 'Меню',
     icon: 'i-lucide-menu',
   },

apps/storefront-telegram/app/pages/client/index.vue

@@ -27,26 +27,33 @@
 </template>
 
 <script setup lang="ts">
+const { vibrate } = useFeedback()
 const clientStore = useClientStore()
 
 const items = ref([
   {
     label: 'Мои заказы',
     icon: 'i-lucide-shopping-basket',
     to: '/client/orders',
+    onClick: () => vibrate(),
   },
   {
     label: 'Мои адреса',
     icon: 'i-lucide-map-pin-house',
+    onClick: () => vibrate(),
   },
   {
     label: 'Мои данные',
     icon: 'i-lucide-user',
+    onClick: () => vibrate(),
   },
   {
     label: clientStore.selectedCity ? clientStore.selectedCity.name : 'Выбрать город',
     icon: 'i-lucide-locate-fixed',
-    onClick: () => clientStore.updateCity(null),
+    onClick: () => {
+      vibrate('success')
+      clientStore.updateCity(null)
+    },
   },
 ])
 </script>

apps/storefront-telegram/app/pages/menu.vue

@@ -0,0 +1,81 @@
+<template>
+  <PageContainer>
+    <h1 class="text-2xl/5 font-bold tracking-tight">
+      Меню
+    </h1>
+
+    <div class="flex flex-col gap-1">
+      <UButton
+        v-for="item in items"
+        :key="item.label"
+        active
+        size="xl"
+        color="neutral"
+        variant="ghost"
+        class="px-0 text-xl/5 font-semibold"
+        :label="item.label"
+        :to="item.to"
+        @click="item.onClick"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <p class="font-medium">
+        {{ channelStore.selectedKitchen?.address }}
+      </p>
+      <p class="text-sm text-muted">
+        Ежедневно с 11:00 до 22:00
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <UButton
+        :to="formattedToCall"
+        color="neutral"
+        variant="ghost"
+        class="px-0 text-lg font-medium"
+      >
+        {{ formatted }}
+      </UButton>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <UIcon name="simple-icons:vk" class="size-8" />
+    </div>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+import { parsePhoneNumberWithError } from 'libphonenumber-js'
+
+const { vibrate } = useFeedback()
+const channelStore = useChannelStore()
+
+const tel = '79999999999'
+const formatted = parsePhoneNumberWithError(tel, 'RU').format('INTERNATIONAL')
+const formattedToCall = parsePhoneNumberWithError(tel, 'RU').format('RFC3966')
+
+const items = ref([
+  {
+    label: 'Акции',
+    to: '/menu',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'О нас',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Франшиза',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Бонусная программа',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Частые вопросы',
+    onClick: () => vibrate(),
+  },
+])
+</script>

apps/storefront-telegram/app/pages/navigation.vue

@@ -12,7 +12,7 @@ export const useChannelStore = defineStore('channel', () => {
   const currencySign = ref('₽')
   const kitchens = ref<KitchenWithData[]>([])
 
-  const selectedKitchenId = ref<string | undefined>()
+  const selectedKitchenId = ref<string | undefined>('m68foq9qtpsxd69eayom7bjn') // Фрунзе
   const selectedKitchen = computed(() => kitchens.value.find((kitchen) => kitchen.id === selectedKitchenId.value))
 
   const initDataRaw = useSignal(_initDataRaw)