vviinn-widgets 2.3.1 → 2.4.2

package/dist/collection/components/vviinn-example-images/vviinn-example-images.js

@@ -16,13 +16,13 @@ export class VviinnExampleImages {
         h("h3", null, "Mit den Beispielbildern die Suche direkt ausprobieren")),
       h("div", { class: "images" },
         h("slot", { name: "vviinn-example-images-1" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=" })),
         h("slot", { name: "vviinn-example-images-2" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-3" },
-          h("vviinn-example-image", { width: 240, height: 240, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
+          h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=" })),
         h("slot", { name: "vviinn-example-images-4" },
-          h("vviinn-example-image", { width: 240, height: 320, src: "https://cdn.vviinn.com/0/fit/240/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
+          h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=" })))));
   }
   static get is() { return "vviinn-example-images"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop } from "@stencil/core";
+import { Component, Host, h, State, Prop, Event } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { foldValueObject } from "../../../network/ion/ValueObject";
@@ -25,6 +25,7 @@ export class VviinnDetectedObject {
       imageSearchState.searchArea = O.some(scaledRect);
     }));
     makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
   }
   isActive() {
     if (!this.detectedObject)
@@ -80,4 +81,20 @@ export class VviinnDetectedObject {
   static get states() { return {
     "position": {}
   }; }
+  static get events() { return [{
+      "method": "detectedObjectClicked",
+      "name": "detectedObjectClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -28,22 +28,31 @@ export class VviinnProductCard {
     this.pricePrefix = undefined;
     this.responsive = false;
     this.dimmedBackground = false;
+    /** @internal */
+    this.index = 0;
     this.imageLoaded = false;
+    this.productData = null;
     this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
   }
+  connectedCallback() {
+    this.productData = {
+      product: this.productId,
+      rank: this.index
+    };
+  }
   intersectionCallback(data) {
     if (data.some((entry) => entry.isIntersecting)) {
       pipe(getAnalyticsModule, O.map((analytics) => analytics.sendImpression(this.getProduct())));
-      this.recommendationView.emit(this.productId);
+      this.recommendationView.emit(this.productData);
       this.intersectionObserver.disconnect();
     }
   }
   componentDidLoad() {
-    this.recommendationLoad.emit(this.productId);
+    this.recommendationLoad.emit(this.productData);
     this.intersectionObserver.observe(this.el);
     const links = this.el.shadowRoot.querySelectorAll("a");
     links.forEach((link) => link.addEventListener("mousedown", (event) => {
-      this.recommendationClick.emit(this.productId);
+      this.recommendationClick.emit(this.productData);
       if (window.ga) {
         event.preventDefault();
       }
@@ -355,6 +364,27 @@ export class VviinnProductCard {
       "attribute": "dimmed-background",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "index",
+      "reflect": false,
+      "defaultValue": "0"
     }
   }; }
   static get states() { return {
@@ -371,9 +401,14 @@ export class VviinnProductCard {
         "text": "Event fires ones when recommendation rendered on page"
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
       }
     }, {
       "method": "recommendationView",
@@ -386,9 +421,14 @@ export class VviinnProductCard {
         "text": "Event fires ones when recommendation appears on the viewport"
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
       }
     }, {
       "method": "recommendationClick",
@@ -401,9 +441,14 @@ export class VviinnProductCard {
         "text": "Event fires ones when user click on deeplink"
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "ProductCardEventData",
+        "resolved": "{ product: string; rank: number; }",
+        "references": {
+          "ProductCardEventData": {
+            "location": "import",
+            "path": "../../recommendation/events"
+          }
+        }
       }
     }, {
       "method": "productImageLoaded",

package/dist/collection/components/vviinn-vpr-widget/stories/args.js

@@ -1,5 +1,5 @@
 export const apiPath = {
-  name: "Api Path",
+  name: "api-path",
   control: {
     type: "text",
   },
@@ -8,19 +8,19 @@ export const apiPath = {
   },
 };
 const token = {
-  name: "Token",
+  name: "token",
   control: {
     type: "text",
   },
 };
 const productId = {
-  name: "Product ID",
+  name: "product-id",
   control: {
     type: "text",
   },
 };
 const cssUrl = {
-  name: "CSS URL",
+  name: "css-url",
   description: "Optional for custom CSS.  It will overwrite all other settings.",
   control: {
     type: "text",
@@ -36,7 +36,7 @@ const analyticsId = {
   required: false,
 };
 export const campaignType = {
-  name: "Campaign type",
+  name: "campaign-type",
   control: {
     type: "select",
     labels: {
@@ -57,7 +57,7 @@ const showTitle = {
   required: false,
 };
 const titleName = {
-  name: "Section title name",
+  name: "block-title",
   control: {
     type: "text",
   },
@@ -74,7 +74,7 @@ const titleFontSize = {
   required: false,
 };
 const showScrollbars = {
-  name: "Use default scrollbar / pagination",
+  name: "show-scroll",
   description: "Add browser default horizontal scroll bar (in continuity mode) or pagination bullets (in grid mode) to add extra cue for users ",
   control: {
     type: "boolean",
@@ -82,7 +82,7 @@ const showScrollbars = {
   required: false,
 };
 const imageWidth = {
-  name: "Image Width (px)",
+  name: "image-width",
   control: {
     type: "number",
   },

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js

@@ -1,12 +1,15 @@
-import { Component, Host, h, Prop, State, Element, Watch, Event, Listen } from "@stencil/core";
+import { Component, Host, h, Prop, State, Element, Watch, Event, Listen, } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import * as TE from "fp-ts/lib/TaskEither";
 import * as E from "fp-ts/lib/Either";
 import { createBearAuthedHeader } from "./token-helpers";
-import state from "../../store/store";
+import { state } from "../../store/store";
 import { getRecommendationsService } from "../../campaign/CampaignService";
 import { imageSearchState } from "../../store/imageSearch.store";
 import { Subject } from "rxjs";
+import { v4 as uuidv4 } from "uuid";
+import { createTrackingApi } from "../../openApi";
+import { createProductViewVprEvent, createWidgetVprEvent, } from "../../tracking";
 /**
  * @part product-card - product card itself
  * @part title - title inside product card
@@ -58,13 +61,35 @@ export class VviinnVprWidget {
     state.apiPath = newPath;
     this.getRecommendations();
   }
-  lol({ detail }) {
+  handleImageLoading({ detail }) {
     this.productImageLoadedSubject.next(detail);
   }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent);
+  }
   connectedCallback() {
     state.apiPath = this.apiPath;
     state.currencySign = this.currencySign;
     state.locale = this.locale;
+    this.uiSessionId = uuidv4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVprEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetCloseEvent = createWidgetVprEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetCloseEvent);
   }
   async componentWillLoad() {
     state.pricePrefix = this.pricePrefix;
@@ -88,10 +113,9 @@ export class VviinnVprWidget {
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
     imageSearchState.results = this.recommendations;
     this.loaded = true;
-    //this.recommendationsLoaded.emit();
-    this.productIds = this.recommendations.map(r => r.productId);
+    this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
-      this.productIds = this.productIds.filter(x => x !== id);
+      this.productIds = this.productIds.filter((x) => x !== id);
       if (this.productIds.length === 0) {
         this.recommendationsLoaded.emit();
       }
@@ -114,14 +138,14 @@ export class VviinnVprWidget {
       h("h2", { part: "recommendations-title" }, this.blockTitle),
       this.useCarousel ? this.renderCarousel() : this.renderResults()));
   }
-  renderRecommendation(recommendation) {
-    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard() }));
+  renderRecommendation(recommendation, index) {
+    return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.mode === "grid", dimmedBackground: this.useDimmedBackgroundInCard(), index: index }));
   }
   useDimmedBackgroundInCard() {
     return this.mode === "continuity" || !this.useCarousel;
   }
   renderResults() {
-    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r) => this.renderRecommendation(r))));
+    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
   }
   renderCarousel() {
     return (h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
@@ -434,7 +458,19 @@ export class VviinnVprWidget {
     }]; }
   static get listeners() { return [{
       "name": "productImageLoaded",
-      "method": "lol",
+      "method": "handleImageLoading",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "recommendationView",
+      "method": "trackRecommendationView",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "recommendationClick",
+      "method": "trackRecommendationClick",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --vviinn-carousel-columns: control number of items in grid mode
+   * @prop --vviinn-carousel-image-width: control image width in continuity mode
+   */
+
   display: grid;
   grid-gap: 1rem;
   width: 100%;

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -1,8 +1,11 @@
-import { Component, Host, h, State, Prop, Element, Watch } from "@stencil/core";
-import state from "../../store/store";
+import { Component, Host, h, State, Prop, Element, Watch, Listen, } from "@stencil/core";
+import { state } from "../../store/store";
 import { imageSearchState } from "../../store/imageSearch.store";
 import * as O from "fp-ts/lib/Option";
 import { slotChangeListener } from "../customized-slots";
+import { v4 as uuidv4 } from "uuid";
+import { createTrackingApi } from "../../openApi";
+import { createFilterEvent, createProductViewVpsEvent, createSearchEvent, createWidgetVpsEvent, } from "../../tracking";
 /**
  * @prop --color-primary: color used for action button, slider bullets and selected detected object;
  *
@@ -28,6 +31,8 @@ import { slotChangeListener } from "../customized-slots";
  */
 export class VviinnVpsWidget {
   constructor() {
+    /** @internal */
+    this.apiPath = "https://api.vviinn.com";
     /** When true modal window with widget will be shown */
     this.active = false;
     /** Currency sign will shown after price */
@@ -37,6 +42,7 @@ export class VviinnVpsWidget {
     this.slidePosition = 0;
     this.width = 0;
     this.wrongImageFormat = false;
+    this.imageSource = null;
   }
   activeWatcher(value) {
     if (value) {
@@ -47,6 +53,39 @@ export class VviinnVpsWidget {
       document.body.style.overflow = this.overflow;
     }
   }
+  trackRecommendationView({ detail }) {
+    const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationViewEvent);
+  }
+  trackRecommendationClick({ detail }) {
+    const recommendationClickEvent = createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
+    this.trackingApi.trackEvent(recommendationClickEvent);
+  }
+  trachSearchAreaChanges() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "manual-selection",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackDetectedObject() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "attention-point",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackFilter({ detail }) {
+    const searchEvent = createFilterEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      kind: "category",
+      action: detail,
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
@@ -55,14 +94,31 @@ export class VviinnVpsWidget {
     state.currencySign = this.currencySign;
     state.locale = this.locale;
     imageSearchState.token = this.token;
+    this.uiSessionId = uuidv4();
+    this.trackingApi = createTrackingApi(this.apiPath, this.token);
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "open",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
   }
-  handleImageSelection() {
+  handleImageSelection(source) {
+    this.imageSource = source;
     this.slidePosition = 1;
     const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
     const overlay = root.shadowRoot.querySelector("vviinn-overlay");
     const modal = overlay.querySelector("vviinn-modal");
     const modalBody = modal.shadowRoot.querySelector(".body");
     modalBody.scrollTop = 0;
+    this.trackInitialSearch();
+  }
+  trackInitialSearch() {
+    const searchEvent = createSearchEvent({
+      session_id: this.uiSessionId,
+      source: this.imageSource,
+      search_area: "full",
+    });
+    this.trackingApi.trackEvent(searchEvent);
   }
   resetState() {
     this.resetScroll("onboarding-block");
@@ -90,6 +146,11 @@ export class VviinnVpsWidget {
     this.resetState();
     const elementsToReset = ["onboarding-block", "results-block"];
     elementsToReset.forEach((name) => this.resetScroll(name));
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "close",
+      session_id: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
   }
   render() {
     return (h(Host, null,
@@ -103,7 +164,7 @@ export class VviinnVpsWidget {
               h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }),
               h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }),
               h("vviinn-teaser", { class: { hidden: this.haveErrors() } }),
-              h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" },
+              h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" },
                 h("span", { slot: "upload-button-text", class: "upload-button-content" },
                   h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" },
                     h("defs", null),
@@ -115,22 +176,25 @@ export class VviinnVpsWidget {
             h("div", { id: "onboarding-block", class: "start-page_block" },
               h("div", { class: "onboarding-wrapper" },
                 h("vviinn-onboarding", null),
-                h("vviinn-example-images", { onImageSelected: () => this.handleImageSelection(), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))),
+                h("vviinn-example-images", { onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))),
           h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } },
             h("div", { class: "image-wrapper" },
               h("vviinn-image-view", null),
               h("div", { class: "filters-wrapper" },
                 h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter })))))),
             h("div", { id: "results-block", class: "products-wrapper" },
-              h("div", { class: { "nothing-found": true, hidden: imageSearchState.results.length > 0 } },
+              h("div", { class: {
+                  "nothing-found": true,
+                  hidden: imageSearchState.results.length > 0,
+                } },
                 h("vviinn-empty-results", null),
                 h("vviinn-onboarding", null)),
               h("div", { class: {
                   hidden: imageSearchState.results.length <= 0,
                   products: true,
-                } }, imageSearchState.results.map((p) => {
+                } }, imageSearchState.results.map((p, i) => {
                 var _a;
-                return (h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card" }));
+                return (h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", index: i }));
               }))))))));
   }
   static get is() { return "vviinn-vps-widget"; }
@@ -163,7 +227,7 @@ export class VviinnVpsWidget {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string | undefined",
+        "original": "string",
         "resolved": "string",
         "references": {}
       },
@@ -177,7 +241,8 @@ export class VviinnVpsWidget {
         "text": ""
       },
       "attribute": "api-path",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://api.vviinn.com\""
     },
     "active": {
       "type": "boolean",
@@ -244,4 +309,35 @@ export class VviinnVpsWidget {
       "propName": "active",
       "methodName": "activeWatcher"
     }]; }
+  static get listeners() { return [{
+      "name": "recommendationView",
+      "method": "trackRecommendationView",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "recommendationClick",
+      "method": "trackRecommendationClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "cropperChanged",
+      "method": "trachSearchAreaChanges",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "detectedObjectClicked",
+      "method": "trackDetectedObject",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "filterSelected",
+      "method": "trackFilter",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/network/utils.js

@@ -3,7 +3,7 @@ import * as E from "fp-ts/Either";
 import { pipe } from "fp-ts/function";
 import * as S from "fp-ts/Semigroup";
 import * as String from "fp-ts/string";
-import state from "../store/store";
+import { state } from "../store/store";
 import { emptyApiPathError } from "../error";
 const stringMonoid = O.getMonoid(String.Monoid);
 export const getApiPath = () => pipe(O.getFirstMonoid().concat(O.fromNullable(state.apiPath), O.fromNullable(`${process.env.API_PATH}`)), E.fromOption(() => emptyApiPathError));

package/dist/collection/openApi/index.js

@@ -0,0 +1,27 @@
+import { createConfiguration, DefaultApi, servers, } from "@vviinn/tracking-client-ts";
+const STAGE_SERVER_IDENTIFIER = "stage";
+export const getTrackingServerByApiPath = (apiPath) => isProductionPath(apiPath) ? servers[0] : servers[1];
+export const isProductionPath = (apiPath) => !apiPath.includes(STAGE_SERVER_IDENTIFIER);
+// TODO find way to utilize this function when we will use several openApi clients
+export const createBearerAuth = (token) => {
+  const provider = {
+    getToken: () => {
+      return new Promise((resolve) => resolve(token));
+    },
+  };
+  const bearerConf = {
+    tokenProvider: provider,
+  };
+  return {
+    bearerAuth: bearerConf,
+  };
+};
+export const createTrackingApi = (apiPath, token) => {
+  const baseServer = getTrackingServerByApiPath(apiPath);
+  const authMethods = createBearerAuth(token);
+  const configuration = {
+    baseServer,
+    authMethods,
+  };
+  return new DefaultApi(createConfiguration(configuration));
+};

package/dist/collection/store/store.js

@@ -1,11 +1,9 @@
 import { createStore } from "@stencil/store";
-const store = createStore({
-  fallbackStyles: "",
-  pricePrefix: null,
-  currencySign: null,
-  apiPath: undefined,
-  locale: "de-DE",
+import { trackingStore } from "./tracking.store";
+export const { state, onChange } = createStore(Object.assign({ fallbackStyles: "", pricePrefix: null, currencySign: null, apiPath: null, token: null, locale: "de-DE" }, trackingStore));
+onChange("apiPath", (val) => {
+  console.log("apiPathChanged", val);
+});
+onChange("token", (val) => {
+  console.log("tokenChanged", val);
 });
-export default store.state;
-export const dispose = store.dispose;
-export const state = store.state;

package/dist/collection/store/tracking.store.js

@@ -0,0 +1,3 @@
+export const trackingStore = {
+  trackingEnabled: true,
+};

package/dist/collection/tracking/event.js

@@ -0,0 +1,3 @@
+export const createTrackingEvent = (widget) => (eventData) => {
+  return Object.assign(Object.assign({}, eventData), widget);
+};

package/dist/collection/tracking/filter.js

@@ -0,0 +1,5 @@
+import { FILTER_EVENT_EVENT_TYPE } from "./models";
+export const filterEvent = {
+  widget: "VPS",
+  typ: FILTER_EVENT_EVENT_TYPE,
+};

package/dist/collection/tracking/index.js

@@ -0,0 +1,13 @@
+import { createTrackingEvent } from "./event";
+import { filterEvent } from "./filter";
+import { vprProductClick, vprProductView, vpsProductClick, vpsProductView, } from "./product";
+import { searchEvent } from "./search";
+import { vprWidget, vpsWidget } from "./widget";
+export const createProductViewVprEvent = createTrackingEvent(vprProductView);
+export const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+export const createProductClickVprEvent = createTrackingEvent(vprProductClick);
+export const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+export const createWidgetVprEvent = createTrackingEvent(vprWidget);
+export const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
+export const createSearchEvent = createTrackingEvent(searchEvent);
+export const createFilterEvent = createTrackingEvent(filterEvent);

package/dist/collection/tracking/models.js

@@ -0,0 +1,6 @@
+const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
+const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
+const FILTER_EVENT_EVENT_TYPE = "filter_event";
+const SEARCH_EVENT_EVENT_TYPE = "search_event";
+const WIDGET_EVENT_EVENT_TYPE = "widget_event";
+export { PRODUCT_CLICK_EVENT_TYPE, PRODUCT_VIEW_EVENT_TYPE, FILTER_EVENT_EVENT_TYPE, SEARCH_EVENT_EVENT_TYPE, WIDGET_EVENT_EVENT_TYPE, };