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

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/shared/cart/composables/useCartPickupLocations.ts

@@ -1,18 +1,77 @@
-import { ref } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { getCartPickupLocations } from "@/core/api/graphql/cart";
 import { Logger } from "@/core/utilities";
-import type { ProductPickupLocation, QueryCartPickupLocationsArgs } from "@/core/api/graphql/types";
+import type {
+  ProductPickupLocation,
+  QueryCartPickupLocationsArgs,
+  TermFacet,
+  FacetTermType,
+} from "@/core/api/graphql/types";
 
-export function useCartPickupLocations() {
+const COUNTRY_NAME_FACET = "address_countryname";
+const REGION_NAME_FACET = "address_regionname";
+const CITY_FACET = "address_city";
+
+export type PickupLocationsFilterOptionsType = {
+  countries: FacetTermType[];
+  regions: FacetTermType[];
+  cities: FacetTermType[];
+};
+
+export function _useCartPickupLocations() {
   const pickupLocationsLoading = ref(false);
 
   const pickupLocations = ref<ProductPickupLocation[]>([]);
+  const termFacets = ref<TermFacet[] | undefined>();
+
+  const filterOptions = computed(
+    () =>
+      ({
+        countries: termFacets.value?.find((f) => f.name === COUNTRY_NAME_FACET)?.terms ?? [],
+        regions: termFacets.value?.find((f) => f.name === REGION_NAME_FACET)?.terms ?? [],
+        cities: termFacets.value?.find((f) => f.name === CITY_FACET)?.terms ?? [],
+      }) as PickupLocationsFilterOptionsType,
+  );
+
+  const filterKeyword = ref<string>("");
+  const filterCountry = ref<string | undefined>();
+  const filterRegion = ref<string | undefined>();
+  const filterCity = ref<string | undefined>();
+
+  const filterApplied = ref(false);
+
+  function buildFilter(): string | undefined {
+    if (filterCity.value) {
+      return `${CITY_FACET}:"${filterCity.value}"`;
+    }
+    if (filterRegion.value) {
+      return `${REGION_NAME_FACET}:"${filterRegion.value}"`;
+    }
+    if (filterCountry.value) {
+      return `${COUNTRY_NAME_FACET}:"${filterCountry.value}"`;
+    }
+    return undefined;
+  }
 
-  async function fetchPickupLocations(payload: Omit<QueryCartPickupLocationsArgs, "storeId" | "cultureName">) {
+  function resetFilter() {
+    filterKeyword.value = "";
+    filterCountry.value = undefined;
+    filterRegion.value = undefined;
+    filterCity.value = undefined;
+  }
+
+  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 ?? [];
+      termFacets.value = data.term_facets ?? undefined;
     } catch (e) {
       Logger.error(`${useCartPickupLocations.name}.${fetchPickupLocations.name}`, e);
       throw e;
@@ -24,5 +83,16 @@ export function useCartPickupLocations() {
     pickupLocationsLoading,
     pickupLocations,
     fetchPickupLocations,
+
+    filterOptions,
+    filterKeyword,
+    filterCountry,
+    filterRegion,
+    filterCity,
+    filterApplied,
+    buildFilter,
+    resetFilter,
   };
 }
+
+export const useCartPickupLocations = createSharedComposable(_useCartPickupLocations);