vviinn-widgets 2.20.21 → 2.20.29

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-1/vviinn-onboarding-card-1.js

@@ -2,11 +2,15 @@ import { Host, h } from "@stencil/core";
 import { slotChangeListener } from "../../../customized-slots";
 import { OnboardingCard1Icon } from "../../../vviinn-icons";
 export class VviinnOnboardingCard1 {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardText = undefined;
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-1-icon" }, h(OnboardingCard1Icon, null)), h("slot", { name: "onboarding-card-1-text" }, h("div", { class: "text" }, h("h4", null, "Starte die Bildsuche"), h("p", null, "Lade ein Bild aus Deiner Galerie hoch oder fotografiere ein Produkt mit Deiner Kamera.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-1-icon" }, h(OnboardingCard1Icon, null)), h("slot", { name: "onboarding-card-1-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   static get is() { return "vviinn-onboarding-card-1"; }
   static get encapsulation() { return "shadow"; }
@@ -20,5 +24,43 @@ export class VviinnOnboardingCard1 {
       "$": ["../onboarding-card.css"]
     };
   }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-text",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-2/vviinn-onboarding-card-2.js

@@ -2,11 +2,15 @@ import { Host, h } from "@stencil/core";
 import { OnboardingCard2Icon } from "../../../vviinn-icons";
 import { slotChangeListener } from "../../../customized-slots";
 export class VviinnOnboardingCard2 {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardText = undefined;
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-2-icon" }, h(OnboardingCard2Icon, null)), h("slot", { name: "onboarding-card-2-text" }, h("div", { class: "text" }, h("h4", null, "Verfeiner Deine Suche"), h("p", null, "Du kannst den Bildrahmen selber festlegen und so die Produkte genau ausw\u00E4hlen.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-2-icon" }, h(OnboardingCard2Icon, null)), h("slot", { name: "onboarding-card-2-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   static get is() { return "vviinn-onboarding-card-2"; }
   static get encapsulation() { return "shadow"; }
@@ -20,5 +24,43 @@ export class VviinnOnboardingCard2 {
       "$": ["../onboarding-card.css"]
     };
   }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-text",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-onboarding/onboarding-cards/vviinn-onboarding-card-3/vviinn-onboarding-card-3.js

@@ -2,11 +2,15 @@ import { Host, h } from "@stencil/core";
 import { OnboardingCard3Icon } from "../../../vviinn-icons";
 import { slotChangeListener } from "../../../customized-slots";
 export class VviinnOnboardingCard3 {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardText = undefined;
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "onboarding-card-3-icon" }, h(OnboardingCard3Icon, null)), h("slot", { name: "onboarding-card-3-text" }, h("div", { class: "text" }, h("h4", null, "Ohne Hintergrund"), h("p", null, "Die besten Ergebnisse erh\u00E4ltst Du, wenn das gesuchte Objekt mit einfarbigem und hellem Hintergrund zu sehen ist.")))));
+    return (h(Host, null, h("slot", { name: "onboarding-card-3-icon" }, h(OnboardingCard3Icon, null)), h("slot", { name: "onboarding-card-3-text" }, h("div", { class: "text" }, h("h4", null, this.cardTitle), h("p", null, this.cardText)))));
   }
   static get is() { return "vviinn-onboarding-card-3"; }
   static get encapsulation() { return "shadow"; }
@@ -20,5 +24,43 @@ export class VviinnOnboardingCard3 {
       "$": ["../onboarding-card.css"]
     };
   }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-text",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-onboarding/vviinn-onboarding.js

@@ -1,11 +1,12 @@
 import { Host, h } from "@stencil/core";
+import i18next from "i18next";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnOnboarding {
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", { name: "vviinn-onboarding-title" }, h("h3", null, "So funktioniert es")), h("vviinn-slider", { showArrows: true }, h("vviinn-slide", null, h("vviinn-onboarding-card-1", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-2", null)), h("vviinn-slide", null, h("vviinn-onboarding-card-3", null)))));
+    return (h(Host, null, h("slot", { name: "vviinn-onboarding-title" }, h("h3", null, i18next.t("onboardingBlock.onboardingTitleText"))), h("vviinn-slider", { showArrows: true }, h("vviinn-slide", null, h("vviinn-onboarding-card-1", { cardTitle: i18next.t("onboardingBlock.onboardingCard1.title"), cardText: i18next.t("onboardingBlock.onboardingCard1.text") })), h("vviinn-slide", null, h("vviinn-onboarding-card-2", { cardTitle: i18next.t("onboardingBlock.onboardingCard2.title"), cardText: i18next.t("onboardingBlock.onboardingCard2.text") })), h("vviinn-slide", null, h("vviinn-onboarding-card-3", { cardTitle: i18next.t("onboardingBlock.onboardingCard3.title"), cardText: i18next.t("onboardingBlock.onboardingCard3.text") })))));
   }
   static get is() { return "vviinn-onboarding"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.js

@@ -1,11 +1,14 @@
 import { Host, h } from "@stencil/core";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnPrivacyBadge {
+  constructor() {
+    this.privacyBadgeText = undefined;
+  }
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", null, h("div", { class: "content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, h("defs", null), h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), h("slot", { name: "vviinn-privacy-badge-text" }, h("p", null, "Durch das Hochladen eines Bildes willigst Du in die Verarbeitung durch unseren Partner Vviinn ein. Das Bild wird nach einer Stunde Inaktivit\u00E4t gel\u00F6scht."))))));
+    return (h(Host, null, h("slot", null, h("div", { class: "content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, h("defs", null), h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), h("slot", { name: "vviinn-privacy-badge-text" }, h("p", null, this.privacyBadgeText))))));
   }
   static get is() { return "vviinn-privacy-badge"; }
   static get encapsulation() { return "shadow"; }
@@ -19,5 +22,26 @@ export class VviinnPrivacyBadge {
       "$": ["vviinn-privacy-badge.css"]
     };
   }
+  static get properties() {
+    return {
+      "privacyBadgeText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "privacy-badge-text",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -37,7 +37,7 @@ Default.args = {
   imageWidth: 240,
   dimmedBackground: false,
   brand: "Ronald Schmitt",
-  locale: "en-US",
+  locale: "de-DE",
   currency: "€",
   deeplink: "",
   image: "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg",

package/dist/collection/components/vviinn-teaser/vviinn-teaser.js

@@ -1,11 +1,12 @@
 import { Host, h } from "@stencil/core";
+import i18next from "i18next";
 import { slotChangeListener } from "../customized-slots";
 export class VviinnTeaser {
   componentWillLoad() {
     slotChangeListener(this, this.el);
   }
   render() {
-    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, "Finde Produkte auf ", h("br", null), " einem Foto")))));
+    return (h(Host, null, h("slot", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, h("defs", null), h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), h("span", { class: "vviinn-teaser-text" }, h("slot", { name: "vviinn-teaser-text" }, i18next.t("teaserText_1"), h("br", null), i18next.t("teaserText_2"))))));
   }
   static get is() { return "vviinn-teaser"; }
   static get encapsulation() { return "shadow"; }

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

@@ -13,6 +13,7 @@ export class RecommendationsSidebar {
     this.campaigns = "";
     this.campaignType = undefined;
     this.color = undefined;
+    this.locale = undefined;
     this.imageWidth = 300;
     this.currencySign = "€";
     this.noResultText = undefined;
@@ -51,7 +52,7 @@ export class RecommendationsSidebar {
     return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
   }
   render() {
-    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab })))));
+    return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.isSourceImageValid() ? this.renderSourceImage() : null, h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailNewTab: this.productDetailNewTab })))));
   }
   renderSourceImage() {
     return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
@@ -271,6 +272,28 @@ export class RecommendationsSidebar {
         "attribute": "color",
         "reflect": false
       },
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Locale",
+          "resolved": "\"de-DE\" | \"en-US\"",
+          "references": {
+            "Locale": {
+              "location": "import",
+              "path": "../../../locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "locale",
+        "reflect": false
+      },
       "imageWidth": {
         "type": "number",
         "mutable": false,

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

@@ -23,6 +23,7 @@ const Template = (args) => `<vviinn-vpr-button token="${args.token}"
     position="${args.position}"
     add-style="${args.addStyle}"
     sidebar-title="${args.sidebarTitle}"
+    locale="${args.locale}"
     currency-sign="${args.currencySign}"
     modal-scrollbar="${args.modalScrollbar}"
     mode="${args.mode}"
@@ -35,6 +36,7 @@ const Template = (args) => `<vviinn-vpr-button token="${args.token}"
     grid-arrows-dynamic="${args.gridArrowsDynamic}"
     source-image="${args.sourceImage}"
     excluded="${args.excluded}"
+    api-path="${args.apiPath}"
   ></vviinn-vpr-button>`;
 export const Default = Template.bind({});
 Default.storyName = "Button";
@@ -51,12 +53,14 @@ Default.args = {
   position: "bottom",
   sourceImage: "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg",
   imageWidth: "300",
+  locale: "en-US",
   currencySign: "€",
   addStyle: true,
   modalScrollbar: false,
   noResultShow: true,
-  noResultText: "No results! Please, try again later.",
+  noResultText: "",
   gridArrowsDynamic: false,
+  apiPath: "https://api.vviinn.com",
 };
 Default.parameters = {
   design: {

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

@@ -20,12 +20,13 @@ export class VviinnVprButton {
     this.modalScrollbar = false;
     this.campaigns = "";
     this.campaignType = "VPR";
+    this.locale = "de-DE";
     this.color = "";
     this.addStyle = true;
     this.mode = "continuity";
     this.imageWidth = 300;
     this.currencySign = "€";
-    this.noResultText = "No results! Please, try again later.";
+    this.noResultText = "";
     this.noResultShow = true;
     this.gridArrowsDynamic = false;
     this.excluded = "";
@@ -48,6 +49,7 @@ export class VviinnVprButton {
     sidebar.campaigns = this.campaigns;
     sidebar.campaignType = this.campaignType;
     sidebar.color = this.color;
+    sidebar.locale = this.locale;
     sidebar.mode = this.position === "right" ? "grid" : this.mode;
     sidebar.imageWidth = this.imageWidth;
     sidebar.currencySign = this.currencySign;
@@ -166,7 +168,7 @@ export class VviinnVprButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sidebar title"
+          "text": "Sidebar title (change it to fit your locale)"
         },
         "attribute": "sidebar-title",
         "reflect": false,
@@ -231,6 +233,29 @@ export class VviinnVprButton {
         "reflect": false,
         "defaultValue": "\"VPR\""
       },
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Locale",
+          "resolved": "\"de-DE\" | \"en-US\"",
+          "references": {
+            "Locale": {
+              "location": "import",
+              "path": "../../locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The locale for currency formatting and text localization"
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "\"de-DE\""
+      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -338,11 +363,11 @@ export class VviinnVprButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The message is displayed when no results"
+          "text": "A custom message is displayed when no results"
         },
         "attribute": "no-result-text",
         "reflect": false,
-        "defaultValue": "\"No results! Please, try again later.\""
+        "defaultValue": "\"\""
       },
       "noResultShow": {
         "type": "boolean",

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

@@ -30,6 +30,7 @@ const Template = (args) => `
       no-result-text="${args.noResultText}"
       no-result-show="${args.noResultShow}"
       excluded="${args.excluded}"
+      api-path="${args.apiPath}"
     >
     </vviinn-vpr-widget>
 `;
@@ -52,8 +53,9 @@ Grid.args = {
   cssUrl: "",
   showScroll: false,
   noResultShow: true,
-  noResultText: "No results! Please, try again later.",
+  noResultText: "",
   gridArrowsDynamic: false,
+  apiPath: "https://api.vviinn.com",
 };
 Grid.decorators = [gridDecorator];
 export const Continuity = Template.bind({});
@@ -75,7 +77,8 @@ Continuity.args = {
   cssUrl: "",
   showScroll: false,
   noResultShow: true,
-  noResultText: "No results! Please, try again later.",
+  noResultText: "",
   gridArrowsDynamic: false,
+  apiPath: "https://api.vviinn.com",
 };
 Continuity.decorators = [continuityDecorator];

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

@@ -11,21 +11,23 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { Host, h, Fragment, } from "@stencil/core";
-import { version } from "../../../package.json";
+import i18next from "i18next";
 import { pipe } from "fp-ts/lib/function";
+import { Subject } from "rxjs";
+import { v4 as uuidv4 } from "uuid";
 import * as TE from "fp-ts/lib/TaskEither";
 import * as E from "fp-ts/lib/Either";
+import { version } from "../../../package.json";
 import { createBearAuthedHeader } from "./token-helpers";
 import { state } from "../../store/store";
 import { campaignTypeNames } from "../../campaign/Campaign";
 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";
 import { checkEmpryString } from "../../utils/option/option";
 import { parseExcluded } from "../../utils/collections/collectionsUtils";
+import { resources } from "../../locale/resources-vpr";
 /**
  * @part product-card - Product Card itself.
  * @part product-part - Will be deprecated. Use "product-card" instead.
@@ -68,7 +70,7 @@ export class VviinnVprWidget {
     this.campaigns = "";
     this.color = "";
     this.gridArrowsDynamic = false;
-    this.noResultText = "No results! Please, try again later.";
+    this.noResultText = "";
     this.noResultShow = true;
     this.showScroll = true;
     this.cssUrl = null;
@@ -159,6 +161,11 @@ export class VviinnVprWidget {
     this.trackingApi
       .trackEvent(widgetOpenEvent)
       .then(this.setTrackingDeactivated);
+    i18next.init({
+      lng: this.locale,
+      fallbackLng: "de-DE",
+      resources,
+    });
   }
   disconnectedCallback() {
     if (this.trackingDeactivated)
@@ -222,7 +229,9 @@ export class VviinnVprWidget {
         empty: this.recommendations.length == 0,
         [this.mode]: true,
       }, "aria-hidden": "false" }, h(Fragment, null, this.renderExternalCSS(), h("style", null, state.fallbackStyles), h("h2", { part: "recommendations-title" }, this.blockTitle), this.recommendations.length > 0 &&
-      (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (h("p", { class: "no-result-text" }, this.noResultText)))));
+      (this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (h("p", { class: "no-result-text" }, this.noResultText.length
+      ? this.noResultText
+      : i18next.t("noResultText"))))));
   }
   renderRecommendation(recommendation, index) {
     return (h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, 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(), campaignTypeId: this.campaignType, index: index, widgetElementId: this.id, widgetVersion: version }));
@@ -265,7 +274,7 @@ export class VviinnVprWidget {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Widget\u2019s title"
+          "text": "Widget\u2019s title (change it to fit your locale)"
         },
         "attribute": "block-title",
         "reflect": false,
@@ -427,15 +436,20 @@ export class VviinnVprWidget {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Locale",
+          "resolved": "\"de-DE\" | \"en-US\"",
+          "references": {
+            "Locale": {
+              "location": "import",
+              "path": "../../locale"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The locale for currency formatting"
+          "text": "The locale for currency formatting and text localization"
         },
         "attribute": "locale",
         "reflect": false,
@@ -507,11 +521,11 @@ export class VviinnVprWidget {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The message is displayed when no results"
+          "text": "A custom message is displayed when no results"
         },
         "attribute": "no-result-text",
         "reflect": false,
-        "defaultValue": "\"No results! Please, try again later.\""
+        "defaultValue": "\"\""
       },
       "noResultShow": {
         "type": "boolean",

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

@@ -31,6 +31,7 @@ const Template = (args) => `
   locale="${args.locale}"
   mode="${args.mode}"
   product-detail-new-tab="${args.productDetailNewTab}"
+  api-path="${args.apiPath}"
 ></vviinn-vps-button>`;
 export const Modal = Template.bind({});
 Modal.storyName = "Modal";
@@ -43,6 +44,7 @@ Modal.args = {
   locale: "en-US",
   currencySign: "€",
   addStyle: true,
+  apiPath: "https://api.vviinn.com",
 };
 export const Upload = Template.bind({});
 Upload.args = {
@@ -54,4 +56,5 @@ Upload.args = {
   locale: "en-US",
   currencySign: "€",
   addStyle: true,
+  apiPath: "https://api.vviinn.com",
 };

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

@@ -131,15 +131,20 @@ export class VviinnVpsButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Locale",
+          "resolved": "\"de-DE\" | \"en-US\"",
+          "references": {
+            "Locale": {
+              "location": "import",
+              "path": "../../locale"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The locale for currency formatting"
+          "text": "The locale for currency formatting and text localization"
         },
         "attribute": "locale",
         "reflect": false,

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

@@ -7,14 +7,15 @@ export default {
     },
   },
 };
-const Template = ({ token, campaignId, currencySign, locale, active, excluded, productDetailNewTab, }) => `
-  <vviinn-vps-widget token="${token}"
-    campaign-id="${campaignId}"
-    currency-sign="${currencySign}"
-    locale="${locale}"
-    active="${active}"
-    excluded="${excluded}"
-    product-detail-new-tab="${productDetailNewTab}"
+const Template = (args) => `
+  <vviinn-vps-widget token="${args.token}"
+    campaign-id="${args.campaignId}"
+    currency-sign="${args.currencySign}"
+    locale="${args.locale}"
+    active="${args.active}"
+    excluded="${args.excluded}"
+    product-detail-new-tab="${args.productDetailNewTab}"
+    api-path="${args.apiPath}"
   >
   </vviinn-vps-widget>`;
 export const Default = Template.bind({});
@@ -26,6 +27,7 @@ Default.args = {
   locale: "en-US",
   currencySign: "€",
   active: true,
+  apiPath: "https://api.vviinn.com",
 };
 Default.storyName = "Main";
 Default.decorators = [