fix: empty facet handling

Author: yuskithedeveloper

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

@@ -77,18 +77,39 @@ export function _useCartPickupLocations() {
       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);

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

@@ -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/checkout/components/select-address-filter.vue

@@ -5,6 +5,7 @@
         v-if="filterOptionsCountries"
         :facet="filterOptionsCountries"
         :filter="filterCountries"
+        :disabled="!filterOptionsCountries.values?.length"
         mode="dropdown"
         @update:filter="applyFilter"
       />
@@ -13,6 +14,7 @@
         v-if="filterOptionsRegions"
         :facet="filterOptionsRegions"
         :filter="filterRegions"
+        :disabled="!filterOptionsRegions.values?.length"
         mode="dropdown"
         @update:filter="applyFilter"
       />
@@ -21,6 +23,7 @@
         v-if="filterOptionsCities"
         :facet="filterOptionsCities"
         :filter="filterCities"
+        :disabled="!filterOptionsCities.values?.length"
         mode="dropdown"
         @update:filter="applyFilter"
       />