@igamingcareer/igaming-components 1.0.59 → 1.0.60

package/Readme.md

@@ -104,3 +104,35 @@ The library can hydrate elements that carry specific classes or data attributes.
 4. Use additional class hooks such as `.group-prices-component`, `.hero-component`, `.courses-component`, `.chatbot-component`, `.faq-component`, `.videos-component`, `.testimonials-component`, and `.sliding-summary-component` to hydrate the corresponding widgets. Pass data through `data-*` attributes as illustrated in `src/main.tsx`.
 
 This approach allows teams that are not using React to embed the library’s UI on any HTML page while still benefiting from the React components under the hood.
+
+## Interaction events (Listing, Courses, News)
+
+The Listing, IGamingCoursePage, and NewsPage components can now emit structured interaction events for analytics or logging. Supply an `onEmitEvent` callback and optional `eventContext` when you render the component (React or DOM embedding):
+
+```tsx
+import { Listing } from "@igamingcareer/igaming-components"
+import type { EmittedEvent } from "@igamingcareer/igaming-components"
+
+const handleEvent = (event: EmittedEvent) => {
+  console.log("component event", event)
+  // Forward to your analytics/datastore
+}
+
+<Listing
+  apiUrl="/api/jobs"
+  filterKeys={["company", "city"]}
+  cardType="job"
+  onEmitEvent={handleEvent}
+  eventContext={{ route: "/jobs", source: "listing" }}
+/>
+```
+
+All emitted events share the base shape `{ domain, name, payload, timestamp, context }` (see `src/types/events.ts`). Domain-specific unions live in `src/types/events.jobs.ts`, `src/types/events.courses.ts`, and `src/types/events.news.ts`.
+
+Key events include:
+
+- Jobs Listing: search submissions/removals, filter select/clear/all-clear, date changes, pagination, view mode, items per page, job open/save/apply, alerts/subscription steps.
+- Courses Listing: search submissions, filter changes/clear, category/subcategory selection, view mode, pagination, items per page, favorites, enroll/open clicks.
+- News Listing: search submissions/removals, filter select/clear/all-clear, date changes, category selection, pagination, view mode, items per page, article open/bookmark/share.
+
+When embedding via `renderMultiple` (see `src/main.tsx`), a global `window.IGC_EMIT_EVENT` handler will be passed automatically if present, along with a default context using the current route and optional `data-source` attribute.