vviinn-widgets 2.2.2 → 2.4.0

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

@@ -0,0 +1,212 @@
+import { argTypes, continuityLayoutArgs, gridLayoutArgs } from "./args";
+import { gridDecorator, continuityDecorator } from "./decorators";
+const excludeControls = [
+  "blockTitle",
+  "currencySign",
+  "imageRatio",
+  "imageWidth",
+  "locale",
+  "pricePrefix",
+  "showScroll",
+];
+export default {
+  title: "Widgets/Visual Recommendations/Widget",
+  component: "vviinn-vpr-widget",
+  argTypes: Object.assign(Object.assign({}, argTypes), { mode: {
+      table: {
+        disable: true
+      }
+    } }),
+  parameters: {
+    controls: {
+      exclude: excludeControls
+    }
+  }
+};
+const allignementLeft = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: start;
+    text-align: left;
+  }`;
+const allignementCenter = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: center;
+    text-align: center;
+  }`;
+const allignementRight = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: end;
+    text-align: right;
+  }`;
+const allignement = new Map([
+  [0, allignementLeft],
+  [1, allignementCenter],
+  [2, allignementRight],
+]);
+const Template = (args) => `
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "${args.analyticsId}");
+      gtag("require", "ec");
+    </script>
+    <style>
+      ${allignement.get(args.contentAlignment)}
+      vviinn-vpr-widget::part(title),
+      vviinn-vpr-widget::part(brand),
+      vviinn-vpr-widget::part(type),
+      vviinn-vpr-widget::part(price-sale),
+      vviinn-vpr-widget::part(price-regular) {
+        color: ${args.primaryTextColor};
+      }
+
+      vviinn-vpr-widget::part(price-outdated) {
+        color: ${args.secondaryTextColor};
+      }
+
+      vviinn-vpr-widget::part(recommendations-title) {
+        display: ${args.showTitle ? "flex" : "none"};
+        font-size: ${args.titleFontSize}px;
+      }
+
+      @media(min-width: 1024px) {
+        * {
+          --vviinn-carousel-columns: ${args.recommendationsGridProductsDesktop};
+        }
+      }
+
+      @media(max-width: 1024px) and (min-width: 768px) {
+        * {
+        --vviinn-carousel-columns: ${args.recommendationsGridProductsTablet};
+        }
+      }
+ 
+      @media(max-width: 768px) and (min-width: 460px) {
+        * {
+          --vviinn-carousel-columns: ${args.recommendationsGridProductsMobile};
+        }
+
+        vviinn-product-card::part(title) {
+          font-size: 14px; 
+        }
+      }
+
+      @media(min-width: 1024px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsDesktop}px;
+          max-width: ${args.recommendationsContinuityProductsDesktop}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+      }
+
+      @media(max-width: 1024px) and (min-width: 768px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsTablet}px;
+          max-width: ${args.recommendationsContinuityProductsTablet}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+      }
+
+      @media(max-width: 768px) and (min-width: 460px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsMobile}px;
+          max-width: ${args.recommendationsContinuityProductsMobile}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+
+        vviinn-vpr-widget::part(title) {
+          font-size: 14px; 
+        }
+      }
+    </style>
+    <vviinn-vpr-widget
+      block-title="${args.titleName}"
+      api-path="${args.apiPath}"
+      product-id="${args.productId}"
+      token="${args.token}"
+      mode="${args.mode}"
+      show-scroll="${args.showScrollbars}"
+      image-width="${args.imageWidth}"
+      campaign-type="${args.campaignType}"
+    >
+    </vviinn-vpr-widget>
+`;
+export const Grid = Template.bind({});
+Grid.args = {
+  analyticsId: "UA-34442043-5",
+  apiPath: "https://api.vviinn.com",
+  campaignType: "VPR",
+  contentAlignment: "Centered",
+  imageWidth: 420,
+  mode: "grid",
+  primaryTextColor: "#161616",
+  productId: "4114460310",
+  recommendationsGridProductsDesktop: 4,
+  recommendationsGridProductsMobile: 4,
+  recommendationsGridProductsTablet: 4,
+  secondaryTextColor: "#757575",
+  showScrollbars: true,
+  showTitle: true,
+  titleFontSize: 28,
+  titleName: "Recommended products",
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+};
+Grid.argTypes = Object.assign({}, gridLayoutArgs);
+Grid.decorators = [
+  gridDecorator
+];
+export const Continuity = Template.bind({});
+Continuity.args = {
+  analyticsId: "UA-34442043-5",
+  apiPath: "https://api.vviinn.com",
+  campaignType: "VPR",
+  contentAlignment: "Left",
+  imageWidth: 300,
+  mode: "continuity",
+  primaryTextColor: "#161616",
+  productId: "4114460310",
+  recommendationsContinuityProductsDesktop: 200,
+  recommendationsContinuityProductsMobile: 160,
+  recommendationsContinuityProductsTablet: 150,
+  secondaryTextColor: "#757575",
+  showScrollbars: false,
+  showTitle: true,
+  titleFontSize: 28,
+  titleName: "Recommended products",
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+};
+Continuity.decorators = [
+  continuityDecorator
+];
+Continuity.argTypes = Object.assign({}, continuityLayoutArgs);

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
@@ -20,6 +23,7 @@ import { Subject } from "rxjs";
  * @part price-prefix - block rendered before each price element (for ex. "from")
  * @part price-regular - block for price if no sale price presented
  * @part price-sale -  block for sale price. rendered only if sale price presented
+ * @part carousel-button
  */
 export class VviinnVprWidget {
   constructor() {
@@ -57,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",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetCloseEvent = createWidgetVprEvent({
+      action: "close",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetCloseEvent);
   }
   async componentWillLoad() {
     state.pricePrefix = this.pricePrefix;
@@ -88,9 +114,9 @@ export class VviinnVprWidget {
     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();
       }
@@ -113,14 +139,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 }));
@@ -433,7 +459,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-button/stories/vviinn-vps-button.stories.js

@@ -0,0 +1,31 @@
+export default {
+  title: "Widgets/Visual Search/Button",
+  component: "vviinn-vps-button",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  },
+  decorators: [(story) => `
+    <div style="display: grid;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                align-items: center;
+                justify-items: center;">
+      ${story()}
+    </div>
+  `],
+};
+const Template = (args) => `
+<vviinn-vps-button
+  api-path="${args.apiPath}"
+  token="${args.token}"
+></vviinn-vps-button>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};

package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.css

@@ -0,0 +1,3 @@
+:host {
+  cursor: pointer;
+}

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

@@ -0,0 +1,33 @@
+export default {
+  title: "Widgets/Visual Search/Widget",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  }
+};
+const Template = ({ token, apiPath }) => `
+  <vviinn-vps-widget token="${token}"
+                     api-path="${apiPath}"
+                     active="true">
+  </vviinn-vps-widget>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};
+Default.storyName = "Modal Window";
+Default.decorators = [(Story) => `
+<style>
+.sb-show-main.sb-main-padded {
+  padding: unset;
+}
+
+#root {
+  align-content: center;
+  display: grid;
+  height: 100vh;
+  justify-items: center;
+}
+</style>
+${Story()}`];

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({ sessionId: 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({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "manual-selection",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackDetectedObject() {
+    const searchEvent = createSearchEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "attention-point",
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
+  trackFilter({ detail }) {
+    const searchEvent = createFilterEvent({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      kind: "category",
+      action: detail,
+    });
+    this.trackingApi.trackEvent(searchEvent);
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
@@ -55,14 +94,38 @@ 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",
+      sessionId: this.uiSessionId,
+    });
+    this.trackingApi.trackEvent(widgetOpenEvent);
+  }
+  disconnectedCallback() {
+    const widgetOpenEvent = createWidgetVpsEvent({
+      action: "close",
+      sessionId: 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({
+      sessionId: this.uiSessionId,
+      source: this.imageSource,
+      searchArea: "full",
+    });
+    this.trackingApi.trackEvent(searchEvent);
   }
   resetState() {
     this.resetScroll("onboarding-block");
@@ -103,7 +166,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 +178,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 +229,7 @@ export class VviinnVpsWidget {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string | undefined",
+        "original": "string",
         "resolved": "string",
         "references": {}
       },
@@ -177,7 +243,8 @@ export class VviinnVpsWidget {
         "text": ""
       },
       "attribute": "api-path",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://api.vviinn.com\""
     },
     "active": {
       "type": "boolean",
@@ -244,4 +311,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);
+};