vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,483 +0,0 @@
-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 { 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 { createProductClickVprEvent, createProductViewVprEvent, createWidgetVprEvent, } from "../../tracking";
-/**
- * @part product-card - product card itself
- * @part title - title inside product card
- * @part brand - brand inside product card
- * @part currency - brand inside product card
- * @part image - product card image
- * @part image-link - anchor element around product image
- * @part price-amount - span element around every prices
- * @part price-container - block of prices
- * @part price-outdated - block for outdated price. rendered when product contains sale price
- * @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() {
-    /** Title for recommendations widget */
-    this.blockTitle = "Recommended products";
-    /** Ratio of each recommended product image */
-    this.imageRatio = 1;
-    /** Width of each recommended product image */
-    this.imageWidth = 300;
-    /** Currency sign will shown after price */
-    this.currencySign = "€";
-    /** Use slider or grid view */
-    this.mode = "continuity";
-    /** Campaign type */
-    this.campaignType = "VPR";
-    /** Locale for currency formatting */
-    this.locale = "de-DE";
-    /** @internal */
-    this.apiPath = "https://api.vviinn.com";
-    /** @internal */
-    this.useCarousel = true;
-    this.showScroll = true;
-    this.cssUrl = null;
-    this.recommendations = [];
-    this.loaded = false;
-    this.productImageLoadedSubject = new Subject();
-  }
-  handleProductIdChange() {
-    this.getRecommendations();
-  }
-  handleCampaignTypeChange() {
-    this.getRecommendations();
-  }
-  handleApiPathChange(newPath) {
-    state.apiPath = newPath;
-    this.getRecommendations();
-  }
-  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 = createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId }, detail));
-    this.trackingApi.trackEvent(recommendationClickEvent).finally(() => {
-      const product = this.recommendations.find((r) => r.productId === detail.product);
-      if (!product || !product.deeplink)
-        return;
-      window.location.href = product.deeplink;
-    });
-  }
-  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;
-    state.currencySign = this.currencySign;
-    this.getRecommendations();
-  }
-  async getRecommendations() {
-    if (this.productId === undefined || this.token === undefined)
-      return;
-    const campaignType = this.campaignType.length > 0 ? this.campaignType : "VPR";
-    const headers = createBearAuthedHeader(this.token);
-    const request = pipe(TE.of(getRecommendationsService(campaignType)), TE.ap(TE.of(this.productId)), TE.ap(TE.of(headers)), TE.flatten);
-    const runRequest = await request();
-    pipe(runRequest, E.fold((error) => this.handleError(error), (data) => this.handleRecommendationsSucces(data)));
-  }
-  handleError(error) {
-    console.log("ERROR:", error);
-  }
-  handleRecommendationsSucces(data) {
-    var _a;
-    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.productIds = this.recommendations.map((r) => r.productId);
-    this.productImageLoadedSubject.subscribe((id) => {
-      this.productIds = this.productIds.filter((x) => x !== id);
-      if (this.productIds.length === 0) {
-        this.recommendationsLoaded.emit();
-      }
-    });
-  }
-  isExternalCSS() {
-    return this.cssUrl && this.cssUrl.length > 0;
-  }
-  renderExternalCSS() {
-    return this.isExternalCSS() ? (h("link", { href: this.cssUrl, rel: "stylesheet" })) : ("");
-  }
-  render() {
-    return (h(Host, { class: {
-        loaded: this.loaded,
-        empty: this.recommendations.length == 0,
-        [this.mode]: true,
-      }, "aria-hidden": this.loaded ? "false" : "true" },
-      this.renderExternalCSS(),
-      h("style", null, state.fallbackStyles),
-      h("h2", { part: "recommendations-title" }, this.blockTitle),
-      this.useCarousel ? this.renderCarousel() : this.renderResults()));
-  }
-  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, i) => this.renderRecommendation(r, i))));
-  }
-  renderCarousel() {
-    return (h("vviinn-carousel", { mode: this.mode, imageWidth: this.imageWidth, showScroll: this.showScroll, recommendations: this.recommendations }));
-  }
-  static get is() { return "vviinn-vpr-widget"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-vpr-widget.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-vpr-widget.css"]
-  }; }
-  static get properties() { return {
-    "blockTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Title for recommendations widget"
-      },
-      "attribute": "block-title",
-      "reflect": false,
-      "defaultValue": "\"Recommended products\""
-    },
-    "imageRatio": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ratio of each recommended product image"
-      },
-      "attribute": "image-ratio",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "imageWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Width of each recommended product image"
-      },
-      "attribute": "image-width",
-      "reflect": false,
-      "defaultValue": "300"
-    },
-    "productId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Id of product you need recommendations for"
-      },
-      "attribute": "product-id",
-      "reflect": false
-    },
-    "token": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "vviinn customer token"
-      },
-      "attribute": "token",
-      "reflect": false
-    },
-    "currencySign": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currency sign will shown after price"
-      },
-      "attribute": "currency-sign",
-      "reflect": false,
-      "defaultValue": "\"\u20AC\""
-    },
-    "pricePrefix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "prefix will shown before price"
-      },
-      "attribute": "price-prefix",
-      "reflect": false
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CarouselMode",
-        "resolved": "\"continuity\" | \"grid\"",
-        "references": {
-          "CarouselMode": {
-            "location": "import",
-            "path": "../vviinn-carousel/vviinn-carousel"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use slider or grid view"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "\"continuity\""
-    },
-    "campaignType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CampaignName",
-        "resolved": "\"VCS\" | \"VPR\"",
-        "references": {
-          "CampaignName": {
-            "location": "import",
-            "path": "../../campaign/Campaign"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Campaign type"
-      },
-      "attribute": "campaign-type",
-      "reflect": false,
-      "defaultValue": "\"VPR\""
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Locale for currency formatting"
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "\"de-DE\""
-    },
-    "apiPath": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
-      },
-      "attribute": "api-path",
-      "reflect": false,
-      "defaultValue": "\"https://api.vviinn.com\""
-    },
-    "useCarousel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "internal"
-          }],
-        "text": ""
-      },
-      "attribute": "use-carousel",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "showScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-scroll",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "cssUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "css-url",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "recommendations": {},
-    "loaded": {}
-  }; }
-  static get events() { return [{
-      "method": "recommendationsLoaded",
-      "name": "recommendationsLoaded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "productId",
-      "methodName": "handleProductIdChange"
-    }, {
-      "propName": "campaignType",
-      "methodName": "handleCampaignTypeChange"
-    }, {
-      "propName": "apiPath",
-      "methodName": "handleApiPathChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "productImageLoaded",
-      "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,79 +0,0 @@
-: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%;
-}
-
-:host(:not(.loaded)) {
-  position: absolute;
-  visibility: hidden;
-}
-
-:host(.grid) vviinn-product-card::part(image) {
-  border: 1px solid #DDDDDD;
-  width: 100%;
-}
-
-h2 {
-  margin: 0;
-}
-
-vviinn-product-card::part(price-container) {
-  align-self: flex-start;
-  text-align: left;
-  display: flex;
-}
-
-.results {
-  display: grid;
-  grid-gap: 1rem;
-}
-
-.visually-hidden {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  height: 0;
-  width: 0;
-}
-
-h2 {
-  margin: 0;
-}
-
-:host(.grid) h2 {
-  justify-content: center;
-}
-
-:host(.grid) vviinn-product-card::part(image) {
-  min-width: 100%;
-}
-
-:host(.grid) vviinn-product-card::part(image-link) {
-  width: 100%;
-}
-
-:host(.grid) vviinn-product-card::part(title),
-:host(.grid) vviinn-product-card::part(brand),
-:host(.grid) vviinn-product-card::part(type) {
-  text-align: center;
-}
-
-:host(.grid) vviinn-product-card::part(price-container) {
-  align-self: center;
-}
-
-:host(.continuity) vviinn-product-card::part(title),
-:host(.continuity) vviinn-product-card::part(brand),
-:host(.continuity) vviinn-product-card::part(type),
-:host(.continuity) vviinn-product-card::part(deeplink) {
-  text-align: left;
-  max-width: unset;
-  align-self: start;
-}

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

@@ -1,31 +0,0 @@
-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

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