vviinn-widgets 2.18.21 → 2.19.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vpr-vidget.js","sourceRoot":"","sources":["../../../src/components/vviinn-vpr-widget/vviinn-vpr-vidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n  Fragment,\n} from \"@stencil/core\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport * as TE from \"fp-ts/lib/TaskEither\";\nimport * as E from \"fp-ts/lib/Either\";\nimport { createBearAuthedHeader } from \"./token-helpers\";\nimport { state } from \"../../store/store\";\nimport { CampaignName, campaignTypeNames } from \"../../campaign/Campaign\";\nimport { getRecommendationsService } from \"../../campaign/CampaignService\";\nimport { imageSearchState } from \"../../store/imageSearch.store\";\nimport { CarouselMode } from \"../vviinn-carousel/vviinn-carousel\";\nimport { Recommendation } from \"../../recommendation/recommendation\";\nimport { Subject } from \"rxjs\";\nimport { v4 as uuidv4 } from \"uuid\";\n\nimport {\n  DefaultApi,\n  EventConfirmation,\n  ProductClickEvent,\n  ProductViewEvent,\n  WidgetEvent,\n} from \"vviinn-tracking-client-ts\";\nimport { createTrackingApi } from \"../../openApi\";\nimport { ProductCardEvent, BasicEventData } from \"../../recommendation/events\";\nimport {\n  createProductClickVprEvent,\n  createProductViewVprEvent,\n  createWidgetVprEvent,\n} from \"../../tracking\";\nimport { checkEmpryString } from \"../../utils/option/option\";\n\n/**\n * @part product-card - product card itself\n * @part title - title inside product card\n * @part brand - brand inside product card\n * @part currency - brand inside product card\n * @part image - product card image\n * @part image-link - anchor element around product image\n * @part deeplink - anchor element around product title\n * @part price-amount-sale - numeric part of price.\n * @part price-amount-outdated - numeric part of price.\n * @part price-amount-regular - numeric part of price.\n * @part price-container - block of prices\n * @part price-outdated - block for outdated price. rendered when product contains sale price\n * @part price-regular - block for price if no sale price presented\n * @part price-sale -  block for sale price. rendered only if sale price presented\n * @part price-prefix - block rendered before each price element (for ex. \"from\")\n * @part carousel-button\n */\n@Component({\n  tag: \"vviinn-vpr-widget\",\n  styleUrl: \"vviinn-vpr-widget.css\",\n  shadow: true,\n})\nexport class VviinnVprWidget implements ComponentInterface {\n  @Element() el: HTMLElement;\n  /** Title for recommendations widget */\n  @Prop() blockTitle: string = \"Recommended products\";\n  /** Ratio of each recommended product image */\n  @Prop() imageRatio: number = 1;\n  /** Width of each recommended product image */\n  @Prop() imageWidth: number = 300;\n  /** Id of product you need recommendations for */\n  @Prop() productId: string;\n  /** vviinn customer token */\n  @Prop() token: string;\n  /** Currency sign will shown after price */\n  @Prop() currencySign: string = \"€\";\n  /** prefix will shown before price */\n  @Prop() pricePrefix: string;\n  /** Use slider or grid view */\n  @Prop() mode: CarouselMode = \"continuity\";\n  /** Campaign type */\n  @Prop() campaignType: CampaignName = \"VPR\";\n  /** Locale for currency formatting */\n  @Prop() locale: string = \"de-DE\";\n  /** comma-separated list of campaign-ids */\n  @Prop() campaigns: string = \"\";\n  /** Color accepts any hexcode string */\n  @Prop() color: string;\n  /** Hiding disabled arrows in the carousel if true */\n  @Prop() gridArrowsDynamic: boolean = false;\n  /** This message is displayed when no results */\n  @Prop() noResultText?: string;\n  /** Showing message (when true) or hiding the whole widget, when no results */\n  @Prop() noResultShow?: boolean = true;\n  /** @internal */\n  @Prop() apiPath: string | undefined = \"https://api.vviinn.com\";\n  /** @internal */\n  @Prop() useCarousel: boolean = true;\n\n  @Prop() showScroll = true;\n  @Prop() cssUrl: string | null = null;\n\n  /** @internal */\n  @Prop() buttonElementId?: string;\n\n  @State() recommendations: Recommendation[] = [];\n  @State() trackingDeactivated: boolean = false;\n  @State() hasErrorOnLoad: boolean = false;\n\n  @Event({ bubbles: true })\n  vviinnWidgetLoad: EventEmitter<BasicEventData>;\n\n  // List to show in the Storybook:\n  @Event() vviinnProductClick: EventEmitter;\n  @Event() vviinnProductView: EventEmitter;\n  @Event() vviinnProductLoad: EventEmitter;\n  @Event() vviinnNoResult: EventEmitter;\n\n  /** @internal */\n  @Event() vviinnRecommendationsLoaded: EventEmitter;\n\n  private productIds: string[];\n  private productImageLoadedSubject = new Subject();\n  private id?: string;\n\n  private getEventData(): BasicEventData {\n    return {\n      widgetType: \"VPR\",\n      campaignTypeId: this.campaignType,\n      campaignTypeName: campaignTypeNames[this.campaignType],\n      widgetId: this.id,\n    };\n  }\n\n  trackingApi: DefaultApi;\n  uiSessionId: string;\n\n  setTrackingDeactivated = (result: EventConfirmation) => {\n    if (result.status === \"rejected\") {\n      this.trackingDeactivated = true;\n    }\n  };\n\n  @Watch(\"productId\")\n  handleProductIdChange() {\n    this.getRecommendations();\n  }\n\n  @Watch(\"campaignType\")\n  handleCampaignTypeChange() {\n    this.getRecommendations();\n  }\n\n  @Watch(\"campaigns\")\n  handleCampaignsChange() {\n    this.getRecommendations();\n  }\n\n  @Watch(\"apiPath\")\n  handleApiPathChange(newPath: string) {\n    state.apiPath = newPath;\n    this.getRecommendations();\n  }\n\n  @Listen(\"vviinnProductLoad\")\n  handleProductLoading({ detail }: ProductCardEvent) {\n    this.productImageLoadedSubject.next(detail.productId);\n  }\n\n  @Listen(\"vviinnProductView\")\n  trackProductView({ detail }: ProductCardEvent) {\n    if (this.trackingDeactivated) return;\n    const {\n      productRank,\n      productId,\n      productName,\n      widgetType,\n      widgetId,\n      campaignTypeId,\n      campaignTypeName,\n      ...rest\n    } = detail;\n\n    const productViewEvent: ProductViewEvent = createProductViewVprEvent({\n      session_id: this.uiSessionId,\n      rank: productRank,\n      product: productId,\n      ...rest,\n    });\n    this.trackingApi\n      .trackEvent(productViewEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  @Listen(\"vviinnProductClick\")\n  async trackProductClick({ detail }: ProductCardEvent) {\n    const {\n      productRank,\n      productId,\n      productName,\n      widgetType,\n      widgetId,\n      campaignTypeId,\n      campaignTypeName,\n      ...rest\n    } = detail;\n\n    const productClickEvent: ProductClickEvent = createProductClickVprEvent({\n      session_id: this.uiSessionId,\n      rank: productRank,\n      product: productId,\n      ...rest,\n    });\n    if (!this.trackingDeactivated) {\n      await this.trackingApi\n        .trackEvent(productClickEvent)\n        .then(this.setTrackingDeactivated);\n    }\n\n    const product = this.recommendations.find(\n      (r) => r.productId === detail.productId\n    );\n    if (!product || !product.deeplink) return;\n    window.location.href = product.deeplink;\n  }\n\n  connectedCallback() {\n    state.apiPath = this.apiPath;\n    state.currencySign = this.currencySign;\n    state.locale = this.locale;\n    this.id = this.buttonElementId ?? this.el.id;\n    this.uiSessionId = uuidv4();\n    this.trackingApi = createTrackingApi(this.apiPath, this.token);\n\n    if (this.trackingDeactivated) return;\n\n    const widgetOpenEvent: WidgetEvent = createWidgetVprEvent({\n      action: \"open\",\n      session_id: this.uiSessionId,\n    });\n    this.trackingApi\n      .trackEvent(widgetOpenEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  disconnectedCallback() {\n    if (this.trackingDeactivated) return;\n\n    const widgetCloseEvent: WidgetEvent = createWidgetVprEvent({\n      action: \"close\",\n      session_id: this.uiSessionId,\n    });\n    this.trackingApi\n      .trackEvent(widgetCloseEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  async componentWillLoad() {\n    state.pricePrefix = this.pricePrefix;\n    state.currencySign = this.currencySign;\n\n    this.vviinnWidgetLoad.emit(this.getEventData());\n    this.getRecommendations();\n  }\n\n  private async getRecommendations() {\n    if (this.productId === undefined || this.token === undefined) return;\n    const campaignType =\n      this.campaignType.length > 0 ? this.campaignType : \"VPR\";\n    const headers = createBearAuthedHeader(this.token);\n    const request = pipe(\n      TE.of(getRecommendationsService(campaignType)),\n      TE.ap(TE.of(this.productId)),\n      TE.ap(TE.of(this.color)),\n      TE.ap(TE.of(checkEmpryString(this.campaigns))),\n      TE.ap(TE.of(headers)),\n      TE.flatten\n    );\n\n    const runRequest = await request();\n\n    pipe(\n      runRequest,\n      E.fold(\n        (error) => {\n          this.handleError(error);\n          this.vviinnNoResult.emit(this.getEventData());\n          this.vviinnRecommendationsLoaded.emit();\n        },\n        (data) => this.handleRecommendationsSuccess(data)\n      )\n    );\n  }\n\n  private handleError(_: unknown): any {\n    this.hasErrorOnLoad = true;\n  }\n\n  private handleRecommendationsSuccess(data: any) {\n    this.recommendations = data?.extended ?? data;\n    imageSearchState.results = this.recommendations;\n\n    this.productIds = this.recommendations.map((r) => r.productId);\n    this.productImageLoadedSubject.subscribe((id) => {\n      this.productIds = this.productIds.filter((x) => x !== id);\n\n      if (this.productIds.length === 0) {\n        this.vviinnRecommendationsLoaded.emit();\n      }\n    });\n  }\n\n  private isExternalCSS(): boolean {\n    return this.cssUrl && this.cssUrl.length > 0;\n  }\n\n  private renderExternalCSS() {\n    return this.isExternalCSS() ? (\n      <link href={this.cssUrl} rel=\"stylesheet\" />\n    ) : (\n      \"\"\n    );\n  }\n\n  render() {\n    if (this.recommendations.length === 0 && this.noResultShow === false)\n      return null;\n\n    return (\n      <Host\n        class={{\n          loaded: true,\n          empty: this.recommendations.length == 0,\n          [this.mode]: true,\n        }}\n        aria-hidden=\"false\"\n      >\n        <Fragment>\n          {this.renderExternalCSS()}\n          <style>{state.fallbackStyles}</style>\n          <h2 part=\"recommendations-title\">{this.blockTitle}</h2>\n          {this.recommendations.length > 0 &&\n            (this.useCarousel ? this.renderCarousel() : this.renderResults())}\n\n          {this.recommendations.length === 0 && this.hasErrorOnLoad && (\n            <p class=\"no-result-text\">{`${\n              this?.noResultText ?? \"No results! Please, try again later.\"\n            }`}</p>\n          )}\n        </Fragment>\n      </Host>\n    );\n  }\n\n  private renderRecommendation(\n    recommendation: Recommendation,\n    index: number\n  ): HTMLVviinnProductCardElement {\n    return (\n      <vviinn-product-card\n        part=\"product-part\"\n        productId={recommendation.productId}\n        productTitle={recommendation.title}\n        deeplink={recommendation.deeplink}\n        image={recommendation.image.thumbnail}\n        brand={recommendation.brand}\n        imageWidth={this.imageWidth}\n        imageRatio={1}\n        price={recommendation.price.actual}\n        salePrice={recommendation.price.sale}\n        responsive={this.mode === \"grid\"}\n        dimmedBackground={this.useDimmedBackgroundInCard()}\n        campaignTypeId={this.campaignType}\n        index={index}\n        widgetElementId={this.id}\n      />\n    );\n  }\n\n  private useDimmedBackgroundInCard(): boolean {\n    return this.mode === \"continuity\" || !this.useCarousel;\n  }\n\n  private renderResults() {\n    return (\n      <div class=\"recommendations-grid\" part=\"recommendations-grid\">\n        {this.recommendations.map((r, i) => this.renderRecommendation(r, i))}\n      </div>\n    );\n  }\n\n  private renderCarousel(): HTMLVviinnCarouselElement {\n    return (\n      <vviinn-carousel\n        mode={this.mode}\n        campaignTypeId={this.campaignType}\n        imageWidth={this.imageWidth}\n        showScroll={this.showScroll}\n        recommendations={this.recommendations}\n        widgetElementId={this.id}\n        gridArrowsDynamic={this.gridArrowsDynamic}\n      ></vviinn-carousel>\n    );\n  }\n}\n"]}

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

@@ -29,6 +29,7 @@ const Template = (args) => `
   add-style="${args.addStyle}"
   currency-sign="${args.currencySign}"
   locale="${args.locale}"
+  mode="${args.mode}"
 ></vviinn-vps-button>`;
 export const Default = Template.bind({});
 Default.args = {
@@ -38,4 +39,6 @@ Default.args = {
   addStyle: true,
   currencySign: "€",
   locale: "en-US",
+  mode: "modal",
 };
+//# sourceMappingURL=vviinn-vps-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vviinn-vps-button.stories.js","sourceRoot":"","sources":["../../../../src/components/vviinn-vps-button/stories/vviinn-vps-button.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,8BAA8B;EACrC,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,QAAQ,EAAE;MACR,eAAe,EAAE,SAAS;KAC3B;GACF;EACD,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;;;;;QASP,KAAK,EAAE;;GAEZ;GACA;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;;cAEb,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,KAAK;iBACJ,IAAI,CAAC,UAAU;eACjB,IAAI,CAAC,QAAQ;mBACT,IAAI,CAAC,YAAY;YACxB,IAAI,CAAC,MAAM;UACb,IAAI,CAAC,IAAI;sBACG,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EACH,mUAAmU;EACrU,OAAO,EAAE,wBAAwB;EACjC,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE,IAAI;EACd,YAAY,EAAE,GAAG;EACjB,MAAM,EAAE,OAAO;EACf,IAAI,EAAE,OAAO;CACd,CAAC","sourcesContent":["export default {\n  title: \"Widgets/Visual Search/Button\",\n  component: \"vviinn-vps-button\",\n  parameters: {\n    viewport: {\n      defaultViewport: \"mobile2\",\n    },\n  },\n  decorators: [\n    (story) => `\n    <div style=\"display: grid;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                align-items: center;\n                justify-items: center;\">\n      ${story()}\n    </div>\n  `,\n  ],\n};\n\nconst Template = (args) => `\n<vviinn-vps-button\n  api-path=\"${args.apiPath}\"\n  token=\"${args.token}\"\n  campaign-id=\"${args.campaignId}\"\n  add-style=\"${args.addStyle}\"\n  currency-sign=\"${args.currencySign}\"\n  locale=\"${args.locale}\"\n  mode=\"${args.mode}\"\n></vviinn-vps-button>`;\n\nexport const Default = Template.bind({});\nDefault.args = {\n  token:\n    \"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4\",\n  apiPath: \"https://api.vviinn.com\",\n  campaignId: \"\",\n  addStyle: true,\n  currencySign: \"€\",\n  locale: \"en-US\",\n  mode: \"modal\",\n};\n"]}