@hotwax/dxp-components 1.0.0 → 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

@@ -0,0 +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, options: any): void;
+};
+export { useProductIdentificationStore, defaultImgUrl, ShopifyImg, goToOms };

package/lib/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 () {
+    return _productIdentification.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, options) {
+    // registering pinia in the app
+    app.use(pinia);
+    app.component('ShopifyImg', _ShopifyImg.default);
+    exports.defaultImgUrl = defaultImgUrl = options.defaultImgUrl;
+  }
+};
+exports.dxpComponents = dxpComponents;

package/lib/store/productIdentification.d.ts

@@ -0,0 +1,43 @@
+export declare const useProductIdentificationStore: import("pinia").StoreDefinition<"productIdentification", {
+    productIdentificationPref: {
+        primaryId: string;
+        secondaryId: string;
+    };
+    productIdentificationOptions: string[];
+}, {
+    getProductIdentificationPref: (state: {
+        productIdentificationPref: {
+            primaryId: string;
+            secondaryId: string;
+        };
+        productIdentificationOptions: string[];
+    } & import("pinia").PiniaCustomStateProperties<{
+        productIdentificationPref: {
+            primaryId: string;
+            secondaryId: string;
+        };
+        productIdentificationOptions: string[];
+    }>) => {
+        primaryId: string;
+        secondaryId: string;
+    };
+    getProductIdentificationOptions: (state: {
+        productIdentificationPref: {
+            primaryId: string;
+            secondaryId: string;
+        };
+        productIdentificationOptions: string[];
+    } & import("pinia").PiniaCustomStateProperties<{
+        productIdentificationPref: {
+            primaryId: string;
+            secondaryId: string;
+        };
+        productIdentificationOptions: string[];
+    }>) => string[];
+}, {
+    setProductIdentificationPref(id: string, value: string, eComStoreId: string): Promise<void>;
+    getIdentificationPref(eComStoreId: string): Promise<{
+        primaryId: string;
+        secondaryId: string;
+    } | undefined>;
+}>;

package/lib/store/productIdentification.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProductIdentificationStore = void 0;
+var _omsApi = require("@hotwax/oms-api");
+var _pinia = require("pinia");
+const useProductIdentificationStore = (0, _pinia.defineStore)('productIdentification', {
+  state: () => {
+    return {
+      productIdentificationPref: {
+        primaryId: 'productId',
+        secondaryId: ''
+      },
+      productIdentificationOptions: ["productId", "groupId", "groupName", "internalName", "parentProductName", "primaryProductCategoryName", "productId", "sku", "title", "SHOPIFY_PROD_SKU"]
+    };
+  },
+  getters: {
+    getProductIdentificationPref: state => state.productIdentificationPref,
+    getProductIdentificationOptions: state => state.productIdentificationOptions
+  },
+  actions: {
+    async setProductIdentificationPref(id, value, eComStoreId) {
+      const productIdentificationPref = JSON.parse(JSON.stringify(this.getProductIdentificationPref));
+
+      // When eComStoreId is not available then make the values change to what selected previously
+      if (!eComStoreId) {
+        this.productIdentificationPref = productIdentificationPref;
+        return;
+      }
+      productIdentificationPref[id] = value;
+      try {
+        this.productIdentificationPref = await (0, _omsApi.setProductIdentificationPref)(eComStoreId, productIdentificationPref);
+      } catch (err) {
+        console.log('error', err);
+      }
+    },
+    async getIdentificationPref(eComStoreId) {
+      // when selecting none as ecom store, not fetching the pref as it returns all the entries with the pref id
+      if (!eComStoreId) {
+        return this.productIdentificationPref = {
+          primaryId: 'productId',
+          secondaryId: ''
+        };
+      }
+      this.productIdentificationPref = await (0, _omsApi.getProductIdentificationPref)(eComStoreId);
+    }
+  }
+});
+exports.useProductIdentificationStore = useProductIdentificationStore;

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.0",
+  "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"
   },