карты пвз

.gitea/workflows/deploy.yml

@@ -6,22 +6,35 @@ on:
       - master
 
 jobs:
-  build-and-deploy:
+  build:
     runs-on: ubuntu-latest
 
     steps:
-      - name: LS
+      - name: Keyscan
-        run: cd / && cat .dockerenv
+        run: |
-      - name: Test SSH access
+          ssh-keyscan git.koptilnya.xyz >> ~/.ssh/known_hosts
-        run: ssh -Tv git@koptilnya.xyz
+
-      - name: Checkout code
+      - name: Checkout
         uses: actions/checkout@v4
         with:
-          ssh-key: '${{ secrets.SSH_PRIVATE_KEY }}'
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
           ssh-strict: false
           persist-credentials: false
 
-      - name: Install dependencies
+      - name: Build
+        run: docker build -t paxton:latest .
+
+      - name: Stop old container
+        run: docker rm -f paxton || true
+
+      - name: Run
         run: |
-          yarn install
+          docker run -d \
-          yarn build
+            --name paxton \
+            --network traefik \
+            --label "traefik.enable=true" \
+            --label "traefik.http.routers.paxton.rule=Host(\`paxton.koptilnya.xyz\`)" \
+            --label "traefik.http.routers.paxton.entrypoints=websecure" \
+            --label "traefik.http.routers.paxton.tls.certresolver=myresolver" \
+            --label "traefik.http.services.paxton.loadbalancer.server.port=80" \
+            paxton:latest

Dockerfile

@@ -0,0 +1,28 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+RUN corepack enable
+COPY package.json yarn.lock ./
+RUN yarn install
+COPY . .
+RUN yarn build
+
+FROM node:22-alpine
+WORKDIR /app
+COPY --from=build /app/.output/ ./
+
+ENV PORT=80
+
+ENV BSPB_MERCHANT_ID=TT00001
+ENV BSPB_MERCHANT_PASSWORD=ztTGre1OBZg3
+ENV BSPB_API_URL=https://pgtest.bspb.ru:5443
+
+ENV VITE_YANDEX_MAPS_TOKEN=13f4c06b-cb7e-4eeb-81f1-af52f12587b2
+
+ENV VITE_YANDEX_B2B_BASE_URL=https://b2b-authproxy.taxi.yandex.net/api/b2b/platform
+ENV VITE_YANDEX_B2B_TOKEN=y0__xCqxdamBhjVmRUgrIqL1BRb-Au03gwwIZjInV31ftl35o5nNA
+
+ENV VITE_BASE_URL=http://localhost:3000
+
+EXPOSE 80
+
+CMD ["node", "/app/server/index.mjs"]

api/Api.ts

@@ -5283,7 +5283,7 @@ export class Api<
         method: "POST",
         body: data,
         secure: true,
-        type: ContentType.UrlEncoded,
+        type: ContentType.Json,
         ...params,
       }),
 

api/endpoints/index.ts

@@ -1,4 +1 @@
-export * from './getProductAttributesDetail'
+export * from './wp/index'
-export * from './getProductsDetail'
-export * from './getProductsList'
-export * from './getProductsVariationsList'

api/endpoints/orders/index.ts

@@ -1 +0,0 @@
-export * from './postOrdersCreate'

api/endpoints/orders/postOrdersCreate.ts

@@ -1,4 +0,0 @@
-import api from '~/api/instance'
-
-export const postOrdersCreate = async (parent_id: number | undefined) =>
-  await api.wc.v3OrdersCreate({ parent_id })

api/endpoints/wp/index.ts

@@ -0,0 +1,4 @@
+export * from './getProductAttributesDetail'
+export * from './getProductsDetail'
+export * from './getProductsList'
+export * from './getProductsVariationsList'

api/mutations/index.ts

@@ -1 +0,0 @@
-export * from './usePostOrdersCreate'

api/mutations/usePostOrdersCreate.ts

@@ -1,19 +0,0 @@
-import type { MaybeRef } from 'vue'
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { unref } from 'vue'
-import { postOrdersCreate } from '~/api/endpoints/orders'
-
-export const usePostOrdersCreate = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: (params: { parent_id: MaybeRef<number | undefined> }) =>
-      postOrdersCreate(unref(params.parent_id)),
-
-    onSuccess: (data, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: ['post-orders-create', unref(variables.parent_id)],
-      })
-    },
-  })
-}

api/queries/index.ts

@@ -1,4 +1 @@
-export * from './useGetProductAttributesDetail'
+export * from './wp/index'
-export * from './useGetProductsDetail'
-export * from './useGetProductsList'
-export * from './useGetProductsVariationsList'

api/queries/wp/index.ts

@@ -0,0 +1,4 @@
+export * from './useGetProductAttributesDetail'
+export * from './useGetProductsDetail'
+export * from './useGetProductsList'
+export * from './useGetProductsVariationsList'

api/queries/wp/useGetProductAttributesDetail.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/vue-query'
 import { unref } from 'vue'
-import { getProductAttributesDetail } from '~/api/endpoints'
+import { getProductAttributesDetail } from '~/api/endpoints/wp'
 
 export const useGetProductAttributesDetail = (productId: MaybeRef<number>) => {
   return useQuery({

api/queries/wp/useGetProductsDetail.ts

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/vue-query'
 import { unref } from 'vue'
-import { getProductsDetail } from '~/api/endpoints'
+import { getProductsDetail } from '~/api/endpoints/wp'
 
 export const useGetProductsDetail = (productId: MaybeRef<number>) => {
   return useQuery({
     queryKey: ['get-products-detail', productId],
     queryFn: () => getProductsDetail(unref(productId)),
+    enabled: !!unref(productId),
   })
 }

api/queries/wp/useGetProductsList.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/vue-query'
-import { getProductsList } from '~/api/endpoints/getProductsList'
+import { getProductsList } from '~/api/endpoints/wp/getProductsList'
 
 export const useGetProductsList = () => {
   return useQuery({

api/queries/wp/useGetProductsVariationsList.ts

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/vue-query'
 import { unref } from 'vue'
-import { getProductsVariationsList } from '~/api/endpoints'
+import { getProductsVariationsList } from '~/api/endpoints/wp'
 
 export const useGetProductsVariationsList = (productId: MaybeRef<number>) => {
   return useQuery({
     queryKey: ['get-products-variations-list', productId],
     queryFn: () => getProductsVariationsList(unref(productId)),
+    enabled: !!unref(productId),
   })
 }

assets/scss/main.scss

@@ -24,6 +24,7 @@ h3 {
   @include h3('h3');
 }
 
+//скроллбар
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -53,3 +54,33 @@ h3 {
 body {
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
+
+//swiper
+.swiper {
+  width: 100%;
+  height: calc(100dvh - 54px);
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #444;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: calc(100dvh - 54px);
+  object-fit: cover;
+}
+
+.swiper-pagination {
+  position: absolute;
+  bottom: 200px !important;
+  --swiper-pagination-bullet-size: 4px
+}

components/DeliveryInfo.vue

@@ -0,0 +1,146 @@
+<template>
+  <ul class="delivery-info">
+    <li v-if="showFullContent" class="delivery-info__item">
+      <Icon class="delivery-info__icon" name="lucide:truck" />
+      <span class="delivery-info__text">Yandex</span>
+    </li>
+
+    <li class="delivery-info__item">
+      <Icon class="delivery-info__icon" name="lucide:map-pin" />
+      <span class="delivery-info__text">{{ checkoutPickupPoint?.address?.full_address }}</span>
+    </li>
+
+    <li class="delivery-info__item">
+      <Icon class="delivery-info__icon" name="lucide:shirt" size="xl" />
+      <span class="delivery-info__text">{{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }}</span>
+    </li>
+
+    <li class="delivery-info__item">
+      <Icon class="delivery-info__icon" name="lucide:package" />
+      <span class="delivery-info__text">срок хранения — 7 дней</span>
+    </li>
+
+    <li class="delivery-info__item">
+      <UAccordion
+        :items="availableDays"
+        :ui="{
+          body: 'py-0',
+          panel: 'p-0',
+          wrapper: 'space-y-0',
+        }"
+      >
+        <template #schedule="{ item }">
+          <div>
+            <div
+              v-for="(scheduleItem, index) in item.content"
+              :key="index"
+            >
+              <Icon class="delivery-info__icon mr-2" name="lucide:clock" />
+              <span class="mr-2">{{ scheduleItem.dayName }}</span>
+              <span>{{ scheduleItem.timeRange }}</span>
+            </div>
+          </div>
+        </template>
+      </UAccordion>
+    </li>
+
+    <li>
+      <UAccordion :items="details" />
+    </li>
+
+    <UButton
+      v-if="showFullContent"
+      class="justify-content-center"
+      label="Привезти сюда"
+      size="xl"
+      @click="nextStep"
+    />
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { AccordionItem } from '@nuxt/ui'
+import { computed, ref } from 'vue'
+import { useCheckout } from '~/composables/useCheckout'
+
+withDefaults(defineProps<{
+  showFullContent?: boolean
+}>(), {
+  showFullContent: true,
+})
+
+const { checkoutPickupPoint, nextStep } = useCheckout()
+
+const restrictionDays = {
+  1: 'пн',
+  2: 'вт',
+  3: 'ср',
+  4: 'чт',
+  5: 'пт',
+  6: 'сб',
+  7: 'вс',
+}
+
+// Функция для форматирования времени с ведущим нулем
+const formatTime = (time: { hours: number | string, minutes: number | string }): string => {
+  const hours = String(time.hours).padStart(2, '0')
+  const minutes = String(time.minutes).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+// Функция для форматирования временного диапазона
+const formatTimeRange = (timeFrom: { hours: number | string, minutes: number | string }, timeTo: { hours: number | string, minutes: number | string }): string => {
+  return `${formatTime(timeFrom)} - ${formatTime(timeTo)}`
+}
+
+// Аккордеон с расписанием - используем слот вместо HTML строки
+const availableDays = computed(() => {
+  const scheduleItems = checkoutPickupPoint?.value?.schedule?.restrictions?.map((restriction) => {
+    const dayName = restrictionDays[restriction.days[0]]
+    const timeRange = formatTimeRange(restriction.time_from, restriction.time_to)
+    return { dayName, timeRange }
+  }) || []
+
+  return [
+    {
+      label: 'График работы',
+      icon: 'i-lucide:calendar',
+      slot: 'schedule',
+      content: scheduleItems,
+    },
+  ]
+})
+
+const details = ref<AccordionItem[]>([
+  {
+    label: 'Подробнее',
+    icon: 'i-lucide:info',
+    content: checkoutPickupPoint?.value?.address?.comment || 'Дополнительная информация о пункте выдачи',
+  },
+])
+</script>
+
+<style lang="scss">
+.delivery-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__text {
+    flex: 1;
+    line-height: 1.4;
+  }
+}
+</style>

components/PayBlock.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <UPageCard>
+      <template #body>
+        <div>товары {{ `(${cart?.line_items?.length} шт)` }}</div>
+        <div v-if="cartSum">
+          <ProductPrice :is-headline="false" text="итого" :price="cartSum" />
+        </div>
+      </template>
+
+      <template #footer>
+        <UButton
+          class="justify-center text-center w-2xs"
+          size="xl"
+          :label="pay ? 'оформить заказ' : 'перейти к оформлению'"
+          @click="pay ? createOrder() : router.push(`/checkout/delivery`)"
+        />
+      </template>
+    </UPageCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBspb } from '~/server/shared/types/bspb'
+
+defineProps({
+  pay: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const router = useRouter()
+const { cart, cartSum } = useCart()
+
+const createOrder = async () => {
+  const { data } = await useFetch<IBspb>('/api/bspb', {
+    method: 'POST',
+    body: {
+      order: {
+        typeRid: 'Purchase',
+        amount: cartSum,
+        currency: 'RUB',
+        hppRedirectUrl: `${import.meta.env.VITE_BASE_URL}/cart`,
+      },
+    },
+  })
+
+  const redirectUrl = `${data?.value?.order?.hppUrl}?orderId=${data?.value?.order?.id}&password=${data.value?.order?.password}`
+  window.open(redirectUrl, '_blank')
+}
+</script>

components/PhotoModel.vue

@@ -0,0 +1,57 @@
+<template>
+  <UPopover
+    :mode="isMobile ? 'click' : 'hover'"
+    :ui="{ content: '--reka-popper-transform-origin: 50% -20px;' }"
+  >
+    <UButton
+      icon="i-mdi-human-handsdown"
+      label="фотомодель"
+      class="model-btn"
+    />
+
+    <template #content>
+      <div class="model-info">
+        <div
+          v-for="parameter in photoModel"
+          :key="parameter?.split(': ')[0]"
+        >
+          {{ parameter?.split(': ')[0] }} <strong>{{ parameter?.split(': ')[1] }}</strong>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const { photoModel } = useProduct()
+const isMobile = useMediaQuery('(max-width: 1280px)')
+</script>
+
+ <style scoped lang="scss">
+ .model-btn {
+  display: inline-flex !important;
+  align-self: flex-start;
+}
+
+.model-info {
+  width: 140px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 15px;
+  font-size: 14px;
+  line-height: 1.3;
+  white-space: nowrap;
+
+  & > * {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.model-info strong {
+  font-weight: 600;
+}
+</style>

components/ProductDescription.vue

@@ -2,7 +2,7 @@
   <div class="product-description">
     <h1>{{ productsData?.name }}</h1>
 
-    <h2>{{ currentVariant?.options[0]?.price }}  <Icon name="ph:currency-rub" /></h2>
+    <ProductPrice :price="currentVariant?.options[0]?.price" />
 
     <ProductVariations v-if="colors?.length > 1" />
 
@@ -37,9 +37,9 @@
     <UButton
       :disabled="!currentSize"
       class="justify-content-center"
-      label="Добавить в корзину"
+      :label="currentSize ? `Добавить в корзину` : `Выберите размер`"
       size="xl"
-      @click="addToCartBtn"
+      @click="addToCartBtn()"
     />
 
     <UAccordion :items="items" />
@@ -47,11 +47,12 @@
 </template>
 
 <script setup lang="ts">
+import ProductPrice from '~/components/ProductPrice.vue'
 import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
-const { addToCart } = useCart()
+const { cartAddItem } = useCart()
 
 const { productsData, colors, getAttribute } = useProduct()
 const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
@@ -87,29 +88,32 @@ const items = computed(() => [
 ])
 
 function addToCartBtn() {
-  addToCart(currentSize?.value?.id)
+  cartAddItem({ variation_id: currentSize?.value?.id })
 }
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product-description {
   width: 100%;
-  max-width: 335px;
+  padding: 30px 30px 0;
-
-  @media (min-width: 768px) {
-    position: sticky;
-    align-self: self-start;
-    top: 40px;
-    overflow-y: auto;
-    max-height: calc(100vh - 80px);
-  }
-
-  padding-top: 30px;
-  padding-inline: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 
+  @media (min-width: 768px) {
+    position: sticky;
+    top: 40px;
+    max-height: calc(100vh - 40px);
+    max-width: 350px;
+    overflow-y: auto;
+  }
+
+  @include mobile {
+    padding: 20px 30px;
+  }
+
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -119,13 +123,5 @@ function addToCartBtn() {
   &__size {
     width: 65px;
   }
-
-  h2 {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-    text-align: center;
-  }
 }
 </style>

components/ProductImages.vue

@@ -1,17 +1,43 @@
 <template>
-  <div class="product-images">
+  <div v-if="!isMobile" class="product-images">
     <div
       v-for="image in currentVariantImages?.slice(0, 5)"
       :key="image?.id"
     >
       <img width="100%" :src="image?.src" :alt="image?.src">
     </div>
+
+    <div class="product-images__model">
+      <PhotoModel />
+    </div>
   </div>
+
+  <Swiper
+    v-if="isMobile"
+    :pagination="true"
+    :loop="true"
+    :modules="modules"
+    class="mySwiper"
+  >
+    <SwiperSlide
+      v-for="image in currentVariantImages?.slice(0, 5)"
+      :key="image?.src"
+    >
+      <img width="100%" :src="image?.src" :alt="image?.src">
+    </SwiperSlide>
+  </Swiper>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import { useCurrentProduct } from '~/composables'
+import 'swiper/css'
+import 'swiper/css/pagination'
 
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const modules = [Pagination]
 const { currentVariantImages } = useCurrentProduct()
 </script>
 
@@ -19,7 +45,14 @@ const { currentVariantImages } = useCurrentProduct()
 .product-images {
   position: relative;
   width: 100%;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(2, 1fr);
+
+  &__model {
+    position: fixed;
+    top: calc(10px + 54px);
+    right: calc(10px + 350px);
+    z-index: 1000;
+  }
 }
 </style>

components/ProductPrice.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="product-price">
+    <h2 v-if="isHeadline" class="product-price__text">
+      {{ text }} {{ price }}  <Icon name="ph:currency-rub" />
+    </h2>
+
+    <div v-else class="product-price__text">
+      {{ text }} {{ price }}  <Icon name="ph:currency-rub" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  price: {
+    type: [String, Number],
+    required: true,
+  },
+  isHeadline: {
+    type: Boolean,
+    default: true,
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss">
+.product-price {
+  &__text {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    text-align: center;
+  }
+}
+</style>

components/PvzMap.vue

@@ -0,0 +1,159 @@
+<template>
+  <div v-if="!hasCoords" class="p-4 text-center">
+    ⏳ Определяем ваше местоположение...
+  </div>
+
+  <YandexMap
+    v-else
+    v-model="map"
+    class="w-full"
+    :settings="{ location }"
+    style="height: calc(100dvh - 54px)"
+  >
+    <YandexMapDefaultSchemeLayer />
+    <YandexMapDefaultFeaturesLayer />
+
+    <YandexMapClusterer
+      v-model="clusterer"
+      :grid-size="64"
+      zoom-on-cluster-click
+      @true-bounds="trueBounds = $event"
+    >
+      <YandexMapMarker
+        v-for="pickupPoint in pickupPoints"
+        :key="pickupPoint.id"
+        position="top-center left-center"
+        :settings="{ coordinates: [pickupPoint.position.longitude, pickupPoint.position.latitude] }"
+        @click="$emit('update:modelValue', pickupPoint)"
+      >
+        <div class="marker">
+          <Icon name="i-lucide-map-pin" class="marker__icon" />
+        </div>
+      </YandexMapMarker>
+
+      <template #cluster="{ length }">
+        <div class="cluster fade-in">
+          {{ length }}
+        </div>
+      </template>
+    </YandexMapClusterer>
+  </YandexMap>
+</template>
+
+<script setup lang="ts">
+import type { LngLatBounds, YMap } from '@yandex/ymaps3-types'
+import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap'
+import type { YMapClusterer } from '@yandex/ymaps3-types/packages/clusterer'
+import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
+import { useGeolocation } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+import {
+  YandexMap,
+  YandexMapClusterer,
+  YandexMapDefaultFeaturesLayer,
+  YandexMapDefaultSchemeLayer,
+  YandexMapMarker,
+} from 'vue-yandex-maps'
+
+const props = defineProps<{ modelValue: PickupPoint, pickupPoints: PickupPoint[] }>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: PickupPoint | undefined): void
+}>()
+
+const { coords } = useGeolocation()
+const clusterer = shallowRef<YMapClusterer | null>(null)
+const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
+const map = shallowRef<null | YMap>(null)
+
+const hasCoords = computed(() => coords.value?.latitude !== Infinity && coords.value?.longitude !== Infinity)
+
+const location = ref<YMapLocationRequest>({
+  zoom: 2,
+})
+
+watch(coords, (newCoords) => {
+  if (newCoords && hasCoords.value) {
+    location.value = {
+      center: [newCoords.longitude, newCoords.latitude],
+      zoom: 9,
+      duration: 2500,
+    }
+  }
+}, { once: true })
+
+watch(() => props.modelValue, (newPickupPoint) => {
+  location.value = {
+    center: [newPickupPoint.position.longitude, newPickupPoint.position.latitude],
+    zoom: 18,
+    duration: 500,
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.marker {
+  position: relative;
+  background-color: #0f172b;
+  border: 1px solid #0f172b;
+  border-radius: 12px;
+  padding: 6px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition:
+    transform 0.2s ease,
+    background-color 0.3s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: #1e293b;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #0f172b;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  &__icon {
+    color: white;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.cluster {
+  background-color: #0f172b;
+  color: white;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  border: 2px solid #fff;
+  transition:
+    transform 0.2s ease,
+    background-color 0.3s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    background-color: #1e293b;
+  }
+}
+</style>

components/cart/CartItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="cart-item">
+    <NuxtLink :to="`/product/${productsData?.parent_id}`">
+      <img
+        class="cart-item__image"
+        :src="productsData?.images[0]?.src"
+        alt="cart?.image"
+      >
+    </NuxtLink>
+
+    <div>
+      {{ productsData?.name }}
+
+      <div class="d-flex align-items-center">
+        {{ productsData?.price }}
+        <Icon name="ph:currency-rub" />
+      </div>
+
+      <div class="cart-item__attributes">
+        <div>{{ t(`colors.${color}`) }} {{ t(`materials.${material}`) }}</div>
+        <div>{{ `размер ${size}` }}</div>
+      </div>
+
+      <div>
+        <UButton
+          icon="i-lucide-trash"
+          @click="deleteItem(cartItem)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  cartItem: {
+    type: String,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+const { cartRemoveItem } = useCart()
+const { productsData, color, material, size } = useProduct(props?.cartItem?.variation_id)
+
+const deleteItem = (item) => {
+  cartRemoveItem({ variation_id: item?.variation_id })
+}
+</script>
+
+<style lang="scss">
+.cart-item {
+  max-width: 600px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  &__image {
+    width: 120px;
+    cursor: pointer;
+  }
+
+  &__attributes {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+</style>

components/cart/SummaryCartItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="summary-cart-item">
+    <img
+      class="summary-cart-item__image"
+      :src="productsData?.images[0]?.src"
+      alt="cart?.image"
+    >
+
+    <div class="summary-cart-item__attributes">
+      {{ size }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  summaryCartItem: {
+    type: String,
+    required: true,
+  },
+})
+
+const { productsData, size } = useProduct(props?.summaryCartItem?.variation_id)
+</script>
+
+<style lang="scss">
+.summary-cart-item {
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &__image {
+    width: 120px;
+  }
+
+  &__attributes {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

composables/useCart.ts

@@ -1,19 +1,44 @@
+import { useStorage } from '@vueuse/core'
+import { useProduct } from './useProduct'
+
+export interface ICartItem {
+  variation_id: number
+}
+
+export interface ICart {
+  line_items: ICartItem[]
+}
+
 export const useCart = () => {
-  const addToCart = (item: any) => {
+  const cart = useStorage<ICart>('cart', { line_items: [] })
-    if (process.client) {
+
-      localStorage.setItem('cart', JSON.stringify(item))
+  const cartAddItem = (item: ICartItem) => {
-    }
+    cart.value.line_items.push(item)
   }
 
-  const getCart = () => {
+  const cartRemoveItem = (item: ICartItem) => {
-    if (process.client) {
+    cart?.value?.line_items
-      return localStorage.getItem('cart')
+      ?.splice(cart?.value?.line_items
-    }
+        ?.findIndex((cartItem: ICartItem) =>
-    return null
+          cartItem?.variation_id === item?.variation_id), 1)
   }
 
+  const cartProducts = computed(() => cart?.value?.line_items?.map((line_item) => {
+    const { productsData } = useProduct(line_item?.variation_id.toString())
+    return productsData
+  }))
+
+  const cartSum = computed(() => cartProducts?.value?.reduce((acc, curr) => {
+    acc += Number(curr?.value?.price)
+    return acc
+  }, 0))
+
   return {
-    addToCart,
+    cart,
-    getCart,
+    cartAddItem,
+    cartRemoveItem,
+
+    cartProducts,
+    cartSum,
   }
 }

composables/useCheckout.ts

@@ -0,0 +1,94 @@
+import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
+import { createSharedComposable, useStorage } from '@vueuse/core'
+
+export const useCheckout = createSharedComposable(() => {
+  const router = useRouter()
+  const route = useRoute()
+
+  const checkoutPickupPoint = useStorage<PickupPoint | undefined>(
+    'checkout-pickupPoint',
+    undefined,
+    undefined,
+    {
+      serializer: {
+        read: (v: string) => v ? JSON.parse(v) : undefined,
+        write: (v: PickupPoint | undefined) => JSON.stringify(v),
+      },
+    },
+  )
+
+  const setCheckoutPickupPoint = (point: PickupPoint | undefined) => {
+    checkoutPickupPoint.value = point
+  }
+
+  const isPickupPointSelected = computed(() => !!checkoutPickupPoint.value)
+
+  const checkoutContacts = useStorage('checkout-contacts', { name: '', surname: '', phone: '', email: '' })
+
+  const setCheckoutContacts = (data: { name: string, surname: string, phone: string, email: string }) => {
+    checkoutContacts.value = data
+  }
+
+  const checkoutSteps = [
+    {
+      step: 1,
+      title: 'delivery',
+    },
+    {
+      step: 2,
+      title: 'contacts',
+    },
+    {
+      step: 3,
+      title: 'summary',
+    },
+  ]
+
+  const currentCheckoutStep
+    = ref(checkoutSteps.find(value => value.title === route.path.split('/').pop()) || checkoutSteps[0])
+
+  function previewStep() {
+    if (isPickupPointSelected.value) {
+      setCheckoutPickupPoint(undefined)
+      return
+    }
+
+    const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
+    if (findIndex !== 0) {
+      currentCheckoutStep.value = checkoutSteps[findIndex - 1]
+      router.push(`/checkout/${currentCheckoutStep?.value.title}`)
+    }
+    else {
+      router.push(`/cart`)
+    }
+  }
+
+  function nextStep() {
+    const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
+    if (findIndex + 1 !== checkoutSteps.length) {
+      currentCheckoutStep.value = checkoutSteps[findIndex + 1]
+      router.push(`/checkout/${currentCheckoutStep?.value.title}`)
+    }
+  }
+
+  function setStep(pathName: string) {
+    currentCheckoutStep.value = checkoutSteps.find(value => value.title === pathName) || checkoutSteps[0]
+    router.push(`/checkout/${pathName}`)
+  }
+
+  return {
+    isPickupPointSelected,
+    checkoutPickupPoint,
+    setCheckoutPickupPoint,
+
+    checkoutContacts,
+    setCheckoutContacts,
+
+    checkoutSteps,
+    currentCheckoutStep,
+
+    previewStep,
+    nextStep,
+    setStep,
+  }
+})

composables/useProduct.ts

@@ -1,8 +1,8 @@
-import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
+import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries/wp'
 
-export const useProduct = () => {
+export const useProduct = (variantId?: string) => {
   const route = useRoute()
-  const currentId = ref<number>(route.params.id)
+  const currentId = ref<number>(route.params.id ?? variantId)
 
   const { data: productsData } = useGetProductsDetail(currentId)
   const { data: productsVariationsData } = useGetProductsVariationsList(currentId)
@@ -24,6 +24,12 @@ export const useProduct = () => {
   const materials = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.options)
   const sizes = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.options)
 
+  const color = computed(() => getAttribute(productsData?.value?.attributes, 'color')?.option)
+  const material = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.option)
+  const size = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.option)
+
+  const photoModel = computed(() => productsData?.value?.meta_data?.find(meta => meta?.key === 'photoModel').value?.split(','))
+
   function getIdentifier(productVariant) {
     const color = getAttribute(productVariant?.attributes, 'color')?.option
     const material = getAttribute(productVariant?.attributes, 'material')?.option
@@ -60,6 +66,12 @@ export const useProduct = () => {
     materials,
     sizes,
 
+    color,
+    material,
+    size,
+
+    photoModel,
+
     variations,
 
     getAttribute,

composables/useProductsList.ts

@@ -1,17 +1,24 @@
-import { useGetProductsList } from '~/api/queries'
+import { computed } from 'vue'
+import { useGetProductsList } from '~/api/queries/wp'
+import { useProduct } from '~/composables'
 
 export const useProductsList = () => {
   const { getAttribute } = useProduct()
+
+  // TODO перенести запрос на сервер, на сервере получать id вариантов и делать запросы у useProduct(id),
+  //  получать варианты и вместе со всеми вариантами ренедрить список товаров
   const { data: productData } = useGetProductsList()
 
-  const productCardData = computed(() => productData?.value?.map(product => ({
+  const productCardData = computed(() =>
-    id: product?.id,
+    productData?.value?.map(product => ({
-    name: product?.name,
+      id: product?.id,
-    price: product?.price,
+      name: product?.name,
-    variations: product?.variations,
+      price: product?.price,
-    images: product?.images?.slice(0, 5),
+      variations: product?.variations,
-    colors: getAttribute(product?.attributes, 'color')?.options,
+      images: product?.images?.slice(0, 5),
-  })) ?? [])
+      colors: getAttribute(product?.attributes, 'color')?.options,
+    })) ?? [],
+  )
 
   return {
     productCardData,

i18n/locales/ru.json

@@ -8,5 +8,10 @@
   "materials": {
     "cotton": "хлопок",
     "cotton-polyester": "хлопок-полиэстер"
+  },
+  "checkoutSteps": {
+    "delivery": "Выберите адрес получения заказа",
+    "contacts": "Введите данные получателя",
+    "summary": "Подтвердите заказ"
   }
 }

layouts/checkout.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="layout">
+    <header class="header">
+      <div class="header__container">
+        <Icon class="cursor-pointer w-6 h-6" name="lucide:arrow-left" @click="previewStep" />
+
+        <h3>
+          Шаг {{ currentCheckoutStep?.step }} из {{ checkoutSteps?.length }}
+          &nbsp;&bull;&nbsp;
+          {{ t(`checkoutSteps.${currentCheckoutStep?.title}`) }}
+        </h3>
+      </div>
+    </header>
+
+    <main class="main">
+      <UContainer class="container">
+        <slot />
+      </UContainer>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCheckout } from '../composables/useCheckout'
+
+const { previewStep, currentCheckoutStep, checkoutSteps } = useCheckout()
+const { t } = useI18n()
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.container {
+  --ui-container: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 54px;
+
+  &__container {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: center;
+    padding: 0 16px;
+  }
+
+  h3 {
+    flex: auto;
+  }
+}
+
+.main {
+  flex: 1;
+  margin-top: 54px;
+}
+</style>

layouts/default.vue

@@ -11,11 +11,18 @@
           PAXTON
         </h1>
 
-        <Icon
+        <div
-          name="lucide:shopping-cart"
+          class="header__cart"
-          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
           @click="router.push(`/cart`)"
-        />
+        >
+          <Icon
+            name="lucide:shopping-cart"
+            class="cursor-pointer w-6 h-6 text-gray-700"
+          />
+          <div v-if="cart?.line_items?.length" class="header__cart-count">
+            {{ cart.line_items.length }}
+          </div>
+        </div>
       </div>
     </header>
 
@@ -25,14 +32,15 @@
       </UContainer>
     </main>
 
-    <footer class="footer">
+    <!--    <footer class="footer"> -->
-      Footer
+    <!--      Footer -->
-    </footer>
+    <!--    </footer> -->
   </div>
 </template>
 
 <script setup lang="ts">
 const router = useRouter()
+const { cart } = useCart()
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +53,6 @@ const router = useRouter()
 .container {
   --ui-container: 100%;
   max-width: 100%;
-
   margin: 0;
   padding: 0;
 }
@@ -67,16 +74,36 @@ const router = useRouter()
     align-items: center;
     justify-content: space-between;
     text-align: center;
+    padding: 0 16px;
   }
 
   &__headline {
-    display: flex;
-    align-items: center;
-    height: 100%;
     font-size: 32px;
     color: black;
     cursor: pointer;
   }
+
+  &__cart {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__cart-count {
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .main {

nuxt.config.ts

@@ -1,8 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: true,
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts', '@nuxtjs/i18n'],
+  modules: [
+    '@nuxt/ui',
+    '@nuxt/image',
+    '@nuxt/icon',
+    '@nuxt/fonts',
+    '@nuxtjs/i18n',
+    [
+      '@vee-validate/nuxt',
+      {
+        autoImports: true,
+      },
+    ],
+    'vue-yandex-maps/nuxt',
+  ],
+  yandexMaps: {
+    apikey: process.env.VITE_YANDEX_MAPS_TOKEN,
+  },
   css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
   i18n: {
     locales: [
@@ -13,4 +30,14 @@ export default defineNuxtConfig({
     strategy: 'prefix_except_default',
     detectBrowserLanguage: false,
   },
+  app: {
+    head: {
+      meta: [
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no',
+        },
+      ],
+    },
+  },
 })

package.json

@@ -13,20 +13,26 @@
     "typegen": "node .typegen"
   },
   "dependencies": {
+    "@nuxt/content": "^3.7.1",
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "1.15.0",
     "@nuxt/image": "1.10.0",
-    "@nuxt/ui": "3.2.0",
+    "@nuxt/ui": "^4.0.1",
     "@nuxtjs/i18n": "^10.0.4",
     "@tanstack/vue-query": "^5.75.5",
     "@tanstack/vue-query-devtools": "^5.87.1",
+    "@vee-validate/nuxt": "^4.15.1",
     "@vueuse/core": "^13.1.0",
+    "axios": "^1.12.2",
     "dayjs": "^1.11.13",
     "decimal.js": "^10.5.0",
-    "nuxt": "^3.17.6",
+    "maska": "^3.2.0",
+    "nuxt": "^4.1.3",
+    "swiper": "^12.0.2",
     "typescript": "^5.6.3",
     "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue-yandex-maps": "^2.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.2",

pages/cart.vue

@@ -1,27 +1,74 @@
 <template>
   <div class="cart">
-    <div v-if="cartProducts">
+    <div class="cart__items">
-      {{ cartProducts }}
+      <div
+        v-for="cartItem in cart?.line_items"
+        :key="cartItem.variation_id"
+      >
+        <CartItem :cart-item="cartItem" />
+      </div>
     </div>
 
-    <UButton @click="createOrder">
+    <PayBlock />
-      Оформить заказ
-    </UButton>
   </div>
 </template>
 
 <script setup lang="ts">
-import { usePostOrdersCreate } from '~/api/mutations'
+import { useCart } from '~/composables'
+import PayBlock from '../components/PayBlock.vue'
 
-const { getCart } = useCart()
+const route = useRoute()
-const cartProducts = getCart()
+const { cart } = useCart()
-const { mutateAsync } = usePostOrdersCreate()
+const { checkoutContacts, checkoutPickupPoint } = useCheckout()
 
-const createOrder = () => {
+onMounted(async () => {
-  mutateAsync(cartProducts)
+  if (!route?.query?.ID)
-}
+    return
+
+  await $fetch('/api/create', {
+    method: 'POST',
+    body: {
+      payment_method: 'bacs',
+      payment_method_title: 'Оплата по реквизитам',
+      set_paid: true,
+      billing: {
+        first_name: checkoutContacts?.value?.name,
+        last_name: checkoutContacts?.value?.surname,
+        phone: checkoutContacts?.value?.phone,
+        email: checkoutContacts?.value?.email,
+        address_1: checkoutPickupPoint.value?.address?.full_address,
+        postcode: checkoutPickupPoint.value?.address?.postal_code,
+        city: checkoutPickupPoint?.value?.address?.locality,
+        country: 'RU',
+      },
+      transaction_id: route?.query?.ID,
+      line_items: cart.value.line_items,
+      status: 'processing',
+    },
+  })
+})
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
 
+.cart {
+  margin-top: 120px;
+  margin-inline: auto;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  @include mobile {
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
 </style>

pages/checkout/contacts.vue

@@ -0,0 +1,209 @@
+<template>
+  <form class="contacts" @submit.prevent="onSubmit">
+    <div>
+      <UInput
+        id="name"
+        v-model="name"
+        v-bind="nameAttrs"
+        name="name"
+        size="xl"
+        placeholder=" "
+        :ui="{ base: 'peer' }"
+        :invalid="Boolean(errors.name)"
+        :help="errors.name"
+        class="relative w-100"
+        :color="errors.name ? 'error' : 'neutral'"
+        highlight
+        autofocus
+      >
+        <label
+          class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+            name
+              ? '-top-3 text-sm text-highlighted font-medium'
+              : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+          ]"
+        >
+          <span class="inline-flex bg-default px-1">Имя</span>
+        </label>
+      </UInput>
+
+      <div v-if="errors?.name" style="color: #ff6467">
+        {{ errors?.name }}
+      </div>
+    </div>
+
+    <div>
+      <UInput
+        id="surname"
+        v-model="surname"
+        v-bind="surnameAttrs"
+        name="surname"
+        size="xl"
+        placeholder=" "
+        :ui="{ base: 'peer' }"
+        :invalid="Boolean(errors.surname)"
+        :help="errors.surname"
+        class="relative w-100"
+        :color="errors.surname ? 'error' : 'neutral'"
+        highlight
+      >
+        <label
+          class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+            surname
+              ? '-top-3 text-sm text-highlighted font-medium'
+              : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+          ]"
+        >
+          <span class="inline-flex bg-default px-1">Фамилия</span>
+        </label>
+      </UInput>
+
+      <div v-if="errors?.surname" style="color: #ff6467">
+        {{ errors?.surname }}
+      </div>
+    </div>
+
+    <div>
+      <UInput
+        id="phone"
+        v-model="phone"
+        v-bind="phoneAttrs"
+        v-maska="'+7 (###) ###-##-##'"
+        name="phone"
+        size="xl"
+        placeholder=" "
+        :ui="{ base: 'peer' }"
+        :invalid="Boolean(errors.phone)"
+        :help="errors.phone"
+        class="relative w-100"
+        :color="errors.phone ? 'error' : 'neutral'"
+        highlight
+      >
+        <label
+          class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+            phone
+              ? '-top-3 text-sm text-highlighted font-medium'
+              : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+          ]"
+        >
+          <span class="inline-flex bg-default px-1">телефон</span>
+        </label>
+      </UInput>
+
+      <div v-if="errors?.phone" style="color: #ff6467">
+        {{ errors?.phone }}
+      </div>
+    </div>
+
+    <div>
+      <UInput
+        id="email"
+        v-model="email"
+        v-bind="emailAttrs"
+        name="email"
+        size="xl"
+        placeholder=" "
+        :ui="{ base: 'peer' }"
+        class="relative w-100"
+        trailing-icon="i-lucide-at-sign"
+        :invalid="Boolean(errors.email)"
+        :help="errors.email"
+        :color="errors.email ? 'error' : 'neutral'"
+        highlight
+      >
+        <label
+          class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+            email
+              ? '-top-3 text-sm text-highlighted font-medium'
+              : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+          ]"
+        >
+          <span class="inline-flex bg-default px-1">email</span>
+        </label>
+      </UInput>
+
+      <div v-if="errors?.email" style="color: #ff6467">
+        {{ errors?.email }}
+      </div>
+    </div>
+
+    <UButton
+      size="xl"
+      label="продолжить"
+      class="justify-center text-center"
+      type="submit"
+      :disabled="errors && Object.keys(errors).length > 0"
+    />
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { useCheckout } from '../../composables/useCheckout'
+
+const { checkoutContacts, setCheckoutContacts, nextStep } = useCheckout()
+
+const { errors, handleSubmit, defineField } = useForm({
+  initialValues: {
+    name: checkoutContacts.value.name,
+    surname: checkoutContacts.value.surname,
+    phone: checkoutContacts.value.phone,
+    email: checkoutContacts.value.email,
+  },
+  validationSchema: {
+    name(value: string) {
+      if (!value)
+        return 'Укажите имя'
+      if (value.trim().length < 2)
+        return 'Минимум 2 символа'
+      return true
+    },
+    surname(value: string) {
+      if (!value)
+        return 'Укажите фамилию'
+      if (value.trim().length < 2)
+        return 'Минимум 2 символа'
+      return true
+    },
+    phone(value: string) {
+      if (!value)
+        return 'Укажите телефон'
+      const digits = (value || '').replace(/\D/g, '')
+      if (digits.length < 11)
+        return 'Введите корректный телефон'
+      return true
+    },
+    email(value: string) {
+      if (!value)
+        return 'Укажите email'
+      const re = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/
+      if (!re.test(value))
+        return 'Введите корректный email'
+      return true
+    },
+  },
+})
+
+const [name, nameAttrs] = defineField('name')
+const [surname, surnameAttrs] = defineField('surname')
+const [phone, phoneAttrs] = defineField('phone')
+const [email, emailAttrs] = defineField('email')
+
+const onSubmit = handleSubmit((values) => {
+  setCheckoutContacts(values)
+  nextStep()
+})
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+.contacts {
+  margin-inline: auto;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

pages/checkout/delivery.vue

@@ -0,0 +1,165 @@
+<template>
+  <div v-if="coords" class="delivery">
+    <div class="delivery__sidebar">
+      <DeliveryInfo v-if="isPickupPointSelected" />
+
+      <div v-else class="delivery__search">
+        <UInput
+          v-model="searchTerm"
+          size="xl"
+          class="w-full"
+          placeholder="Выберите пункт выдачи"
+          :ui="{ trailing: 'pe-1' }"
+        >
+          <template v-if="searchTerm?.length" #trailing>
+            <UButton
+              color="neutral"
+              variant="link"
+              size="sm"
+              icon="i-lucide-circle-x"
+              aria-label="Clear input"
+              @click="searchTerm = ''"
+            />
+          </template>
+        </UInput>
+
+        <div class="delivery__items">
+          <div
+            v-for="pickupPoint in filteredPoints"
+            :key="pickupPoint.id"
+            class="pickup-point-card"
+            @click="checkoutPickupPoint = pickupPoint"
+          >
+            <div class="pickup-point-card__content">
+              <h3>Yandex</h3>
+              <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
+              <h3>с day month бесплатно</h3>
+            </div>
+            <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <PvzMap
+      v-model="checkoutPickupPoint"
+      :pickup-points="filteredPoints"
+      @update:model-value="setCheckoutPickupPoint(checkoutPickupPoint)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
+import { useGeolocation } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import DeliveryInfo from '~/components/DeliveryInfo.vue'
+import PvzMap from '~/components/PvzMap.vue'
+import { useCheckout } from '~/composables/useCheckout'
+
+const { setCheckoutPickupPoint, isPickupPointSelected, checkoutPickupPoint } = useCheckout()
+const { coords } = useGeolocation()
+const yandexPvz = ref<YandexPvzResponse>()
+const searchTerm = ref('')
+
+const waitForCoords = () =>
+  new Promise<void>((resolve) => {
+    const stop = watch(coords, (newCoords) => {
+      if (newCoords.latitude && newCoords.longitude) {
+        stop()
+        resolve()
+      }
+    })
+  })
+
+onMounted(async () => {
+  await waitForCoords()
+
+  // обратное геокодирование (т.е. получаение города из координат)
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/reverse?lat=${coords.value.latitude}&lon=${coords.value.longitude}&format=json&accept-language=ru`,
+  )
+  const openstreetmap = await response.json()
+
+  // получение geo_id из названию города
+  const { data: yandexLocation } = await useFetch('/api/yandex_location', {
+    method: 'POST',
+    body: {
+      location: openstreetmap?.address?.city,
+    },
+  })
+
+  // получения пунктов выдачи города из geo_id
+  const { data: yandexPvzApi } = await useFetch<YandexPvzResponse>('/api/yandex_pvz', {
+    method: 'POST',
+    body: {
+      geo_id: yandexLocation?.value?.variants[0]?.geo_id,
+    },
+  })
+
+  yandexPvz.value = yandexPvzApi.value
+})
+
+// TODO сделать отдельный компонент UISearch
+const filteredPoints = computed<PickupPoint[]>(() => {
+  if (!searchTerm.value || searchTerm.value === '') {
+    return yandexPvz.value?.points || []
+  }
+
+  return yandexPvz.value?.points?.filter(point =>
+    point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()),
+  ) || []
+})
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+@use '~/assets/scss/utils' as *;
+
+.delivery {
+  display: flex;
+  flex-direction: row;
+
+  &__sidebar {
+    flex-shrink: 0;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    width: 410px;
+    padding-inline: 24px;
+  }
+
+  &__items {
+    height: calc(100dvh - 54px - 40px - 24px);
+    overflow-y: auto;
+    flex-shrink: 0;
+  }
+}
+
+.pickup-point-card {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  cursor: pointer;
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__action {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #999;
+  }
+}
+</style>

pages/checkout/summary.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="summary">
+    <div class="summary__info">
+      <h3>в заказе &nbsp;&bull;&nbsp; {{ cart?.line_items?.length }} шт</h3>
+
+      <div class="summary__items">
+        <div
+          v-for="cartItem in cart?.line_items"
+          :key="cartItem.variation_id"
+        >
+          <SummaryCartItem :summary-cart-item="cartItem" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <h3 class="d-flex gap-1 text-center align-items-center">
+          Yandex
+
+          <UButton
+            size="sm"
+            class="text-muted-foreground mla cursor-pointer"
+            variant="ghost"
+            icon="i-ph-pencil-simple-line"
+            @click="setStep('delivery')"
+          />
+        </h3>
+
+        <DeliveryInfo :show-full-content="false" />
+      </div>
+
+      <div class="space-y-2">
+        <h3 class="d-flex gap-1 text-center align-items-center">
+          Получатель
+
+          <UButton
+            size="sm"
+            class="text-muted-foreground mla cursor-pointer"
+            variant="ghost"
+            icon="i-ph-pencil-simple-line"
+            @click="setStep('contacts')"
+          />
+        </h3>
+
+        <div class="flex items-center gap-2">
+          <UIcon name="i-ph-user" class="text-muted-foreground" />
+          <span>{{ checkoutContacts?.name }} {{ checkoutContacts?.surname }}</span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <UIcon name="i-ph-envelope-simple" class="text-muted-foreground" />
+          <span>{{ checkoutContacts?.email }}</span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <UIcon name="i-ph-phone" class="text-muted-foreground" />
+          <span>{{ checkoutContacts?.phone }}</span>
+        </div>
+      </div>
+    </div>
+
+    <PayBlock pay />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
+import PayBlock from '../../components/PayBlock.vue'
+
+const { cart } = useCart()
+const { checkoutContacts, setStep } = useCheckout()
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+@use '~/assets/scss/utils' as *;
+
+.summary {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-inline: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+  }
+}
+</style>

pages/index.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="index">
-    <div
+    <div class="cards-list">
-      class="cards-list"
-    >
       <div
         v-for="product in productCardData"
         :key="product.id"
         class="card"
         @click="router.push(`/product/${product.id}`)"
       >
-        <img class="card__image" :src="product?.images[0]?.src" alt="card?.image">
+        <img class="card__image" :src="product?.images?.[0]?.src" alt="card?.image">
 
         <div class="card__description">
           <div>{{ product?.name }}</div>
@@ -36,26 +34,43 @@ const router = useRouter()
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .cards-list {
   padding: 15px;
 
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 4px;
+  gap: 30px 4px;
+
+  @include mobile {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 10px;
+  }
 }
 
 .card {
-  min-width: 300px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
+  @include mobile {
+    min-width: auto;
+  }
+
   &__image {
     width: 100%;
+    height: auto;
   }
 
   &__description {
-    padding-inline: 10px;
+    padding: 10px 5px;
+
+    @include mobile {
+      padding: 8px 4px;
+      font-size: 14px;
+    }
   }
 }
 </style>

pages/product/[id].vue

@@ -1,15 +1,111 @@
 <template>
-  <div class="product">
+  <div ref="target" class="product">
-    <ProductImages />
+    <ProductImages v-if="isMobile" />
-    <ProductDescription />
+
+    <div v-if="isMobile" class="product-info">
+      <div class="product-info__title">
+        <ProductPrice :price="currentVariant?.options[0]?.price || 0" />
+
+        <PhotoModel />
+      </div>
+
+      <h1>
+        {{ productsData?.name }}
+      </h1>
+
+      <div class="mt20">
+        <UButton
+          icon="lucide:shopping-cart"
+          class="justify-content-center w-100 d-flex"
+          label="Добавить"
+          size="xl"
+          @click="open = !open"
+        />
+      </div>
+    </div>
+
+    <UDrawer
+      v-if="isMobile"
+      v-model:open="open"
+      class="product__drawer"
+      fixed
+      :ui="{
+        content: 'fixed bg-default ring ring-default flex focus:outline-none overflow-hidden',
+        container: 'w-full flex flex-col gap-4 p-4 overflow-hidden',
+        body: 'flex-1 overflow-y-auto',
+      }"
+    >
+      <template #content>
+        <div ref="targetDrawer" style="overflow-y: auto;">
+          <ProductDescription />
+        </div>
+      </template>
+    </UDrawer>
+
+    <ProductImages v-if="!isMobile" />
+    <ProductDescription v-if="!isMobile" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { UseSwipeDirection } from '@vueuse/core'
+import { useMediaQuery, useScroll, useSwipe } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+import ProductPrice from '~/components/ProductPrice.vue'
+import { useCurrentProduct, useProduct } from '~/composables'
+
+const { productsData } = useProduct()
+const { currentVariant } = useCurrentProduct()
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const open = ref(false)
+const target = shallowRef<HTMLElement | null>(null)
+const targetHeight = computed(() => target.value?.offsetHeight)
+const targetDrawer = shallowRef<HTMLElement | null>(null)
+const targetDrawerHeight = computed(() => targetDrawer.value?.offsetHeight)
+const { y } = useScroll(targetDrawer)
+
+const { lengthY } = useSwipe(
+  target,
+  {
+    passive: false,
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      if (lengthY.value > 0 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.1) {
+        open.value = true
+      }
+    },
+  },
+)
+
+const { lengthY: drawerLengthY } = useSwipe(
+  targetDrawer,
+  {
+    passive: false,
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      if (drawerLengthY.value < 0 && y.value === 0 && targetDrawerHeight.value && (Math.abs(drawerLengthY.value) / targetDrawerHeight.value) >= 0.2) {
+        open.value = false
+      }
+    },
+  },
+)
+
+onMounted(() => {
+  if (isMobile.value) {
+    document.body.style.overflow = 'hidden'
+  }
+})
+
+onUnmounted(() => {
+  if (isMobile.value) {
+    document.body.style.overflow = ''
+  }
+})
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -19,4 +115,22 @@
     align-items: center;
   }
 }
+
+.product-info {
+  padding-inline: 15px;
+  position: absolute;
+  bottom: 40px;
+  z-index: 10;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+
+  &__title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
 </style>

plugins/maska.ts

@@ -0,0 +1,5 @@
+import { vMaska } from 'maska/vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('maska', vMaska)
+})

server/api/bspb.ts

@@ -0,0 +1,32 @@
+import https from 'node:https'
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const merchantId = process.env.BSPB_MERCHANT_ID!
+  const merchantPassword = process.env.BSPB_MERCHANT_PASSWORD!
+  const apiUrl = process.env.BSPB_API_URL!
+
+  const assetsStorage = useStorage('assets:server')
+
+  const bspbKey = await assetsStorage.getItem<string>('pgtest_key.key')
+  const bspbCert = await assetsStorage.getItem<string>('pgtest_cer_2025.pem')
+
+  const agent = new https.Agent({
+    key: bspbKey!,
+    cert: bspbCert!,
+    rejectUnauthorized: false,
+  })
+
+  const orderData = await readBody(event)
+
+  const response = await axios.post(`${apiUrl}/order`, orderData, {
+    httpsAgent: agent,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Basic ${Buffer.from(`TerminalSys/${merchantId}:${merchantPassword}`).toString('base64')}`,
+    },
+  })
+
+  return response?.data || []
+})

server/api/create.ts

@@ -0,0 +1,32 @@
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const orderData = await readBody(event)
+
+    const requestUrl = 'https://wp.koptilnya.xyz/wp-json/wc/v3/orders'
+    const consumerKey = 'ck_8b5477a1573ce6038ef1367f25d95cede1de4559'
+    const consumerSecret = 'cs_d0ccaa93e8efe4f76eef0b70c9828a58fc53459f'
+
+    const encodedAuth = Buffer.from(`${consumerKey}:${consumerSecret}`).toString('base64')
+
+    const response = await axios.post(requestUrl, orderData, {
+      headers: {
+        'Authorization': `Basic ${encodedAuth}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    return response.data
+  }
+  catch (error: any) {
+    console.error('Ошибка при создании заказа WooCommerce:', error)
+
+    return {
+      error: true,
+      message: error.response?.data?.message || 'Ошибка при создании заказа',
+      details: error.response?.data,
+    }
+  }
+})

server/api/yandex_location.ts

@@ -0,0 +1,30 @@
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const data = await readBody(event)
+    const apiUrl = process.env.VITE_YANDEX_B2B_BASE_URL!
+    const token = process.env.VITE_YANDEX_B2B_TOKEN!
+
+    const response = await axios.post(
+      `${apiUrl}/location/detect`,
+      {
+        location: data?.location,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept-Language': 'ru-RU',
+          'Authorization': `Bearer ${token}`,
+        },
+      },
+    )
+
+    return response.data
+  }
+  catch (error) {
+    console.error('Ошибка при запросе к Яндекс API:', error)
+    return { error: `Не удалось получить координаты: ${error}` }
+  }
+})

server/api/yandex_pvz.ts

@@ -0,0 +1,32 @@
+import type { YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event): Promise<YandexPvzResponse | { error: string }> => {
+  try {
+    const data = await readBody(event)
+    const apiUrl = process.env.VITE_YANDEX_B2B_BASE_URL!
+    const token = process.env.VITE_YANDEX_B2B_TOKEN!
+
+    const response = await axios.post<YandexPvzResponse>(
+      `${apiUrl}/pickup-points/list`,
+      {
+        geo_id: data?.geo_id,
+        type: 'pickup_point',
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept-Language': 'ru-RU',
+          'Authorization': `Bearer ${token}`,
+        },
+      },
+    )
+
+    return response.data
+  }
+  catch (error) {
+    console.error('Ошибка при запросе к Яндекс API:', error)
+    return { error: `Не удалось получить точки ПВЗ: ${error}` }
+  }
+})

server/assets/pgtest_cer_2025.pem

@@ -0,0 +1,20 @@
+-----BEGIN CERTIFICATE-----
+MIIDRTCCAi0CATMwDQYJKoZIhvcNAQELBQAwXjELMAkGA1UEBhMCUlUxGTAXBgNV
+BAcMEFNhaW50LVBldGVyc2J1cmcxDTALBgNVBAoMBEJTUEIxDDAKBgNVBAsMA0RQ
+UzEXMBUGA1UEAwwOTUVSQ0hBTlRTX0JTUEIwHhcNMjUwMzA3MDY0MzM3WhcNMjYw
+MzA3MDY0MzM3WjBzMQswCQYDVQQGEwJSVTEMMAoGA1UECBMDU1BiMQwwCgYDVQQH
+EwNTUGIxDTALBgNVBAoTBEJTUEIxDTALBgNVBAsTBEJTUEIxDzANBgNVBAMTBnBn
+dGVzdDEZMBcGCSqGSIb3DQEJARYKcGdAYnNwYi5ydTCCASIwDQYJKoZIhvcNAQEB
+BQADggEPADCCAQoCggEBAMSPemQhfttoPicfiel1cW0Hx2HBb0xy/Gn3d1luIVj3
+wOdh0eF5mVhbFbgo66eS3o7Arj4PkdV/+Od1KkCCJd96fJj1anPRTSeu2Z+X/l+0
+8FqAECzVuYfHN/VDwvkV7d5R3+0+gkGGpodBnsudreTWG9bBVFb4lyCJvZeg+uWl
+NyT79gWWkq51xwe+qAtNqKV3wPUUt1A4PXAJ5oJZF6IcXQs2wNRsJ25kiHPO9Wdz
+Zibx6vJwnV5HP89hpM0ZdGEJKQT2c60ZfCNw8wDswmZSOp/mQmzkm1uiHOrp2Hdz
+A9bqZaXYwhwTcmZBtOcCw+2eiuFiwVfV9nH/R84A2w0CAwEAATANBgkqhkiG9w0B
+AQsFAAOCAQEAV7UMCKTCAH+gZsT53kzCXPV3iWgNK2LTle/GVAKZX1Jto4B1Yn4b
+0KXmy0/PB2lRuwKogF40MwYN1lvn9qQ7Vohyi5qyd8kK4Z2CI5dYHjfwWjdW2fEz
+A0qaV4VCCBZch76zbqRczI8ulUsH+o8cXsNgjw6QmrKJj74Otl6x2hQ34TP9W7yV
+J/mOoxDavzulMRj01fcg+DhBqebMypU1okGWeqPMBtYWnpqObYWniKEdqNZ//Cfr
+HTVQarDq92T67oCZ7CRu0+Ty7UL/l2SZu4EPlJhlNpg+ZYVqPoGqprjuYJ670l5c
+uDxHwAWppDJWeQlwrZRcjuznoj1gtw6ojQ==
+-----END CERTIFICATE-----

server/assets/pgtest_key.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAxI96ZCF+22g+Jx+J6XVxbQfHYcFvTHL8afd3WW4hWPfA52HR
+4XmZWFsVuCjrp5LejsCuPg+R1X/453UqQIIl33p8mPVqc9FNJ67Zn5f+X7TwWoAQ
+LNW5h8c39UPC+RXt3lHf7T6CQYamh0Gey52t5NYb1sFUVviXIIm9l6D65aU3JPv2
+BZaSrnXHB76oC02opXfA9RS3UDg9cAnmglkXohxdCzbA1GwnbmSIc871Z3NmJvHq
+8nCdXkc/z2GkzRl0YQkpBPZzrRl8I3DzAOzCZlI6n+ZCbOSbW6Ic6unYd3MD1upl
+pdjCHBNyZkG05wLD7Z6K4WLBV9X2cf9HzgDbDQIDAQABAoIBAFpAtyX661C7UK6O
+ILj9oBM8GySbuQsVUSkm47pAgzdiq0SS+dfaCbs0N4jT4UCUg3RwrJD6fS/XDubY
+OYpdOB6hE0z4guSjGhY6htps4/P2FNa5LrQnfoUFyH/pmUDd/Na0KWm55f1IYnaA
+fvVndU05spatNpiolFvwYwmYdRu0LtBkDc80aBVsX2WHuC2TD99qjIFjhNjgVI/v
+E8jN3aqXsSFd0tKvBQivsAn/iwx8SyFJmrn2jddy2jewZdF6inB70TjvjY8fWNGb
+TV2CIJj0ALmkIMS2/30LNWJZOOpCkQvcnO1seU5WACUDOQhG/iW2lXttRjL6C2PM
+P0swDoECgYEA5I+CxZqYE2qa4/mdRZMvX+tlqrVGn3ix2mmVPJaageE6jW/vO2/j
+synSpzTml0bpDapsY8Wj6Q30duuoZmQiSDi/uW2+aao81qxr7GWczwPRFdxmZX2i
+jJrIe8f2gBkGaCxL2kzXvKyc4hackfI3SHDlXi38G7A0j0u+tU5JvpkCgYEA3Ch8
++04VrUprMmUDj4vt/BKPNk4Y1fVbvHwy9Mkfen4JoJHLUE2dqBizSkdia7RVd8eV
+UT4kvS2kVofSt/rG0WkPD8rvtNBa7aqSj6JtvgBKrtbazU7hptzMiqoF/9Rw74b6
+E1gbePlSB46ao2LGu1HOe80Rw9Ycq3bElBGrzJUCgYEAirVhmsTIeDghSiupu5io
+jqDQcXpUIuHfpfqfvEZ1/E6Q91cwK7UqzgeatSkQrEw3kbiU0TQX1o9GholcCM/K
+UmRGTqWAgqXzCCFZ2fyM3sGlOYwphHxrksM42o4vVexaDAyd+BzcbL+g8kDgwl3q
+GQeS28Yykycrrq88TNH3RTkCgYAWoa7fYpKF4t2MK6gnDHplbD7+lR6md/d7M8VF
+NpueyvAQaoxc7+2iBw//NcFfUwVqL8EgveOm8tcu8f1uXkAr7MHYnMLxcm22es9g
+JpFjc8I5oOqTKmW18oKwSnQdbWhCpzxz2p3QXMja8ATjgNbvEKTKQzVtTUhbM/VX
+R03C1QKBgGzat0GeWjYoQ8rCG9EuN2qGyvKTpD6VteygIXIVpL9sr1mXHAnfbnZC
+OelMdoA/7nfRVIZ4yDbZclx8I0UOGx+rkqiyBgZ/+5BG24HT4sB9uIy5hE/odobR
+aC58VQBAHijbEvvhNSXt96asV0tPVcLtG3V4zFDqF3NtR78e0OPg
+-----END RSA PRIVATE KEY-----

server/shared/types/bspb.ts

@@ -0,0 +1,10 @@
+export interface IBspb {
+  order: {
+    id: number
+    hppUrl: string
+    password: string
+    accessToken: string
+    status: string
+    cvv2AuthStatus: string
+  }
+}

server/shared/types/yandex_pvz.ts

@@ -0,0 +1,75 @@
+export interface GeoPosition {
+  latitude: number
+  longitude: number
+}
+
+export interface PvzAddress {
+  apartment: string
+  building: string
+  comment: string
+  country: string
+  full_address: string
+  geoId: number
+  house: string
+  housing: string
+  locality: string
+  postal_code: string
+  region: string
+  street: string
+  subRegion: string
+}
+
+export interface Contact {
+  phone: string
+}
+
+export interface TimeObject {
+  hours: number
+  minutes: number
+}
+
+export interface ScheduleRestriction {
+  days: number[]
+  time_from: TimeObject
+  time_to: TimeObject
+}
+
+export interface Schedule {
+  time_zone: number
+  restrictions: ScheduleRestriction[]
+}
+
+export interface PickupServices {
+  is_fitting_allowed: boolean
+  is_partial_refuse_allowed: boolean
+  is_paperless_pickup_allowed: boolean
+  is_unboxing_allowed: boolean
+}
+
+export interface PickupPoint {
+  id: string
+  operator_station_id: string
+  operator_id: string
+  name: string
+  type: 'pickup_point'
+  address: PvzAddress
+  position: GeoPosition
+  instruction: string
+  available_for_dropoff: boolean
+  available_for_c2c_dropoff: boolean
+  contact: Contact
+  schedule: Schedule
+  pickup_services: PickupServices
+  payment_methods: string[]
+  is_dark_store: boolean
+  is_market_partner: boolean
+  is_post_office: boolean
+  is_yandex_branded: boolean
+  dayoffs: any[]
+  deactivation_date: string | null
+  deactivation_date_predicted_debt: string | null
+}
+
+export interface YandexPvzResponse extends PickupPoint {
+  points: PickupPoint[]
+}

tsconfig.json

@@ -1,4 +1,4 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
 }