vviinn-widgets 2.1.0 → 2.2.2

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

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+}
+
+.open-button {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: grid;
+  height: 40px;
+  justify-items: center;
+  padding: 0;
+  width: 40px;
+  transition: all 0.25s ease-in-out;
+}
+
+.open-button:hover {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+.open-button:focus {
+  border: 2px solid rgba(15, 98, 254, 0.5);
+  outline: none;
+}
+
+.open-button:active {
+  background: #F4F4F4;
+  outline: none;
+}
+
+

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js

@@ -0,0 +1,149 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+import { VisualSearchIcon } from "../vviinn-icons";
+/**
+ *
+ * @part button - clickable button element
+ */
+export class VviinnVprButton {
+  constructor() {
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.sidebarTitle = "Visually similar products";
+    this.modalScrollbar = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() },
+        h("slot", null,
+          h(VisualSearchIcon, null)))));
+  }
+  handleClick() {
+    const sidebar = document.createElement("vviinn-recommendations-sidebar");
+    sidebar.sidebarTitle = this.sidebarTitle;
+    sidebar.productId = this.productId;
+    sidebar.token = this.token;
+    sidebar.position = this.position;
+    sidebar.sourceImage = this.sourceImage;
+    sidebar.widgetScrollbar = this.modalScrollbar;
+    sidebar.addEventListener("modalClosed", () => {
+      document.body.removeChild(sidebar);
+    });
+    document.body.append(sidebar);
+  }
+  static get is() { return "vviinn-vpr-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-vpr-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-vpr-button.css"]
+  }; }
+  static get properties() { return {
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": false
+    },
+    "productId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"bottom\" | \"right\"",
+        "resolved": "\"bottom\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
+    "sourceImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source-image",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "sidebarTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-title",
+      "reflect": false,
+      "defaultValue": "\"Visually similar products\""
+    },
+    "modalScrollbar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "modal-scrollbar",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/vviinn-vpr-widget/token-helpers.js

@@ -0,0 +1,11 @@
+import { flow } from "fp-ts/lib/function";
+const createBearerString = (x) => `Bearer ${x}`;
+const createAuthedHeader = (x) => new Headers({
+  Authorization: x,
+});
+const createFetchAuthOptions = (x) => {
+  return {
+    headers: x,
+  };
+};
+export const createBearAuthedHeader = flow(createBearerString, createAuthedHeader, createFetchAuthOptions);

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

@@ -0,0 +1,441 @@
+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";
+/**
+ * @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
+ */
+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();
+  }
+  lol({ detail }) {
+    this.productImageLoadedSubject.next(detail);
+  }
+  connectedCallback() {
+    state.apiPath = this.apiPath;
+    state.currencySign = this.currencySign;
+    state.locale = this.locale;
+  }
+  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.recommendationsLoaded.emit();
+    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) {
+    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() }));
+  }
+  useDimmedBackgroundInCard() {
+    return this.mode === "continuity" || !this.useCarousel;
+  }
+  renderResults() {
+    return (h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r) => this.renderRecommendation(r))));
+  }
+  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": "lol",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}