vviinn-widgets 2.5.2 → 2.7.0

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

@@ -204,4 +204,10 @@ export const argTypes = {
   token: {
     name: "Token",
   },
+  campaigns: {
+    name: "campaigns",
+    control: {
+      type: "text",
+    },
+  },
 };

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

@@ -73,6 +73,7 @@ const Template = (args) => `<style>
                       position="${args.position}"
                       sidebar-title="${args.sidebarTitle}"
                       modal-scrollbar="${args.modalScrollbar}"
+                      campaigns="${args.campaigns}"
                       source-image="${args.showSourceImage
   ? "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
   : ""}"></vviinn-vpr-button>`;
@@ -80,6 +81,7 @@ export const Default = Template.bind({});
 Default.args = {
   token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
   productId: "4114460310",
+  campaigns: "",
 };
 Default.parameters = {
   design: {

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

@@ -10,6 +10,8 @@ export class VviinnVprButton {
     this.sourceImage = null;
     this.sidebarTitle = "Visually similar products";
     this.modalScrollbar = false;
+    /** comma-separated list of campaign-ids */
+    this.campaigns = "";
     this.sidebar = null;
     this.sidebarCloseListener = () => {
       document.body.removeChild(this.sidebar);
@@ -29,11 +31,14 @@ export class VviinnVprButton {
     sidebar.position = this.position;
     sidebar.sourceImage = this.sourceImage;
     sidebar.widgetScrollbar = this.modalScrollbar;
+    sidebar.campaigns = this.campaigns;
     this.sidebar = sidebar;
     sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
     document.body.append(this.sidebar);
   }
   disconnectedCallback() {
+    if (!this.sidebar)
+      return;
     this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
     document.body.removeChild(this.sidebar);
   }
@@ -151,6 +156,24 @@ export class VviinnVprButton {
       "attribute": "modal-scrollbar",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "campaigns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "comma-separated list of campaign-ids"
+      },
+      "attribute": "campaigns",
+      "reflect": false,
+      "defaultValue": "\"\""
     }
   }; }
 }

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

@@ -19,6 +19,12 @@ const productId = {
     type: "text",
   },
 };
+const campaigns = {
+  name: "campaigns",
+  control: {
+    type: "text",
+  },
+};
 const cssUrl = {
   name: "css-url",
   description: "Optional for custom CSS.  It will overwrite all other settings.",
@@ -118,6 +124,7 @@ export const argTypes = {
   analyticsId,
   apiPath,
   campaignType,
+  campaigns,
   contentAlignment,
   cssUrl,
   imageWidth,

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

@@ -14,14 +14,14 @@ export default {
   component: "vviinn-vpr-widget",
   argTypes: Object.assign(Object.assign({}, argTypes), { mode: {
       table: {
-        disable: true
-      }
+        disable: true,
+      },
     } }),
   parameters: {
     controls: {
-      exclude: excludeControls
-    }
-  }
+      exclude: excludeControls,
+    },
+  },
 };
 const allignementLeft = `
   vviinn-vpr-widget::part(title),
@@ -159,6 +159,7 @@ const Template = (args) => `
       show-scroll="${args.showScrollbars}"
       image-width="${args.imageWidth}"
       campaign-type="${args.campaignType}"
+      campaigns="${args.campaigns}"
     >
     </vviinn-vpr-widget>
 `;
@@ -166,6 +167,7 @@ export const Grid = Template.bind({});
 Grid.args = {
   analyticsId: "UA-34442043-5",
   apiPath: "https://api.vviinn.com",
+  campaigns: "",
   campaignType: "VPR",
   contentAlignment: "Centered",
   imageWidth: 420,
@@ -180,16 +182,15 @@ Grid.args = {
   showTitle: true,
   titleFontSize: 28,
   titleName: "Recommended products",
-  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
 };
 Grid.argTypes = Object.assign({}, gridLayoutArgs);
-Grid.decorators = [
-  gridDecorator
-];
+Grid.decorators = [gridDecorator];
 export const Continuity = Template.bind({});
 Continuity.args = {
   analyticsId: "UA-34442043-5",
   apiPath: "https://api.vviinn.com",
+  campaigns: "",
   campaignType: "VPR",
   contentAlignment: "Left",
   imageWidth: 300,
@@ -204,9 +205,7 @@ Continuity.args = {
   showTitle: true,
   titleFontSize: 28,
   titleName: "Recommended products",
-  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
 };
-Continuity.decorators = [
-  continuityDecorator
-];
+Continuity.decorators = [continuityDecorator];
 Continuity.argTypes = Object.assign({}, continuityLayoutArgs);

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

@@ -10,6 +10,7 @@ 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";
 /**
  * @part product-card - product card itself
  * @part title - title inside product card
@@ -41,6 +42,8 @@ export class VviinnVprWidget {
     this.campaignType = "VPR";
     /** Locale for currency formatting */
     this.locale = "de-DE";
+    /** comma-separated list of campaign-ids */
+    this.campaigns = "";
     /** @internal */
     this.apiPath = "https://api.vviinn.com";
     /** @internal */
@@ -57,6 +60,9 @@ export class VviinnVprWidget {
   handleCampaignTypeChange() {
     this.getRecommendations();
   }
+  handleCampaignsChange() {
+    this.getRecommendations();
+  }
   handleApiPathChange(newPath) {
     state.apiPath = newPath;
     this.getRecommendations();
@@ -106,7 +112,7 @@ export class VviinnVprWidget {
       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 request = pipe(TE.of(getRecommendationsService(campaignType)), TE.ap(TE.of(this.productId)), TE.ap(TE.of(checkEmpryString(this.campaigns))), TE.ap(TE.of(headers)), TE.flatten);
     const runRequest = await request();
     pipe(runRequest, E.fold((error) => this.handleError(error), (data) => this.handleRecommendationsSucces(data)));
   }
@@ -351,6 +357,24 @@ export class VviinnVprWidget {
       "reflect": false,
       "defaultValue": "\"de-DE\""
     },
+    "campaigns": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "comma-separated list of campaign-ids"
+      },
+      "attribute": "campaigns",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
     "apiPath": {
       "type": "string",
       "mutable": false,
@@ -457,6 +481,9 @@ export class VviinnVprWidget {
     }, {
       "propName": "campaignType",
       "methodName": "handleCampaignTypeChange"
+    }, {
+      "propName": "campaigns",
+      "methodName": "handleCampaignsChange"
     }, {
       "propName": "apiPath",
       "methodName": "handleApiPathChange"

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

@@ -3,10 +3,11 @@ export default {
   component: "vviinn-vps-button",
   parameters: {
     viewport: {
-      defaultViewport: "mobile2"
-    }
+      defaultViewport: "mobile2",
+    },
   },
-  decorators: [(story) => `
+  decorators: [
+    (story) => `
     <div style="display: grid;
                 position: absolute;
                 top: 0;
@@ -17,15 +18,18 @@ export default {
                 justify-items: center;">
       ${story()}
     </div>
-  `],
+  `,
+  ],
 };
 const Template = (args) => `
 <vviinn-vps-button
   api-path="${args.apiPath}"
   token="${args.token}"
+  campaign-id="${args.campaignId}"
 ></vviinn-vps-button>`;
 export const Default = Template.bind({});
 Default.args = {
   token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
-  apiPath: "https://api.vviinn.com"
+  apiPath: "https://api.vviinn.com",
+  campaignId: "",
 };

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

@@ -60,7 +60,7 @@ export class VviinnVpsButton {
       h("slot", null,
         h(CameraIcon, null)),
       h(SlotSkeleton, null),
-      h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images" })));
+      h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images", campaignId: this.campaignId })));
   }
   static get is() { return "vviinn-vps-button"; }
   static get encapsulation() { return "shadow"; }
@@ -124,6 +124,23 @@ export class VviinnVpsButton {
       "reflect": false,
       "defaultValue": "\"de-DE\""
     },
+    "campaignId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Campaign using for visual search"
+      },
+      "attribute": "campaign-id",
+      "reflect": false
+    },
     "apiPath": {
       "type": "string",
       "mutable": false,

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

@@ -2,22 +2,25 @@ export default {
   title: "Widgets/Visual Search/Widget",
   parameters: {
     viewport: {
-      defaultViewport: "mobile2"
-    }
-  }
+      defaultViewport: "mobile2",
+    },
+  },
 };
-const Template = ({ token, apiPath }) => `
+const Template = ({ token, apiPath, campaignId }) => `
   <vviinn-vps-widget token="${token}"
                      api-path="${apiPath}"
+                     campaign-id="${campaignId}"
                      active="true">
   </vviinn-vps-widget>`;
 export const Default = Template.bind({});
 Default.args = {
   token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
-  apiPath: "https://api.vviinn.com"
+  apiPath: "https://api.vviinn.com",
+  campaignId: "",
 };
 Default.storyName = "Modal Window";
-Default.decorators = [(Story) => `
+Default.decorators = [
+  (Story) => `
 <style>
 .sb-show-main.sb-main-padded {
   padding: unset;
@@ -30,4 +33,5 @@ Default.decorators = [(Story) => `
   justify-items: center;
 }
 </style>
-${Story()}`];
+${Story()}`,
+];

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

@@ -2,10 +2,15 @@ import { Component, Host, h, State, Prop, Element, Watch, Listen, } from "@stenc
 import { state } from "../../store/store";
 import { imageSearchState } from "../../store/imageSearch.store";
 import * as O from "fp-ts/lib/Option";
+import { isEmpty } from "fp-ts/string";
 import { slotChangeListener } from "../customized-slots";
 import { v4 as uuidv4 } from "uuid";
 import { createTrackingApi } from "../../openApi";
 import { createFilterEvent, createProductClickVpsEvent, createProductViewVpsEvent, createSearchEvent, createWidgetVpsEvent, } from "../../tracking";
+import { pipe } from "fp-ts/lib/function";
+const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
+const notEmptyString = (s) => !isEmpty(s);
+const notNan = (n) => !isNaN(n);
 /**
  * @prop --color-primary: color used for action button, slider bullets and selected detected object;
  *
@@ -101,6 +106,7 @@ export class VviinnVpsWidget {
     state.currencySign = this.currencySign;
     state.locale = this.locale;
     imageSearchState.token = this.token;
+    imageSearchState.campaignId = pipe(this.campaignId, O.fromNullable, O.chain(O.fromPredicate(notEmptyString)), O.map(filterInt), O.chain(O.fromPredicate(notNan)), O.map((s) => `${s}`));
     this.uiSessionId = uuidv4();
   }
   trackOpenEvent() {
@@ -306,6 +312,23 @@ export class VviinnVpsWidget {
       "attribute": "locale",
       "reflect": false,
       "defaultValue": "\"de-DE\""
+    },
+    "campaignId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Campaign using for visual search"
+      },
+      "attribute": "campaign-id",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/searchSession/searchSession.js

@@ -3,6 +3,7 @@ import { makeRequest } from "../network/request";
 import { createInitPostRequest, getApiPath } from "../network/utils";
 import * as E from "fp-ts/Either";
 import * as TE from "fp-ts/TaskEither";
+import * as O from "fp-ts/Option";
 import { processBearerToken } from "../utils/token/tokenUtils";
 import { sequenceToEither } from "../utils/either";
 import { imageFormFromFile } from "../Image/form";
@@ -17,7 +18,11 @@ export const detectedObjectEq = {
     x.rectangle.height === y.rectangle.height &&
     x.rectangle.width === y.rectangle.width,
 };
-export const searchSessionClient = (initialData) => pipe(sequenceToEither(getApiPath(), createInitPostRequest), TE.fromEither, TE.chainW(makeRequest("search/session", initialData)));
+export const searchSessionClient = (initialData, campaignId = O.none) => {
+  const searchUrl = "search/session";
+  const requestUrl = pipe(campaignId, O.fold(() => searchUrl, (campaignId) => `${searchUrl}?campaign-id=${campaignId}`));
+  return pipe(sequenceToEither(getApiPath(), createInitPostRequest), TE.fromEither, TE.chainW(makeRequest(requestUrl, initialData)));
+};
 export const makeRequestFromFile = (token, file) => pipe(sequenceToEither(processBearerToken(token), E.right(imageFormFromFile(file))), E.map(([headers, body]) => {
   return {
     headers,

package/dist/collection/store/imageSearch.store.js

@@ -23,16 +23,11 @@ const makeAuthorizedRequest = (token) => pipe(token, processBearerToken, E.map((
   };
 }));
 const { state, onChange } = createStore({
-  token: undefined,
+  campaignId: O.none,
   results: [],
   filters: [],
-  resetCategoryLink: undefined,
-  activeIonLink: undefined,
   cropperHandlers: [],
-  selectedCropper: undefined,
-  rectangleSearchForm: undefined,
   detectedObjects: [],
-  detectedObject: undefined,
   objectDetectionInProgress: false,
   imageWidth: RESIZED_IMAGE_WIDTH,
   image: O.none,
@@ -93,7 +88,7 @@ export const uploadFile = (file) => {
       headers,
       body,
     };
-  }), TE.fromEither, TE.chain(searchSessionClient), TE.map((sessionResponse) => {
+  }), TE.fromEither, TE.chain((request) => searchSessionClient(request, state.campaignId)), TE.map((sessionResponse) => {
     updateState(sessionResponse);
     detectObjects(sessionResponse);
     state.loading = false;

package/dist/esm/{app-globals-6f6aa89e.js → app-globals-68b1d848.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-59f44eaa.js';
+import { E as Env } from './index-75a1f589.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.