refactoring

.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

@@ -1,29 +1,4 @@
-@use 'typography' as *;
+//скроллбар
-@use 'utils' as *;
-
-// Typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 100%;
-  color: #ffffff;
-}
-
-h1 {
-  @include h1('h1');
-}
-
-h2 {
-  @include h2('h2');
-}
-
-h3 {
-  @include h3('h3');
-}
-
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -53,3 +28,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
+}

assets/scss/mixins.scss

@@ -0,0 +1,5 @@
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}

assets/scss/typography.scss

@@ -1,121 +0,0 @@
-@use 'utils' as *;
-
-// Font Face Declarations
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-Regular.woff2') format('woff2'),
-    url('/fonts/Inter-Regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-Medium.woff2') format('woff2'),
-    url('/fonts/Inter-Medium.woff') format('woff');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-SemiBold.woff2') format('woff2'),
-    url('/fonts/Inter-SemiBold.woff') format('woff');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-// Font Variables
-$font-family-base:
-  'Inter',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  sans-serif;
-
-// Font Weights
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-
-// Custom type
-@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
-  @if ($namespace) {
-    @if ($onlyVars) {
-      --#{$namespace}-font-size: #{$size};
-      --#{$namespace}-font-weight: #{$weight};
-      --#{$namespace}-line-height: #{$lineHeight};
-    } @else {
-      font-size: var(--#{$namespace}-font-size, $size);
-      font-weight: var(--#{$namespace}-font-weight, $weight);
-      line-height: var(--#{$namespace}-line-height, $lineHeight);
-    }
-  } @else {
-    font-size: $size;
-    font-weight: $weight;
-    line-height: $lineHeight;
-  }
-}
-
-/* Headline */
-@mixin h1($namespace: null, $onlyVars: false) {
-  @include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-  @include mobile {
-    font-size: 24px;
-  }
-}
-@mixin h2($namespace: null, $onlyVars: false) {
-  @include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-  @include mobile {
-    font-size: 20px;
-  }
-}
-@mixin h3($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
-}
-
-/* Text */
-// 16 medium-(medium/bold)
-@mixin txt-m($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
-}
-@mixin txt-m-m($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
-}
-@mixin txt-m-b($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-}
-
-// 14 regular-(medium/bold)
-@mixin txt-r($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
-}
-@mixin txt-r-m($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
-}
-@mixin txt-r-b($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
-}
-
-// 12 text small-(medium/bold)
-@mixin txt-s($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
-}
-@mixin txt-s-m($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
-}
-@mixin txt-s-b($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
-}
-
-// 10 text-tiny
-@mixin txt-t($namespace: null, $onlyVars: false) {
-  @include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
-}

assets/scss/utils.scss

@@ -1,148 +0,0 @@
-@use 'sass:color';
-
-@mixin mobile {
-  @media (max-width: 768px) {
-    @content;
-  }
-}
-
-$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
-
-@each $i in $indents {
-  .m#{$i} {
-    margin: #{$i}px;
-  }
-
-  .mx#{$i} {
-    margin-left: #{$i}px;
-    margin-right: #{$i}px;
-  }
-
-  .my#{$i} {
-    margin-top: #{$i}px;
-    margin-bottom: #{$i}px;
-  }
-
-  .mt#{$i} {
-    margin-top: #{$i}px;
-  }
-
-  .mb#{$i} {
-    margin-bottom: #{$i}px;
-  }
-
-  .ml#{$i} {
-    margin-left: #{$i}px;
-  }
-
-  .mr#{$i} {
-    margin-right: #{$i}px;
-  }
-
-  .p#{$i} {
-    padding: #{$i}px;
-  }
-
-  .px#{$i} {
-    padding-left: #{$i}px;
-    padding-right: #{$i}px;
-  }
-
-  .py#{$i} {
-    padding-top: #{$i}px;
-    padding-bottom: #{$i}px;
-  }
-
-  .pt#{$i} {
-    padding-top: #{$i}px;
-  }
-
-  .pb#{$i} {
-    padding-bottom: #{$i}px;
-  }
-
-  .pl#{$i} {
-    padding-left: #{$i}px;
-  }
-
-  .pr#{$i} {
-    padding-right: #{$i}px;
-  }
-}
-
-.mla {
-  margin-left: auto;
-}
-
-.mra {
-  margin-left: auto;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@each $align in ('left', 'right', 'center') {
-  .text-align-#{$align} {
-    text-align: #{$align};
-  }
-}
-
-.w-25 { width: 25% !important; }
-.w-50 { width: 50% !important; }
-.w-75 { width: 75% !important; }
-.w-100 { width: 100% !important; }
-
-.d-none         { display: none !important; }
-.d-inline       { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-block        { display: block !important; }
-.d-table        { display: table !important; }
-.d-table-row    { display: table-row !important; }
-.d-table-cell   { display: table-cell !important; }
-.d-flex         { display: flex !important; }
-.d-inline-flex  { display: inline-flex !important; }
-
-.flex-row            { flex-direction: row !important; }
-.flex-column         { flex-direction: column !important; }
-.flex-row-reverse    { flex-direction: row-reverse !important; }
-.flex-column-reverse { flex-direction: column-reverse !important; }
-
-.flex-wrap         { flex-wrap: wrap !important; }
-.flex-nowrap       { flex-wrap: nowrap !important; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
-
-.justify-content-start   { justify-content: flex-start !important; }
-.justify-content-end     { justify-content: flex-end !important; }
-.justify-content-center  { justify-content: center !important; }
-.justify-content-between { justify-content: space-between !important; }
-.justify-content-around  { justify-content: space-around !important; }
-
-.align-items-start    { align-items: flex-start !important; }
-.align-items-end      { align-items: flex-end !important; }
-.align-items-center   { align-items: center !important; }
-.align-items-baseline { align-items: baseline !important; }
-.align-items-stretch  { align-items: stretch !important; }
-
-.align-content-start   { align-content: flex-start !important; }
-.align-content-end     { align-content: flex-end !important; }
-.align-content-center  { align-content: center !important; }
-.align-content-between { align-content: space-between !important; }
-.align-content-around  { align-content: space-around !important; }
-.align-content-stretch { align-content: stretch !important; }
-
-.align-self-auto     { align-self: auto !important; }
-.align-self-start    { align-self: flex-start !important; }
-.align-self-end      { align-self: flex-end !important; }
-.align-self-center   { align-self: center !important; }
-.align-self-baseline { align-self: baseline !important; }
-.align-self-stretch  { align-self: stretch !important; }
-
-.text-align-center  { text-align: center !important; }
-.text-align-left  { text-align: left !important; }
-.text-align-right  { text-align: right !important; }
-
-.cursor-pointer { cursor: pointer !important; }
-.cursor-not-allowed { cursor: not-allowed !important; }
-.cursor-progress { cursor: progress !important; }

components/DeliveryInfo.vue

@@ -0,0 +1,151 @@
+<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="checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'lucide:shirt' : 'i-lucide-ban'" 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/DeliverySearch.vue

@@ -0,0 +1,96 @@
+<template>
+  <div 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="pickup-point-card__items">
+      <div
+        v-for="pickupPoint in filteredPoints"
+        :key="pickupPoint.id"
+        class="pickup-point-card"
+        @click="onSelectPoint(pickupPoint)"
+      >
+        <div class="pickup-point-card__content">
+          <h3>Yandex</h3>
+          <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
+          <h3>Как определить стоимость ?</h3>
+        </div>
+        <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PickupPoint } from '#shared/yandex_pvz'
+import type { PropType } from 'vue'
+import { defineEmits } from 'vue'
+
+defineProps<{ filteredPoints: PickupPoint[] }>()
+const emit = defineEmits(['update:checkout-pickup-point'])
+
+const checkoutPickupPoint = defineModel('checkoutPickupPoint', {
+  type: Object as PropType<PickupPoint>,
+  default: () => undefined,
+})
+
+const searchTerm = defineModel('searchTerm', { type: String, default: '' })
+
+const onSelectPoint = (pickupPoint: PickupPoint) => {
+  checkoutPickupPoint.value = pickupPoint
+  emit('update:checkout-pickup-point', pickupPoint)
+}
+</script>
+
+<style lang="scss">
+.pickup-point-card {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  cursor: pointer;
+
+  &__items {
+    height: calc(100dvh - 54px - 40px - 24px);
+    overflow-y: auto;
+    flex-shrink: 0;
+
+    @include mobile {
+      height: calc(100dvh - 72px - 40px - 32px);
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__action {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #999;
+  }
+}
+</style>

components/MapControlFitting.vue

@@ -0,0 +1,30 @@
+<template>
+  <UTabs v-model="fitting" :content="false" :items="tabs" size="sm" />
+</template>
+
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+import type { PropType } from 'vue'
+import { IPvzMapFittingTabs } from '#shared/types'
+import { computed } from 'vue'
+
+const fitting = defineModel('fitting', { type: Object as PropType<IPvzMapFittingTabs>, default: () => IPvzMapFittingTabs.ALL })
+
+const tabs = computed<TabsItem[]>(() => [
+  {
+    value: IPvzMapFittingTabs.ALL,
+    label: fitting.value === IPvzMapFittingTabs.ALL ? 'все' : '',
+    icon: 'i-lucide-globe',
+  },
+  {
+    value: IPvzMapFittingTabs.ALLOW,
+    label: fitting.value === IPvzMapFittingTabs.ALLOW ? 'с примеркой' : '',
+    icon: 'i-lucide-shirt',
+  },
+  {
+    value: IPvzMapFittingTabs.FORBID,
+    label: fitting.value === IPvzMapFittingTabs.FORBID ? 'без примерки' : '',
+    icon: 'i-lucide-ban',
+  },
+])
+</script>

components/MapControlTabs.vue

@@ -0,0 +1,27 @@
+<template>
+  <UTabs v-model="activeTab" :content="false" :items="tabs" size="sm" />
+</template>
+
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
+import type { PropType } from 'vue'
+import { IPvzMapTabs } from '#shared/types'
+import { computed } from 'vue'
+
+const activeTab = defineModel('activeTab', { type: Object as PropType<IPvzMapTabs>, default: () => IPvzMapTabs.MAP })
+
+const tabs = computed<TabsItem[]>(() =>
+  [
+    {
+      value: IPvzMapTabs.MAP,
+      label: activeTab.value === IPvzMapTabs.MAP ? 'Карта' : '',
+      icon: 'lucide:map-pin',
+    },
+    {
+      value: IPvzMapTabs.LIST,
+      label: activeTab.value === IPvzMapTabs.LIST ? 'Список' : '',
+      icon: 'i-lucide-list',
+    },
+  ],
+)
+</script>

components/PayBlock.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <teleport
+      v-if="isMobile && isSummary" to="footer"
+    >
+      <UPageCard
+        class="pay-block--mobile"
+        variant="ghost"
+        :ui="{
+          body: 'w-full',
+          footer: 'hidden',
+        }"
+      >
+        <template #body>
+          <div class="d-flex flex-row">
+            <div>
+              <div v-if="cartSum">
+                <ProductPrice :is-headline="false" :price="cartSum" />
+              </div>
+              <div>{{ `${cart?.line_items?.length} шт` }}</div>
+            </div>
+
+            <UButton
+              class="justify-center text-center w-full ml10"
+              size="xl"
+              :label="pay ? 'оформить заказ' : 'перейти к оформлению'"
+              @click="pay ? createOrder() : router.push(`/checkout/delivery`)"
+            />
+          </div>
+        </template>
+      </UPageCard>
+    </teleport>
+
+    <UPageCard v-else>
+      <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 { BsbpCreateResponse } from '#shared/bsbp_create'
+import { useMediaQuery } from '@vueuse/core'
+
+defineProps({
+  pay: {
+    type: Boolean,
+    default: false,
+  },
+  isSummary: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const router = useRouter()
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
+const { cart, cartSum } = useCart()
+
+const createOrder = async () => {
+  const { data } = await useFetch<BsbpCreateResponse>('/api/bsbp_create', {
+    method: 'POST',
+    body: {
+      order: {
+        typeRid: 'Purchase',
+        amount: cartSum,
+        currency: 'RUB',
+        hppRedirectUrl: `${process.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>
+
+<style lang="scss">
+.pay-block {
+  &--mobile {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+  }
+}
+</style>

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,30 @@ const items = computed(() => [
 ])
 
 function addToCartBtn() {
-  addToCart(currentSize?.value?.id)
+  cartAddItem({ variation_id: currentSize?.value?.id })
 }
 </script>
 
 <style lang="scss">
 .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 +121,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,192 @@
+<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="onSelectPoint(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>
+
+    <YandexMapControls :settings="{ position: isMobile ? 'bottom left' : 'top left', orientation: 'vertical' }">
+      <YandexMapControl>
+        <MapControlFitting v-model:fitting="fitting" />
+      </YandexMapControl>
+    </YandexMapControls>
+
+    <YandexMapControls v-if="isMobile" :settings="{ position: 'bottom right', orientation: 'vertical' }">
+      <YandexMapControl>
+        <MapControlTabs v-model:active-tab="activeTab" />
+      </YandexMapControl>
+    </YandexMapControls>
+  </YandexMap>
+</template>
+
+<script setup lang="ts">
+import type { PickupPoint } from '#shared/yandex_pvz'
+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 { PropType } from 'vue'
+import { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types'
+import { useGeolocation, useMediaQuery } from '@vueuse/core'
+import { computed, defineEmits, shallowRef } from 'vue'
+import {
+  YandexMap,
+  YandexMapClusterer,
+  YandexMapControl,
+  YandexMapControls,
+  YandexMapDefaultFeaturesLayer,
+  YandexMapDefaultSchemeLayer,
+  YandexMapMarker,
+} from 'vue-yandex-maps'
+import MapControlFitting from '~/components/MapControlFitting.vue'
+import MapControlTabs from '~/components/MapControlTabs.vue'
+
+defineProps<{ pickupPoints: PickupPoint[] }>()
+const emit = defineEmits(['update:checkout-pickup-point'])
+
+const checkoutPickupPoint = defineModel('checkoutPickupPoint', { type: Object as PropType<PickupPoint>, default: () => undefined })
+const activeTab = defineModel('activeTab', { type: Object as PropType<IPvzMapTabs>, default: () => IPvzMapTabs.MAP })
+const fitting = defineModel('fitting', { type: Object as PropType<IPvzMapFittingTabs>, default: () => IPvzMapFittingTabs.ALL })
+
+const { coords } = useGeolocation()
+const isMobile = useMediaQuery('(max-width: 1280px)')
+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,
+})
+
+const onSelectPoint = (pickupPoint: PickupPoint) => {
+  checkoutPickupPoint.value = pickupPoint
+  emit('update:checkout-pickup-point', pickupPoint)
+}
+
+watch(coords, (newCoords) => {
+  if (newCoords && hasCoords.value) {
+    location.value = {
+      center: [newCoords.longitude, newCoords.latitude],
+      zoom: 9,
+      duration: 2500,
+    }
+  }
+}, { once: true })
+
+watch(() => checkoutPickupPoint.value, (newPickupPoint) => {
+  if (!newPickupPoint)
+    return
+
+  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;
+  }
+
+  &:hover &__icon {
+    color: var(--ui-primary);
+    transform: scale(1.1);
+  }
+}
+
+.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,49 @@
+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) =>
+          cartItem?.variation_id === item?.variation_id), 1)
   }
-    return null
+
+  const cartRemoveAllItems = () => {
+    cart.value = { line_items: [] }
   }
 
+  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,
+    cartRemoveAllItems,
+
+    cartProducts,
+    cartSum,
   }
 }

composables/useCheckout.ts

@@ -0,0 +1,98 @@
+import type { PickupPoint } from '#shared/yandex_pvz'
+import { createSharedComposable, useMediaQuery, useStorage } from '@vueuse/core'
+
+export const useCheckout = createSharedComposable(() => {
+  const router = useRouter()
+  const route = useRoute()
+  const isMobile = useMediaQuery('(max-width: 1280px)')
+
+  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: isMobile.value ? 'mobileDelivery' : 'delivery',
+      route: 'delivery',
+    },
+    {
+      step: 2,
+      title: isMobile.value ? 'mobileContacts' : 'contacts',
+      route: 'contacts',
+    },
+    {
+      step: 3,
+      title: isMobile.value ? 'mobileSummary' : 'summary',
+      route: 'summary',
+    },
+  ]
+
+  const currentCheckoutStep
+    = ref(checkoutSteps.find(value => value.route === route.path.split('/').pop()) || checkoutSteps[0])
+
+  function previewStep() {
+    if (isPickupPointSelected.value && !isMobile.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.route}`)
+    }
+    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.route}`)
+    }
+  }
+
+  function setStep(pathName: string) {
+    currentCheckoutStep.value = checkoutSteps.find(value => value.route === 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(() =>
+    productData?.value?.map(product => ({
       id: product?.id,
       name: product?.name,
       price: product?.price,
       variations: product?.variations,
       images: product?.images?.slice(0, 5),
       colors: getAttribute(product?.attributes, 'color')?.options,
-  })) ?? [])
+    })) ?? [],
+  )
 
   return {
     productCardData,

i18n/locales/ru.json

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

layouts/checkout.vue

@@ -0,0 +1,98 @@
+<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" :style="showFooter ? 'margin-bottom: 54px' : 'margin-bottom: 0'">
+      <UContainer class="container">
+        <slot />
+      </UContainer>
+    </main>
+
+    <footer class="footer" :class="{ 'footer--hidden': !showFooter }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { useCheckout } from '~/composables/useCheckout'
+
+const route = useRoute()
+const { t } = useI18n()
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
+const showFooter = computed(() => route.path !== '/checkout/delivery' && isMobile.value)
+
+const { previewStep, currentCheckoutStep, checkoutSteps } = useCheckout()
+</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;
+  }
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.main {
+  flex: 1;
+  margin-top: 54px;
+  margin-bottom: 64px;
+
+  &__hide-footer {
+    margin-bottom: 0 !important;
+  }
+}
+</style>

layouts/default.vue

@@ -11,11 +11,18 @@
           PAXTON
         </h1>
 
+        <div
+          class="header__cart"
+          @click="router.push(`/cart`)"
+        >
           <Icon
             name="lucide:shopping-cart"
-          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
+            class="cursor-pointer w-6 h-6 text-gray-700"
-          @click="router.push(`/cart`)"
           />
+          <div v-if="cart?.line_items?.length" class="header__cart-count">
+            {{ cart.line_items.length }}
+          </div>
+        </div>
       </div>
     </header>
 
@@ -25,14 +32,20 @@
       </UContainer>
     </main>
 
-    <footer class="footer">
+    <footer class="footer" :class="{ 'footer--hidden': !(route.path === '/cart' && isMobile) }" />
-      Footer
-    </footer>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const route = useRoute()
 const router = useRouter()
+const { cart } = useCart()
+
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +58,6 @@ const router = useRouter()
 .container {
   --ui-container: 100%;
   max-width: 100%;
-
   margin: 0;
   padding: 0;
 }
@@ -67,24 +79,54 @@ 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;
+  }
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
 }
 
 .main {
   flex: 1;
-  margin-top: 54px;
+  margin-block: 54px 64px;
-}
-
-.footer {
-  margin-top: auto;
 }
 </style>

nuxt.config.ts

@@ -1,8 +1,29 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import { createResolver } from '@nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
 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: '13f4c06b-cb7e-4eeb-81f1-af52f12587b2', // неправильно, через .env ошибка в проде РАЗОБРАТСЯ
+  },
   css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
   i18n: {
     locales: [
@@ -13,4 +34,26 @@ 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',
+        },
+      ],
+    },
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "${resolve('./assets/scss/mixins')}" as *;`,
+        },
+      },
+    },
+  },
+  fonts: {
+    provider: 'google',
+  },
 })

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,86 @@
 <template>
   <div class="cart">
-    <div v-if="cartProducts">
+    <div v-if="cart.line_items.length > 0" 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">
+    <div v-else>
-      Оформить заказ
+      Корзина пока что пуста
-    </UButton>
+    </div>
+
+    <ClientOnly>
+      <PayBlock :is-summary="true" />
+    </ClientOnly>
   </div>
 </template>
 
 <script setup lang="ts">
-import { usePostOrdersCreate } from '~/api/mutations'
+import type { WooOrderCreateResponse } from '#shared/woo_orders_create'
+import { useCart } from '~/composables'
+import PayBlock from '../components/PayBlock.vue'
 
-const { getCart } = useCart()
+const route = useRoute()
-const cartProducts = getCart()
+const { cart, cartRemoveAllItems } = useCart()
-const { mutateAsync } = usePostOrdersCreate()
+const { checkoutContacts, checkoutPickupPoint } = useCheckout()
 
-const createOrder = () => {
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
-  mutateAsync(cartProducts)
+
-}
+// Зарпос должен быть в админке bsbp, ждём доступов. Текущее решение просто создает order в WooCommerce
+onMounted(async () => {
+  if (!route?.query?.ID || cart.value.line_items.length === 0)
+    return
+
+  await wait(5000)
+  await useFetch<WooOrderCreateResponse>('/api/woo_orders_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',
+    },
+  })
+
+  cartRemoveAllItems()
+})
 </script>
 
 <style lang="scss">
+.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;
+    padding-inline: 16px;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
 </style>

pages/checkout/contacts.vue

@@ -0,0 +1,213 @@
+<template>
+  <form v-if="checkoutContacts" 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;
+
+  @include mobile {
+    padding-inline: 10px;
+  }
+}
+</style>

pages/checkout/delivery.vue

@@ -0,0 +1,194 @@
+<template>
+  <div v-if="coords" class="delivery">
+    <!--    Desktop -->
+    <div v-if="!isMobile" class="delivery__sidebar">
+      <DeliveryInfo v-if="isPickupPointSelected" />
+
+      <DeliverySearch
+        v-else
+        v-model:checkout-pickup-point="checkoutPickupPoint"
+        v-model:search-term="searchTerm"
+        :filtered-points="filteredPoints"
+        @update:checkout-pickup-point="updatePoint()"
+      />
+    </div>
+
+    <!--    Mobile -->
+    <UDrawer
+      v-if="isMobile"
+      v-model:open="open"
+      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 class="px-4 pb-4">
+          <DeliveryInfo v-if="isPickupPointSelected" />
+        </div>
+      </template>
+    </UDrawer>
+
+    <UModal
+      v-model:open="openDeliverySearch"
+      fullscreen
+      :dismissible="false"
+      :ui="{
+        body: 'overflow-hidden',
+        overlay: 'bg-black/50',
+        header: 'hidden',
+      }"
+    >
+      <template #body>
+        <DeliverySearch
+          v-if="activeTab === IPvzMapTabs.LIST"
+          v-model:checkout-pickup-point="checkoutPickupPoint"
+          v-model:search-term="searchTerm"
+          :filtered-points="filteredPoints"
+          @update:checkout-pickup-point="updatePoint()"
+        />
+
+        <UDrawer
+          v-if="isMobile"
+          v-model:open="open"
+          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 class="px-4 pb-4">
+              <DeliveryInfo v-if="isPickupPointSelected" />
+            </div>
+          </template>
+        </UDrawer>
+      </template>
+
+      <template #footer>
+        <div class="d-flex flex-row w-full justify-between">
+          <MapControlFitting v-model:fitting="fitting" />
+
+          <MapControlTabs v-model:active-tab="activeTab" />
+        </div>
+      </template>
+    </UModal>
+
+    <!--    Desktop Mobile -->
+    <PvzMap
+      v-model:checkout-pickup-point="checkoutPickupPoint"
+      v-model:active-tab="activeTab"
+      v-model:fitting="fitting"
+      :pickup-points="filteredPoints"
+      @update:checkout-pickup-point="updatePoint()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { YandexLocationDetectResponse } from '#shared/yandex_location_detect'
+import type { YandexPvzPoint, YandexPvzResponse } from '#shared/yandex_pvz'
+import { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types'
+import { useGeolocation, useMediaQuery } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import DeliveryInfo from '~/components/DeliveryInfo.vue'
+import DeliverySearch from '~/components/DeliverySearch.vue'
+import PvzMap from '~/components/PvzMap.vue'
+import { useCheckout } from '~/composables/useCheckout'
+
+const { setCheckoutPickupPoint, isPickupPointSelected, checkoutPickupPoint } = useCheckout()
+const { coords } = useGeolocation()
+const open = ref(false)
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const yandexPvz = ref<YandexPvzResponse>()
+const searchTerm = ref('')
+const activeTab = ref()
+const fitting = ref(IPvzMapFittingTabs.ALL)
+const openDeliverySearch = 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<YandexLocationDetectResponse>('/api/yandex_location_detect', {
+    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
+})
+
+const filteredPoints = computed<YandexPvzPoint[]>(() => {
+  const points = yandexPvz.value?.points || []
+  const term = searchTerm.value?.toLowerCase() || ''
+
+  return points.filter((point) => {
+    const matchesSearch = !term || point.address.full_address.toLowerCase().includes(term)
+
+    const isAllowed = point.pickup_services.is_fitting_allowed
+    const matchesFitting
+      = fitting.value === IPvzMapFittingTabs.ALL
+        || (fitting.value === IPvzMapFittingTabs.ALLOW && isAllowed)
+        || (fitting.value === IPvzMapFittingTabs.FORBID && !isAllowed)
+
+    return matchesSearch && matchesFitting
+  })
+})
+
+function updatePoint() {
+  setCheckoutPickupPoint(checkoutPickupPoint.value)
+  open.value = true
+}
+
+watch(() => activeTab.value, () => {
+  openDeliverySearch.value = activeTab.value === IPvzMapTabs.LIST
+})
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+.delivery {
+  display: flex;
+  flex-direction: row;
+
+  &__sidebar {
+    flex-shrink: 0;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    width: 410px;
+    padding-inline: 24px;
+  }
+}
+</style>

pages/checkout/summary.vue

@@ -0,0 +1,108 @@
+<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>
+
+    <ClientOnly>
+      <PayBlock pay :is-summary="true" />
+    </ClientOnly>
+  </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">
+.summary {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-inline: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  @include mobile {
+    flex-direction: column;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    @include mobile {
+      margin-bottom: 26px;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+  }
+}
+</style>

pages/index.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="index">
+    <div v-if="productCardData.length" class="cards-list">
       <div
-      class="cards-list"
+        v-for="product in pizda"
-    >
-      <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>
@@ -32,6 +30,11 @@
 import { useProductsList } from '~/composables'
 
 const { productCardData } = useProductsList()
+
+// Карточка вариативного товара с разными цветами в процессе разработки, поэтому отображаем только карточку товара с одним цветов
+const pizda = computed(() => {
+  return [productCardData.value.find(xueta => xueta.name === 'Пальто мужское'), productCardData.value.find(xueta => xueta.name === 'Пальто мужское'), productCardData.value.find(xueta => xueta.name === 'Пальто мужское'), productCardData.value.find(xueta => xueta.name === 'Пальто мужское')]
+})
 const router = useRouter()
 </script>
 
@@ -40,22 +43,37 @@ const router = useRouter()
   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,109 @@
 <template>
-  <div class="product">
+  <div ref="target" class="product">
-    <ProductImages />
+    <ProductImages v-if="isMobile" />
+
+    <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">
 .product {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -19,4 +113,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/bsbp_create.ts

@@ -0,0 +1,38 @@
+import type { BsbpCreateRequest, BsbpCreateResponse } from '#shared/bsbp_create'
+import https from 'node:https'
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event): Promise<BsbpCreateResponse | { error: string }> => {
+  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<BsbpCreateRequest>(event)
+
+  try {
+    const response = await axios.post<BsbpCreateResponse>(`${apiUrl}/order`, orderData, {
+      httpsAgent: agent,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Basic ${Buffer.from(`TerminalSys/${merchantId}:${merchantPassword}`).toString('base64')}`,
+      },
+    })
+
+    return response.data
+  }
+  catch (e: any) {
+    return { error: e?.message ?? 'Unknown BSPB error' }
+  }
+},
+)

server/api/woo_orders_create.ts

@@ -0,0 +1,33 @@
+import type { WooOrderCreateRequest, WooOrderCreateResponse } from '#shared/woo_orders_create'
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event): Promise<WooOrderCreateResponse | { error: string }> => {
+  try {
+    const orderData = await readBody<WooOrderCreateRequest>(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<WooOrderCreateResponse>(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_detect.ts

@@ -0,0 +1,31 @@
+import type { YandexLocationDetectRequest, YandexLocationDetectResponse } from '#shared/yandex_location_detect'
+import axios from 'axios'
+import { defineEventHandler, readBody } from 'h3'
+
+export default defineEventHandler(async (event): Promise<YandexLocationDetectResponse | { error: string }> => {
+  try {
+    const data = await readBody<YandexLocationDetectRequest>(event)
+    const apiUrl = process.env.VITE_YANDEX_B2B_BASE_URL!
+    const token = process.env.VITE_YANDEX_B2B_TOKEN!
+
+    const response = await axios.post<YandexLocationDetectResponse>(
+      `${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 { YandexPvzRequest, YandexPvzResponse } from '#shared/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<YandexPvzRequest>(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-----

shared/bsbp_create.ts

@@ -0,0 +1,23 @@
+export interface BsbpOrder {
+  typeRid: string
+  amount: number
+  currency: string
+  title?: string
+  description?: string
+  hppRedirectUrl: string
+}
+
+export interface BsbpCreateRequest {
+  order: BsbpOrder
+}
+
+export interface BsbpCreateResponse {
+  order: {
+    id: number
+    hppUrl: string
+    password: string
+    accessToken: string
+    status: string
+    cvv2AuthStatus: string
+  }
+}

shared/types.ts

@@ -0,0 +1,9 @@
+export enum IPvzMapTabs {
+  MAP = 'map',
+  LIST = 'list',
+}
+export enum IPvzMapFittingTabs {
+  ALL = 'all',
+  ALLOW = 'allow',
+  FORBID = 'Forbid',
+}

shared/woo_orders_create.ts

@@ -0,0 +1,160 @@
+// ------------------------------------
+// REQUEST: Create WooCommerce Order
+// ------------------------------------
+export interface WooOrderCreateBilling {
+  first_name: string
+  last_name: string
+  address_1: string
+  address_2: string
+  city: string
+  state: string
+  postcode: string
+  country: string
+  email: string
+  phone: string
+}
+
+export interface WooOrderCreateShipping {
+  first_name: string
+  last_name: string
+  address_1: string
+  address_2: string
+  city: string
+  state: string
+  postcode: string
+  country: string
+}
+
+export interface WooOrderCreateLineItem {
+  product_id: number
+  variation_id?: number
+  quantity: number
+}
+
+export interface WooOrderCreateShippingLine {
+  method_id: string
+  method_title: string
+  total: string
+}
+
+export interface WooOrderCreateRequest {
+  payment_method: string
+  payment_method_title: string
+  set_paid: boolean
+  billing: WooOrderCreateBilling
+  shipping: WooOrderCreateShipping
+  line_items: WooOrderCreateLineItem[]
+  shipping_lines: WooOrderCreateShippingLine[]
+}
+
+// ------------------------------------
+// RESPONSE: WooCommerce Order
+// ------------------------------------
+export interface WooMetaData {
+  id: number
+  key: string
+  value: any
+}
+
+export interface WooTaxItem {
+  id: number
+  total: string
+  subtotal: string
+}
+
+export interface WooLineItem {
+  id: number
+  name: string
+  product_id: number
+  variation_id: number
+  quantity: number
+  tax_class: string
+  subtotal: string
+  subtotal_tax: string
+  total: string
+  total_tax: string
+  taxes: WooTaxItem[]
+  meta_data: WooMetaData[]
+  sku: string
+  price: number
+}
+
+export interface WooTaxLine {
+  id: number
+  rate_code: string
+  rate_id: number
+  label: string
+  compound: boolean
+  tax_total: string
+  shipping_tax_total: string
+  meta_data: WooMetaData[]
+}
+
+export interface WooShippingLine {
+  id: number
+  method_title: string
+  method_id: string
+  total: string
+  total_tax: string
+  taxes: WooTaxItem[]
+  meta_data: WooMetaData[]
+}
+
+export interface WooLink {
+  href: string
+}
+
+export interface WooOrderLinks {
+  self: WooLink[]
+  collection: WooLink[]
+}
+
+export interface WooOrderCreateResponse {
+  id: number
+  parent_id: number
+  number: string
+  order_key: string
+  created_via: string
+  version: string
+  status: string
+  currency: string
+  date_created: string
+  date_created_gmt: string
+  date_modified: string
+  date_modified_gmt: string
+  discount_total: string
+  discount_tax: string
+  shipping_total: string
+  shipping_tax: string
+  cart_tax: string
+  total: string
+  total_tax: string
+  prices_include_tax: boolean
+  customer_id: number
+  customer_ip_address: string
+  customer_user_agent: string
+  customer_note: string
+
+  billing: WooOrderCreateBilling
+  shipping: WooOrderCreateShipping
+
+  payment_method: string
+  payment_method_title: string
+  transaction_id: string
+  date_paid: string | null
+  date_paid_gmt: string | null
+  date_completed: string | null
+  date_completed_gmt: string | null
+  cart_hash: string
+
+  meta_data: WooMetaData[]
+
+  line_items: WooLineItem[]
+  tax_lines: WooTaxLine[]
+  shipping_lines: WooShippingLine[]
+  fee_lines: any[]
+  coupon_lines: any[]
+  refunds: any[]
+
+  _links: WooOrderLinks
+}

shared/yandex_location_detect.ts

@@ -0,0 +1,12 @@
+export interface YandexLocationVariantDetect {
+  geo_id: number
+  address: string
+}
+
+export interface YandexLocationDetectResponse {
+  variants: YandexLocationVariantDetect[]
+}
+
+export interface YandexLocationDetectRequest {
+  location: string
+}

shared/yandex_pvz.ts

@@ -0,0 +1,127 @@
+// -----------------------------
+// REQUEST
+// -----------------------------
+export type YandexPvzPaymentMethod = 'already_paid'
+
+export interface YandexPvzCoordinateRange {
+  from: number
+  to: number
+}
+
+export interface YandexPvzPickupServicesRequest {
+  is_fitting_allowed: boolean
+  is_partial_refuse_allowed: boolean
+  is_paperless_pickup_allowed: boolean
+  is_unboxing_allowed: boolean
+}
+
+export interface YandexPvzRequest {
+  pickup_point_ids?: string[]
+  geo_id?: number
+  longitude?: YandexPvzCoordinateRange
+  latitude?: YandexPvzCoordinateRange
+  type?: 'pickup_point'
+  payment_method?: YandexPvzPaymentMethod
+  available_for_dropoff?: boolean
+  is_yandex_branded?: boolean
+  is_not_branded_partner_station?: boolean
+  is_post_office?: boolean
+  payment_methods?: YandexPvzPaymentMethod[]
+  pickup_services?: YandexPvzPickupServicesRequest
+}
+
+// -----------------------------
+// RESPONSE
+// -----------------------------
+export interface YandexPvzPosition {
+  latitude: number
+  longitude: number
+}
+
+export interface YandexPvzAddress {
+  geoId: string
+  country: string
+  region: string
+  subRegion: string
+  locality: string
+  street: string
+  house: string
+  housing: string
+  apartment: string
+  building: string
+  comment: string
+  full_address: string
+  postal_code: string
+}
+
+export interface YandexPvzContact {
+  first_name: string
+  last_name: string
+  patronymic: string
+  phone: string
+  email: string
+}
+
+export interface YandexPvzTimeObject {
+  hours: number
+  minutes: number
+}
+
+export interface YandexPvzScheduleRestriction {
+  days: number[]
+  time_from: YandexPvzTimeObject
+  time_to: YandexPvzTimeObject
+}
+
+export interface YandexPvzSchedule {
+  time_zone: number
+  restrictions: YandexPvzScheduleRestriction[]
+}
+
+export interface YandexPvzPickupServices {
+  is_fitting_allowed: boolean
+  is_partial_refuse_allowed: boolean
+  is_paperless_pickup_allowed: boolean
+  is_unboxing_allowed: boolean
+}
+
+export interface YandexPvzDayoff {
+  date: string
+  date_utc: string
+}
+
+export interface YandexPvzDeactivation {
+  deactivation_date_predicted_debt: boolean
+  available_for_dropoff: boolean
+  available_for_c2c_dropoff: boolean
+}
+
+export interface YandexPvzPoint {
+  ID: string
+  operator_station_id: string
+  name: string
+  type: 'pickup_point'
+
+  position: YandexPvzPosition
+  address: YandexPvzAddress
+  instruction: string
+
+  payment_methods: YandexPvzPaymentMethod[]
+  contact: YandexPvzContact
+  schedule: YandexPvzSchedule
+
+  is_yandex_branded: boolean
+  is_market_partner: boolean
+  is_dark_store: boolean
+  is_post_office: boolean
+
+  pickup_services: YandexPvzPickupServices
+
+  deactivation_date: YandexPvzDeactivation
+
+  dayoffs: YandexPvzDayoff[]
+}
+
+export interface YandexPvzResponse {
+  points: YandexPvzPoint[]
+}

tsconfig.json

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