@dintero/discounts-web-sdk 0.2.2 → 0.2.4

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

@@ -1,5 +1,5 @@
 import { Theme } from './types';
-declare type CreateElementOptions = {
+type CreateElementOptions = {
     tag: string;
     attributes?: {
         [key: string]: any;

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({
@@ -440,7 +397,6 @@ const createLimitations = (discount, configuration) => {
   });
   return wrapper;
 };
-
 const createDiscount = (discount, configuration) => {
   const discountElem = createElement({
     tag: findWebshopLink(discount) ? "a" : "div",
@@ -464,8 +420,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 +429,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 +438,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 +459,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 +474,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 +521,6 @@ const errorStyle = (className, theme) => `
     transform-origin: top center;
 }
 `;
-
 const createError = configuration => {
   const tString = translations[configuration.language];
   const errorElem = createElement({
@@ -613,7 +561,6 @@ const loadingStyle = (className, theme) => `
   }
 }
 `;
-
 const createLoading = configuration => {
   const errorElem = createElement({
     tag: "div",
@@ -625,7 +572,7 @@ const createLoading = configuration => {
 
 var pkg = {
 	name: "@dintero/discounts-web-sdk",
-	version: "0.2.2",
+	version: "0.2.4",
 	description: "Dintero Discounts SDK for web frontends",
 	main: "dist/dintero-discounts-web-sdk.cjs.js",
 	module: "dist/dintero-discounts-web-sdk.esm.js",
@@ -636,7 +583,7 @@ var pkg = {
 		umdName: "discounts"
 	},
 	scripts: {
-		test: "karma start",
+		test: "jest --maxWorkers=1 --detectOpenHandles",
 		watch: "preconstruct watch",
 		build: "preconstruct build",
 		prepublishOnly: "npm run build",
@@ -658,23 +605,26 @@ var pkg = {
 		"@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",
+		"@types/jest": "^29.4.0",
+		jest: "^29.4.1",
+		"jest-environment-jsdom": "^29.4.1",
 		prettier: "^2.7.0",
-		puppeteer: "^19.0.0",
-		"semantic-release": "^19.0.3",
+		"semantic-release": "^20.1.0",
+		"ts-jest": "^29.0.5",
 		typescript: "^4.2.4"
+	},
+	jest: {
+		preset: "ts-jest",
+		testMatch: [
+			"**/test/**/*.test.ts"
+		],
+		testEnvironment: "jsdom"
 	}
 };
 
 const defaultConfig = {
   language: 'no',
-  version: pkg.version,
+  version: pkg?.version || "SNAPSHOT",
   linkTarget: '_self',
   currency: {
     value: 'Kr',
@@ -697,22 +647,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 +677,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 +704,6 @@ const embed = async configuration => {
     }
   }
 };
-
 const renderDeals = (configuration, discounts) => {
   const wrapper = createElement({
     tag: "div",
@@ -770,12 +713,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);