feat: settings page with data

apps/food/app/components/CommandCenter/MenuCard.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink :to="`/command-center/menu/${menuId}`">
     <UiActiveCard class="py-6 relative min-h-60 text-center flex flex-col items-center justify-center">
-      <div v-if="menu?.isActive" class="absolute -top-2 -right-2 w-12 h-12 p-2 bg-emerald-50 dark:bg-neutral-600 rounded-full">
+      <div v-if="menu?.isActive" class="absolute top-2 right-2 w-12 h-12 p-2 bg-neutral-50 dark:bg-neutral-600 rounded-full">
         <Icon :name="icons.monitorCheck" class="w-8 h-8 text-emerald-500 opacity-100" />
       </div>
 

apps/food/app/components/CommandCenter/PaymentMethodCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <UiActiveCard class="relative min-h-28 text-center flex flex-col items-center justify-center">
+    <Icon :name="icons.moneyCard" class="w-8 h-8 text-neutral-300 dark:text-neutral-500" />
+
+    <h3 class="text-lg font-semibold">
+      {{ paymentMethod?.name }}
+    </h3>
+
+    <p class="text-sm">
+      {{ paymentMethod?.type }}
+    </p>
+  </UiActiveCard>
+</template>
+
+<script setup lang="ts">
+const { paymentMethodId } = defineProps<{
+  paymentMethodId: string
+}>()
+
+const { icons } = useAppConfig()
+const { channel } = await useChannel()
+const paymentMethod = computed(() => channel.value?.paymentMethods.find((p) => p.id === paymentMethodId))
+</script>

apps/food/app/components/CommandCenter/PaymentMethodCreateCard.vue

@@ -0,0 +1,16 @@
+<template>
+  <UiActiveCard>
+    <div class="flex flex-col justify-center items-center h-full min-h-28 text-center">
+      <img
+        src="~/assets/img/green-notebook.png"
+        width="64"
+        height="64"
+        alt=""
+        class="mx-auto mb-2 w-12 h-12"
+      >
+      <h2 class="leading-tight">
+        {{ $t('center.create.payment-method') }}
+      </h2>
+    </div>
+  </UiActiveCard>
+</template>

apps/food/app/components/DeliveryInfoModal.vue

@@ -1,38 +1,26 @@
 <template>
-  <button
-    class="z-40 fixed left-0 right-0 -top-20 -bottom-20 appearance-none bg-neutral-700/50 dark:bg-neutral-900/50 opacity-0 data-[active=true]:opacity-100 translate-x-full data-[active=true]:-translate-x-0 transition-opacity"
-    :data-active="isDeliveryInfoModalOpened"
-    @click="isDeliveryInfoModalOpened = false"
-  />
-  <div
-    class="z-40 fixed left-0 top-0 w-full max-w-md h-auto p-2 m-0 shadow-none rounded-2xl -translate-x-full data-[active=true]:translate-x-0 data-[active=true]:right-0 data-[active=true]:mx-auto transition-transform"
-    :data-active="isDeliveryInfoModalOpened"
-  >
-    <div class="mt-16 px-8 py-8 bg-white dark:bg-neutral-600 rounded-2xl">
-      <div class="mb-2 text-2xl font-medium">
-        {{ checkout?.deliveryMethod === 'DELIVERY' ? $t('app.cart.delivery-details') : $t('app.cart.pickup-details') }}
-      </div>
-
-      <div class="font-sans whitespace-pre-wrap">
-        {{ channel?.conditions }}
-      </div>
+  <UiModal :title="checkout?.deliveryMethod === 'DELIVERY' ? $t('app.cart.delivery-details') : $t('app.cart.pickup-details')" :is-opened="isDeliveryInfoModalOpened" @close="isDeliveryInfoModalOpened = false">
+    <div class="font-sans whitespace-pre-wrap">
+      {{ channel?.conditions }}
+    </div>
 
+    <div v-if="channel?.minAmountForDelivery && checkout?.deliveryMethod === 'DELIVERY'">
       <div class="mt-8 mb-2 text-xl font-medium">
         {{ $t('common.more-information') }}
       </div>
 
-      <div v-if="channel?.minAmountForDelivery" class="mb-2 flex flex-row justify-between">
+      <div class="mb-2 flex flex-row justify-between">
         <div>{{ $t('app.minimum-order-value') }}</div>
         <div>
           {{ channel?.minAmountForDelivery }} <span class="text-sm">{{ getCurrencySign(channel?.currencyCode) }}</span>
         </div>
       </div>
-
-      <UiButton variant="secondary" class="mt-4" @click="isDeliveryInfoModalOpened = false">
-        {{ $t('common.ok') }}
-      </UiButton>
     </div>
-  </div>
+
+    <UiButton variant="secondary" class="mt-4" @click="isDeliveryInfoModalOpened = false">
+      {{ $t('common.ok') }}
+    </UiButton>
+  </UiModal>
 </template>
 
 <script setup lang="ts">

apps/food/app/components/ui/modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.vue'

apps/food/app/locales/en-EN.json

@@ -79,6 +79,15 @@
       "protein": "Protein",
       "fat": "Fat",
       "carbohydrate": "Carbs"
+    },
+    "day": {
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday",
+      "sunday": "Sunday"
     }
   },
   "app": {
@@ -188,7 +197,8 @@
       "product-variant": "Create new Product Variant",
       "menu": "Create new Menu",
       "menu-category": "Create new Menu Category",
-      "warehouse": "Create new Warehouse"
+      "warehouse": "Create new Warehouse",
+      "payment-method": "Create new Payment Method"
     },
     "add": {
       "menu-category": "Add Category"
@@ -210,6 +220,19 @@
     },
     "upload": {
       "title": "Upload"
+    },
+    "data": {
+      "general-title": "General data",
+      "methods-orders-title": "Methods of receiving an order",
+      "online-ordering-time-title": "Online ordering time",
+      "payment-methods-title": "Payment methods",
+      "name": "Name",
+      "description": "Description",
+      "phone": "Phone",
+      "currency": "Currency",
+      "country": "Country",
+      "timezone": "Timezone",
+      "delivery-conditions": "Delivery conditions"
     }
   },
   "error": {

apps/food/app/locales/ru-RU.json

@@ -79,6 +79,15 @@
       "protein": "Белки",
       "fat": "Жиры",
       "carbohydrate": "Углеводы"
+    },
+    "day": {
+      "monday": "Понедельник",
+      "tuesday": "Вторник",
+      "wednesday": "Среда",
+      "thursday": "Четверг",
+      "friday": "Пятница",
+      "saturday": "Суббота",
+      "sunday": "Воскресенье"
     }
   },
   "app": {
@@ -188,7 +197,8 @@
       "product-variant": "Создать новую вариацию продукта",
       "menu": "Создать новое меню",
       "menu-category": "Создать новую категорию",
-      "warehouse": "Создать новый склад"
+      "warehouse": "Создать новый склад",
+      "payment-method": "Создать новый метод оплаты"
     },
     "add": {
       "menu-category": "Добавить категорию"
@@ -210,6 +220,19 @@
     },
     "upload": {
       "title": "Загрузить"
+    },
+    "data": {
+      "general-title": "Основные данные",
+      "methods-orders-title": "Способы получения заказа",
+      "online-ordering-time-title": "Время оформления заказов",
+      "payment-methods-title": "Методы оплаты",
+      "name": "Название",
+      "description": "Описание",
+      "phone": "Телефон",
+      "currency": "Валюта",
+      "country": "Страна",
+      "timezone": "Часовой пояс",
+      "delivery-conditions": "Условия доставки"
     }
   },
   "error": {

apps/food/app/pages/checkout/index.vue

@@ -258,7 +258,7 @@
     </NuxtLink>
   </div>
 
-  <CommandCenterModal :title="$t('app.checkout.select-time-title')" :is-opened="isSelectTimeModalOpened" @close="() => isSelectTimeModalOpened = false">
+  <UiModal :title="$t('app.checkout.select-time-title')" :is-opened="isSelectTimeModalOpened" @close="isSelectTimeModalOpened = false">
     <div class="flex flex-col gap-2">
       <UiButton variant="secondary" class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center" @click="() => { remainingCheckout.timeType = 'ASAP'; selectedTimeLabel = ''; isSelectTimeModalOpened = false }">
         <UiCheckBadge v-if="remainingCheckout.timeType === 'ASAP'" />
@@ -276,7 +276,7 @@
         </p>
       </UiButton>
     </div>
-  </CommandCenterModal>
+  </UiModal>
 </template>
 
 <script setup lang="ts">

apps/food/app/pages/command-center/menu/[id]/index.vue

@@ -45,17 +45,17 @@
     </p>
   </div>
 
-  <CommandCenterModal :title="$t('center.create.product')" :is-opened="isCreateProductOpened" @close="() => isCreateProductOpened = false">
-    <FormCreateProduct :category-id="categoryId" :is-opened="isCreateProductOpened" @success="() => isCreateProductOpened = false" />
-  </CommandCenterModal>
+  <UiModal :title="$t('center.create.product')" :is-opened="isCreateProductOpened" @close="isCreateProductOpened = false">
+    <FormCreateProduct :category-id="categoryId" :is-opened="isCreateProductOpened" @success="isCreateProductOpened = false" />
+  </UiModal>
 
-  <CommandCenterModal :title="$t('center.create.menu-category')" :is-opened="isCreateMenuCategoryOpened" @close="() => isCreateMenuCategoryOpened = false">
-    <FormCreateMenuCategory :menu-id="menu?.id ?? ''" :is-opened="isCreateMenuCategoryOpened" @success="() => isCreateMenuCategoryOpened = false" />
-  </CommandCenterModal>
+  <UiModal :title="$t('center.create.menu-category')" :is-opened="isCreateMenuCategoryOpened" @close="isCreateMenuCategoryOpened = false">
+    <FormCreateMenuCategory :menu-id="menu?.id ?? ''" :is-opened="isCreateMenuCategoryOpened" @success="isCreateMenuCategoryOpened = false" />
+  </UiModal>
 
-  <CommandCenterModal :title="$t('center.update.menu-category')" :is-opened="isUpdateMenuCategoryOpened" @close="() => isUpdateMenuCategoryOpened = false">
-    <FormUpdateMenuCategory :menu-id="menu?.id ?? ''" :category-id="categoryId" :is-opened="isUpdateMenuCategoryOpened" @success="() => isUpdateMenuCategoryOpened = false" />
-  </CommandCenterModal>
+  <UiModal :title="$t('center.update.menu-category')" :is-opened="isUpdateMenuCategoryOpened" @close="isUpdateMenuCategoryOpened = false">
+    <FormUpdateMenuCategory :menu-id="menu?.id ?? ''" :category-id="categoryId" :is-opened="isUpdateMenuCategoryOpened" @success="isUpdateMenuCategoryOpened = false" />
+  </UiModal>
 </template>
 
 <script setup lang="ts">

apps/food/app/pages/command-center/menu/index.vue

@@ -28,9 +28,9 @@
     </p>
   </div>
 
-  <CommandCenterModal :title="$t('center.create.menu')" :is-opened="isModalOpened" @close="() => isModalOpened = false">
-    <FormCreateMenu :is-opened="isModalOpened" @success="() => isModalOpened = false" />
-  </CommandCenterModal>
+  <UiModal :title="$t('center.create.menu')" :is-opened="isModalOpened" @close="isModalOpened = false">
+    <FormCreateMenu :is-opened="isModalOpened" @success="isModalOpened = false" />
+  </UiModal>
 </template>
 
 <script setup lang="ts">

apps/food/app/pages/command-center/product/[id]/index.vue

@@ -96,23 +96,23 @@
     </div>
   </div>
 
-  <CommandCenterModal :title="$t('center.update.product-photo')" :is-opened="isUploadProductImageOpened" @close="() => isUploadProductImageOpened = false">
-    <FormUploadProductImage :product-id="product?.id ?? ''" :is-opened="isUploadProductImageOpened" @success="() => isUploadProductImageOpened = false" />
-  </CommandCenterModal>
-
-  <CommandCenterModal :title="$t('center.update.product')" :is-opened="isUpdateProductOpened" @close="() => isUpdateProductOpened = false">
-    <FormUpdateProduct :product-id="product?.id ?? ''" :is-opened="isUpdateProductOpened" @success="() => isUpdateProductOpened = false" />
-    <FormDeleteProduct :product-id="product?.id ?? ''" :redirect-to="menuPageUrl" :is-opened="isUpdateProductOpened" @success="() => isUpdateProductOpened = false" />
-  </CommandCenterModal>
-
-  <CommandCenterModal :title="$t('center.create.product-variant')" :is-opened="isCreateProductVariantOpened" @close="() => isCreateProductVariantOpened = false">
-    <FormCreateProductVariant :product-id="product?.id ?? ''" :is-opened="isCreateProductVariantOpened" @success="() => isCreateProductVariantOpened = false" />
-  </CommandCenterModal>
-
-  <CommandCenterModal :title="$t('center.update.product-variant')" :is-opened="isUpdateProductVariantOpened" @close="() => isUpdateProductVariantOpened = false">
-    <FormUpdateProductVariant :product-variant-id="productVariantId ?? ''" :product-variant="productVariant" :is-opened="isUpdateProductVariantOpened" @success="() => isUpdateProductVariantOpened = false" />
-    <FormDeleteProductVariant :product-variant-id="productVariantId ?? ''" :is-opened="isUpdateProductVariantOpened" @success="() => isUpdateProductVariantOpened = false" />
-  </CommandCenterModal>
+  <UiModal :title="$t('center.update.product-photo')" :is-opened="isUploadProductImageOpened" @close="isUploadProductImageOpened = false">
+    <FormUploadProductImage :product-id="product?.id ?? ''" :is-opened="isUploadProductImageOpened" @success="isUploadProductImageOpened = false" />
+  </UiModal>
+
+  <UiModal :title="$t('center.update.product')" :is-opened="isUpdateProductOpened" @close="isUpdateProductOpened = false">
+    <FormUpdateProduct :product-id="product?.id ?? ''" :is-opened="isUpdateProductOpened" @success="isUpdateProductOpened = false" />
+    <FormDeleteProduct :product-id="product?.id ?? ''" :redirect-to="menuPageUrl" :is-opened="isUpdateProductOpened" @success="isUpdateProductOpened = false" />
+  </UiModal>
+
+  <UiModal :title="$t('center.create.product-variant')" :is-opened="isCreateProductVariantOpened" @close="isCreateProductVariantOpened = false">
+    <FormCreateProductVariant :product-id="product?.id ?? ''" :is-opened="isCreateProductVariantOpened" @success="isCreateProductVariantOpened = false" />
+  </UiModal>
+
+  <UiModal :title="$t('center.update.product-variant')" :is-opened="isUpdateProductVariantOpened" @close="isUpdateProductVariantOpened = false">
+    <FormUpdateProductVariant :product-variant-id="productVariantId ?? ''" :product-variant="productVariant" :is-opened="isUpdateProductVariantOpened" @success="isUpdateProductVariantOpened = false" />
+    <FormDeleteProductVariant :product-variant-id="productVariantId ?? ''" :is-opened="isUpdateProductVariantOpened" @success="isUpdateProductVariantOpened = false" />
+  </UiModal>
 </template>
 
 <script setup lang="ts">