vviinn-widgets 2.5.0 → 2.5.2

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/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,483 @@
+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
+    }]; }
+}