@inploi/plugin-job-search 0.22.2 → 0.23.1

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(),
@@ -5566,7 +5604,10 @@ const ResultsSection = ({
   apiClient,
   logger,
   jobCardConfig,
-  initialData
+  initialData,
+  onResultsUpdate,
+  onJobClick,
+  onPaginate
 }) => {
   const [page, setPage] = h$1(1);
   return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
@@ -5580,9 +5621,14 @@ const ResultsSection = ({
         page: index + 1,
         isFirst: index === 0,
         isLast,
-        fetchNextPage: () => setPage(page + 1),
+        fetchNextPage: () => {
+          setPage(page + 1);
+          onPaginate(page + 1);
+        },
         jobCardConfig,
-        initialData
+        initialData,
+        onResultsUpdate,
+        onJobClick
       },
       index
     ) }, index);
@@ -5597,7 +5643,9 @@ const ResultsPage = ({
   isLast,
   fetchNextPage,
   jobCardConfig,
-  initialData
+  initialData,
+  onResultsUpdate,
+  onJobClick
 }) => {
   const fallbackData = page === 1 ? initialData : void 0;
   const { keyword$ } = store;
@@ -5614,6 +5662,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,7 +5704,7 @@ 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
           );
@@ -5686,6 +5741,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,
@@ -5698,11 +5764,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(() => {
+      const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
+      if (shouldSkipAnalytics)
+        return;
+      analytics.log({
+        event: "SEARCH_SETTLE",
+        properties: getSearchProperties()
+      });
+    }, 5e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [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 }),
@@ -5740,7 +5859,12 @@ const JobSearch = ({
         logger,
         apiClient,
         jobCardConfig: params.jobCard,
-        initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0
+        initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
+        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(),
@@ -5564,7 +5602,10 @@ const ResultsSection = ({
   apiClient,
   logger,
   jobCardConfig,
-  initialData
+  initialData,
+  onResultsUpdate,
+  onJobClick,
+  onPaginate
 }) => {
   const [page, setPage] = h$1(1);
   return /* @__PURE__ */ u$2(k$3, { children: Array.from({ length: page }).map((_2, index) => {
@@ -5578,9 +5619,14 @@ const ResultsSection = ({
         page: index + 1,
         isFirst: index === 0,
         isLast,
-        fetchNextPage: () => setPage(page + 1),
+        fetchNextPage: () => {
+          setPage(page + 1);
+          onPaginate(page + 1);
+        },
         jobCardConfig,
-        initialData
+        initialData,
+        onResultsUpdate,
+        onJobClick
       },
       index
     ) }, index);
@@ -5595,7 +5641,9 @@ const ResultsPage = ({
   isLast,
   fetchNextPage,
   jobCardConfig,
-  initialData
+  initialData,
+  onResultsUpdate,
+  onJobClick
 }) => {
   const fallbackData = page === 1 ? initialData : void 0;
   const { keyword$ } = store;
@@ -5612,6 +5660,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,7 +5702,7 @@ 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
           );
@@ -5684,6 +5739,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,
@@ -5696,11 +5762,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(() => {
+      const shouldSkipAnalytics = appliedFilters.default === true && !keyword$.value || !keyword$.value && !Object.keys(currentFiltersPayload).length || totalCount === 0;
+      if (shouldSkipAnalytics)
+        return;
+      analytics.log({
+        event: "SEARCH_SETTLE",
+        properties: getSearchProperties()
+      });
+    }, 5e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [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 }),
@@ -5738,7 +5857,12 @@ const JobSearch = ({
         logger,
         apiClient,
         jobCardConfig: params.jobCard,
-        initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0
+        initialData: appliedFilters.default ? initialData == null ? void 0 : initialData.jobs : void 0,
+        onResultsUpdate: (data) => {
+          setTotalCount(data.totalCount);
+        },
+        onJobClick,
+        onPaginate
       },
       cacheKey({ filter: appliedFilters.filters, baseKey: "resultsSection", keyword: keyword$.value })
     ) }) }) })

package/dist/job-search.api.d.ts

@@ -275,6 +275,8 @@ declare const JobSearchResponseSchema: import('valibot').SchemaWithTransform<imp
 }>;
 export type JobSearchResponsePayloadInput = Input<typeof JobSearchResponseSchema>;
 export type JobSearchResponsePayloadOutput = Output<typeof JobSearchResponseSchema>;
+export declare const getFilterValue: (filterValue: string | string[] | undefined) => string | string[] | null;
+export declare const filtersToPayload: (filters: Record<string, FilterValue | undefined>) => Record<string, string | string[] | null>;
 export declare const getAvailableFilters: ({ apiClient, filters, keyword, logger, signal, }: {
     apiClient: ApiClient;
     logger: Logger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-job-search",
-  "version": "0.22.2",
+  "version": "0.23.1",
   "type": "module",
   "main": "dist/plugin-job-search.js",
   "types": "dist/index.d.ts",
@@ -56,7 +56,7 @@
     "@inploi/core": "1.14.3",
     "@inploi/design-tokens": "0.2.1",
     "@inploi/plugin-job-alerts": "0.3.0",
-    "@inploi/sdk": "1.14.4",
+    "@inploi/sdk": "1.14.5",
     "eslint-config-custom": "0.1.0"
   },
   "msw": {