@inploi/plugin-job-search 0.23.0 → 0.23.2

package/dist/index.cjs

@@ -1563,7 +1563,7 @@ const getFilterValue = (filterValue) => {
     return null;
   return filterValue;
 };
-const filtersToPayload = (filters) => {
+const filtersToPayload$1 = (filters) => {
   return Object.fromEntries(
     Object.entries(filters).map(([key, filter]) => {
       return [key, getFilterValue(filter == null ? void 0 : filter.value)];
@@ -1580,7 +1580,7 @@ const getAvailableFilters = async ({
   try {
     const searchParams = new URLSearchParams(
       stringify({
-        filters: filtersToPayload(filters),
+        filters: filtersToPayload$1(filters),
         query: keyword
       })
     );
@@ -1609,7 +1609,7 @@ const getJobSearchResults = async ({
   try {
     const searchParams = new URLSearchParams(
       stringify({
-        filters: filtersToPayload(filters)
+        filters: filtersToPayload$1(filters)
       })
     );
     searchParams.set("page", page.toString());
@@ -2690,6 +2690,48 @@ const cacheKey = (value) => {
   ).join("&");
   return `${value.baseKey}::${filterString}::${value.keyword ?? ""}`;
 };
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = h$1(false);
+  y$1(() => {
+    if (typeof window === "undefined")
+      return;
+    const mediaQuery = window.matchMedia(query);
+    const updateMatches = () => setMatches(mediaQuery.matches);
+    updateMatches();
+    mediaQuery.addEventListener("change", updateMatches);
+    return () => mediaQuery.removeEventListener("change", updateMatches);
+  }, [query]);
+  return matches;
+};
+const useViewTracking = (elementRef, { minViewTime = 1e3, visibilityThreshold = 0, onView }) => {
+  const [viewed, setViewed] = h$1(false);
+  y$1(() => {
+    if (viewed)
+      return;
+    if (!elementRef.current)
+      return;
+    let timeout;
+    const observer = new IntersectionObserver(
+      (entries) => entries.forEach((entry) => {
+        clearTimeout(timeout);
+        if (entry.isIntersecting) {
+          timeout = setTimeout(() => {
+            setViewed(true);
+            onView();
+          }, minViewTime);
+        }
+      }),
+      {
+        threshold: visibilityThreshold
+      }
+    );
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, [elementRef, minViewTime, visibilityThreshold, onView, viewed]);
+};
 const jobSearch = "";
 const getFilterValues = (appliedFilters) => {
   const entries = Object.entries(appliedFilters).map(([key, value]) => {
@@ -4246,19 +4288,6 @@ const CurrentValueTag = ({ query, property, selectedValues }) => {
       exhaustive(query);
   }
 };
-const useMediaQuery = (query) => {
-  const [matches, setMatches] = h$1(false);
-  y$1(() => {
-    if (typeof window === "undefined")
-      return;
-    const mediaQuery = window.matchMedia(query);
-    const updateMatches = () => setMatches(mediaQuery.matches);
-    updateMatches();
-    mediaQuery.addEventListener("change", updateMatches);
-    return () => mediaQuery.removeEventListener("change", updateMatches);
-  }, [query]);
-  return matches;
-};
 const TAG_HEIGHT = 44;
 const LINE_COUNT = 6;
 const SUGGESTIONS_COUNT_THRESHOLD = 12;
@@ -5446,8 +5475,12 @@ const JobCardLogo = ({
 };
 const asArray = (value) => Array.isArray(value) ? value : [value];
 const ONE_DAY_MS = 1e3 * 60 * 60 * 24 * 7;
-const JobCard = ({ job, config }) => {
-  var _a, _b, _c, _d;
+const JobCard = ({
+  job,
+  config,
+  onJobClick
+}) => {
+  var _a, _b, _c;
   const subheading = config.subheading ? getDisplayableProperty({ job, property: config.subheading }) : null;
   const tags = config.infoTags.flatMap((infoTag) => asArray(getDisplayableProperty({ job, property: infoTag }))).filter(Boolean);
   const salary = asArray(
@@ -5457,11 +5490,16 @@ const JobCard = ({ job, config }) => {
   const href = ((_b = config.overrides) == null ? void 0 : _b.baseUrl) ? config.overrides.baseUrl(job.id.toString()) : job.href;
   const newUnderDays = config.newUnderDays ?? 7;
   const isNew = job.createdAt ? new Date(job.createdAt).getTime() > Date.now() - newUnderDays * ONE_DAY_MS : false;
+  const handleClick = (e2) => {
+    var _a2, _b2;
+    onJobClick == null ? void 0 : onJobClick(job);
+    (_b2 = (_a2 = config.overrides) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e2);
+  };
   return /* @__PURE__ */ u$2(
     "a",
     {
       onMouseEnter: (_c = config.overrides) == null ? void 0 : _c.onMouseEnter,
-      onClick: (_d = config.overrides) == null ? void 0 : _d.onClick,
+      onClick: handleClick,
       href,
       target: config.openJob === "redirect-new-tab" ? "_blank" : void 0,
       class: wrapperClass(),
@@ -5548,16 +5586,19 @@ const LoadMore = ({
   state,
   fetchNextPage,
   config,
-  analytics
+  remainingItems
 }) => {
+  const itemsToLoad = Math.min(PAGE_SIZE, remainingItems);
   if (state === "revalidating") {
     return /* @__PURE__ */ u$2("ul", { class: "flex flex-col gap-3", "aria-hidden": true, children: Array.from({ length: PAGE_SIZE }).map((_2, i2) => /* @__PURE__ */ u$2("li", { children: /* @__PURE__ */ u$2(JobCardSkeleton, { seed: i2, animationDelay: (i2 - 4) * 0.1, config }) }, i2)) });
   } else {
-    const handleClick = () => {
-      analytics.log({ event: "SEARCH_PAGINATE" });
-      fetchNextPage();
-    };
-    return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: handleClick, children: "Load More" });
+    return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: fetchNextPage, children: [
+      "Load ",
+      itemsToLoad,
+      " more of ",
+      remainingItems,
+      " remaining"
+    ] });
   }
 };
 const getResultsCount = ({ pagination }) => {
@@ -5572,7 +5613,9 @@ const ResultsSection = ({
   logger,
   jobCardConfig,
   initialData,
-  analytics
+  onResultsUpdate,
+  onJobClick,
+  onPaginate
 }) => {
   const [page, setPage] = h$1(1);
   return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
@@ -5586,10 +5629,14 @@ const ResultsSection = ({
         page: index + 1,
         isFirst: index === 0,
         isLast,
-        fetchNextPage: () => setPage(page + 1),
+        fetchNextPage: () => {
+          setPage(page + 1);
+          onPaginate(page + 1);
+        },
         jobCardConfig,
         initialData,
-        analytics
+        onResultsUpdate,
+        onJobClick
       },
       index
     ) }, index);
@@ -5605,7 +5652,8 @@ const ResultsPage = ({
   fetchNextPage,
   jobCardConfig,
   initialData,
-  analytics
+  onResultsUpdate,
+  onJobClick
 }) => {
   const fallbackData = page === 1 ? initialData : void 0;
   const { keyword$ } = store;
@@ -5622,6 +5670,13 @@ const ResultsPage = ({
       { ...SWR_SETTINGS, fallbackData }
     )
   );
+  y$1(() => {
+    if (data && isFirst && onResultsUpdate) {
+      onResultsUpdate({
+        totalCount: data.pagination.total
+      });
+    }
+  }, [data, isFirst, onResultsUpdate]);
   switch (state) {
     case "loading":
       return /* @__PURE__ */ u$2(k$3, { children: [
@@ -5649,6 +5704,8 @@ const ResultsPage = ({
           ] })
         ] });
       const hasMore = data.pagination.last_page !== data.pagination.current_page;
+      const alreadyDisplayedItems = page * PAGE_SIZE;
+      const remainingItems = Math.max(data.pagination.total - alreadyDisplayedItems, 0);
       return /* @__PURE__ */ u$2(k$3, { children: [
         isFirst && /* @__PURE__ */ u$2("p", { class: "text-copy-neutral-lowcontrast text-style-tag m-0 p-0 text-center", children: getResultsCount({ pagination: data.pagination }) }),
         /* @__PURE__ */ u$2("ul", { "aria-label": `Page ${page}`, class: "flex flex-col gap-3", children: data.results.map((job) => {
@@ -5657,12 +5714,20 @@ const ResultsPage = ({
             {
               class: "ease-expo-out duration-slow transition-opacity",
               style: { opacity: state === "revalidating" ? 0.33 : 1 },
-              children: /* @__PURE__ */ u$2(JobCard, { job, config: jobCardConfig })
+              children: /* @__PURE__ */ u$2(JobCard, { job, onJobClick, config: jobCardConfig })
             },
             job.id
           );
         }) }),
-        hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig, analytics })
+        hasMore && isLast && /* @__PURE__ */ u$2(
+          LoadMore,
+          {
+            state,
+            fetchNextPage,
+            config: jobCardConfig,
+            remainingItems
+          }
+        )
       ] });
     }
     default:
@@ -5694,6 +5759,17 @@ const getFilterDefaults = (properties, field = "value") => properties.reduce(
   },
   {}
 );
+const filtersToPayload = (filters) => {
+  return Object.fromEntries(
+    Object.entries(filters).map(([key, filter]) => {
+      const value = filter == null ? void 0 : filter.value;
+      return [
+        key,
+        Array.isArray(value) ? value : value ? [value] : []
+      ];
+    }).filter(([, value]) => value !== void 0 && value.length > 0)
+  );
+};
 const JobSearch = ({
   apiClient,
   logger,
@@ -5706,30 +5782,64 @@ const JobSearch = ({
   params
 }) => {
   const appRef = A$1(null);
+  const defaultFilters = getFilterDefaults(properties, "defaultValue");
   const [appliedFilters, setAppliedFilters] = h$1(() => ({
     default: true,
-    filters: getFilterDefaults(properties, "defaultValue")
+    filters: defaultFilters
   }));
+  const [totalCount, setTotalCount] = h$1(0);
   const { keyword$ } = store;
+  const defaultFiltersPayload = filtersToPayload(defaultFilters);
+  const currentFiltersPayload = filtersToPayload(appliedFilters.filters);
+  const getSearchProperties = q$1(
+    () => ({
+      query: keyword$.value || void 0,
+      filters: currentFiltersPayload,
+      default_filters: defaultFiltersPayload,
+      total_count: totalCount,
+      page_size: PAGE_SIZE
+    }),
+    [keyword$.value, currentFiltersPayload, defaultFiltersPayload, totalCount]
+  );
+  useViewTracking(appRef, {
+    minViewTime: 2e3,
+    onView: () => {
+      analytics.log({ event: "VIEW_SEARCH", properties: null });
+    }
+  });
   y$1(() => {
     const timer = window.setTimeout(() => {
-      console.log("settling");
-      const formattedFilters = filtersToPayload(appliedFilters.filters);
-      const hasInteracted = appliedFilters.default !== true;
-      if (!keyword$.value && !hasInteracted)
+      const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
+      if (shouldSkipAnalytics)
         return;
       analytics.log({
         event: "SEARCH_SETTLE",
-        properties: {
-          query: keyword$.value || void 0,
-          filters: hasInteracted ? formattedFilters : void 0
-        }
+        properties: getSearchProperties()
       });
     }, 5e3);
     return () => {
       clearTimeout(timer);
     };
-  }, [appliedFilters.filters, keyword$.value, analytics, appliedFilters.default]);
+  }, [analytics, appliedFilters.default, currentFiltersPayload, getSearchProperties, keyword$.value, totalCount]);
+  const onJobClick = (job) => {
+    analytics.log({
+      event: "SEARCH_JOB_CLICK",
+      properties: {
+        job_id: job.id,
+        ...getSearchProperties()
+      }
+    });
+  };
+  const onPaginate = (page) => {
+    analytics.log({
+      event: "SEARCH_PAGINATE",
+      properties: {
+        page,
+        ...getSearchProperties()
+      }
+    });
+    console.log("onPaginate", page, getSearchProperties());
+  };
   return /* @__PURE__ */ u$2("div", { ref: appRef, class: className, id: JOB_SEARCH_SCOPE_ELEMENT_ID, children: /* @__PURE__ */ u$2("div", { class: "ijs-app bg-app rounded-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-4 md:grid md:grid-cols-3 md:px-4", children: [
     /* @__PURE__ */ u$2(ErrorBoundary, { Fallback: ErrorView, children: /* @__PURE__ */ u$2("div", { class: "flex flex-col gap-2", children: [
       params.enableKeywordSearch && /* @__PURE__ */ u$2(KeywordSearch, { onKeywordChange }),
@@ -5768,7 +5878,11 @@ const JobSearch = ({
         apiClient,
         jobCardConfig: params.jobCard,
         initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
-        analytics
+        onResultsUpdate: (data) => {
+          setTotalCount(data.totalCount);
+        },
+        onJobClick,
+        onPaginate
       },
       cacheKey({ filter: appliedFilters.filters, baseKey: "resultsSection", keyword: keyword$.value })
     ) }) }) })

package/dist/index.js

@@ -1561,7 +1561,7 @@ const getFilterValue = (filterValue) => {
     return null;
   return filterValue;
 };
-const filtersToPayload = (filters) => {
+const filtersToPayload$1 = (filters) => {
   return Object.fromEntries(
     Object.entries(filters).map(([key, filter]) => {
       return [key, getFilterValue(filter == null ? void 0 : filter.value)];
@@ -1578,7 +1578,7 @@ const getAvailableFilters = async ({
   try {
     const searchParams = new URLSearchParams(
       stringify({
-        filters: filtersToPayload(filters),
+        filters: filtersToPayload$1(filters),
         query: keyword
       })
     );
@@ -1607,7 +1607,7 @@ const getJobSearchResults = async ({
   try {
     const searchParams = new URLSearchParams(
       stringify({
-        filters: filtersToPayload(filters)
+        filters: filtersToPayload$1(filters)
       })
     );
     searchParams.set("page", page.toString());
@@ -2688,6 +2688,48 @@ const cacheKey = (value) => {
   ).join("&");
   return `${value.baseKey}::${filterString}::${value.keyword ?? ""}`;
 };
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = h$1(false);
+  y$1(() => {
+    if (typeof window === "undefined")
+      return;
+    const mediaQuery = window.matchMedia(query);
+    const updateMatches = () => setMatches(mediaQuery.matches);
+    updateMatches();
+    mediaQuery.addEventListener("change", updateMatches);
+    return () => mediaQuery.removeEventListener("change", updateMatches);
+  }, [query]);
+  return matches;
+};
+const useViewTracking = (elementRef, { minViewTime = 1e3, visibilityThreshold = 0, onView }) => {
+  const [viewed, setViewed] = h$1(false);
+  y$1(() => {
+    if (viewed)
+      return;
+    if (!elementRef.current)
+      return;
+    let timeout;
+    const observer = new IntersectionObserver(
+      (entries) => entries.forEach((entry) => {
+        clearTimeout(timeout);
+        if (entry.isIntersecting) {
+          timeout = setTimeout(() => {
+            setViewed(true);
+            onView();
+          }, minViewTime);
+        }
+      }),
+      {
+        threshold: visibilityThreshold
+      }
+    );
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, [elementRef, minViewTime, visibilityThreshold, onView, viewed]);
+};
 const jobSearch = "";
 const getFilterValues = (appliedFilters) => {
   const entries = Object.entries(appliedFilters).map(([key, value]) => {
@@ -4244,19 +4286,6 @@ const CurrentValueTag = ({ query, property, selectedValues }) => {
       exhaustive(query);
   }
 };
-const useMediaQuery = (query) => {
-  const [matches, setMatches] = h$1(false);
-  y$1(() => {
-    if (typeof window === "undefined")
-      return;
-    const mediaQuery = window.matchMedia(query);
-    const updateMatches = () => setMatches(mediaQuery.matches);
-    updateMatches();
-    mediaQuery.addEventListener("change", updateMatches);
-    return () => mediaQuery.removeEventListener("change", updateMatches);
-  }, [query]);
-  return matches;
-};
 const TAG_HEIGHT = 44;
 const LINE_COUNT = 6;
 const SUGGESTIONS_COUNT_THRESHOLD = 12;
@@ -5444,8 +5473,12 @@ const JobCardLogo = ({
 };
 const asArray = (value) => Array.isArray(value) ? value : [value];
 const ONE_DAY_MS = 1e3 * 60 * 60 * 24 * 7;
-const JobCard = ({ job, config }) => {
-  var _a, _b, _c, _d;
+const JobCard = ({
+  job,
+  config,
+  onJobClick
+}) => {
+  var _a, _b, _c;
   const subheading = config.subheading ? getDisplayableProperty({ job, property: config.subheading }) : null;
   const tags = config.infoTags.flatMap((infoTag) => asArray(getDisplayableProperty({ job, property: infoTag }))).filter(Boolean);
   const salary = asArray(
@@ -5455,11 +5488,16 @@ const JobCard = ({ job, config }) => {
   const href = ((_b = config.overrides) == null ? void 0 : _b.baseUrl) ? config.overrides.baseUrl(job.id.toString()) : job.href;
   const newUnderDays = config.newUnderDays ?? 7;
   const isNew = job.createdAt ? new Date(job.createdAt).getTime() > Date.now() - newUnderDays * ONE_DAY_MS : false;
+  const handleClick = (e2) => {
+    var _a2, _b2;
+    onJobClick == null ? void 0 : onJobClick(job);
+    (_b2 = (_a2 = config.overrides) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e2);
+  };
   return /* @__PURE__ */ u$2(
     "a",
     {
       onMouseEnter: (_c = config.overrides) == null ? void 0 : _c.onMouseEnter,
-      onClick: (_d = config.overrides) == null ? void 0 : _d.onClick,
+      onClick: handleClick,
       href,
       target: config.openJob === "redirect-new-tab" ? "_blank" : void 0,
       class: wrapperClass(),
@@ -5546,16 +5584,19 @@ const LoadMore = ({
   state,
   fetchNextPage,
   config,
-  analytics
+  remainingItems
 }) => {
+  const itemsToLoad = Math.min(PAGE_SIZE, remainingItems);
   if (state === "revalidating") {
     return /* @__PURE__ */ u$2("ul", { class: "flex flex-col gap-3", "aria-hidden": true, children: Array.from({ length: PAGE_SIZE }).map((_2, i2) => /* @__PURE__ */ u$2("li", { children: /* @__PURE__ */ u$2(JobCardSkeleton, { seed: i2, animationDelay: (i2 - 4) * 0.1, config }) }, i2)) });
   } else {
-    const handleClick = () => {
-      analytics.log({ event: "SEARCH_PAGINATE" });
-      fetchNextPage();
-    };
-    return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: handleClick, children: "Load More" });
+    return /* @__PURE__ */ u$2("button", { class: btnClass({ variant: "neutral", class: "py-2" }), onClick: fetchNextPage, children: [
+      "Load ",
+      itemsToLoad,
+      " more of ",
+      remainingItems,
+      " remaining"
+    ] });
   }
 };
 const getResultsCount = ({ pagination }) => {
@@ -5570,7 +5611,9 @@ const ResultsSection = ({
   logger,
   jobCardConfig,
   initialData,
-  analytics
+  onResultsUpdate,
+  onJobClick,
+  onPaginate
 }) => {
   const [page, setPage] = h$1(1);
   return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
@@ -5584,10 +5627,14 @@ const ResultsSection = ({
         page: index + 1,
         isFirst: index === 0,
         isLast,
-        fetchNextPage: () => setPage(page + 1),
+        fetchNextPage: () => {
+          setPage(page + 1);
+          onPaginate(page + 1);
+        },
         jobCardConfig,
         initialData,
-        analytics
+        onResultsUpdate,
+        onJobClick
       },
       index
     ) }, index);
@@ -5603,7 +5650,8 @@ const ResultsPage = ({
   fetchNextPage,
   jobCardConfig,
   initialData,
-  analytics
+  onResultsUpdate,
+  onJobClick
 }) => {
   const fallbackData = page === 1 ? initialData : void 0;
   const { keyword$ } = store;
@@ -5620,6 +5668,13 @@ const ResultsPage = ({
       { ...SWR_SETTINGS, fallbackData }
     )
   );
+  y$1(() => {
+    if (data && isFirst && onResultsUpdate) {
+      onResultsUpdate({
+        totalCount: data.pagination.total
+      });
+    }
+  }, [data, isFirst, onResultsUpdate]);
   switch (state) {
     case "loading":
       return /* @__PURE__ */ u$2(k$3, { children: [
@@ -5647,6 +5702,8 @@ const ResultsPage = ({
           ] })
         ] });
       const hasMore = data.pagination.last_page !== data.pagination.current_page;
+      const alreadyDisplayedItems = page * PAGE_SIZE;
+      const remainingItems = Math.max(data.pagination.total - alreadyDisplayedItems, 0);
       return /* @__PURE__ */ u$2(k$3, { children: [
         isFirst && /* @__PURE__ */ u$2("p", { class: "text-copy-neutral-lowcontrast text-style-tag m-0 p-0 text-center", children: getResultsCount({ pagination: data.pagination }) }),
         /* @__PURE__ */ u$2("ul", { "aria-label": `Page ${page}`, class: "flex flex-col gap-3", children: data.results.map((job) => {
@@ -5655,12 +5712,20 @@ const ResultsPage = ({
             {
               class: "ease-expo-out duration-slow transition-opacity",
               style: { opacity: state === "revalidating" ? 0.33 : 1 },
-              children: /* @__PURE__ */ u$2(JobCard, { job, config: jobCardConfig })
+              children: /* @__PURE__ */ u$2(JobCard, { job, onJobClick, config: jobCardConfig })
             },
             job.id
           );
         }) }),
-        hasMore && isLast && /* @__PURE__ */ u$2(LoadMore, { state, fetchNextPage, config: jobCardConfig, analytics })
+        hasMore && isLast && /* @__PURE__ */ u$2(
+          LoadMore,
+          {
+            state,
+            fetchNextPage,
+            config: jobCardConfig,
+            remainingItems
+          }
+        )
       ] });
     }
     default:
@@ -5692,6 +5757,17 @@ const getFilterDefaults = (properties, field = "value") => properties.reduce(
   },
   {}
 );
+const filtersToPayload = (filters) => {
+  return Object.fromEntries(
+    Object.entries(filters).map(([key, filter]) => {
+      const value = filter == null ? void 0 : filter.value;
+      return [
+        key,
+        Array.isArray(value) ? value : value ? [value] : []
+      ];
+    }).filter(([, value]) => value !== void 0 && value.length > 0)
+  );
+};
 const JobSearch = ({
   apiClient,
   logger,
@@ -5704,30 +5780,64 @@ const JobSearch = ({
   params
 }) => {
   const appRef = A$1(null);
+  const defaultFilters = getFilterDefaults(properties, "defaultValue");
   const [appliedFilters, setAppliedFilters] = h$1(() => ({
     default: true,
-    filters: getFilterDefaults(properties, "defaultValue")
+    filters: defaultFilters
   }));
+  const [totalCount, setTotalCount] = h$1(0);
   const { keyword$ } = store;
+  const defaultFiltersPayload = filtersToPayload(defaultFilters);
+  const currentFiltersPayload = filtersToPayload(appliedFilters.filters);
+  const getSearchProperties = q$1(
+    () => ({
+      query: keyword$.value || void 0,
+      filters: currentFiltersPayload,
+      default_filters: defaultFiltersPayload,
+      total_count: totalCount,
+      page_size: PAGE_SIZE
+    }),
+    [keyword$.value, currentFiltersPayload, defaultFiltersPayload, totalCount]
+  );
+  useViewTracking(appRef, {
+    minViewTime: 2e3,
+    onView: () => {
+      analytics.log({ event: "VIEW_SEARCH", properties: null });
+    }
+  });
   y$1(() => {
     const timer = window.setTimeout(() => {
-      console.log("settling");
-      const formattedFilters = filtersToPayload(appliedFilters.filters);
-      const hasInteracted = appliedFilters.default !== true;
-      if (!keyword$.value && !hasInteracted)
+      const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
+      if (shouldSkipAnalytics)
         return;
       analytics.log({
         event: "SEARCH_SETTLE",
-        properties: {
-          query: keyword$.value || void 0,
-          filters: hasInteracted ? formattedFilters : void 0
-        }
+        properties: getSearchProperties()
       });
     }, 5e3);
     return () => {
       clearTimeout(timer);
     };
-  }, [appliedFilters.filters, keyword$.value, analytics, appliedFilters.default]);
+  }, [analytics, appliedFilters.default, currentFiltersPayload, getSearchProperties, keyword$.value, totalCount]);
+  const onJobClick = (job) => {
+    analytics.log({
+      event: "SEARCH_JOB_CLICK",
+      properties: {
+        job_id: job.id,
+        ...getSearchProperties()
+      }
+    });
+  };
+  const onPaginate = (page) => {
+    analytics.log({
+      event: "SEARCH_PAGINATE",
+      properties: {
+        page,
+        ...getSearchProperties()
+      }
+    });
+    console.log("onPaginate", page, getSearchProperties());
+  };
   return /* @__PURE__ */ u$2("div", { ref: appRef, class: className, id: JOB_SEARCH_SCOPE_ELEMENT_ID, children: /* @__PURE__ */ u$2("div", { class: "ijs-app bg-app rounded-app font-family-default font-weight-default font-style-default mx-auto flex min-h-screen max-w-screen-lg flex-col gap-4 py-4 md:grid md:grid-cols-3 md:px-4", children: [
     /* @__PURE__ */ u$2(ErrorBoundary, { Fallback: ErrorView, children: /* @__PURE__ */ u$2("div", { class: "flex flex-col gap-2", children: [
       params.enableKeywordSearch && /* @__PURE__ */ u$2(KeywordSearch, { onKeywordChange }),
@@ -5766,7 +5876,11 @@ const JobSearch = ({
         apiClient,
         jobCardConfig: params.jobCard,
         initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
-        analytics
+        onResultsUpdate: (data) => {
+          setTotalCount(data.totalCount);
+        },
+        onJobClick,
+        onPaginate
       },
       cacheKey({ filter: appliedFilters.filters, baseKey: "resultsSection", keyword: keyword$.value })
     ) }) }) })