карты пвз

pages/checkout/delivery.vue

@@ -28,7 +28,7 @@
             v-for="pickupPoint in filteredPoints"
             :key="pickupPoint.id"
             class="pickup-point-card"
-            @click="centerMap(pickupPoint)"
+            @click="selectedPickupPoint = pickupPoint"
           >
             <div class="pickup-point-card__content">
               <h3>Yandex</h3>
@@ -41,7 +41,10 @@
       </div>
     </div>
 
-    <PvzMap ref="mapRef" :pickup-points="filteredPoints" />
+    <PvzMap
+      v-model="selectedPickupPoint"
+      :pickup-points="filteredPoints"
+    />
   </div>
 </template>
 
@@ -53,11 +56,11 @@ import DeliveryInfo from '~/components/DeliveryInfo.vue'
 import PvzMap from '~/components/PvzMap.vue'
 import { useCheckout } from '~/composables/useCheckout'
 
-const { isPickupPointSelected } = useCheckout()
+const { setCheckoutPickupPoint, isPickupPointSelected } = useCheckout()
 const { coords } = useGeolocation()
-const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
+const selectedPickupPoint = ref<PickupPoint | undefined>()
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -108,9 +111,10 @@ const filteredPoints = computed<PickupPoint[]>(() => {
   ) || []
 })
 
-const centerMap = (point: any) => {
-  mapRef.value?.centerMap(point)
-}
+watch(() => selectedPickupPoint.value, (newPickupPoint) => {
+  setCheckoutPickupPoint(newPickupPoint)
+  isPickupPointSelected.value = true
+})
 
 definePageMeta({
   layout: 'checkout',