@wix/patterns 1.324.0 → 1.325.0

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useIntersectionObserver(
+  callback: () => void,
+  threshold: number = 0.9,
+) {
+  const elementRef = useRef<HTMLElement | null>(null);
+  const [intersectionObserver] = useState(() => {
+    // in jsdom, IntersectionObserver is not implemeted
+    if (typeof IntersectionObserver === 'undefined') {
+      return null;
+    }
+
+    return new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          callback();
+          intersectionObserver?.disconnect();
+        }
+      },
+      {
+        threshold,
+      },
+    );
+  });
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element || !intersectionObserver) {
+      return;
+    }
+
+    intersectionObserver.observe(element);
+
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, []);
+
+  return {
+    elementRef,
+  };
+}

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader4131588040";
+var _namespace_ = "CollectionPageHeader736711144";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader4131588040__root"};
+export var classes = {"root":"CollectionPageHeader736711144__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/FormPage/FormPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader476015855";
+var _namespace_ = "FormPageHeader3304963303";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"FormPageHeader476015855__root"};
+export var classes = {"root":"FormPageHeader3304963303__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/Suggestions/SuggestionsBIReporter.ts

@@ -0,0 +1,44 @@
+import { ReportBI, WixPatternsContainerParams } from '@wix/bex-core';
+import { loadEnd, loadStart } from '@wix/bex-core/bi';
+import { reportEvent } from '@wix/bex-utils/@wix/ambassador-dealer-v1-offer-event/http';
+import { EventType } from '@wix/bex-utils/@wix/ambassador-dealer-v1-offer-event/types';
+
+export interface SuggestionsBIReporterParams {
+  reportBI: ReportBI;
+  realEstateId: string;
+  httpClient: WixPatternsContainerParams['httpClient'];
+}
+
+export class SuggestionsBIReporter {
+  readonly reportBI: ReportBI;
+  readonly httpClient: WixPatternsContainerParams['httpClient'];
+  readonly realEstateId: string;
+
+  constructor(params: SuggestionsBIReporterParams) {
+    this.reportBI = params.reportBI;
+    this.realEstateId = params.realEstateId;
+    this.httpClient = params.httpClient;
+  }
+
+  loadStart() {
+    this.reportBI(loadStart({}));
+  }
+
+  loadEnd(startTime: DOMHighResTimeStamp) {
+    this.reportBI(
+      loadEnd({ loadingTime: Math.round(performance.now() - startTime) }),
+    );
+  }
+
+  reportOfferViewed(offerId: string) {
+    this.httpClient.request(
+      reportEvent({
+        event: {
+          type: EventType.VIEW,
+          offerId,
+          realEstateId: this.realEstateId,
+        },
+      }),
+    );
+  }
+}

package/src/state/Suggestions/SuggestionsState.ts

@@ -1,21 +1,42 @@
 import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
 import { listOffers } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/http';
 import { computed, makeObservable } from 'mobx';
-import { TaskState, WixPatternsContainerParams } from '@wix/bex-core';
+import {
+  ReportBI,
+  TaskState,
+  WixPatternsContainer,
+  WixPatternsContainerParams,
+} from '@wix/bex-core';
+import { SuggestionsBIReporter } from './SuggestionsBIReporter';
 
 export interface SuggestionsStateParams {
   placementId: string;
-  httpClient: WixPatternsContainerParams['httpClient'];
+  container: WixPatternsContainer;
 }
 
 export class SuggestionsState {
   readonly placementId: string;
-  readonly httpClient: WixPatternsContainerParams['httpClient'];
+  readonly container: WixPatternsContainer;
   readonly fetchOffersTask = new TaskState<Offer[]>();
+  readonly reportBI: ReportBI;
+
+  readonly bi: SuggestionsBIReporter;
+  readonly httpClient: WixPatternsContainerParams['httpClient'];
 
   constructor(params: SuggestionsStateParams) {
     this.placementId = params.placementId;
-    this.httpClient = params.httpClient;
+    this.container = params.container;
+    this.httpClient = this.container.httpClient;
+    this.reportBI = this.container.createBILogger({
+      componentType: 'suggestionsWidget',
+      route: window.location.pathname,
+    });
+
+    this.bi = new SuggestionsBIReporter({
+      reportBI: this.reportBI,
+      realEstateId: this.placementId,
+      httpClient: this.httpClient,
+    });
 
     makeObservable(this, {
       offers: computed,
@@ -25,7 +46,15 @@ export class SuggestionsState {
   }
 
   init = () => {
-    this.fetchOffersTask.runOnce(this._fetchOffers);
+    const startTime = performance.now();
+
+    this.bi.loadStart();
+
+    this.fetchOffersTask.runOnce(async () => {
+      const offers = await this._fetchOffers();
+      this.bi.loadEnd(startTime);
+      return offers;
+    });
   };
 
   private _fetchOffers = async () => {
@@ -50,4 +79,8 @@ export class SuggestionsState {
   get hasOffers() {
     return this.offers.length > 0;
   }
+
+  onOfferViewed(offerId: string) {
+    this.bi.reportOfferViewed(offerId);
+  }
 }

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2170180015__root.CardContainer2170180015--mobile{border-radius:0}.Collapse2302586638__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2302586638__exit{height:0}.CollectionPage462372587__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage462372587__root.CollectionPage462372587--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage462372587__root.CollectionPage462372587--panel{overflow:hidden;position:relative}.CollectionTable764384252__root td{vertical-align:middle}.CollectionTable764384252__root.CollectionTable764384252--mobile td:first-child{padding-left:18px}.CollectionTable764384252__root.CollectionTable764384252--mobile td:last-child{padding-right:18px}.CollectionToolbar1427703721__left{min-width:0}.CollectionToolbar1427703721__root.CollectionToolbar1427703721--views .CollectionToolbar1427703721__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1427703721__left.CollectionToolbar1427703721--expandable{flex:auto}.CollectionToolbar1427703721__root .CollectionToolbar1427703721__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1427703721__root.CollectionToolbar1427703721--views .CollectionToolbar1427703721__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1427703721__root .CollectionToolbar1427703721__right.CollectionToolbar1427703721__fullWidth{margin-inline-start:0!important}.CollectionToolbar1427703721__root.CollectionToolbar1427703721--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3667856890__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3667856890__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter3667856890__searchMobile:not(.SearchOrCustomFilter3667856890--expandable){left:18px}.SearchOrCustomFilter3667856890__searchMobile.SearchOrCustomFilter3667856890--expandable.SearchOrCustomFilter3667856890--expanded{left:18px}.AutoCompleteReadonly3174350507__root.AutoCompleteReadonly3174350507--disableEditing{cursor:pointer}.AutoCompleteReadonly3174350507__root.AutoCompleteReadonly3174350507--disableEditing input{cursor:pointer}.ViewsDropdown3394695892__root{width:200px}.DragHandle1654597455__root{display:flex;align-items:center}.DragHandle1654597455__root:not(.DragHandle1654597455--disabled){cursor:grab;color:#a8caff}.DragHandle1654597455__root.DragHandle1654597455--disabled{color:#acafc4}.DragHandle1654597455__root:focus-visible:not(.DragHandle1654597455--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1654597455__root.DragHandle1654597455--disabled{pointer-events:none}.DragHandle1654597455__root.DragHandle1654597455--dragging:not(.DragHandle1654597455--disabled){cursor:grabbing}.EntityPagePlain3313101122__root.EntityPagePlain3313101122--mobile{--wds-page-header-padding-horizontal:0}.Fade940409182__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade940409182__root.Fade940409182--exit{opacity:0}.Heading3697161820__root{visibility:visible}.Heading3697161820__root.Heading3697161820--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2254481690__root.InputOverflow2254481690--selected:not(.InputOverflow2254481690--focused) input::placeholder{color:#000624}@keyframes LoadingRow697099013__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow697099013__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow697099013__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1628925456__root{opacity:1}.MaxHeightText1628925456__root.MaxHeightText1628925456--height24{line-height:24px}.MaxLines3474561681__root{overflow:hidden}.MaxLines3474561681__root.MaxLines3474561681--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar68419382__root{min-width:0}.MultiBulkActionToolbar68419382__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar68419382__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar68419382__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2489859390__root td{padding:0!important;width:100%}.NestedTableRow3970235073__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3970235073__root:hover{background-color:#e7f0ff!important}.NestedTableRow3970235073__root.NestedTableRow3970235073--expandable{cursor:pointer}.NestedTableRow3970235073__placeholder td{padding:0!important;width:100%}.NestedTableRow3970235073__root:hover td:first-of-type::before,.NestedTableRow3970235073__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2349309335__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow737617853__root.NestedTableDragAndDropRow737617853--draggingInto td{background-color:#e7f0ff!important}.PickerContent2017000944__root{display:flex}.PickerContentAdditionalStep21172298__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep21172298__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3587473997__root{box-sizing:border-box}.ScrollableContent585524193__root.ScrollableContent585524193--overflowY{overflow-y:auto}.ScrollableContent585524193__root.ScrollableContent585524193--overflowX{overflow-x:auto}.ScrollableContent585524193__root.ScrollableContent585524193--smooth{scroll-behavior:smooth}.SkeletonCard2899189437__headerLoading{display:block!important}.SlidingModal2850069453__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2850069453__root.SlidingModal2850069453--overlay{transition:transform 0s ease 0s}.SlidingModal2850069453__root.SlidingModal2850069453---appendTo-6-parent{position:absolute}.SlidingModal2850069453__root:not(.SlidingModal2850069453--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1535445293__root .TabsFilter1535445293__title{color:inherit!important}.ManageTagsModal3898350931__root{display:flex}.ToolbarItem3741416254__root{min-width:0}.ToolbarItemBox3494125805__root{min-width:0}.ToolbarItemBox3494125805__root.ToolbarItemBox3494125805--removeStartPadding{margin-left:-24px}.ToolbarItemBox3494125805__root.ToolbarItemBox3494125805--expandable{flex:1 0}.common1732706577__column{display:flex;flex-direction:column}.common1732706577__fullHeight{height:100%;min-height:0}.CollectionPageHeader4131588040__root.CollectionPageHeader4131588040--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader4131588040__root.CollectionPageHeader4131588040--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader476015855__root.FormPageHeader476015855--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader476015855__root.FormPageHeader476015855--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer312641811__root.CardContainer312641811--mobile{border-radius:0}.Collapse635544407__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse635544407__exit{height:0}.CollectionPage3558163292__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3558163292__root.CollectionPage3558163292--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3558163292__root.CollectionPage3558163292--panel{overflow:hidden;position:relative}.CollectionTable967591821__root td{vertical-align:middle}.CollectionTable967591821__root.CollectionTable967591821--mobile td:first-child{padding-left:18px}.CollectionTable967591821__root.CollectionTable967591821--mobile td:last-child{padding-right:18px}.CollectionToolbar2765748828__left{min-width:0}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--views .CollectionToolbar2765748828__left{flex-shrink:1;flex-grow:0}.CollectionToolbar2765748828__left.CollectionToolbar2765748828--expandable{flex:auto}.CollectionToolbar2765748828__root .CollectionToolbar2765748828__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--views .CollectionToolbar2765748828__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2765748828__root .CollectionToolbar2765748828__right.CollectionToolbar2765748828__fullWidth{margin-inline-start:0!important}.CollectionToolbar2765748828__root.CollectionToolbar2765748828--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter676053826__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter676053826__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter676053826__searchMobile:not(.SearchOrCustomFilter676053826--expandable){left:18px}.SearchOrCustomFilter676053826__searchMobile.SearchOrCustomFilter676053826--expandable.SearchOrCustomFilter676053826--expanded{left:18px}.AutoCompleteReadonly2136975089__root.AutoCompleteReadonly2136975089--disableEditing{cursor:pointer}.AutoCompleteReadonly2136975089__root.AutoCompleteReadonly2136975089--disableEditing input{cursor:pointer}.ViewsDropdown1562602937__root{width:200px}.DragHandle1680406004__root{display:flex;align-items:center}.DragHandle1680406004__root:not(.DragHandle1680406004--disabled){cursor:grab;color:#a8caff}.DragHandle1680406004__root.DragHandle1680406004--disabled{color:#acafc4}.DragHandle1680406004__root:focus-visible:not(.DragHandle1680406004--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1680406004__root.DragHandle1680406004--disabled{pointer-events:none}.DragHandle1680406004__root.DragHandle1680406004--dragging:not(.DragHandle1680406004--disabled){cursor:grabbing}.EntityPagePlain2129186045__root.EntityPagePlain2129186045--mobile{--wds-page-header-padding-horizontal:0}.Fade2580742614__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2580742614__root.Fade2580742614--exit{opacity:0}.Heading1552734931__root{visibility:visible}.Heading1552734931__root.Heading1552734931--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1980064947__root.InputOverflow1980064947--selected:not(.InputOverflow1980064947--focused) input::placeholder{color:#000624}@keyframes LoadingRow72311180__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow72311180__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow72311180__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2940241560__root{opacity:1}.MaxHeightText2940241560__root.MaxHeightText2940241560--height24{line-height:24px}.MaxLines1993089027__root{overflow:hidden}.MaxLines1993089027__root.MaxLines1993089027--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3117766984__root{min-width:0}.MultiBulkActionToolbar3117766984__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3117766984__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3117766984__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow634506500__root td{padding:0!important;width:100%}.NestedTableRow3595325079__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3595325079__root:hover{background-color:#e7f0ff!important}.NestedTableRow3595325079__root.NestedTableRow3595325079--expandable{cursor:pointer}.NestedTableRow3595325079__placeholder td{padding:0!important;width:100%}.NestedTableRow3595325079__root:hover td:first-of-type::before,.NestedTableRow3595325079__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect3760073984__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow2976497727__root.NestedTableDragAndDropRow2976497727--draggingInto td{background-color:#e7f0ff!important}.PickerContent3108120277__root{display:flex}.PickerContentAdditionalStep4199282124__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep4199282124__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2983769481__root{box-sizing:border-box}.ScrollableContent980648129__root.ScrollableContent980648129--overflowY{overflow-y:auto}.ScrollableContent980648129__root.ScrollableContent980648129--overflowX{overflow-x:auto}.ScrollableContent980648129__root.ScrollableContent980648129--smooth{scroll-behavior:smooth}.SkeletonCard1226407146__headerLoading{display:block!important}.SlidingModal3040154923__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3040154923__root.SlidingModal3040154923--overlay{transition:transform 0s ease 0s}.SlidingModal3040154923__root.SlidingModal3040154923---appendTo-6-parent{position:absolute}.SlidingModal3040154923__root:not(.SlidingModal3040154923--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter494994749__root .TabsFilter494994749__title{color:inherit!important}.ManageTagsModal2750172858__root{display:flex}.ToolbarItem2717057697__root{min-width:0}.ToolbarItemBox4200702974__root{min-width:0}.ToolbarItemBox4200702974__root.ToolbarItemBox4200702974--removeStartPadding{margin-left:-24px}.ToolbarItemBox4200702974__root.ToolbarItemBox4200702974--expandable{flex:1 0}.common1210614291__column{display:flex;flex-direction:column}.common1210614291__fullHeight{height:100%;min-height:0}.CollectionPageHeader736711144__root.CollectionPageHeader736711144--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader736711144__root.CollectionPageHeader736711144--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3304963303__root.FormPageHeader3304963303--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3304963303__root.FormPageHeader3304963303--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/test-utils/DealerBIMock.ts

@@ -0,0 +1,123 @@
+/**
+ * Testkit for testing dealer BI events.
+ *
+ * Provides a singleton-style API similar to biTestkit from @wix/bex-core/bi/testkit.
+ * Captures dealer reportEvent HTTP calls and provides utilities to assert on events.
+ *
+ * @example
+ * ```typescript
+ * import dealerBITestkit from '../test-utils/DealerBIMock';
+ *
+ * describe('MyComponent', () => {
+ *   const setup = () => {
+ *     const driver = new MyDriver({
+ *       httpMocks: [
+ *         // ... other mocks
+ *         dealerBITestkit.httpMock,
+ *       ],
+ *     });
+ *     return { driver };
+ *   };
+ *
+ *   it('sends view event', async () => {
+ *     setup();
+ *     // ... trigger the view event
+ *
+ *     expect(dealerBITestkit.view.last()).toEqual(
+ *       expect.objectContaining({
+ *         offerId: 'offer-1',
+ *       }),
+ *     );
+ *   });
+ * });
+ * ```
+ */
+
+import { whenRequest } from '@wix/yoshi-flow-bm/testkit/http-client';
+import { reportEvent } from '@wix/bex-utils/@wix/ambassador-dealer-v1-offer-event/http';
+import type { AnyScenario } from '@wix/http-client-testkit';
+
+// Re-export EventType for convenience
+export { EventType } from '@wix/bex-utils/@wix/ambassador-dealer-v1-offer-event/types';
+
+interface ReportEventData {
+  event?: {
+    type?: string;
+    offerId?: string;
+    realEstateId?: string;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+interface EventTypeAccessor {
+  /** Get all events of this type */
+  all: () => ReportEventData[];
+  /** Get the last event of this type */
+  last: () => ReportEventData | undefined;
+  /** Get event count of this type */
+  count: () => number;
+}
+
+interface DealerBITestkit {
+  /** The HTTP mock - add this to your driver's httpMocks array */
+  httpMock: AnyScenario;
+
+  /** Access VIEW events */
+  view: EventTypeAccessor;
+  /** Access CLICK events */
+  click: EventTypeAccessor;
+
+  /** Get all captured events (any type) */
+  all: () => ReportEventData[];
+  /** Get the last captured event (any type) */
+  last: () => ReportEventData | undefined;
+  /** Clear all captured events - call in beforeEach for test isolation */
+  clear: () => void;
+}
+
+// Singleton spy to capture all events
+const eventsSpy = jest.fn();
+
+// Create HTTP mock once
+const httpMock = whenRequest(reportEvent)
+  .reply(async (data) => {
+    eventsSpy(data);
+    return { status: 200, data: {} };
+  })
+  .persist() as AnyScenario;
+
+const _getAllEventsOfType = (type?: string): ReportEventData[] =>
+  type
+    ? eventsSpy.mock.calls
+        .filter((call) => call[0]?.event?.type === type)
+        .map((call) => call[0])
+    : eventsSpy.mock.calls.map((call) => call[0]);
+
+const createEventTypeAccessor = (type: string): EventTypeAccessor => ({
+  all: () => _getAllEventsOfType(type),
+  last: () => {
+    const events = _getAllEventsOfType(type);
+    return events.length > 0 ? events[events.length - 1] : undefined;
+  },
+  count: () => _getAllEventsOfType(type).length,
+});
+
+const dealerBITestkit: DealerBITestkit = {
+  httpMock,
+
+  view: createEventTypeAccessor('VIEW'),
+  click: createEventTypeAccessor('CLICK'),
+
+  all: _getAllEventsOfType,
+  last: () => {
+    const events = _getAllEventsOfType();
+    return events.length > 0 ? events[events.length - 1] : undefined;
+  },
+  clear: () => eventsSpy.mockClear(),
+};
+
+export default dealerBITestkit;
+
+// Also export named for flexibility
+export { dealerBITestkit };

package/src/test-utils/IntersectionObserverMock.ts

@@ -0,0 +1,155 @@
+/**
+ * Mock implementation of IntersectionObserver for jsdom testing environment.
+ *
+ * jsdom does not implement IntersectionObserver, so this mock allows testing
+ * components that rely on intersection detection (e.g., lazy loading, view tracking).
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   setupIntersectionObserverMock,
+ *   teardownIntersectionObserverMock,
+ *   resetIntersectionObserverMock,
+ *   triggerIntersection,
+ *   triggerAllIntersections,
+ * } from '../test-utils/IntersectionObserverMock';
+ *
+ * describe('MyComponent', () => {
+ *   beforeAll(() => {
+ *     setupIntersectionObserverMock();
+ *   });
+ *
+ *   afterAll(() => {
+ *     teardownIntersectionObserverMock();
+ *   });
+ *
+ *   beforeEach(() => {
+ *     resetIntersectionObserverMock();
+ *   });
+ *
+ *   it('tracks element visibility', async () => {
+ *     render(<MyComponent />);
+ *     const element = screen.getByTestId('tracked-element');
+ *
+ *     triggerIntersection(element);
+ *
+ *     expect(onVisibleSpy).toHaveBeenCalled();
+ *   });
+ * });
+ * ```
+ */
+
+// Track all observer instances so we can trigger intersections on any of them
+const observerInstances: Set<MockIntersectionObserverInstance> = new Set();
+
+class MockIntersectionObserverInstance implements IntersectionObserver {
+  root: Element | Document | null = null;
+  rootMargin: string = '';
+  thresholds: readonly number[] = [];
+
+  private callback: IntersectionObserverCallback;
+  private observedElements: Set<Element> = new Set();
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+    observerInstances.add(this);
+  }
+
+  observe(target: Element) {
+    this.observedElements.add(target);
+  }
+
+  unobserve(target: Element) {
+    this.observedElements.delete(target);
+  }
+
+  disconnect() {
+    this.observedElements.clear();
+    observerInstances.delete(this);
+  }
+
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+
+  /**
+   * Test helper: trigger intersection for a specific element on this observer.
+   * Calls the observer callback with isIntersecting: true for the given element.
+   */
+  triggerIntersection(element: Element) {
+    if (!this.observedElements.has(element)) {
+      return;
+    }
+
+    const entry = {
+      target: element,
+      isIntersecting: true,
+      intersectionRatio: 1,
+      boundingClientRect: element.getBoundingClientRect(),
+      intersectionRect: element.getBoundingClientRect(),
+      rootBounds: null,
+      time: Date.now(),
+    } as IntersectionObserverEntry;
+
+    this.callback([entry], this);
+  }
+
+  /**
+   * Test helper: trigger intersection for all observed elements on this observer.
+   */
+  triggerAllIntersections() {
+    this.observedElements.forEach((element) =>
+      this.triggerIntersection(element),
+    );
+  }
+}
+
+/**
+ * Trigger intersection for a specific element across all observer instances.
+ * Use this when you know which element you want to mark as visible.
+ */
+export const triggerIntersection = (element: Element) => {
+  observerInstances.forEach((observer) =>
+    observer.triggerIntersection(element),
+  );
+};
+
+/**
+ * Trigger intersection for all observed elements across all observer instances.
+ * Use this to simulate all tracked elements becoming visible at once.
+ */
+export const triggerAllIntersections = () => {
+  observerInstances.forEach((observer) => observer.triggerAllIntersections());
+};
+
+/**
+ * Set up the IntersectionObserver mock on the global object.
+ * Call this in beforeAll() before your tests run.
+ */
+export const setupIntersectionObserverMock = () => {
+  observerInstances.clear();
+  global.IntersectionObserver = MockIntersectionObserverInstance;
+};
+
+/**
+ * Tear down the IntersectionObserver mock from the global object.
+ * Call this in afterAll() after your tests complete.
+ */
+export const teardownIntersectionObserverMock = () => {
+  observerInstances.clear();
+  delete (global as any).IntersectionObserver;
+};
+
+/**
+ * Reset all observer instances between tests.
+ * Call this in beforeEach() to ensure test isolation.
+ */
+export const resetIntersectionObserverMock = () => {
+  observerInstances.clear();
+};
+
+/**
+ * Get all currently active observer instances.
+ * Useful for debugging or advanced test scenarios.
+ */
+export const getObserverInstances = () => observerInstances;

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.324.0';
+export const version = 'patterns@1.325.0';