From 59a7a542ed4612c8709eab4534051d679df9595b Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Mon, 24 Feb 2025 20:19:35 +0200
Subject: [PATCH] chore: checkout rework (#321)

---
 apps/web-app/app/app.vue                      |   4 +
 apps/web-app/app/components/Cart/Button.vue   |  30 +-
 .../components/Cart/DeliveryMethodSwitch.vue  |  40 +-
 apps/web-app/app/components/Cart/Drawer.vue   |   4 +-
 apps/web-app/app/components/Cart/Line.vue     |  16 +-
 .../app/components/Cart/LineCounter.vue       |   8 +-
 apps/web-app/app/components/Cart/index.vue    | 108 +++--
 apps/web-app/app/components/Checkout/Line.vue |  25 +-
 .../app/components/DeliveryInfoBlock.vue      |   4 +-
 .../components/Form/UpdateMenuCategory.vue    |   8 +-
 .../components/Form/UpdateProductVariant.vue  |   6 +-
 .../app/components/Modal/DeliveryInfo.vue     |   2 +-
 .../components/Modal/UpdateProductVariant.vue |   2 -
 .../app/components/Navigation/Main.vue        |   2 +-
 apps/web-app/app/composables/useApp.ts        |   4 +-
 apps/web-app/app/composables/useCheckout.ts   |  63 ---
 .../app/composables/useCommandCenter.ts       |  21 -
 apps/web-app/app/composables/useTime.ts       |  10 -
 .../[categorySlug]/[productSlug]/index.vue    |   6 +-
 .../pages/catalog/[categorySlug]/index.vue    |  10 +-
 apps/web-app/app/pages/checkout/index.vue     | 401 +++++++++---------
 .../pages/command-center/menu/[id]/index.vue  |   2 +-
 .../command-center/product/[id]/index.vue     |   2 +-
 apps/web-app/stores/channel.ts                |  34 +-
 apps/web-app/stores/checkout.ts               |  97 +++++
 .../server/api/category/[id]/index.patch.ts   |   4 +
 .../core/server/api/category/index.post.ts    |   3 +
 packages/core/types/index.d.ts                |  10 +-
 28 files changed, 461 insertions(+), 465 deletions(-)
 delete mode 100644 apps/web-app/app/composables/useCheckout.ts
 delete mode 100644 apps/web-app/app/composables/useCommandCenter.ts
 delete mode 100644 apps/web-app/app/composables/useTime.ts
 create mode 100644 apps/web-app/stores/checkout.ts

diff --git a/apps/web-app/app/app.vue b/apps/web-app/app/app.vue
index 28ce445a..e22f8f3b 100644
--- a/apps/web-app/app/app.vue
+++ b/apps/web-app/app/app.vue
@@ -4,6 +4,7 @@
     :tooltip="{ delayDuration: 0 }"
     class="min-h-dvh"
   >
+    <NuxtLoadingIndicator :color="false" class="bg-(--ui-primary) h-[2px]" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
@@ -29,6 +30,9 @@ useHead({
 const channel = useChannelStore()
 await channel.update()
 
+const checkout = useCheckoutStore()
+await checkout.update()
+
 if (!channel.isInitialized) {
   await navigateTo('/welcome')
 }
diff --git a/apps/web-app/app/components/Cart/Button.vue b/apps/web-app/app/components/Cart/Button.vue
index 9523381f..70a60a55 100644
--- a/apps/web-app/app/components/Cart/Button.vue
+++ b/apps/web-app/app/components/Cart/Button.vue
@@ -1,22 +1,20 @@
 <template>
-  <ClientOnly>
-    <div v-if="!isEmpty" class="block xl:hidden">
-      <UButton
-        variant="gradient"
-        size="lg"
-        class="items-center"
-        @click="isCartDrawerOpened = !isCartDrawerOpened"
-      >
-        <p>{{ $t('app.cart.title') }}</p>
-        <div class="rounded-full bg-white size-6 text-center">
-          {{ checkout?.lines?.length }}
-        </div>
-      </UButton>
-    </div>
-  </ClientOnly>
+  <div v-if="!checkout.isEmpty" class="block xl:hidden">
+    <UButton
+      variant="gradient"
+      size="lg"
+      class="items-center"
+      @click="isCartDrawerOpened = !isCartDrawerOpened"
+    >
+      <p>{{ $t('app.cart.title') }}</p>
+      <div class="pt-0.5 rounded-full bg-(--ui-bg-muted) size-6 text-center text-(--ui-primary)">
+        {{ checkout.lines.length }}
+      </div>
+    </UButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 const { isCartDrawerOpened } = useApp()
-const { checkout, isEmpty } = useCheckout()
+const checkout = useCheckoutStore()
 </script>
diff --git a/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue b/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
index 5886fb64..ed564aaa 100644
--- a/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
+++ b/apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
@@ -1,27 +1,25 @@
 <template>
-  <ClientOnly>
-    <div class="p-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
-      <UButton
-        v-if="channel.isDeliveryAvailable"
-        class="w-full justify-center"
-        :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'"
-        @click="update({ deliveryMethod: 'DELIVERY' })"
-      >
-        {{ $t('app.cart.delivery') }}
-      </UButton>
-      <UButton
-        v-if="channel.isPickupAvailable"
-        class="w-full justify-center"
-        :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'"
-        @click="update({ deliveryMethod: 'WAREHOUSE' })"
-      >
-        {{ $t('app.cart.pickup') }}
-      </UButton>
-    </div>
-  </ClientOnly>
+  <div class="p-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl">
+    <UButton
+      v-if="channel.isDeliveryAvailable"
+      class="w-full justify-center"
+      :variant="checkout.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'"
+      @click="checkout.change({ deliveryMethod: 'DELIVERY' })"
+    >
+      {{ $t('app.cart.delivery') }}
+    </UButton>
+    <UButton
+      v-if="channel.isPickupAvailable"
+      class="w-full justify-center"
+      :variant="checkout.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'"
+      @click="checkout.change({ deliveryMethod: 'WAREHOUSE' })"
+    >
+      {{ $t('app.cart.pickup') }}
+    </UButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 const channel = useChannelStore()
-const { checkout, update } = useCheckout()
+const checkout = useCheckoutStore()
 </script>
diff --git a/apps/web-app/app/components/Cart/Drawer.vue b/apps/web-app/app/components/Cart/Drawer.vue
index 9dc72dc5..5abe02d9 100644
--- a/apps/web-app/app/components/Cart/Drawer.vue
+++ b/apps/web-app/app/components/Cart/Drawer.vue
@@ -1,12 +1,12 @@
 <template>
   <button
-    class="z-30 fixed left-0 right-0 -top-20 -bottom-20 appearance-none bg-neutral-700/50 opacity-0 data-[active=true]:opacity-100 translate-x-full data-[active=true]:-translate-x-0 transition-opacity"
+    class="z-50 fixed left-0 right-0 -top-20 -bottom-20 appearance-none bg-neutral-700/50 opacity-0 data-[active=true]:opacity-100 translate-x-full data-[active=true]:-translate-x-0 transition-opacity"
     :data-active="isCartDrawerOpened"
     aria-label="Close"
     @click="isCartDrawerOpened = !isCartDrawerOpened"
   />
   <div
-    class="z-30 fixed right-0 top-0 w-full max-w-sm ml-auto h-[100dvh] p-2 m-0 shadow-none rounded-2xl translate-x-full data-[active=true]:-translate-x-0 transition-transform"
+    class="z-50 fixed right-0 top-0 w-full max-w-sm ml-auto h-[100dvh] p-2 m-0 shadow-none rounded-2xl translate-x-full data-[active=true]:-translate-x-0 transition-transform"
     :data-active="isCartDrawerOpened"
   >
     <Cart />
diff --git a/apps/web-app/app/components/Cart/Line.vue b/apps/web-app/app/components/Cart/Line.vue
index c584e6a3..db1a7cf6 100644
--- a/apps/web-app/app/components/Cart/Line.vue
+++ b/apps/web-app/app/components/Cart/Line.vue
@@ -3,19 +3,19 @@
     <NuxtLink :to="productUrl">
       <div class="max-w-[15rem] flex flex-row gap-2 flex-nowrap items-center cursor-pointer active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200 group">
         <div class="relative size-14 aspect-square">
-          <ProductImage :id="line?.productVariant.product.mediaId" size="xs" />
+          <ProductImage :id="product?.mediaId" size="xs" />
         </div>
 
         <div>
           <p class="font-base text-xs leading-tight line-clamp-2">
-            {{ line?.productVariant.product.name }}
+            {{ product?.name }}
           </p>
           <div class="mt-1 flex flex-row gap-2 flex-nowrap">
             <div class="text-sm font-medium tracking-tight">
-              {{ formatNumberToLocal(line?.productVariant.gross) }} <span class="text-xs">{{ channel.currencySign }}</span>
+              {{ formatNumberToLocal(productVariant?.gross) }} <span class="text-xs">{{ channel.currencySign }}</span>
             </div>
             <div class="text-sm text-(--ui-text-muted) font-light">
-              {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
+              {{ productVariant?.weightValue }}{{ getWeightLocalizedUnit(productVariant?.weightUnit) }}
             </div>
           </div>
         </div>
@@ -32,9 +32,9 @@ const { lineId } = defineProps<{
 }>()
 
 const channel = useChannelStore()
-const { checkout } = useCheckout()
-const line = computed(() => checkout.value?.lines?.find((l) => l.id === lineId))
-const variant = computed(() => line.value?.productVariant)
-const product = computed(() => line.value?.productVariant?.product)
+const checkout = useCheckoutStore()
+const line = computed(() => checkout.lines?.find((l) => l.id === lineId))
+const productVariant = channel.getProductVariant(line.value?.productVariantId ?? '')
+const product = channel.getProduct(productVariant.value?.productId ?? '')
 const productUrl = computed(() => `/catalog/${product.value?.category?.slug}/${product.value?.slug}`)
 </script>
diff --git a/apps/web-app/app/components/Cart/LineCounter.vue b/apps/web-app/app/components/Cart/LineCounter.vue
index 55272fe0..22a23ca5 100644
--- a/apps/web-app/app/components/Cart/LineCounter.vue
+++ b/apps/web-app/app/components/Cart/LineCounter.vue
@@ -3,7 +3,7 @@
     <button
       aria-label="Minus"
       class="flex flex-row items-center p-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-muted) duration-200"
-      @click="changeLineQuantity(lineId, 'decrement')"
+      @click="checkout.changeLineQuantity(lineId, 'decrement')"
     >
       <Icon :name="icons.minus" class="size-5" />
     </button>
@@ -15,7 +15,7 @@
     <button
       aria-label="Plus"
       class="flex flex-row items-center p-1 rounded-xl lg:hover:scale-90 lg:hover:bg-(--ui-bg-muted) duration-200"
-      @click="changeLineQuantity(lineId, 'increment')"
+      @click="checkout.changeLineQuantity(lineId, 'increment')"
     >
       <Icon :name="icons.plus" class="size-5" />
     </button>
@@ -28,6 +28,6 @@ const { lineId } = defineProps<{
 }>()
 
 const { icons } = useAppConfig()
-const { checkout, changeLineQuantity } = useCheckout()
-const line = computed(() => checkout.value?.lines?.find((l) => l.id === lineId))
+const checkout = useCheckoutStore()
+const line = computed(() => checkout.lines?.find((l) => l.id === lineId))
 </script>
diff --git a/apps/web-app/app/components/Cart/index.vue b/apps/web-app/app/components/Cart/index.vue
index 07f13da2..c1371a2b 100644
--- a/apps/web-app/app/components/Cart/index.vue
+++ b/apps/web-app/app/components/Cart/index.vue
@@ -1,70 +1,62 @@
 <template>
-  <ClientOnly>
-    <div v-if="checkout" class="relative rounded-2xl border border-(--ui-border) px-4 py-4 h-full flex flex-col justify-between">
-      <div class="h-screen overflow-y-auto">
-        <div class="mb-48">
-          <div class="mb-4 flex flex-row justify-between items-center">
-            <h3 class="text-2xl font-medium">
-              {{ $t('app.cart.title') }}
-            </h3>
+  <div v-if="checkout.id" class="relative rounded-2xl bg-(--ui-bg) border border-(--ui-border) p-4 h-full flex flex-col justify-between">
+    <div class="h-screen overflow-y-auto">
+      <div class="mb-48">
+        <div class="mb-4 flex flex-row justify-between items-center">
+          <h3 class="text-2xl font-medium">
+            {{ $t('app.cart.title') }}
+          </h3>
 
-            <button
-              aria-label="Close"
-              class="block xl:hidden rounded-xl lg:hover:scale-90 hover:bg-neutral-100 duration-200"
-              @click="isCartDrawerOpened = !isCartDrawerOpened"
-            >
-              <Icon :name="icons.close" class="size-8" />
-            </button>
-          </div>
-
-          <div class="mt-2 mb-4">
-            <CartDeliveryMethodSwitch />
-          </div>
+          <button
+            aria-label="Close"
+            class="block xl:hidden rounded-xl lg:hover:scale-90 hover:bg-neutral-100 duration-200"
+            @click="isCartDrawerOpened = !isCartDrawerOpened"
+          >
+            <Icon :name="icons.close" class="size-8" />
+          </button>
+        </div>
 
-          <CartEmpty v-if="isEmpty" />
-          <div v-else>
-            <CartLine
-              v-for="line in checkout?.lines"
-              :key="line.id"
-              :line-id="line.id"
-            />
-          </div>
+        <div class="mt-2 mb-4">
+          <CartDeliveryMethodSwitch />
         </div>
+
+        <CartEmpty v-if="checkout.isEmpty" />
+        <template v-else>
+          <CartLine
+            v-for="line in checkout.lines"
+            :key="line.id"
+            :line-id="line.id"
+          />
+        </template>
       </div>
+    </div>
 
-      <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)">
-        <button
-          class="relative m-4 flex flex-row gap-2 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
-          @click="modal.open(ModalDeliveryInfo)"
+    <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)">
+      <button
+        class="relative m-4 flex flex-row gap-2 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200"
+        @click="modal.open(ModalDeliveryInfo)"
+      >
+        <Icon :name="icons.info" class="size-6 text-(--ui-text-dimmed)" />
+        <div class="text-left text-sm text-(--ui-text-muted)">
+          {{ $t('app.cart.conditions') }}
+        </div>
+      </button>
+
+      <div v-if="!checkout.isEmpty" class="my-4 mx-4">
+        <UButton
+          to="/checkout"
+          variant="gradient"
+          size="xl"
+          class="w-full justify-between items-center"
         >
-          <Icon :name="icons.info" class="size-6 text-(--ui-text-dimmed)" />
-          <div class="text-left text-sm text-(--ui-text-muted)">
-            {{ $t('app.cart.conditions') }}
+          <p>{{ $t('app.cart.next-label') }}</p>
+          <div class="text-lg tracking-tight">
+            {{ formatNumberToLocal(checkout.totalPrice) }} <span class="text-base">{{ channel.currencySign }}</span>
           </div>
-        </button>
-
-        <div v-if="!isEmpty" class="my-4 mx-4">
-          <UButton
-            to="/checkout"
-            variant="gradient"
-            size="xl"
-            class="w-full justify-between items-center"
-          >
-            <p>{{ $t('app.cart.next-label') }}</p>
-            <div class="text-lg tracking-tight">
-              {{ formatNumberToLocal(checkout?.totalPrice) }} <span class="text-base">{{ channel.currencySign }}</span>
-            </div>
-          </UButton>
-        </div>
+        </UButton>
       </div>
     </div>
-
-    <template #fallback>
-      <div class="relative h-full w-full flex flex-col justify-center items-center">
-        <Icon :name="icons.loader" class="w-16 h-16 text-neutral-300 animate-pulse" />
-      </div>
-    </template>
-  </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -72,7 +64,7 @@ import { ModalDeliveryInfo } from '#components'
 
 const { isCartDrawerOpened } = useApp()
 const { icons } = useAppConfig()
-const { checkout, isEmpty } = useCheckout()
 const modal = useModal()
 const channel = useChannelStore()
+const checkout = useCheckoutStore()
 </script>
diff --git a/apps/web-app/app/components/Checkout/Line.vue b/apps/web-app/app/components/Checkout/Line.vue
index e25bc475..e753d16a 100644
--- a/apps/web-app/app/components/Checkout/Line.vue
+++ b/apps/web-app/app/components/Checkout/Line.vue
@@ -2,19 +2,19 @@
   <div class="flex flex-row gap-2 items-center justify-between">
     <NuxtLink :to="productUrl" class="max-w-[16rem] flex flex-row gap-2 flex-nowrap items-center cursor-pointer active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200 group">
       <div class="relative size-12 md:size-14 aspect-square">
-        <ProductImage :id="variant?.product?.mediaId" size="xs" />
+        <ProductImage :id="product?.mediaId" size="xs" />
       </div>
 
       <div class="space-y-1">
         <div class="font-medium text-(--ui-text) leading-tight line-clamp-2">
-          {{ variant?.product.name }}
+          {{ product?.name }}
         </div>
         <div class="flex flex-row gap-2 flex-nowrap items-center">
           <p class="text-sm text-(--ui-text-muted) leading-tight">
-            {{ variant?.name }}
+            {{ productVariant?.name }}
           </p>
           <p class="text-sm text-(--ui-text-muted)">
-            {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
+            {{ productVariant?.weightValue }}{{ getWeightLocalizedUnit(productVariant?.weightUnit) }}
           </p>
         </div>
       </div>
@@ -37,21 +37,14 @@
 
 <script setup lang="ts">
 const { line, canBeChanged = true } = defineProps<{
-  line: Pick<CheckoutLine, 'id' | 'quantity'> & {
-    productVariant: Pick<ProductVariant, 'gross' | 'name'> & {
-      weightUnit: string
-      weightValue: number
-      product: Pick<Product, 'name' | 'slug' | 'mediaId'> & {
-        category: Pick<MenuCategory, 'slug'>
-      }
-    }
-  }
+  line: CheckoutLine
   canBeChanged?: boolean
 }>()
 
 const channel = useChannelStore()
-const totalAmount = computed(() => line ? formatNumberToLocal(line.productVariant?.gross * line.quantity) : 0)
-const variant = computed(() => line?.productVariant)
-const product = computed(() => line?.productVariant?.product)
+const productVariant = channel.getProductVariant(line.productVariantId ?? '')
+const product = channel.getProduct(productVariant.value?.productId ?? '')
 const productUrl = computed(() => `/catalog/${product.value?.category?.slug}/${product.value?.slug}`)
+
+const totalAmount = computed(() => formatNumberToLocal(productVariant.value?.gross ? productVariant.value?.gross * line.quantity : 0))
 </script>
diff --git a/apps/web-app/app/components/DeliveryInfoBlock.vue b/apps/web-app/app/components/DeliveryInfoBlock.vue
index eaaa272a..b9b3feb6 100644
--- a/apps/web-app/app/components/DeliveryInfoBlock.vue
+++ b/apps/web-app/app/components/DeliveryInfoBlock.vue
@@ -20,7 +20,7 @@ const { icons } = useAppConfig()
 const { t } = useI18n()
 
 const channel = useChannelStore()
-const { checkout } = useCheckout()
-const title = computed(() => checkout.value?.deliveryMethod === 'DELIVERY' ? t('app.cart.delivery') : t('app.cart.pickup'))
+const checkout = useCheckoutStore()
+const title = computed(() => checkout.deliveryMethod === 'DELIVERY' ? t('app.cart.delivery') : t('app.cart.pickup'))
 const todayUntil = computed(() => channel.workingDay?.isActive ? `${channel.workingDay.closeHours.toString().padStart(2, '0')}:${channel.workingDay.closeMinutes.toString().padStart(2, '0')}` : undefined)
 </script>
diff --git a/apps/web-app/app/components/Form/UpdateMenuCategory.vue b/apps/web-app/app/components/Form/UpdateMenuCategory.vue
index dda9c066..24c37ff1 100644
--- a/apps/web-app/app/components/Form/UpdateMenuCategory.vue
+++ b/apps/web-app/app/components/Form/UpdateMenuCategory.vue
@@ -51,14 +51,14 @@ const channel = useChannelStore()
 const category = channel.getMenuCategory(categoryId)
 
 const state = ref<Partial<MenuCategoryUpdateSchema>>({
-  name: category?.name,
-  slug: category?.slug,
+  name: category.value?.name,
+  slug: category.value?.slug,
 })
 
 function resetState() {
   state.value = {
-    name: category?.name,
-    slug: category?.slug,
+    name: category.value?.name,
+    slug: category.value?.slug,
   }
 }
 
diff --git a/apps/web-app/app/components/Form/UpdateProductVariant.vue b/apps/web-app/app/components/Form/UpdateProductVariant.vue
index 802a0ff1..5a96cb6c 100644
--- a/apps/web-app/app/components/Form/UpdateProductVariant.vue
+++ b/apps/web-app/app/components/Form/UpdateProductVariant.vue
@@ -121,9 +121,8 @@ import type { ProductVariantUpdateSchema } from '@next-orders/core/shared/servic
 import type { FormSubmitEvent } from '@nuxt/ui'
 import { productVariantUpdateSchema } from '@next-orders/core/shared/services/product'
 
-const { isOpened, productId, productVariantId } = defineProps<{
+const { isOpened, productVariantId } = defineProps<{
   isOpened: boolean
-  productId: string
   productVariantId: string
 }>()
 
@@ -132,8 +131,7 @@ const emit = defineEmits(['success', 'submitted'])
 const { t } = useI18n()
 const toast = useToast()
 const channel = useChannelStore()
-const product = channel.getProduct(productId)
-const productVariant = computed(() => product.value?.variants?.find((variant) => variant.id === productVariantId))
+const productVariant = channel.getProductVariant(productVariantId)
 
 const state = ref<Partial<ProductVariantUpdateSchema>>({
   name: productVariant.value?.name,
diff --git a/apps/web-app/app/components/Modal/DeliveryInfo.vue b/apps/web-app/app/components/Modal/DeliveryInfo.vue
index ad341d11..0a4477a0 100644
--- a/apps/web-app/app/components/Modal/DeliveryInfo.vue
+++ b/apps/web-app/app/components/Modal/DeliveryInfo.vue
@@ -33,6 +33,6 @@
 
 <script setup lang="ts">
 const channel = useChannelStore()
-const { checkout } = useCheckout()
+const checkout = useCheckoutStore()
 const modal = useModal()
 </script>
diff --git a/apps/web-app/app/components/Modal/UpdateProductVariant.vue b/apps/web-app/app/components/Modal/UpdateProductVariant.vue
index 5865ea18..1824e94e 100644
--- a/apps/web-app/app/components/Modal/UpdateProductVariant.vue
+++ b/apps/web-app/app/components/Modal/UpdateProductVariant.vue
@@ -3,7 +3,6 @@
     <template #body>
       <div class="space-y-3">
         <FormUpdateProductVariant
-          :product-id="productId ?? ''"
           :product-variant-id="productVariantId ?? ''"
           :is-opened="modal.isOpen.value"
           @submitted="modal.close()"
@@ -21,7 +20,6 @@
 
 <script setup lang="ts">
 defineProps<{
-  productId?: string
   productVariantId?: string
 }>()
 
diff --git a/apps/web-app/app/components/Navigation/Main.vue b/apps/web-app/app/components/Navigation/Main.vue
index 61176089..3248525e 100644
--- a/apps/web-app/app/components/Navigation/Main.vue
+++ b/apps/web-app/app/components/Navigation/Main.vue
@@ -55,6 +55,6 @@ import { ModalDeliveryInfo } from '#components'
 
 const { icons } = useAppConfig()
 const channel = useChannelStore()
-const { checkout } = useCheckout()
+const checkout = useCheckoutStore()
 const modal = useModal()
 </script>
diff --git a/apps/web-app/app/composables/useApp.ts b/apps/web-app/app/composables/useApp.ts
index e5b9b3be..63cc94e5 100644
--- a/apps/web-app/app/composables/useApp.ts
+++ b/apps/web-app/app/composables/useApp.ts
@@ -1,4 +1,4 @@
-function _useApp() {
+export function useApp() {
   const route = useRoute()
 
   const isNavbarOpened = ref(false)
@@ -20,5 +20,3 @@ function _useApp() {
     searchQuery,
   }
 }
-
-export const useApp = createSharedComposable(_useApp)
diff --git a/apps/web-app/app/composables/useCheckout.ts b/apps/web-app/app/composables/useCheckout.ts
deleted file mode 100644
index d1552222..00000000
--- a/apps/web-app/app/composables/useCheckout.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-function _useCheckout() {
-  const { data, refresh } = useFetch('/api/checkout', {
-    server: false,
-    watch: false,
-  })
-
-  const isEmpty = computed(() => !data.value || data.value?.lines?.length === 0)
-  const total = computed(() => formatNumberToLocal(data.value?.totalPrice ?? 0))
-
-  const addProduct = async (productVariantId: string) => {
-    try {
-      await $fetch(
-        '/api/checkout/add',
-        {
-          method: 'POST',
-          body: { productVariantId },
-        },
-      )
-
-      await refresh()
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  const update = async (checkout: Partial<Checkout>) => {
-    try {
-      const data = await $fetch(
-        '/api/checkout',
-        {
-          method: 'PATCH',
-          body: checkout,
-        },
-      )
-
-      await refresh()
-
-      return data
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  const changeLineQuantity = async (id: string, method: 'increment' | 'decrement') => {
-    try {
-      await $fetch(
-        `/api/checkout/line/${id}`,
-        {
-          method: 'POST',
-          body: { method },
-        },
-      )
-
-      await refresh()
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  return { checkout: data, total, isEmpty, addProduct, update, changeLineQuantity }
-}
-
-export const useCheckout = createSharedComposable(_useCheckout)
diff --git a/apps/web-app/app/composables/useCommandCenter.ts b/apps/web-app/app/composables/useCommandCenter.ts
deleted file mode 100644
index c803b3e7..00000000
--- a/apps/web-app/app/composables/useCommandCenter.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-function _useCommandCenter() {
-  const route = useRoute()
-
-  const isModalOpened = ref(false)
-  const searchQuery = ref('')
-
-  watch(
-    () => route.fullPath,
-    () => {
-      isModalOpened.value = false
-      searchQuery.value = ''
-    },
-  )
-
-  return {
-    isModalOpened,
-    searchQuery,
-  }
-}
-
-export const useCommandCenter = createSharedComposable(_useCommandCenter)
diff --git a/apps/web-app/app/composables/useTime.ts b/apps/web-app/app/composables/useTime.ts
deleted file mode 100644
index 44eeba88..00000000
--- a/apps/web-app/app/composables/useTime.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-function _useTime() {
-  const { data: slots } = useFetch('/api/channel/time-slots', {
-    server: false,
-    watch: false,
-  })
-
-  return { slots }
-}
-
-export const useTime = createSharedComposable(_useTime)
diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
index 41cd9e95..8fabbd8c 100644
--- a/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
+++ b/apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue
@@ -41,7 +41,7 @@
             variant="gradient"
             icon="food:busket"
             class="w-fit flex flex-row gap-2 items-center"
-            @click="addProduct(variantId ?? '')"
+            @click="checkout.add(variantId ?? '')"
           >
             {{ $t('app.cart.add-to-cart') }}
           </UButton>
@@ -106,7 +106,7 @@
 const { t } = useI18n()
 const { params } = useRoute('catalog-categorySlug-productSlug')
 const channel = useChannelStore()
-const { addProduct, checkout } = useCheckout()
+const checkout = useCheckoutStore()
 
 const product = channel.getProductBySlug(params.productSlug)
 if (!product.value) {
@@ -131,7 +131,7 @@ const weightUnit = computed(() => getWeightLocalizedUnit(selectedVariant.value?.
 const isNutritionShown = computed(() => selectedVariant.value?.calories && selectedVariant.value?.protein && selectedVariant.value?.fat && selectedVariant.value?.carbohydrate)
 
 const inCart = computed(() => {
-  return checkout.value?.lines?.find((l) => l.productVariant.id === selectedVariant.value?.id)
+  return checkout.lines.find((l) => l.productVariantId === selectedVariant.value?.id)
 })
 
 const breadcrumbs = computed(() => [
diff --git a/apps/web-app/app/pages/catalog/[categorySlug]/index.vue b/apps/web-app/app/pages/catalog/[categorySlug]/index.vue
index 14f5c8d6..d393a395 100644
--- a/apps/web-app/app/pages/catalog/[categorySlug]/index.vue
+++ b/apps/web-app/app/pages/catalog/[categorySlug]/index.vue
@@ -2,13 +2,13 @@
   <CatalogBreadcrumb :items="breadcrumbs" />
 
   <h1 class="text-3xl font-medium">
-    {{ category.name }}
+    {{ category?.name }}
   </h1>
   <div>{{ $t('app.category-page-description') }}</div>
 
   <div class="mt-4 max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6">
     <ProductCard
-      v-for="product in category.products.filter((p) => p.isAvailableForPurchase)"
+      v-for="product in category?.products.filter((p) => p.isAvailableForPurchase)"
       :key="product.id"
       :product-id="product.id"
     />
@@ -21,7 +21,7 @@ const { params } = useRoute('catalog-categorySlug')
 const channel = useChannelStore()
 
 const category = channel.getActiveMenuCategoryBySlug(params.categorySlug)
-if (!category) {
+if (!category.value) {
   throw createError({
     statusCode: 404,
     statusMessage: 'Category not found',
@@ -29,11 +29,11 @@ if (!category) {
 }
 
 useHead({
-  title: category.name,
+  title: category.value?.name,
 })
 
 const breadcrumbs = computed(() => [
   { label: t('common.home'), icon: 'food:home', to: '/' },
-  { label: category.name },
+  { label: category.value?.name ?? '' },
 ])
 </script>
diff --git a/apps/web-app/app/pages/checkout/index.vue b/apps/web-app/app/pages/checkout/index.vue
index 417cac69..75d92c6a 100644
--- a/apps/web-app/app/pages/checkout/index.vue
+++ b/apps/web-app/app/pages/checkout/index.vue
@@ -1,246 +1,237 @@
 <template>
-  <ClientOnly>
-    <div v-if="!haveProblemWithOrder">
-      <h1 class="pt-8 mb-4 md:mb-8 text-3xl md:text-4xl font-medium">
-        {{ $t('app.checkout.title') }}
-      </h1>
-
-      <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
-        <div class="col-span-full md:col-span-7 space-y-6">
-          <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl flex flex-col gap-4">
-            <div class="flex flex-col gap-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.contacts') }}
-              </h3>
-
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+  <div v-if="!checkout.isEmpty && !channel.isOnMaintenance">
+    <h1 class="pt-8 mb-4 md:mb-8 text-3xl md:text-4xl font-medium">
+      {{ $t('app.checkout.title') }}
+    </h1>
+
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
+      <div class="col-span-full md:col-span-7 space-y-6">
+        <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl flex flex-col gap-4">
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.contacts') }}
+            </h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <UInput
+                v-model="remainingCheckout.phone"
+                type="tel"
+                size="xl"
+                maxlength="17"
+                :class="{ '!ring-(--ui-success)': isValidPhone }"
+                :placeholder="$t('app.checkout.your-phone')"
+                @change="formatPhone"
+              />
+
+              <UInput
+                v-model="remainingCheckout.name"
+                size="xl"
+                :placeholder="$t('app.checkout.your-name')"
+              />
+            </div>
+          </div>
+
+          <div v-if="checkout?.deliveryMethod === 'DELIVERY'" class="flex flex-col gap-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.enter-address') }}
+            </h3>
+            <UFormField :label="$t('app.checkout.address.street')">
+              <UInput
+                v-model="remainingCheckout.street"
+                size="xl"
+                class="w-full"
+              />
+            </UFormField>
+
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+              <UFormField :label="$t('app.checkout.address.flat')">
                 <UInput
-                  v-model="remainingCheckout.phone"
-                  type="tel"
+                  v-model="remainingCheckout.flat"
                   size="xl"
-                  maxlength="17"
-                  :class="{ '!ring-(--ui-success)': isValidPhone }"
-                  :placeholder="$t('app.checkout.your-phone')"
-                  @change="formatPhone"
                 />
+              </UFormField>
 
+              <UFormField :label="$t('app.checkout.address.doorphone')">
                 <UInput
-                  v-model="remainingCheckout.name"
+                  v-model="remainingCheckout.doorphone"
                   size="xl"
-                  :placeholder="$t('app.checkout.your-name')"
                 />
-              </div>
-            </div>
+              </UFormField>
 
-            <div v-if="checkout?.deliveryMethod === 'DELIVERY'" class="flex flex-col gap-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.enter-address') }}
-              </h3>
-              <UFormField :label="$t('app.checkout.address.street')">
+              <UFormField :label="$t('app.checkout.address.entrance')">
                 <UInput
-                  v-model="remainingCheckout.street"
+                  v-model="remainingCheckout.entrance"
                   size="xl"
-                  class="w-full"
                 />
               </UFormField>
 
-              <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
-                <UFormField :label="$t('app.checkout.address.flat')">
-                  <UInput
-                    v-model="remainingCheckout.flat"
-                    size="xl"
-                  />
-                </UFormField>
-
-                <UFormField :label="$t('app.checkout.address.doorphone')">
-                  <UInput
-                    v-model="remainingCheckout.doorphone"
-                    size="xl"
-                  />
-                </UFormField>
-
-                <UFormField :label="$t('app.checkout.address.entrance')">
-                  <UInput
-                    v-model="remainingCheckout.entrance"
-                    size="xl"
-                  />
-                </UFormField>
-
-                <UFormField :label="$t('app.checkout.address.floor')">
-                  <UInput
-                    v-model="remainingCheckout.floor"
-                    size="xl"
-                  />
-                </UFormField>
-              </div>
-
-              <UFormField :label="$t('app.checkout.address.note')">
-                <UTextarea
-                  v-model="remainingCheckout.addressNote"
+              <UFormField :label="$t('app.checkout.address.floor')">
+                <UInput
+                  v-model="remainingCheckout.floor"
                   size="xl"
-                  class="w-full"
-                  :placeholder="$t('app.checkout.address.note-placeholder')"
                 />
               </UFormField>
             </div>
 
-            <div v-if="checkout?.deliveryMethod === 'WAREHOUSE'" class="flex flex-col gap-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.select-address') }}
-              </h3>
-
-              <USelect
-                v-model="remainingCheckout.warehouseId"
-                :items="channel.warehouses.map(warehouse => ({ label: warehouse.address, value: warehouse.id }))"
-                :placeholder="$t('common.select')"
-                size="xl"
-                icon="food:warehouse"
-                class="w-full"
-              />
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.time-title') }}
-              </h3>
-
-              <USelect
-                v-model="remainingCheckout.time"
-                :items="[
-                  { label: $t('app.checkout.as-soon-as-possible'), value: 0 },
-                  ...slots,
-                ]"
-                :placeholder="$t('app.checkout.select-time')"
+            <UFormField :label="$t('app.checkout.address.note')">
+              <UTextarea
+                v-model="remainingCheckout.addressNote"
                 size="xl"
-                icon="food:clock"
                 class="w-full"
+                :placeholder="$t('app.checkout.address.note-placeholder')"
               />
-            </div>
+            </UFormField>
           </div>
 
-          <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl flex flex-col gap-4">
-            <h2 class="text-xl md:text-2xl font-medium">
-              {{ $t('app.checkout.order-title') }}
-            </h2>
-
-            <CheckoutLine
-              v-for="line in checkout?.lines"
-              :key="line.id"
-              :line="line"
+          <div v-if="checkout?.deliveryMethod === 'WAREHOUSE'" class="flex flex-col gap-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.select-address') }}
+            </h3>
+
+            <USelect
+              v-model="remainingCheckout.warehouseId"
+              :items="channel.warehouses.map(warehouse => ({ label: warehouse.address, value: warehouse.id }))"
+              :placeholder="$t('common.select')"
+              size="xl"
+              icon="food:warehouse"
+              class="w-full"
             />
+          </div>
 
-            <UFormField :label="$t('app.checkout.order-note')">
-              <UTextarea
-                v-model="remainingCheckout.note"
-                size="xl"
-                class="w-full"
-                :placeholder="$t('app.checkout.order-note-placeholder')"
-              />
-            </UFormField>
+          <div class="flex flex-col gap-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.time-title') }}
+            </h3>
+
+            <USelect
+              v-model="remainingCheckout.time"
+              :items="[
+                { label: $t('app.checkout.as-soon-as-possible'), value: 0 },
+                ...slots,
+              ]"
+              size="xl"
+              icon="food:clock"
+              class="w-full"
+            />
           </div>
         </div>
 
-        <div class="col-span-full md:col-span-5 h-fit sticky top-20">
-          <div class="mb-6 px-3 md:px-6 flex flex-col gap-5">
-            <CartDeliveryMethodSwitch />
+        <div class="p-3 md:p-6 bg-(--ui-bg-muted) rounded-3xl flex flex-col gap-4">
+          <h2 class="text-xl md:text-2xl font-medium">
+            {{ $t('app.checkout.order-title') }}
+          </h2>
+
+          <CheckoutLine
+            v-for="line in checkout?.lines"
+            :key="line.id"
+            :line="line"
+          />
+
+          <UFormField :label="$t('app.checkout.order-note')">
+            <UTextarea
+              v-model="remainingCheckout.note"
+              size="xl"
+              class="w-full"
+              :placeholder="$t('app.checkout.order-note-placeholder')"
+            />
+          </UFormField>
+        </div>
+      </div>
 
-            <div class="space-y-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.payment-title') }}
-              </h3>
+      <div class="col-span-full md:col-span-5 h-fit sticky top-20">
+        <div class="mb-6 px-3 md:px-6 flex flex-col gap-5">
+          <CartDeliveryMethodSwitch />
+
+          <div class="space-y-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.payment-title') }}
+            </h3>
+
+            <USelect
+              v-model="remainingCheckout.paymentMethodId"
+              :items="channel.paymentMethods.map(method => ({ label: method.name, value: method.id }))"
+              :placeholder="$t('common.select')"
+              size="xl"
+              icon="food:cash"
+              class="w-full"
+            />
 
-              <USelect
-                v-model="remainingCheckout.paymentMethodId"
-                :items="channel.paymentMethods.map(method => ({ label: method.name, value: method.id }))"
-                :placeholder="$t('common.select')"
+            <UFormField v-if="selectedPaymentMethod?.type === 'CASH'" :label="$t('app.checkout.change-label')">
+              <UInputNumber
+                v-model="remainingCheckout.change"
                 size="xl"
-                icon="food:cash"
+                orientation="vertical"
                 class="w-full"
+                :min="0"
+                :placeholder="channel.currencySign"
               />
+            </UFormField>
+          </div>
 
-              <UFormField v-if="selectedPaymentMethod?.type === 'CASH'" :label="$t('app.checkout.change-label')">
-                <UInputNumber
-                  v-model="remainingCheckout.change"
-                  size="xl"
-                  orientation="vertical"
-                  class="w-full"
-                  :min="0"
-                  :placeholder="channel.currencySign"
-                />
-              </UFormField>
-            </div>
-
-            <div class="space-y-2">
-              <h3 class="text-lg md:text-xl font-medium">
-                {{ $t('app.checkout.total-title') }}
-              </h3>
+          <div class="space-y-2">
+            <h3 class="text-lg md:text-xl font-medium">
+              {{ $t('app.checkout.total-title') }}
+            </h3>
 
-              <div class="flex flex-row justify-between text-lg">
-                <div>{{ $t('app.checkout.cost.products') }}</div>
-                <div class="tracking-tight">
-                  {{ total }} <span class="text-sm">{{ channel.currencySign }}</span>
-                </div>
+            <div class="flex flex-row justify-between text-lg">
+              <div>{{ $t('app.checkout.cost.products') }}</div>
+              <div class="tracking-tight">
+                {{ checkout.total }} <span class="text-sm">{{ channel.currencySign }}</span>
               </div>
             </div>
+          </div>
 
-            <div class="space-y-3">
-              <CheckoutInfoMessage
-                v-if="checkout?.deliveryMethod === 'DELIVERY'"
-                icon="info"
-                :message="$t('app.checkout.info-shipping-price')"
-              />
-              <CheckoutInfoMessage
-                v-if="!isValidCheckout && !isOkForData"
-                icon="alert"
-                :message="$t('app.checkout.warning-data')"
-              />
-              <CheckoutInfoMessage
-                v-if="!isValidCheckout && !isOkForAmount"
-                icon="alert"
-                :message="`${$t('app.minimum-order-value')}: ${channel.minAmountForDelivery} ${channel.currencySign}`"
-              />
-            </div>
+          <div class="space-y-3">
+            <CheckoutInfoMessage
+              v-if="checkout?.deliveryMethod === 'DELIVERY'"
+              icon="info"
+              :message="$t('app.checkout.info-shipping-price')"
+            />
+            <CheckoutInfoMessage
+              v-if="!isValidCheckout && !isOkForData"
+              icon="alert"
+              :message="$t('app.checkout.warning-data')"
+            />
+            <CheckoutInfoMessage
+              v-if="!isValidCheckout && !isOkForAmount"
+              icon="alert"
+              :message="`${$t('app.minimum-order-value')}: ${channel.minAmountForDelivery} ${channel.currencySign}`"
+            />
+          </div>
 
-            <div class="flex flex-row flex-nowrap gap-4 items-center">
-              <UButton
-                size="xl"
-                variant="gradient"
-                class="grow w-full justify-center"
-                :disabled="!isValidCheckout"
-                @click="updateCheckout"
-              >
-                {{ $t('app.checkout.create-order') }}
-              </UButton>
-
-              <div class="font-medium text-right text-2xl min-w-[5rem] tracking-tight">
-                {{ total }} <span class="text-base">{{ channel.currencySign }}</span>
-              </div>
+          <div class="flex flex-row flex-nowrap gap-4 items-center">
+            <UButton
+              size="xl"
+              variant="gradient"
+              class="grow w-full justify-center"
+              :disabled="!isValidCheckout"
+              @click="updateCheckout"
+            >
+              {{ $t('app.checkout.create-order') }}
+            </UButton>
+
+            <div class="font-medium text-right text-2xl min-w-[5rem] tracking-tight">
+              {{ checkout.total }} <span class="text-base">{{ channel.currencySign }}</span>
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <div v-if="haveProblemWithOrder && checkout" class="text-center pt-16 pb-32">
-      <h1 class="pt-8 mb-4 md:mb-8 text-3xl md:text-4xl font-medium text-center">
-        {{ $t('app.cart.empty-label') }}
-      </h1>
-
-      <UButton
-        to="/"
-        size="xl"
-        variant="gradient"
-      >
-        {{ $t('common.to-home') }}
-      </UButton>
-    </div>
-
-    <template #fallback>
-      <div class="pt-32 relative h-full w-full flex flex-col justify-center items-center">
-        <Icon :name="icons.loader" class="w-24 h-24 text-neutral-300 animate-pulse" />
-      </div>
-    </template>
-  </ClientOnly>
+  </div>
+
+  <div v-else class="text-center pt-16 pb-32">
+    <h1 class="pt-8 mb-4 md:mb-8 text-3xl md:text-4xl font-medium text-center">
+      {{ $t('app.cart.empty-label') }}
+    </h1>
+
+    <UButton
+      to="/"
+      size="xl"
+      variant="gradient"
+    >
+      {{ $t('common.to-home') }}
+    </UButton>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -248,16 +239,15 @@ definePageMeta({
   layout: 'checkout',
 })
 
-const { icons } = useAppConfig()
 const channel = useChannelStore()
-const { checkout, total, update } = useCheckout()
-const { slots } = useTime()
+const checkout = useCheckoutStore()
+const slots = await channel.getTimeSlots()
 
 const remainingCheckout = ref<CheckoutDraft>({
   name: '',
   phone: '',
   time: 0,
-  change: checkout.value?.totalPrice ?? 0,
+  change: checkout.totalPrice,
   note: undefined,
   warehouseId: undefined,
   street: undefined,
@@ -269,9 +259,8 @@ const remainingCheckout = ref<CheckoutDraft>({
   paymentMethodId: '',
 })
 
-const haveProblemWithOrder = computed(() => !checkout.value?.lines.length || channel.isOnMaintenance)
-const isOkForData = computed(() => !!remainingCheckout.value.name && !!remainingCheckout.value.phone && !!remainingCheckout.value.paymentMethodId && (checkout.value?.deliveryMethod === 'DELIVERY' ? !!remainingCheckout.value.street : true) && (checkout.value?.deliveryMethod === 'WAREHOUSE' ? !!remainingCheckout.value.warehouseId : true))
-const isOkForAmount = computed<boolean>(() => checkout.value?.deliveryMethod === 'DELIVERY' && channel.minAmountForDelivery ? channel.minAmountForDelivery <= (checkout.value?.totalPrice || 0) : true)
+const isOkForData = computed(() => !!remainingCheckout.value.name && !!remainingCheckout.value.phone && !!remainingCheckout.value.paymentMethodId && (checkout.deliveryMethod === 'DELIVERY' ? !!remainingCheckout.value.street : true) && (checkout.deliveryMethod === 'WAREHOUSE' ? !!remainingCheckout.value.warehouseId : true))
+const isOkForAmount = computed<boolean>(() => checkout.deliveryMethod === 'DELIVERY' && channel.minAmountForDelivery ? channel.minAmountForDelivery <= checkout.totalPrice : true)
 const isValidCheckout = computed(() => isOkForAmount.value && isOkForData.value)
 const isValidPhone = ref(false)
 const selectedPaymentMethod = computed(() => channel.paymentMethods.find((m) => m.id === remainingCheckout.value.paymentMethodId))
@@ -301,7 +290,7 @@ function formatPhone() {
 }
 
 async function updateCheckout() {
-  const finishedCheckout = await update({
+  const finishedCheckout = await checkout.change({
     phone: remainingCheckout.value.phone,
     name: remainingCheckout.value.name,
     warehouseId: remainingCheckout.value.warehouseId,
diff --git a/apps/web-app/app/pages/command-center/menu/[id]/index.vue b/apps/web-app/app/pages/command-center/menu/[id]/index.vue
index 9f367f5a..3186db9c 100644
--- a/apps/web-app/app/pages/command-center/menu/[id]/index.vue
+++ b/apps/web-app/app/pages/command-center/menu/[id]/index.vue
@@ -62,7 +62,7 @@ definePageMeta({
 const { params } = useRoute('command-center-menu-id')
 const channel = useChannelStore()
 const menu = channel.getMenu(params.id)
-if (!menu) {
+if (!menu.value) {
   throw createError({ statusCode: 404, statusMessage: 'Menu not found' })
 }
 
diff --git a/apps/web-app/app/pages/command-center/product/[id]/index.vue b/apps/web-app/app/pages/command-center/product/[id]/index.vue
index b8d3b3e0..cb519330 100644
--- a/apps/web-app/app/pages/command-center/product/[id]/index.vue
+++ b/apps/web-app/app/pages/command-center/product/[id]/index.vue
@@ -68,7 +68,7 @@
         v-for="variant in product?.variants"
         :key="variant.id"
         class="bg-(--ui-bg-muted) space-y-2 flex flex-col justify-between"
-        @click="modal.open(ModalUpdateProductVariant, { productId: product?.id, productVariantId: variant.id })"
+        @click="modal.open(ModalUpdateProductVariant, { productVariantId: variant.id })"
       >
         <div class="text-lg font-medium md:leading-tight text-center">
           {{ variant.name }}
diff --git a/apps/web-app/stores/channel.ts b/apps/web-app/stores/channel.ts
index 68792105..ca904328 100644
--- a/apps/web-app/stores/channel.ts
+++ b/apps/web-app/stores/channel.ts
@@ -72,17 +72,30 @@ export const useChannelStore = defineStore('channel', () => {
     workingDay.value = data.value.workingDay as WorkingDay | undefined
     workingDays.value = data.value.workingDays as WorkingDay[]
   }
-  function getMenu(id: string): MenuWithData | null {
-    return menus.value.find((menu) => menu.id === id) || null
+  async function getTimeSlots() {
+    const { data } = await useFetch('/api/channel/time-slots', {
+      lazy: true,
+      server: true,
+      cache: 'no-cache',
+      getCachedData: undefined,
+    })
+    if (!data.value) {
+      throw new Error('Time slots not found')
+    }
+
+    return data.value
   }
-  function getMenuCategory(id: string): MenuCategoryWithData | null {
-    return allCategories.value.find((category) => category.id === id) || null
+  function getMenu(id: string): ComputedRef<MenuWithData | undefined> {
+    return computed(() => menus.value.find((menu) => menu.id === id))
   }
-  function getActiveMenuCategory(id: string): MenuCategoryWithData | null {
-    return activeMenu.value?.categories.find((category) => category.id === id) || null
+  function getMenuCategory(id: string): ComputedRef<MenuCategoryWithData | undefined> {
+    return computed(() => allCategories.value.find((category) => category.id === id))
   }
-  function getActiveMenuCategoryBySlug(slug: string): MenuCategoryWithData | null {
-    return activeMenu.value?.categories.find((category) => category.slug === slug) || null
+  function getActiveMenuCategory(id: string): ComputedRef<MenuCategoryWithData | undefined> {
+    return computed(() => activeMenu.value?.categories.find((category) => category.id === id))
+  }
+  function getActiveMenuCategoryBySlug(slug: string): ComputedRef<MenuCategoryWithData | undefined> {
+    return computed(() => activeMenu.value?.categories.find((category) => category.slug === slug))
   }
   function getProduct(id: string): ComputedRef<ProductWithData | undefined> {
     return computed(() => allProducts.value.find((product) => product.id === id))
@@ -90,6 +103,9 @@ export const useChannelStore = defineStore('channel', () => {
   function getProductBySlug(slug: string): ComputedRef<ProductWithData | undefined> {
     return computed(() => allProducts.value.find((product) => product.slug === slug))
   }
+  function getProductVariant(id: string): ComputedRef<ProductVariant | undefined> {
+    return computed(() => allProducts.value.flatMap((product) => product.variants).find((variant) => variant.id === id))
+  }
 
   return {
     id,
@@ -122,11 +138,13 @@ export const useChannelStore = defineStore('channel', () => {
     isInitialized,
 
     update,
+    getTimeSlots,
     getMenu,
     getMenuCategory,
     getActiveMenuCategory,
     getActiveMenuCategoryBySlug,
     getProduct,
     getProductBySlug,
+    getProductVariant,
   }
 })
diff --git a/apps/web-app/stores/checkout.ts b/apps/web-app/stores/checkout.ts
new file mode 100644
index 00000000..80b7d391
--- /dev/null
+++ b/apps/web-app/stores/checkout.ts
@@ -0,0 +1,97 @@
+export const useCheckoutStore = defineStore('checkout', () => {
+  const id = ref<string | null>(null)
+  const name = ref('')
+  const phone = ref('')
+  const status = ref<Checkout['status'] | undefined>(undefined)
+  const totalPrice = ref(0)
+  const deliveryMethod = ref<Checkout['deliveryMethod'] | null>(null)
+  const lines = ref<CheckoutLine[]>([])
+
+  const isEmpty = computed(() => lines.value.length === 0)
+  const total = computed(() => formatNumberToLocal(totalPrice.value))
+
+  async function update() {
+    const { data, error } = await useFetch('/api/checkout', {
+      lazy: true,
+      server: true,
+      cache: 'no-cache',
+      getCachedData: undefined,
+    })
+    if (!data.value || error.value) {
+      return
+    }
+
+    id.value = data.value.id
+    name.value = data.value.name
+    phone.value = data.value.phone
+    status.value = data.value.status as Checkout['status']
+    totalPrice.value = data.value.totalPrice
+    deliveryMethod.value = data.value.deliveryMethod as Checkout['deliveryMethod'] | null
+    lines.value = data.value.lines
+  }
+  async function add(productVariantId: string) {
+    try {
+      await $fetch(
+        '/api/checkout/add',
+        {
+          method: 'POST',
+          body: { productVariantId },
+        },
+      )
+
+      await update()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  async function change(checkout: Partial<Checkout>) {
+    try {
+      const data = await $fetch(
+        '/api/checkout',
+        {
+          method: 'PATCH',
+          body: checkout,
+        },
+      )
+
+      await update()
+
+      return data
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  async function changeLineQuantity(id: string, method: 'increment' | 'decrement') {
+    try {
+      await $fetch(
+        `/api/checkout/line/${id}`,
+        {
+          method: 'POST',
+          body: { method },
+        },
+      )
+
+      await update()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return {
+    id,
+    name,
+    phone,
+    status,
+    totalPrice,
+    deliveryMethod,
+    lines,
+
+    isEmpty,
+    total,
+
+    update,
+    add,
+    change,
+    changeLineQuantity,
+  }
+})
diff --git a/packages/core/server/api/category/[id]/index.patch.ts b/packages/core/server/api/category/[id]/index.patch.ts
index 0ab849ac..902eae7a 100644
--- a/packages/core/server/api/category/[id]/index.patch.ts
+++ b/packages/core/server/api/category/[id]/index.patch.ts
@@ -3,6 +3,8 @@ import { menuCategoryUpdateSchema } from './../../../../shared/services/menu'
 
 export default defineEventHandler(async (event) => {
   try {
+    const { channelId } = useRuntimeConfig()
+
     const id = getRouterParam(event, 'id')
     if (!id) {
       throw createError({
@@ -16,6 +18,8 @@ export default defineEventHandler(async (event) => {
 
     const category = await repository.menuCategory.patch(id, data)
 
+    await repository.channel.setAsUpdated(channelId)
+
     return {
       ok: true,
       result: category,
diff --git a/packages/core/server/api/category/index.post.ts b/packages/core/server/api/category/index.post.ts
index 7a04a2eb..65246391 100644
--- a/packages/core/server/api/category/index.post.ts
+++ b/packages/core/server/api/category/index.post.ts
@@ -3,6 +3,7 @@ import { menuCategoryCreateSchema } from './../../../shared/services/menu'
 
 export default defineEventHandler(async (event) => {
   try {
+    const { channelId } = useRuntimeConfig()
     const body = await readBody(event)
 
     const data = menuCategoryCreateSchema.parse(body)
@@ -15,6 +16,8 @@ export default defineEventHandler(async (event) => {
       menuId: data.menuId,
     })
 
+    await repository.channel.setAsUpdated(channelId)
+
     return {
       ok: true,
       result: category,
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
index 1c88f5db..42659f65 100644
--- a/packages/core/types/index.d.ts
+++ b/packages/core/types/index.d.ts
@@ -161,16 +161,16 @@ declare global {
 
   interface CheckoutLine {
     id: string
-    createdAt: Date
-    updatedAt: Date
-    checkoutId: string
-    productVariantId: string
+    createdAt: string
+    updatedAt: string
+    totalPrice: number
     quantity: number
     unitPrice: number
     undiscountedUnitPrice: number
-    totalPrice: number
     undiscountedTotalPrice: number
     isGift: boolean
+    checkoutId: string
+    productVariantId: string
   }
 
   type CheckoutReceiver = {