@hotwax/dxp-components 1.0.2 → 1.2.0

package/lib/components/Login.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {
+    errorMsg: string;
+    router: any;
+    route: any;
+    authStore: any;
+}, {}, {
+    handleUserFlow(token: string, oms: string, expirationTime: string): Promise<void>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/components/Login.js

@@ -0,0 +1,90 @@
+"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: `
+            <div style='position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);'>
+              <h4 v-if='errorMsg.length'> 
+                {{ errorMsg }}
+              </h4>
+            </div>
+            `,
+  data() {
+    return {
+      errorMsg: '',
+      router: {},
+      route: {},
+      authStore: {}
+    };
+  },
+  async mounted() {
+    // exporting the same from index.ts through globalProperties does not work as expected
+    const instance = (0, _vue.getCurrentInstance)();
+    this.route = instance.appContext.config.globalProperties.$route;
+    this.router = instance.appContext.config.globalProperties.$router;
+    this.authStore = (0, _index.useAuthStore)();
+    if (!Object.keys(this.route.query).length) {
+      this.errorMsg = 'Unable to login. Could not authenticate the user';
+      return;
+    }
+    const {
+      token,
+      oms,
+      expirationTime
+    } = this.route.query;
+    const appToken = this.authStore.token.value;
+    const appOms = this.authStore.oms;
+    const appExpirationTime = this.authStore.token.expiration;
+
+    // show alert if token/oms are different from the app's
+    if (appToken && token && (appToken != token || appOms != oms)) {
+      // for backward compatibility
+      this.authStore.$patch({
+        token: {
+          value: appToken,
+          expiration: appExpirationTime
+        },
+        oms: appOms
+      });
+      await _index.loginContext.confirmSessionEnd('dev-oms').then(isConfirmed => {
+        isConfirmed ? this.handleUserFlow(token, oms, expirationTime) : this.router.push('/');
+      });
+    }
+  },
+  methods: {
+    async handleUserFlow(token, oms, expirationTime) {
+      // logout to clear current user state
+      await _index.loginContext.logout();
+
+      // update the previously set values if the user opts ending the previous session
+      this.authStore.$patch({
+        token: {
+          value: token,
+          expiration: expirationTime
+        },
+        oms
+      });
+      _index.loginContext.loader.present('Logging in');
+      try {
+        await _index.loginContext.login({
+          token,
+          oms
+        });
+        this.router.replace({
+          path: '/'
+        });
+      } catch (error) {
+        console.error(error);
+        this.errorMsg = 'Unable to login. Please contact the administrator';
+      } finally {
+        _index.loginContext.loader.dismiss();
+      }
+    }
+  }
+});
+exports.default = _default;

package/lib/components/ShopifyImg.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<Readonly<{
+    size?: any;
+    src?: any;
+}>, unknown, {
+    imageUrl: any;
+}, {}, {
+    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.shopifyImgContext.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,11 @@
 import { useProductIdentificationStore } from "./store/productIdentification";
+import { useAuthStore } from "./store/auth";
+import Login from "./components/Login";
+import ShopifyImg from "./components/ShopifyImg";
+import { goToOms } from "./utils";
+declare let loginContext: any;
+declare let shopifyImgContext: any;
 export declare let dxpComponents: {
-    install(app: any): void;
+    install(app: any, options: any): void;
 };
-export { useProductIdentificationStore };
+export { useProductIdentificationStore, useAuthStore, Login, loginContext, shopifyImgContext, ShopifyImg, goToOms };

package/lib/index.js

@@ -3,7 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Login", {
+  enumerable: true,
+  get: function () {
+    return _Login.default;
+  }
+});
+Object.defineProperty(exports, "ShopifyImg", {
+  enumerable: true,
+  get: function () {
+    return _ShopifyImg.default;
+  }
+});
 exports.dxpComponents = void 0;
+Object.defineProperty(exports, "goToOms", {
+  enumerable: true,
+  get: function () {
+    return _utils.goToOms;
+  }
+});
+exports.shopifyImgContext = exports.loginContext = void 0;
+Object.defineProperty(exports, "useAuthStore", {
+  enumerable: true,
+  get: function () {
+    return _auth.useAuthStore;
+  }
+});
 Object.defineProperty(exports, "useProductIdentificationStore", {
   enumerable: true,
   get: function () {
@@ -12,15 +37,33 @@ Object.defineProperty(exports, "useProductIdentificationStore", {
 });
 var _pinia = require("pinia");
 var _productIdentification = require("./store/productIdentification");
+var _auth = require("./store/auth");
+var _Login = _interopRequireDefault(require("./components/Login"));
+var _ShopifyImg = _interopRequireDefault(require("./components/ShopifyImg"));
+var _utils = require("./utils");
+var _piniaPluginPersistedstate = _interopRequireDefault(require("pinia-plugin-persistedstate"));
+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)();
+pinia.use(_piniaPluginPersistedstate.default);
+let loginContext = {};
+exports.loginContext = loginContext;
+let shopifyImgContext = {};
 
 // executed on app initialization
+exports.shopifyImgContext = shopifyImgContext;
 let dxpComponents = {
-  install(app) {
+  install(app, options) {
     // registering pinia in the app
     app.use(pinia);
+    app.component('Login', _Login.default);
+    app.component('ShopifyImg', _ShopifyImg.default);
+    loginContext.login = options.login;
+    loginContext.confirmSessionEnd = options.confirmSessionEnd;
+    loginContext.logout = options.logout;
+    loginContext.loader = options.loader;
+    shopifyImgContext.defaultImgUrl = options.defaultImgUrl;
   }
 };
 exports.dxpComponents = dxpComponents;

package/lib/store/auth.d.ts

@@ -0,0 +1,52 @@
+export declare const useAuthStore: import("pinia").StoreDefinition<"userAuth", {
+    token: {
+        value: string;
+        expiration: undefined;
+    };
+    oms: string;
+}, {
+    getToken: (state: {
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    } & import("pinia").PiniaCustomStateProperties<{
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    }>) => {
+        value: string;
+        expiration: undefined;
+    };
+    getOms: (state: {
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    } & import("pinia").PiniaCustomStateProperties<{
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    }>) => string;
+    isAuthenticated: (state: {
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    } & import("pinia").PiniaCustomStateProperties<{
+        token: {
+            value: string;
+            expiration: undefined;
+        };
+        oms: string;
+    }>) => boolean | "";
+}, {
+    authenticate(): Promise<void>;
+}>;

package/lib/store/auth.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAuthStore = void 0;
+var _pinia = require("pinia");
+var _luxon = require("luxon");
+const useAuthStore = (0, _pinia.defineStore)('userAuth', {
+  state: () => {
+    return {
+      token: {
+        value: '',
+        expiration: undefined
+      },
+      oms: ''
+    };
+  },
+  getters: {
+    getToken: state => state.token,
+    getOms: state => state.oms,
+    isAuthenticated: state => {
+      let isTokenExpired = false;
+      if (state.token.expiration) {
+        const currTime = _luxon.DateTime.now().toMillis();
+        isTokenExpired = state.token.expiration < currTime;
+      }
+      return state.token.value && !isTokenExpired;
+    }
+  },
+  actions: {
+    // TODO will be done once backend support is there
+    async authenticate() {
+      // try {
+      //   // authenticate through cookies
+      //   return this.token
+      // } catch (error) {
+      //   console.log(error)
+      // }
+    }
+  }
+});
+exports.useAuthStore = useAuthStore;

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.2.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -16,17 +16,24 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@hotwax/oms-api": "^1.8.1",
+    "luxon": "^3.3.0",
     "pinia": "2.0.36",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.3.4"
   },
   "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",
+    "@types/luxon": "^3.3.0",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.16.0",
-    "typescript": "^5.0.4"
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^7.32.0",
+    "typescript": "~4.7.4"
   },
   "repository": {
     "type": "git",