feat(VCST-3865): cart pickup locations facet search (#1998)

## Description
Facet full-text search features added to the pickup locations map and
list popups

Version with Google map enabled (desktop and mobile layouts):
<img width="1065" height="957" alt="image"
src="https://github.com/user-attachments/assets/77bf23b5-3476-4ae5-8621-dde024ffaab2"
/>
<img width="1058" height="952" alt="image"
src="https://github.com/user-attachments/assets/15b7045f-d129-4e4b-bcd5-d41737145570"
/>
<img width="430" height="950" alt="image"
src="https://github.com/user-attachments/assets/643302f1-0ca5-43fb-8851-3b1ad29a9aed"
/>


Version with Google map disabled (desktop and mobile layouts):
<img width="878" height="623" alt="image"
src="https://github.com/user-attachments/assets/068fcb20-aec6-44ec-bb9b-ee4ca27d699c"
/>
<img width="878" height="412" alt="image"
src="https://github.com/user-attachments/assets/693e28a7-59ce-4108-a7e9-fa7b8df09912"
/>
<img width="436" height="965" alt="image"
src="https://github.com/user-attachments/assets/a0060f45-a2fd-449b-a543-98ba6a0d263b"
/>


## References
### Jira-link:
https://virtocommerce.atlassian.net/browse/VCST-3865
### Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.35.0-pr-1998-90f1-90f1ef88.zip

---------

Co-authored-by: Elena Mutykova <[email protected]>

Author: yuskithedeveloper

client-app/core/api/graphql/cart/queries/getCartPickupLocations/getCartPickupLocationsQuery.graphql

@@ -3,18 +3,22 @@ query GetCartPickupLocations(
   $cultureName: String!
   $cartId: String!
   $keyword: String
+  $filter: String
   $first: Int
   $after: String
   $sort: String
+  $facet: String
 ) {
   cartPickupLocations(
     storeId: $storeId
     cultureName: $cultureName
     cartId: $cartId
     keyword: $keyword
+    filter: $filter
     first: $first
     after: $after
     sort: $sort
+    facet: $facet
   ) {
     totalCount
     items {
@@ -40,5 +44,13 @@ query GetCartPickupLocations(
         phone
       }
     }
+    term_facets {
+      name
+      terms {
+        term
+        label
+        count
+      }
+    }
   }
 }

client-app/core/api/graphql/cart/queries/getCartPickupLocations/index.ts

@@ -1,11 +1,11 @@
 import { globals } from "@/core/globals";
 import { graphqlClient } from "../../../client";
 import getCartPickupLocationsQueryDocument from "./getCartPickupLocationsQuery.graphql";
-import type { Query, QueryCartPickupLocationsArgs, ProductPickupLocationConnection } from "@/core/api/graphql/types";
+import type { Query, QueryCartPickupLocationsArgs, CartPickupLocationConnection } from "@/core/api/graphql/types";
 
 export async function getCartPickupLocations(
   payload: Omit<QueryCartPickupLocationsArgs, "storeId" | "cultureName">,
-): Promise<ProductPickupLocationConnection> {
+): Promise<CartPickupLocationConnection> {
   const { storeId, cultureName } = globals;
 
   const { data } = await graphqlClient.query<

client-app/core/api/graphql/types.ts

@@ -20,3 +20,24 @@ export type FacetItemType = {
     max?: number;
   };
 };
+
+export type FacetFilterType = {
+  filterType: string;
+  isGenerated: boolean;
+  label?: string;
+  name: string;
+  rangeValues?: FacetFilterRangeValueType[];
+  termValues?: FacetFilterTermValueType[];
+};
+
+export type FacetFilterRangeValueType = {
+  includeLowerBound: boolean;
+  includeUpperBound: boolean;
+  lower?: string;
+  upper?: string;
+};
+
+export type FacetFilterTermValueType = {
+  label?: string;
+  value: string;
+};

client-app/core/types/facet.ts

@@ -1,18 +1,116 @@
-import { ref } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { getCartPickupLocations } from "@/core/api/graphql/cart";
-import { Logger } from "@/core/utilities";
+import { Logger, termFacetToCommonFacet } from "@/core/utilities";
 import type { ProductPickupLocation, QueryCartPickupLocationsArgs } from "@/core/api/graphql/types";
+import type { FacetFilterType, FacetItemType } from "@/core/types";
+
+export const COUNTRY_NAME_FACET = "address_countryname";
+export const REGION_NAME_FACET = "address_regionname";
+export const CITY_FACET = "address_city";
+
+export function _useCartPickupLocations() {
+  const { t } = useI18n();
 
-export function useCartPickupLocations() {
   const pickupLocationsLoading = ref(false);
 
   const pickupLocations = ref<ProductPickupLocation[]>([]);
 
-  async function fetchPickupLocations(payload: Omit<QueryCartPickupLocationsArgs, "storeId" | "cultureName">) {
+  const filterOptionsCountries = ref<FacetItemType>();
+  const filterOptionsRegions = ref<FacetItemType>();
+  const filterOptionsCities = ref<FacetItemType>();
+
+  const filterCountries = ref<FacetFilterType>();
+  const filterRegions = ref<FacetFilterType>();
+  const filterCities = ref<FacetFilterType>();
+  const filterKeyword = ref<string>("");
+
+  const filterSelectsAreEmpty = computed(
+    () =>
+      !(
+        filterCountries.value?.termValues?.length ||
+        filterRegions.value?.termValues?.length ||
+        filterCities.value?.termValues?.length
+      ),
+  );
+
+  const filterIsApplied = ref(false);
+
+  function buildFilter(): string | undefined {
+    const resultItems = [];
+
+    if (filterCities.value?.termValues?.length) {
+      resultItems.push(`${CITY_FACET}:"${filterCities.value.termValues.map((x) => x.value).join('","')}"`);
+    }
+
+    if (filterRegions.value?.termValues?.length) {
+      resultItems.push(`${REGION_NAME_FACET}:"${filterRegions.value.termValues.map((x) => x.value).join('","')}"`);
+    }
+
+    if (filterCountries.value?.termValues?.length) {
+      resultItems.push(`${COUNTRY_NAME_FACET}:"${filterCountries.value.termValues.map((x) => x.value).join('","')}"`);
+    }
+
+    return resultItems.join(" ");
+  }
+
+  function clearFilter() {
+    filterCountries.value = undefined;
+    filterRegions.value = undefined;
+    filterCities.value = undefined;
+    filterKeyword.value = "";
+  }
+
+  async function fetchPickupLocations(
+    payload: Omit<QueryCartPickupLocationsArgs, "storeId" | "cultureName" | "facet">,
+  ) {
     pickupLocationsLoading.value = true;
     try {
-      const data = await getCartPickupLocations(payload);
+      const data = await getCartPickupLocations({
+        facet: `${COUNTRY_NAME_FACET} ${REGION_NAME_FACET} ${CITY_FACET}`,
+        ...payload,
+      });
       pickupLocations.value = data.items ?? [];
+
+      const termFacetCounties = data.term_facets?.find((f) => f.name === COUNTRY_NAME_FACET);
+      if (termFacetCounties) {
+        filterOptionsCountries.value = termFacetToCommonFacet(termFacetCounties);
+        filterOptionsCountries.value.label = t("common.labels.country");
+      } else {
+        filterOptionsCountries.value = {
+          type: "terms",
+          paramName: COUNTRY_NAME_FACET,
+          values: [],
+          label: t("common.labels.country"),
+        };
+      }
+
+      const termFacetRegions = data.term_facets?.find((f) => f.name === REGION_NAME_FACET);
+      if (termFacetRegions) {
+        filterOptionsRegions.value = termFacetToCommonFacet(termFacetRegions);
+        filterOptionsRegions.value.label = t("common.labels.region");
+      } else {
+        filterOptionsRegions.value = {
+          type: "terms",
+          paramName: REGION_NAME_FACET,
+          values: [],
+          label: t("common.labels.region"),
+        };
+      }
+
+      const termFacetCities = data.term_facets?.find((f) => f.name === CITY_FACET);
+      if (termFacetCities) {
+        filterOptionsCities.value = termFacetToCommonFacet(termFacetCities);
+        filterOptionsCities.value.label = t("common.labels.city");
+      } else {
+        filterOptionsCities.value = {
+          type: "terms",
+          paramName: CITY_FACET,
+          values: [],
+          label: t("common.labels.city"),
+        };
+      }
     } catch (e) {
       Logger.error(`${useCartPickupLocations.name}.${fetchPickupLocations.name}`, e);
       throw e;
@@ -24,5 +122,21 @@ export function useCartPickupLocations() {
     pickupLocationsLoading,
     pickupLocations,
     fetchPickupLocations,
+
+    filterOptionsCountries,
+    filterOptionsRegions,
+    filterOptionsCities,
+
+    filterCountries,
+    filterRegions,
+    filterCities,
+    filterKeyword,
+
+    filterSelectsAreEmpty,
+    filterIsApplied,
+    buildFilter,
+    clearFilter,
   };
 }
+
+export const useCartPickupLocations = createSharedComposable(_useCartPickupLocations);

client-app/shared/cart/composables/useCartPickupLocations.ts

@@ -52,6 +52,7 @@
         </VcMenuItem>
 
         <div v-if="isAnchorAdded" ref="fadeVisibilityAnchor"></div>
+
         <div v-if="hasFade" class="facet-filter-widget__fade"></div>
       </div>
     </template>
@@ -81,6 +82,7 @@
   <!-- Dropdown mode -->
   <VcDropdownMenu
     v-if="mode === 'dropdown'"
+    :disabled="disabled"
     :offset-options="4"
     class="facet-filter-dropdown"
     z-index="10"
@@ -179,6 +181,7 @@ interface IEmits {
 interface IProps {
   facet: FacetItemType;
   loading?: boolean;
+  disabled?: boolean;
   mode: "dropdown" | "collapsable";
   filter?: SearchProductFilterResult;
 }

client-app/shared/catalog/components/facet-filter.vue

@@ -4,6 +4,7 @@ export { default as OrderCommentSection } from "./order-comment-section.vue";
 export { default as OrderSummary } from "./order-summary.vue";
 export { default as PlaceOrder } from "./place-order.vue";
 export { default as ProceedTo } from "./proceed-to.vue";
+export { default as SelectAddressFilter } from "./select-address-filter.vue";
 export { default as SelectAddressModal } from "./select-address-modal.vue";
 export { default as SelectPaymentMethodModal } from "./select-payment-method-modal.vue";
 export { default as ShippingDetailsSection } from "./shipping-details-section.vue";