@hotwax/dxp-components 1.0.2 → 1.1.1

package/lib/components/ShopifyImg.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<Readonly<{
+    size?: any;
+    src?: any;
+}>, unknown, {
+    imageUrl: string;
+}, {}, {
+    prepareImgUrl(src: string, size?: string): string;
+    checkIfImageExists(src: string): Promise<unknown>;
+    setImageUrl(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Readonly<{
+    size?: any;
+    src?: any;
+}>>>, {
+    readonly size?: any;
+    readonly src?: any;
+}, {}>;
+export default _default;

package/lib/components/ShopifyImg.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _index = require("../index");
+var _default = (0, _vue.defineComponent)({
+  template: `
+            <img :src="imageUrl"/>
+            `,
+  data() {
+    return {
+      imageUrl: _index.defaultImgUrl
+    };
+  },
+  props: ['src', 'size'],
+  mounted() {
+    this.setImageUrl();
+  },
+  updated() {
+    this.setImageUrl();
+  },
+  methods: {
+    prepareImgUrl(src, size) {
+      // return original size if no size is given
+      if (!size) return src;
+      // remove any current image size then add the new image size
+      return src.replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.').replace(/\.jpg|\.png|\.gif|\.jpeg/g, function (match) {
+        return '_' + size + match;
+      });
+    },
+    checkIfImageExists(src) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () {
+          resolve(true);
+        };
+        img.onerror = function () {
+          reject(false);
+        };
+        img.src = src;
+      });
+    },
+    setImageUrl() {
+      if (this.src) {
+        const src = this.prepareImgUrl(this.src, this.size);
+        this.checkIfImageExists(src).then(() => {
+          this.imageUrl = src;
+        });
+      }
+    }
+  }
+});
+exports.default = _default;

package/lib/index.d.ts

@@ -1,5 +1,8 @@
 import { useProductIdentificationStore } from "./store/productIdentification";
+import ShopifyImg from "./components/ShopifyImg";
+import { goToOms } from "./utils";
+declare let defaultImgUrl: string;
 export declare let dxpComponents: {
-    install(app: any): void;
+    install(app: any, options: any): void;
 };
-export { useProductIdentificationStore };
+export { useProductIdentificationStore, defaultImgUrl, ShopifyImg, goToOms };

package/lib/index.js

@@ -3,7 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dxpComponents = void 0;
+Object.defineProperty(exports, "ShopifyImg", {
+  enumerable: true,
+  get: function () {
+    return _ShopifyImg.default;
+  }
+});
+exports.dxpComponents = exports.defaultImgUrl = void 0;
+Object.defineProperty(exports, "goToOms", {
+  enumerable: true,
+  get: function () {
+    return _utils.goToOms;
+  }
+});
 Object.defineProperty(exports, "useProductIdentificationStore", {
   enumerable: true,
   get: function () {
@@ -12,15 +24,21 @@ Object.defineProperty(exports, "useProductIdentificationStore", {
 });
 var _pinia = require("pinia");
 var _productIdentification = require("./store/productIdentification");
+var _ShopifyImg = _interopRequireDefault(require("./components/ShopifyImg"));
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
 const pinia = (0, _pinia.createPinia)();
-
+let defaultImgUrl;
 // executed on app initialization
+exports.defaultImgUrl = defaultImgUrl;
 let dxpComponents = {
-  install(app) {
+  install(app, options) {
     // registering pinia in the app
     app.use(pinia);
+    app.component('ShopifyImg', _ShopifyImg.default);
+    exports.defaultImgUrl = defaultImgUrl = options.defaultImgUrl;
   }
 };
 exports.dxpComponents = dxpComponents;

package/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+declare const goToOms: (token: string, oms: string) => void;
+export { goToOms };

package/lib/utils/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.goToOms = void 0;
+const goToOms = (token, oms) => {
+  const link = (oms.startsWith('http') ? oms.replace('api/', "") : `https://${oms}.hotwax.io/`) + `?token=${token}`;
+  window.open(link, '_blank', 'noopener, noreferrer');
+};
+exports.goToOms = goToOms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwax/dxp-components",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -22,9 +22,13 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-typescript": "^7.21.5",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
     "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-vue": "^2.0.2",
     "eslint": "^8.16.0",
     "typescript": "^5.0.4"
   },