@dintero/discounts-web-sdk 0.2.3 → 0.2.5

package/.github/workflows/build.yml

@@ -11,13 +11,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-      with:
-        node-version: 'lts/*'
-        cache: npm
-    - name: npm install, build and test
-      run: |
-        npm install
-        npm run test
-        npm run build
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+          cache: yarn
+
+      - name: yarn install, build and test
+        run: |
+          yarn install
+          yarn run test
+          yarn run build

package/.github/workflows/release.yml

@@ -18,22 +18,22 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 'lts/*'
 
-      - name: Install dependencies
+      - name: yarn install and test
         run: |
-          npm install
-          npm run test
+          yarn install
+          yarn run test
 
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
-        run: npm run semantic-release
+        run: yarn run semantic-release

package/README.md

@@ -169,8 +169,8 @@ All major modern browsers above version `N - 1`, where `N` is the most recent ve
 ## Building from source
 
 ```bash
-npm install
-npm run build
+yarn install
+yarn run build
 ```
 
 ### Creating a new release

package/dist/declarations/src/index.d.ts

@@ -1,2 +1,2 @@
-import { Configuration, Embed } from "./types";
+import { Configuration, Embed } from "./types.js";
 export declare const embed: (configuration: Configuration) => Promise<Embed>;

package/dist/dintero-discounts-web-sdk.cjs.d.ts

@@ -1 +1,2 @@
 export * from "./declarations/src/index";
+//# sourceMappingURL=dintero-discounts-web-sdk.cjs.d.ts.map

package/dist/dintero-discounts-web-sdk.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dintero-discounts-web-sdk.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/dintero-discounts-web-sdk.cjs.dev.js

@@ -4,55 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const createElement = options => {
   const elem = document.createElement(options.tag);
-
   if (options.attributes) {
     addAttributes(elem, options.attributes);
   }
-
   if (options.handlers) {
     addEventListeners(elem, options.handlers);
   }
-
   if (options.styles) {
     addStyles(elem, options.styles, options.theme);
   }
-
   if (options.innerHTML) {
     elem.innerHTML = options.innerHTML;
   }
-
   return elem;
 };
-
 const addClass = (elem, className) => {
   const names = elem.className.split(" ");
-
   if (!names.includes(className)) {
     elem.className = elem.className + " " + className;
   }
 };
-
 const hash = input => {
   let hash = 0;
-
   for (var i = 0; i < input.length; i++) {
     var char = input.charCodeAt(i);
     hash = (hash << 5) - hash + char;
     hash = hash & hash;
   }
-
   return hash.toString(36);
 };
-
 const addStyles = (elem, styles, theme) => {
   // "styled components" light
   styles.forEach(cssFn => {
     // get class name from hash
     const className = 'dintero-deals-' + hash(cssFn('dintero-deals', theme));
-    addClass(elem, className); // add style tag to DOM if not exists
-
+    addClass(elem, className);
+    // add style tag to DOM if not exists
     const hit = document.querySelector(`[data-css-hash=${className}]`);
-
     if (!hit) {
       const style = document.createElement('style');
       style.innerHTML = cssFn(className, theme);
@@ -61,13 +49,11 @@ const addStyles = (elem, styles, theme) => {
     }
   });
 };
-
 const addAttributes = (elem, attributes) => {
   Object.keys(attributes).forEach(key => {
     elem.setAttribute(key, attributes[key]);
   });
 };
-
 const addEventListeners = (elem, handlers) => {
   Object.keys(handlers).forEach(key => {
     elem.addEventListener(key, handlers[key]);
@@ -97,13 +83,11 @@ const no = {
 const translations = {
   no
 };
-const findValuesRegex = /(\{\{)[^}]*(\}\})/g; // i18n light
-
+const findValuesRegex = /(\{\{)[^}]*(\}\})/g;
+// i18n light
 const t = (translateString, values) => {
   const matches = translateString.match(findValuesRegex) || [];
-
   const _values = values || {};
-
   return matches.reduce((interpolated, match) => {
     const key = match.replace('{{', '').replace('}}', '');
     const value = _values[key] || '';
@@ -118,41 +102,32 @@ const monetaryString = (amount, configuration, options) => {
   const beforeDot = amountString.slice(0, dotIndex) || '0';
   const afterDot = amountString.slice(dotIndex);
   const exponentAmount = afterDot == "00" && !opt.decimal ? beforeDot : beforeDot + '.' + afterDot;
-
   if (opt.variant === 'short' && afterDot === '00') {
     return beforeDot + ',-';
   }
-
   if (!opt.currency) {
     return exponentAmount;
   }
-
   if (configuration.currency.position === 'prefix') {
     return configuration.currency.value + ' ' + exponentAmount;
   }
-
   return exponentAmount + ' ' + configuration.currency.value;
 };
-
 const padZero = value => {
   if (value < 10) {
     return `0${value}`;
   }
-
   return value.toString();
 };
-
 const dateString = (isoString, configuration) => {
   try {
     const date = new Date(isoString);
-
     if (configuration.language === 'no') {
       const dd = padZero(date.getDate());
       const mm = padZero(date.getMonth() + 1);
       const yyyy = date.getFullYear();
       return [dd, mm, yyyy].join('.');
     }
-
     return new Intl.DateTimeFormat().format(date);
   } catch (e) {
     return isoString.substr(0, 10);
@@ -178,7 +153,6 @@ const normalize = className => `
 `;
 
 const findWebshopLink = discount => discount.links && discount.links.find(x => x.rel && x.rel === 'webshop');
-
 const discountStyle = (className, theme) => `
 @keyframes appear {
     from {
@@ -221,7 +195,6 @@ const discountStyle = (className, theme) => `
     } 
   }
 `;
-
 const imageWrapperStyles = className => `
 .${className} {
     display: flex;
@@ -230,7 +203,6 @@ const imageWrapperStyles = className => `
     height: 300px;
     width: 100%,
 }`;
-
 const imageStyle = className => `
 .${className} {
     max-width: 100%;
@@ -238,7 +210,6 @@ const imageStyle = className => `
     text-align: center;
     display: inline-block;
 }`;
-
 const ribbonTopStyle = (className, theme) => `
 .${className} {
     position: absolute;
@@ -266,7 +237,6 @@ const ribbonTopStyle = (className, theme) => `
     opacity: 0.5;
 }
 `;
-
 const ribbonBottomStyle = (className, theme) => `
 .${className} {
     position: absolute;
@@ -294,7 +264,6 @@ const ribbonBottomStyle = (className, theme) => `
     opacity: 0.5;
 }
 `;
-
 const titleStyle = className => `
 .${className} {
     margin-bottom: 0;
@@ -303,12 +272,10 @@ const titleStyle = className => `
     font-size: 1.3em;
     font-weight: 700;
 }`;
-
 const subtitleStyle = className => `
 .${className} {
     margin-top: 0;
 }`;
-
 const limitationsWrapperStyle = className => `
 .${className} {
     font-size: 0.75em;
@@ -317,11 +284,9 @@ const limitationsWrapperStyle = className => `
     display: block;
 }
 `;
-
 const getTopRibbonText = discount => {
   return discount && discount.metadata && discount.metadata.label || undefined;
 };
-
 const createTopRibbon = (discount, configuration) => {
   const text = getTopRibbonText(discount);
   return text && createElement({
@@ -331,10 +296,8 @@ const createTopRibbon = (discount, configuration) => {
     styles: [ribbonTopStyle]
   });
 };
-
 const getBottomRibbonText = (discount, configuration) => {
   const tStrings = translations[configuration.language];
-
   if (discount.reward.type === "discount_item_new_price") {
     return monetaryString(discount.reward.value, configuration, {
       variant: "short"
@@ -363,10 +326,8 @@ const getBottomRibbonText = (discount, configuration) => {
   } else if (discount.reward.type === "discount_item_percent") {
     return discount.reward.value + "%";
   }
-
   return "";
 };
-
 const createBottomRibbon = (discount, configuration) => {
   const text = getBottomRibbonText(discount, configuration);
   return text && createElement({
@@ -376,7 +337,6 @@ const createBottomRibbon = (discount, configuration) => {
     styles: [ribbonBottomStyle]
   });
 };
-
 const createImage = discount => {
   const imageWrapper = createElement({
     tag: "div",
@@ -392,14 +352,11 @@ const createImage = discount => {
     },
     styles: [normalize, imageStyle]
   });
-
   if (image) {
     imageWrapper.appendChild(image);
   }
-
   return imageWrapper;
 };
-
 const createLimitations = (discount, configuration) => {
   const tStrings = translations[configuration.language];
   const wrapper = createElement({
@@ -434,13 +391,8 @@ const createLimitations = (discount, configuration) => {
   });
   const children = [quantity, repeat, start, end].filter(child => child);
   children.forEach(child => wrapper.appendChild(child));
-  console.log({
-    discount,
-    wrapper
-  });
   return wrapper;
 };
-
 const createDiscount = (discount, configuration) => {
   const discountElem = createElement({
     tag: findWebshopLink(discount) ? "a" : "div",
@@ -464,8 +416,8 @@ const createDiscount = (discount, configuration) => {
     tag: "p",
     innerHTML: discount.description
   });
-  const limitations = createLimitations(discount, configuration); // add children to discount wrapper
-
+  const limitations = createLimitations(discount, configuration);
+  // add children to discount wrapper
   const children = [ribbonTop, ribbonBottom, image, title, subtitle, description, limitations].filter(child => child);
   children.forEach(child => discountElem.appendChild(child));
   return discountElem;
@@ -473,7 +425,8 @@ const createDiscount = (discount, configuration) => {
 
 const createHeaders = (keyValues, configuration) => {
   const headers = new Headers();
-  Object.entries({ ...keyValues,
+  Object.entries({
+    ...keyValues,
     "Dintero-System-Name": "deals-web-sdk",
     "Dintero-System-Version": configuration.version
   }).forEach(([key, value]) => {
@@ -481,12 +434,10 @@ const createHeaders = (keyValues, configuration) => {
   });
   return headers;
 };
-
 const fetchAccessToken = configuration => {
   if (!configuration.api) {
     throw new Error("Authentication configuration missing");
   }
-
   const basicAuthCredentials = window.btoa(`${configuration.api.key}:${configuration.api.secret}`);
   const headers = createHeaders({
     Authorization: `Basic ${basicAuthCredentials}`,
@@ -504,17 +455,14 @@ const fetchAccessToken = configuration => {
     if (response.status === 200) {
       return response.json();
     }
-
     throw new Error("Authentication failed");
   });
 };
-
 const fetchDiscounts = configuration => {
   return fetchAccessToken(configuration).then(tokenResponse => {
     const headers = createHeaders({
       Authorization: `${tokenResponse.token_type} ${tokenResponse.access_token}`
     }, configuration);
-
     if (configuration.api.discountId) {
       return window.fetch(`${configuration.api.url}/v1/accounts/${configuration.api.account}/discounts/public/rules/${configuration.api.discountId}`, {
         headers
@@ -522,18 +470,15 @@ const fetchDiscounts = configuration => {
         if (response.status === 200) {
           return response.json().then(discount => [discount]);
         }
-
         throw new Error("Authentication failed");
       });
     }
-
     return window.fetch(`${configuration.api.url}/v1/accounts/${configuration.api.account}/discounts/public/rules?limit=${configuration.api.limit}`, {
       headers
     }).then(response => {
       if (response.status === 200) {
         return response.json();
       }
-
       throw new Error("Authentication failed");
     });
   });
@@ -572,7 +517,6 @@ const errorStyle = (className, theme) => `
     transform-origin: top center;
 }
 `;
-
 const createError = configuration => {
   const tString = translations[configuration.language];
   const errorElem = createElement({
@@ -613,7 +557,6 @@ const loadingStyle = (className, theme) => `
   }
 }
 `;
-
 const createLoading = configuration => {
   const errorElem = createElement({
     tag: "div",
@@ -625,7 +568,7 @@ const createLoading = configuration => {
 
 var pkg = {
 	name: "@dintero/discounts-web-sdk",
-	version: "0.2.3",
+	version: "0.2.5",
 	description: "Dintero Discounts SDK for web frontends",
 	main: "dist/dintero-discounts-web-sdk.cjs.js",
 	module: "dist/dintero-discounts-web-sdk.esm.js",
@@ -636,10 +579,10 @@ var pkg = {
 		umdName: "discounts"
 	},
 	scripts: {
-		test: "karma start",
+		test: "vitest --dom",
 		watch: "preconstruct watch",
 		build: "preconstruct build",
-		prepublishOnly: "npm run build",
+		prepublishOnly: "yarn build",
 		"semantic-release": "semantic-release"
 	},
 	"private": false,
@@ -654,27 +597,21 @@ var pkg = {
 		url: "https://github.com/Dintero/Dintero.Discounts.Web.SDK/issues"
 	},
 	devDependencies: {
-		"@babel/preset-env": "^7.14.1",
-		"@babel/preset-typescript": "^7.13.0",
-		"@preconstruct/cli": "^2.1.0",
-		"@semantic-release/git": "^10.0.1",
-		chai: "^4.2.0",
-		karma: "^6.3.16",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^3.1.0",
-		"karma-mocha": "^2.0.1",
-		"karma-typescript": "^5.0.3",
-		mocha: "^8.1.1",
-		prettier: "^2.7.0",
-		puppeteer: "^19.0.0",
-		"semantic-release": "^19.0.3",
-		typescript: "^4.2.4"
+		"@babel/core": "7.13.0",
+		"@babel/preset-typescript": "7.13.0",
+		"@preconstruct/cli": "2.8.1",
+		"@semantic-release/git": "10.0.1",
+		"happy-dom": "12.9.0",
+		prettier: "3.0.3",
+		"semantic-release": "22.0.5",
+		typescript: "5.2.2",
+		vitest: "0.34.6"
 	}
 };
 
 const defaultConfig = {
   language: 'no',
-  version: pkg.version,
+  version: pkg?.version || "SNAPSHOT",
   linkTarget: '_self',
   currency: {
     value: 'Kr',
@@ -697,22 +634,24 @@ const defaultConfig = {
     limit: 50
   }
 };
-
 const mergeConfig = (a, b) => {
-  return { ...a,
+  return {
+    ...a,
     ...b,
-    currency: { ...a.currency,
+    currency: {
+      ...a.currency,
       ...b.currency
     },
-    theme: { ...a.theme,
+    theme: {
+      ...a.theme,
       ...b.theme
     },
-    api: { ...a.api,
+    api: {
+      ...a.api,
       ...b.api
     }
   };
 };
-
 const wrapperStyles = (className, theme) => `
 .${className} {
     display: flex;
@@ -725,33 +664,25 @@ const wrapperStyles = (className, theme) => `
     font-size: ${theme.fontSize};
     color: ${theme.color};
 }`;
-
 const embed = async configuration => {
   const _configuration = mergeConfig(defaultConfig, configuration);
-
   if (!_configuration.container || !_configuration.container.appendChild) {
     console.error("Invalid configuration");
     throw new Error("Invalid configuration");
   }
-
   if (_configuration.discounts) {
     return renderDeals(_configuration, _configuration.discounts);
   } else {
     const loader = createLoading(_configuration);
-
     try {
       configuration.container.appendChild(loader);
       const discounts = await fetchDiscounts(_configuration);
-
       _configuration.container.removeChild(loader);
-
       return renderDeals(_configuration, discounts);
     } catch (error) {
       configuration.container.removeChild(loader);
       const errorMessage = createError(_configuration);
-
       _configuration.container.appendChild(errorMessage);
-
       return {
         destroy: () => {
           configuration.container.removeChild(errorMessage);
@@ -760,7 +691,6 @@ const embed = async configuration => {
     }
   }
 };
-
 const renderDeals = (configuration, discounts) => {
   const wrapper = createElement({
     tag: "div",
@@ -770,12 +700,10 @@ const renderDeals = (configuration, discounts) => {
   discounts.forEach(discount => {
     const elem = createDiscount(discount, configuration);
     const webShopLink = findWebshopLink(discount);
-
     if (webShopLink) {
       elem.setAttribute('target', configuration?.linkTarget || '_self');
       elem.setAttribute('href', webShopLink.href);
     }
-
     wrapper.appendChild(elem);
   });
   configuration.container.appendChild(wrapper);