vviinn-widgets 2.5.2 → 2.6.0

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

@@ -1,190 +0,0 @@
-export const apiPath = {
-  name: "api-path",
-  control: {
-    type: "text",
-  },
-  table: {
-    defaultValue: { summary: "https://api.vviinn.com" },
-  },
-};
-const token = {
-  name: "token",
-  control: {
-    type: "text",
-  },
-};
-const productId = {
-  name: "product-id",
-  control: {
-    type: "text",
-  },
-};
-const cssUrl = {
-  name: "css-url",
-  description: "Optional for custom CSS.  It will overwrite all other settings.",
-  control: {
-    type: "text",
-  },
-  required: false,
-};
-const analyticsId = {
-  name: "Google tracking account ID",
-  description: "Optional. Goolge Analytics account id or tag manager id and click events will be send for analytics product lists",
-  control: {
-    type: "text",
-  },
-  required: false,
-};
-export const campaignType = {
-  name: "campaign-type",
-  control: {
-    type: "select",
-    labels: {
-      VPR: "Visually similar products (VPR)",
-      VCS: "Visually cross-selling (VCS)",
-    },
-  },
-  required: false,
-};
-const showTitle = {
-  name: "Section title",
-  control: {
-    type: "boolean",
-  },
-  table: {
-    defaultValue: { summary: true },
-  },
-  required: false,
-};
-const titleName = {
-  name: "block-title",
-  control: {
-    type: "text",
-  },
-  table: {
-    defaultValue: { summary: "Recommended products" },
-  },
-  required: false,
-};
-const titleFontSize = {
-  name: "Section title name font size (px)",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-const showScrollbars = {
-  name: "show-scroll",
-  description: "Add browser default horizontal scroll bar (in continuity mode) or pagination bullets (in grid mode) to add extra cue for users ",
-  control: {
-    type: "boolean",
-  },
-  required: false,
-};
-const imageWidth = {
-  name: "image-width",
-  control: {
-    type: "number",
-  },
-};
-const contentAlignment = {
-  name: "Content alignment",
-  options: ["Left", "Centered", "Right"],
-  mapping: {
-    Left: 0,
-    Centered: 1,
-    Right: 2,
-  },
-  control: {
-    type: "select",
-    default: 0,
-  },
-};
-const primaryTextColor = {
-  name: "Primary text color",
-  control: {
-    type: "color",
-  },
-  description: "Used where the most user attention is needed: product brand, product title, and price.",
-};
-const secondaryTextColor = {
-  name: "Secondary text color",
-  description: "Used in Old Price",
-  control: {
-    type: "color",
-  },
-};
-export const argTypes = {
-  analyticsId,
-  apiPath,
-  campaignType,
-  contentAlignment,
-  cssUrl,
-  imageWidth,
-  primaryTextColor,
-  productId,
-  secondaryTextColor,
-  showScrollbars,
-  showTitle,
-  titleFontSize,
-  titleName,
-  token,
-};
-const recommendationsGridProductsDesktop = {
-  name: "Product cards shown on desktop",
-  description: "Desktop mode is bigger than 1024px. (Use arrow buttons to apply changes)",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-const recommendationsGridProductsTablet = {
-  name: "Product cards shown on tablet",
-  description: "How many product cards users will see inside one grid in a screen 768px-1024px. (Use arrow buttons to apply changes)",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-const recommendationsGridProductsMobile = {
-  name: "Product cards shown on mobile",
-  description: "How many product cards users will see inside one grid in a screen <768. (Use arrow buttons to apply changes)",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-export const gridLayoutArgs = {
-  recommendationsGridProductsDesktop,
-  recommendationsGridProductsTablet,
-  recommendationsGridProductsMobile,
-};
-const recommendationsContinuityProductsDesktop = {
-  name: "Product cards width in a L screen [px]",
-  description: "How wide product cards will be on a screen bigger than 1024px width",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-const recommendationsContinuityProductsTablet = {
-  name: "Product cards width in a M screen [px]",
-  description: "How wide product cards will be on a screen from 768px-1024px width",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-const recommendationsContinuityProductsMobile = {
-  name: "Product cards width in a S screen [px]",
-  description: "How wide product cards will be on a screen smaller than 768px width",
-  control: {
-    type: "number",
-  },
-  required: false,
-};
-export const continuityLayoutArgs = {
-  recommendationsContinuityProductsDesktop,
-  recommendationsContinuityProductsTablet,
-  recommendationsContinuityProductsMobile,
-};

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

@@ -1,29 +0,0 @@
-export const gridDecorator = (story) => `
-<style>
-  @media (min-width: 836px) {
-    #root-inner {
-      padding: 0 10%;
-    }
-  }
-
-  @media (max-width: 860px) {
-    vviinn-product-card::part(title),
-    vviinn-product-card::part(brand),
-    vviinn-product-card::part(type),
-    vviinn-product-card::part(price-container) {
-      font-size: 14px;
-    }
-  }
-</style>
-${story()}
-`;
-export const continuityDecorator = (story) => `
-<style>
-  @media (min-width: 836px) {
-    #root-inner {
-      padding-left: 10%;
-    }
-  }
-</style>
-${story()}
-`;

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

@@ -1,212 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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);