feat(VCST-4565): auto-select current pickup location in BOPIS modal

client-app/shared/checkout/components/select-address-map/select-address-map-mobile.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, toRef } from "vue";
+import { nextTick, ref, toRef, watch } from "vue";
 import { SelectAddressFilter } from "@/shared/checkout";
 import { useSelectAddressMap } from "@/shared/checkout/composables";
 import { useModal } from "@/shared/modal";
@@ -108,6 +108,24 @@ const { selectedAddressId, filterIsApplied, pickupLocationsLoading, selectAddres
     onFilterChange: () => emit("filterChange"),
   });
 
+// Automatically scroll to current address in list and position map
+watch(
+  () => props.addresses,
+  (addresses) => {
+    if (props.currentAddress?.id && addresses.length) {
+      const currentLocation = addresses.find((addr) => addr.id === props.currentAddress?.id);
+
+      if (currentLocation) {
+        selectAddress(currentLocation, {
+          scrollToSelectedOnMap: true,
+          scrollToSelectedOnList: true,
+        });
+      }
+    }
+  },
+  { immediate: true, flush: "post" },
+);
+
 function onSelect(address: PickupLocationType) {
   selectAddress(address, { scrollToSelectedOnMap: true });
   selectedLocation.value = address;

client-app/shared/checkout/composables/useSelectAddressMap.ts

@@ -27,6 +27,14 @@ function getLatLng(location: string | undefined) {
   }
 }
 
+function scrollToAddressInList(addressId: string) {
+  const listElement = document.querySelector(`[data-address-id="${CSS.escape(addressId)}"]`);
+
+  if (listElement) {
+    listElement.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+}
+
 export function useSelectAddressMap(options: IUseSelectAddressMapOptions) {
   const { addresses, currentAddress, onFilterChange } = options;
 
@@ -94,11 +102,7 @@ export function useSelectAddressMap(options: IUseSelectAddressMapOptions) {
     }
 
     if (selectOptions.scrollToSelectedOnList && address.id) {
-      const listElement = document.querySelector(`[data-address-id="${CSS.escape(address.id)}"]`);
-
-      if (listElement) {
-        listElement.scrollIntoView({ behavior: "smooth", block: "center" });
-      }
+      scrollToAddressInList(address.id);
     }
   }
 
@@ -148,6 +152,17 @@ export function useSelectAddressMap(options: IUseSelectAddressMapOptions) {
         }
       }
 
+      // Automatically open info card and scroll to selected item in list
+      if (address) {
+        onceIdle(() => {
+          showLocationInfoCard(address);
+
+          if (address.id) {
+            scrollToAddressInList(address.id);
+          }
+        });
+      }
+
       unwatch();
     }
   });