@equinor/echo-framework 0.7.12 → 0.8.1

package/dist/src/components/panel/corePanelLeft.module.css.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:all .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel)}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}@media screen and (max-width:927px) and (orientation:landscape){.corePanelLeft-module_buttonContainer__bs-Uu{right:-118px}}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
+var css_248z = ".corePanelLeft-module_wrapper__d2Omx{height:100%;left:-550px;max-width:550px;position:fixed;top:0;transition:left .4s ease-in-out,width .4s ease-in-out;width:550px;z-index:2}@media screen and (max-width:550px){.corePanelLeft-module_wrapperClosed__Zd1CL{left:-75vw;max-width:75vw;width:75vw}.corePanelLeft-module_active__-A3TW{width:100%}}.corePanelLeft-module_active__-A3TW{left:0;z-index:var(--echo-framework-z-level-panel)}.corePanelLeft-module_drawer__Wdb3G{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:hidden;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelLeft-module_active__-A3TW .corePanelLeft-module_drawer__Wdb3G{opacity:1}.corePanelLeft-module_buttonContainer__bs-Uu{display:flex;flex-direction:column;position:absolute;right:-70px;top:0}.corePanelLeft-module_button__SqyKk{margin-left:var(--medium);margin-top:var(--small)}";
 var style = {
   "wrapper": "corePanelLeft-module_wrapper__d2Omx",
   "wrapperClosed": "corePanelLeft-module_wrapperClosed__Zd1CL",

package/dist/src/components/panel/corePanelRight.js

@@ -42,9 +42,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 edsIons.edsIcons();
 
-var CorePanelRight = function CorePanelRight(_ref) {
-  var isToggleButtonVisible = _ref.isToggleButtonVisible;
-
+var CorePanelRight = function CorePanelRight() {
   var _a;
 
   var _EchoCore$usePanels = EchoCore.usePanels('right'),
@@ -76,7 +74,7 @@ var CorePanelRight = function CorePanelRight(_ref) {
     style: panelUI.panelButton
   }, panels.map(function (panel, i) {
     var PanelIcon = panel.icon;
-    return isToggleButtonVisible && /*#__PURE__*/React__default["default"].createElement(panelButton["default"], {
+    return /*#__PURE__*/React__default["default"].createElement(panelButton["default"], {
       key: i,
       label: panel.label,
       variant: panel.key === EchoCore.ECHO_CORE_MAIN ? panelButton.Variants.NotificationButton : panelButton.Variants.OpenCloseButton,

package/dist/src/components/panel/corePanelRight.module.css.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:550px;position:fixed;right:-352px;top:0;transition:all .4s ease-in-out;width:352px;z-index:2}@media screen and (max-width:550px){.corePanelRight-module_active__RIMQt{width:100%}}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel)}@media screen and (max-width:927px) and (orientation:landscape){.corePanelRight-module_wrapper__YN3Zr{left:-352px}.corePanelRight-module_active__RIMQt{left:0;z-index:var(--echo-framework-z-level-panel)}}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
+var css_248z = ".corePanelRight-module_wrapper__YN3Zr{height:100%;max-width:352px;position:fixed;right:-352px;top:0;transition:right .4s ease-in-out,width .4s ease-in-out;width:352px;z-index:2}@media screen and (max-width:500px){.corePanelRight-module_wrapper__YN3Zr{max-width:75vw;right:-75vw;width:75vw}}.corePanelRight-module_active__RIMQt{right:0;z-index:var(--echo-framework-z-level-panel)}.corePanelRight-module_drawer__1-ucH{background-color:#fff;border-left:2px solid #f7f7f7;box-shadow:0 6px 4px #00000040;display:flex;flex-direction:column;height:100%;opacity:0;overflow-y:auto;position:relative;transition:opacity .4s ease-in-out;width:auto}.corePanelRight-module_active__RIMQt .corePanelRight-module_drawer__1-ucH{opacity:1}.corePanelRight-module_buttonContainer__62imJ{display:flex;flex-direction:column;left:-90px;position:absolute;top:0}.corePanelRight-module_button__WBdfZ{margin-left:var(--medium);margin-top:var(--small)}";
 var style = {
   "wrapper": "corePanelRight-module_wrapper__YN3Zr",
   "active": "corePanelRight-module_active__RIMQt",

package/dist/src/components/realTimeData/components/connectorForIMSTag/IMSConnector.module.css.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".IMSConnector-module_wrapper__CvKvm{align-items:center;display:grid;gap:1rem;grid-row:1fr;grid-template-columns:1fr 1fr;justify-items:center;margin-top:1rem}.IMSConnector-module_experimentalWarning__7Vv3z{grid-template-columns:auto 1fr;margin-top:0}.IMSConnector-module_message__w8j1M{margin-top:1rem;width:100%}";
+var css_248z = ".IMSConnector-module_wrapper__CvKvm{align-items:center;display:grid;gap:1rem;grid-row:1fr;grid-template-columns:1fr 1fr;justify-items:center;margin-top:1rem}.IMSConnector-module_experimentalWarning__7Vv3z{grid-template-columns:auto 1fr;margin-top:0}.IMSConnector-module_message__w8j1M{margin-top:1rem;width:100%}.IMSConnector-module_requestAccess__YDOu9{margin-bottom:1rem}";
 var style = {
   "wrapper": "IMSConnector-module_wrapper__CvKvm",
   "experimentalWarning": "IMSConnector-module_experimentalWarning__7Vv3z IMSConnector-module_wrapper__CvKvm",
-  "message": "IMSConnector-module_message__w8j1M"
+  "message": "IMSConnector-module_message__w8j1M",
+  "requestAccess": "IMSConnector-module_requestAccess__YDOu9"
 };
 styleInject_es["default"](css_248z);
 exports["default"] = style;

package/dist/src/components/realTimeData/components/connectorForIMSTag/RealTimeConnectorForIMSTag.js

@@ -51,7 +51,8 @@ function RealTimeConnectorForIMSTag(_ref) {
       present = _useRealTimeHub$useRe.present,
       status = _useRealTimeHub$useRe.status,
       message = _useRealTimeHub$useRe.message,
-      loading = _useRealTimeHub$useRe.loading;
+      loading = _useRealTimeHub$useRe.loading,
+      statusCode = _useRealTimeHub$useRe.statusCode;
 
   var _React$useMemo = React.useMemo(function () {
     if (present && metadata) {
@@ -66,6 +67,8 @@ function RealTimeConnectorForIMSTag(_ref) {
 
   if (status === 'error') {
     return /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      instCode: instCode,
+      statusCode: statusCode,
       message: message
     });
   }
@@ -90,21 +93,43 @@ function SensorValueProps(_ref2) {
   var value = _ref2.value,
       unit = _ref2.unit;
 
-  if (!value || !unit) {
+  if (value === undefined || value === null) {
     return null;
-  }
+  } // If Value exists and unit is null
+  // it usually means the value is related to open/closed, true/false
+  // but i'm not sure how to tell which one.
+
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", null, value), " ", /*#__PURE__*/React__default["default"].createElement("b", null, unit));
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", null, value), " ", unit && /*#__PURE__*/React__default["default"].createElement("b", null, unit));
 }
 
 function ErrorMessage(_ref3) {
-  var message = _ref3.message;
+  var instCode = _ref3.instCode,
+      statusCode = _ref3.statusCode,
+      message = _ref3.message;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: IMSConnector_module["default"].message
-  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Typography, {
+  }, statusCode && statusCode === 403 ? /*#__PURE__*/React__default["default"].createElement(RequestAccessMessage, {
+    instCode: instCode
+  }) : /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Typography, {
     variant: "body_short",
-    color: echoComponents.themeConst.voided
+    color: echoComponents.themeConst.echoText
   }, message !== null && message !== void 0 ? message : 'Something went wrong with RTD connection.'));
 }
 
+function RequestAccessMessage(_ref4) {
+  var instCode = _ref4.instCode;
+  var url = new URL('https://accessit.equinor.com');
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: IMSConnector_module["default"].requestAccess
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Typography, {
+    variant: "body_short",
+    color: echoComponents.themeConst.echoText
+  }, "You need access to:"), /*#__PURE__*/React__default["default"].createElement(edsCoreReact.List, null, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.List.Item, null, "Omnia Plant Timeseries Read"), /*#__PURE__*/React__default["default"].createElement(edsCoreReact.List.Item, null, "PI vision"), instCode !== 'JSV' && /*#__PURE__*/React__default["default"].createElement(edsCoreReact.List.Item, null, "AspenOne Process Explorer"))), /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    as: "a",
+    href: url.href,
+    variant: "outlined"
+  }, "Go to AccessIT"));
+}
+
 exports.RealTimeConnectorForIMSTag = RealTimeConnectorForIMSTag;

package/dist/src/components/realTimeData/hooks/useSignalR.js

@@ -76,7 +76,7 @@ function useSignalR(hubUrl) {
   var _this = this;
 
   var _React$useState = React.useState({
-    status: '',
+    status: 'ok',
     loading: false
   }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -89,7 +89,8 @@ function useSignalR(hubUrl) {
       setState(function (state) {
         return Object.assign(Object.assign({}, state), {
           loading: false,
-          status: 'ok'
+          status: 'ok',
+          statusCode: status
         });
       });
     } else {
@@ -97,6 +98,7 @@ function useSignalR(hubUrl) {
         return Object.assign(Object.assign({}, state), {
           loading: false,
           status: 'error',
+          statusCode: status,
           message: typeof payload === 'string' ? payload : ''
         });
       });

package/dist/src/components/toaster/toaster.js

@@ -29,8 +29,7 @@ var Toaster = function Toaster(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Snackbar, {
     placement: 'bottom-left',
     open: true,
-    onClose: onClose,
-    className: toaster_module["default"].toaster
+    onClose: onClose
   }, toastNumber === numberOfToasts - 1 && numberOfToasts !== 1 && /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Chip, {
     variant: "error",
     className: toaster_module["default"].chip

package/dist/src/components/toaster/toaster.module.css.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, '__esModule', {
 
 var styleInject_es = require('../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".toaster-module_toaster__6C9aR{z-index:var(--echo-framework-z-level-toaster-message)!important}.toaster-module_chip__eNPoH{padding:5px!important;position:absolute;right:-5px;top:-5px}.toaster-module_toastersSection__q-orZ{grid-gap:24px;align-items:start;bottom:8px;display:grid;grid-auto-rows:32px;height:auto;left:8px;position:absolute}.toaster-module_toastersSection__q-orZ>div{height:32px;position:relative;width:fit-content}";
+var css_248z = ".toaster-module_chip__eNPoH{padding:5px!important;position:absolute;right:-5px;top:-5px}.toaster-module_toastersSection__q-orZ{grid-gap:24px;align-items:start;bottom:8px;display:grid;grid-auto-rows:32px;height:auto;left:8px;position:absolute}.toaster-module_toastersSection__q-orZ>div{height:32px;position:relative;width:fit-content}";
 var style = {
-  "toaster": "toaster-module_toaster__6C9aR",
   "chip": "toaster-module_chip__eNPoH",
   "toastersSection": "toaster-module_toastersSection__q-orZ"
 };

package/dist/src/coreApplication/EchoContent.js

@@ -24,13 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var EchoContent = function EchoContent(_ref) {
   var children = _ref.children,
-      Legend = _ref.Legend,
-      isToggleButtonVisible = _ref.isToggleButtonVisible;
-  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
-    isToggleButtonVisible: isToggleButtonVisible
-  }), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], {
-    isToggleButtonVisible: isToggleButtonVisible
-  }), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
+      Legend = _ref.Legend;
+  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], null), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], null), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
 };
 
 exports.EchoContent = EchoContent;

package/dist/src/globalStyles.css.js

@@ -2,5 +2,5 @@
 
 var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "#eds-tooltip-container>div{z-index:var(--echo-framework-z-level-tooltip)}:root{--echo-framework-z-level-panel:500;--echo-framework-z-level-toaster-message:600;--echo-framework-z-level-modal:700;--echo-framework-z-level-overlay:800;--echo-framework-z-level-tooltip:900;--echo-framework-z-level-bottom-bar:1000}";
+var css_248z = ":root{--echo-framework-z-level-panel:500;--echo-framework-z-level-scrim:1450}[class^=Scrim__StyledScrim]{z-index:var(--echo-framework-z-level-scrim)!important}";
 styleInject_es["default"](css_248z);

package/dist/src/hooks/index.js

@@ -6,13 +6,7 @@ Object.defineProperty(exports, '__esModule', {
 
 var useEchoHistory = require('./useEchoHistory.js');
 
-var useIsLandscape = require('./useIsLandscape.js');
-
-var useScreenOrientation = require('./useScreenOrientation.js');
-
 var useTagDetails = require('./useTagDetails.js');
 
 exports.useEchoHistory = useEchoHistory.useEchoHistory;
-exports.useIsLandscape = useIsLandscape.useIsLandscape;
-exports.useScreenOrientation = useScreenOrientation.useScreenOrientation;
 exports.useTagDetails = useTagDetails.useTagDetails;

package/dist/src/hooks/useSemi.js

@@ -12,48 +12,68 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var EchoCore = require('@equinor/echo-core');
+var EchoUtils = require('@equinor/echo-utils');
 
 var React = require('react');
 
 var useTagDetails = require('./useTagDetails.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
 /**
  * Provides information about Semi document for a given tag.
  *
- * @param {{ tagNo: string }} params
- * @param {string} params.tagNo Tag number in question.
+ * @param {{ tagNo: string; instCode: string }} params
+ * @param {string} params.tagNo The given tag's number.
+ * @param {string} params.instCode Plant's inst code.
  * @returns {Semi} object
  * @returns {boolean} object.isSemiDocumentAvailable - Will be set to true if the tag has Semi document.
  * @returns {string} object.semiDocumentId - If there's a document for the given tag, this will be set.
+ * @returns {boolean} object.isSemiLoading - Indicates if Semi is performing an API call (to get tag details)
  */
 
 
 function useSemi(_ref) {
-  var tagNo = _ref.tagNo;
+  var tagNo = _ref.tagNo,
+      instCode = _ref.instCode;
 
-  var _a;
-
-  var instCode = EchoCore.useInstCode();
-  var additionalTagDetailsFields = (_a = useTagDetails.useTagDetails({
+  var _useTagDetails$useTag = useTagDetails.useTagDetails({
     tagNo: tagNo,
     instCode: instCode
-  })) === null || _a === void 0 ? void 0 : _a.additionalFields;
+  }),
+      tagDetails = _useTagDetails$useTag.tagDetails,
+      isTagDetailsLoading = _useTagDetails$useTag.isTagDetailsLoading,
+      hasError = _useTagDetails$useTag.hasError;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isSemiDocumentAvailable = _React$useState2[0],
       setIsSemiDocumentAvailable = _React$useState2[1];
 
-  var _React$useState3 = React.useState(''),
+  var _React$useState3 = React.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      semiDocumentId = _React$useState4[0],
-      setSemiDocumentId = _React$useState4[1];
+      isSemiLoading = _React$useState4[0],
+      setIsSemiLoading = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      semiDocumentId = _React$useState6[0],
+      setSemiDocumentId = _React$useState6[1];
 
   React.useEffect(function () {
+    var additionalTagDetailsFields = tagDetails === null || tagDetails === void 0 ? void 0 : tagDetails.additionalFields;
+
     if (Array.isArray(additionalTagDetailsFields) && additionalTagDetailsFields.length > 0) {
       var semi = additionalTagDetailsFields.find(function (field) {
         return field.type === 'SMI';
@@ -64,10 +84,16 @@ function useSemi(_ref) {
         setSemiDocumentId(semi.value);
       }
     }
-  }, [additionalTagDetailsFields]);
+  }, [tagDetails, hasError]);
+  EchoUtils__default["default"].Hooks.useEffectAsync(function (signal) {
+    if (!signal.aborted) {
+      setIsSemiLoading(isTagDetailsLoading);
+    }
+  }, [isTagDetailsLoading]);
   return {
     isSemiDocumentAvailable: isSemiDocumentAvailable,
-    semiDocumentId: semiDocumentId
+    semiDocumentId: semiDocumentId,
+    isSemiLoading: isSemiLoading
   };
 }
 

package/dist/src/hooks/useTagDetails.js

@@ -12,69 +12,140 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
 var _tslib = require('../../_virtual/_tslib.js');
 
-var echoSearch = require('@equinor/echo-search');
+var EchoCore = require('@equinor/echo-core');
+
+var EchoUtils = require('@equinor/echo-utils');
+
+var apiTagDetails = require('../services/api/api-tag-details.js');
+
+var echopediaAnalyticsModule = require('../services/echopediaAnalyticsModule/echopediaAnalyticsModule.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var EchoCore__default = /*#__PURE__*/_interopDefaultLegacy(EchoCore);
 
-var React = require('react');
+var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
 /**
  * Provides tag details for a given tag number and instCode.
  *
  * @param {{ tagNo: string; instCode: string }} params
  * @param {string} params.tagNo The given tag's number.
  * @param {string} params.instCode Plant's inst code.
- * @returns {TagDetailsDto | undefined} TagDetailsDto or undefined
+ * @returns {Object} response
+ * @returns {TagDetailsDto | undefined} response.tagDetails
+ * @returns {boolean} response.isLoading Whether tag details API call is loading or not.
+ * @returns {boolean} response.hasError If the API call had any issues, this will be set to 'true'
  */
 
 
 function useTagDetails(_ref) {
-  var tagNo = _ref.tagNo,
-      instCode = _ref.instCode;
-
-  var _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tagDetails = _React$useState2[0],
-      setTagDetails = _React$useState2[1];
-
-  React.useEffect(function () {
-    var isMounted = true;
-
-    function getTagDetailsAsync() {
-      return _tslib.__awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var tagDetailsResult;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return echoSearch.Search.Tags.getTagDetailsAsync(tagNo, instCode);
-
-              case 2:
-                tagDetailsResult = _context.sent;
-
-                if (isMounted && tagDetailsResult.isSuccess) {
-                  setTagDetails(tagDetailsResult.value);
-                }
-
-              case 4:
-              case "end":
-                return _context.stop();
-            }
+  var _this = this;
+
+  var instCode = _ref.instCode,
+      tagNo = _ref.tagNo;
+  var _EchoUtils__default$d = EchoUtils__default["default"].Hooks,
+      useStateSafe = _EchoUtils__default$d.useStateSafe,
+      useEffectAsync = _EchoUtils__default$d.useEffectAsync;
+
+  var _useStateSafe = useStateSafe(undefined),
+      _useStateSafe2 = _slicedToArray(_useStateSafe, 2),
+      tagDetails = _useStateSafe2[0],
+      setTagDetails = _useStateSafe2[1];
+
+  var _useStateSafe3 = useStateSafe(true),
+      _useStateSafe4 = _slicedToArray(_useStateSafe3, 2),
+      isTagDetailsLoading = _useStateSafe4[0],
+      setIsTagDetailsLoading = _useStateSafe4[1];
+
+  var _useStateSafe5 = useStateSafe(false),
+      _useStateSafe6 = _slicedToArray(_useStateSafe5, 2),
+      hasError = _useStateSafe6[0],
+      setHasError = _useStateSafe6[1];
+
+  useEffectAsync( // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function (abortSignal) {
+    return _tslib.__awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var getDetails;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              getDetails = function _getDetails(instCode, tagNo) {
+                return _tslib.__awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+                  var tagDetailsApiResponse;
+                  return regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                      switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.prev = 0;
+                          setIsTagDetailsLoading(true);
+                          setHasError(false); // TODO: pass 'abortSignal' from useEffectAsync - now it throws "Failed to execute 'postMessage' on 'Worker': AbortSignal object could not be cloned"
+
+                          _context.next = 5;
+                          return apiTagDetails.getTagDetails({
+                            tagNo: tagNo,
+                            instCode: instCode
+                          });
+
+                        case 5:
+                          tagDetailsApiResponse = _context.sent;
+
+                          if (tagDetailsApiResponse) {
+                            setTagDetails(tagDetailsApiResponse);
+                          }
+
+                          _context.next = 15;
+                          break;
+
+                        case 9:
+                          _context.prev = 9;
+                          _context.t0 = _context["catch"](0);
+                          EchoCore__default["default"].handleErrors && EchoCore__default["default"].handleErrors(_context.t0, echopediaAnalyticsModule.echopediaAnalyticsModule);
+                          setTagDetails(undefined);
+                          setIsTagDetailsLoading(false);
+                          setHasError(true);
+
+                        case 15:
+                          _context.prev = 15;
+                          setIsTagDetailsLoading(false);
+                          return _context.finish(15);
+
+                        case 18:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee, null, [[0, 9, 15, 18]]);
+                }));
+              };
+
+              getDetails(instCode, tagNo);
+
+            case 2:
+            case "end":
+              return _context2.stop();
           }
-        }, _callee);
-      }));
-    }
-
-    getTagDetailsAsync();
-    return function () {
-      isMounted = false;
-    };
-  }, [tagNo, instCode]);
-  return tagDetails;
+        }
+      }, _callee2);
+    }));
+  }, [instCode, tagNo]);
+  return {
+    tagDetails: tagDetails,
+    isTagDetailsLoading: isTagDetailsLoading,
+    hasError: hasError
+  };
 }
 
 exports.useTagDetails = useTagDetails;

package/dist/src/icons/common/CommissionApp-icon.png.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var CommAppIcon = "data:image/png;base64,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";
+exports["default"] = CommAppIcon;

package/dist/src/icons/common/Evision.svg.js

@@ -54,13 +54,14 @@ var SvgEvision = function SvgEvision(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 25,
     height: 25,
+    viewBox: "0 0 25 25",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12.5 0C5.6 0 0 5.6 0 12.5c0 2.3.6 4.4 1.6 6.2C.8 17.2.4 15.4.4 13.5.4 7.4 5.1 2.4 10.9 2.4s10.5 5 10.5 11.1-4.7 11.1-10.5 11.1c-.8 0-1.7-.1-2.5-.3 1.3.4 2.6.7 4.1.7C19.4 25 25 19.4 25 12.5S19.4 0 12.5 0Z",
+    d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 14.8 0.6 16.9 1.6 18.7C0.8 17.2 0.4 15.4 0.4 13.5C0.4 7.4 5.1 2.4 10.9 2.4C16.7 2.4 21.4 7.4 21.4 13.5C21.4 19.6 16.7 24.6 10.9 24.6C10.1 24.6 9.2 24.5 8.4 24.3C9.7 24.7 11 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0Z",
     fill: "#FCB021"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.9 18.1c1.7 0 2.9-.6 4.1-1.8l2 1.8c-1.4 1.7-3.4 2.8-6.2 2.8C9.4 20.9 6 17.7 6 13c0-4.4 3.1-7.9 7.4-7.9 4.8 0 7.3 3.8 7.3 8.2 0 .3 0 .6-.1.9H9.5c.5 2.5 2.2 3.9 4.4 3.9Zm3.4-6.2c-.2-2.2-1.5-4-3.8-4-2.1 0-3.6 1.6-3.9 4h7.7Z",
+    d: "M13.9 18.1C15.6 18.1 16.8 17.5 18 16.3L20 18.1C18.6 19.8 16.6 20.9 13.8 20.9C9.4 20.9 6 17.7 6 13C6 8.60001 9.1 5.10001 13.4 5.10001C18.2 5.10001 20.7 8.90001 20.7 13.3C20.7 13.6 20.7 13.9 20.6 14.2H9.5C10 16.7 11.7 18.1 13.9 18.1ZM17.3 11.9C17.1 9.70001 15.8 7.90001 13.5 7.90001C11.4 7.90001 9.9 9.50001 9.6 11.9H17.3Z",
     fill: "#094D90"
   })));
 };

package/dist/src/icons/common/Fusion.svg.js

@@ -54,53 +54,58 @@ var SvgFusion = function SvgFusion(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 25,
     height: 25,
+    viewBox: "0 0 25 25",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#Fusion_svg__a)"
+    clipPath: "url(#clip0)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m24.7 11.5-7.2-8.2v5.5l3.1 3.5-3.1 3.5v5.5l7.2-8.2c.4-.5.4-1.2 0-1.6Z",
-    fill: "url(#Fusion_svg__b)"
+    d: "M24.7 11.5L17.5 3.29999V8.79999L20.6 12.3L17.5 15.8V21.3L24.7 13.1C25.1 12.6 25.1 11.9 24.7 11.5Z",
+    fill: "url(#paint0_linear)"
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "m.3 13.1 7.2 8.2v-5.5l-3.1-3.5 3.1-3.5V3.3L.3 11.5c-.4.4-.4 1.1 0 1.6Z",
-    fill: "url(#Fusion_svg__c)"
+    d: "M0.3 13.1L7.5 21.3V15.8L4.4 12.3L7.5 8.79999V3.29999L0.3 11.5C-0.1 11.9 -0.1 12.6 0.3 13.1Z",
+    fill: "url(#paint1_linear)"
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.9 3.3v5.5l2.2 3.1 2-2.7-4.2-5.9ZM17.1 15.8v5.5l-4.3-5.8 2-2.7 2.3 3Z",
+    d: "M7.89999 3.29999V8.79999L10.1 11.9L12.1 9.19999L7.89999 3.29999Z",
     fill: "#990025"
   }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M17.1 3.3 7.9 15.8v5.5L17 8.7V3.3h.1Z",
+    d: "M17.1 15.8V21.3L12.8 15.5L14.8 12.8L17.1 15.8Z",
+    fill: "#990025"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.1 3.29999L7.89999 15.8V21.3L17 8.69999V3.29999H17.1Z",
     fill: "#FF1243"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
-    id: "Fusion_svg__b",
-    x1: 19.701,
-    y1: 16.752,
-    x2: 19.927,
-    y2: 7.938,
+    id: "paint0_linear",
+    x1: 19.7013,
+    y1: 16.7519,
+    x2: 19.9272,
+    y2: 7.93807,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
-    offset: 0.508,
+    offset: 0.5083,
     stopColor: "#DC002E"
   }), /*#__PURE__*/React__namespace.createElement("stop", {
-    offset: 0.508,
+    offset: 0.5084,
     stopColor: "#FF1243"
   })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
-    id: "Fusion_svg__c",
-    x1: 5.273,
-    y1: 7.825,
-    x2: 5.047,
-    y2: 16.639,
+    id: "paint1_linear",
+    x1: 5.27325,
+    y1: 7.82458,
+    x2: 5.04731,
+    y2: 16.6388,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
-    offset: 0.508,
+    offset: 0.5083,
     stopColor: "#DC002E"
   }), /*#__PURE__*/React__namespace.createElement("stop", {
-    offset: 0.508,
+    offset: 0.5084,
     stopColor: "#FF1243"
   })), /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "Fusion_svg__a"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h25v25H0z"
+    id: "clip0"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 25,
+    height: 25,
+    fill: "white"
   })))));
 };