@salesgenterp/ui-components 0.4.548 → 0.4.549

package/dist/index.js

@@ -30,6 +30,7 @@ var xDatePickers = require('@mui/x-date-pickers');
 var moment$1 = _interopDefault(require('moment/moment'));
 var router = require('next/router');
 var Cards = _interopDefault(require('react-credit-cards'));
+var reactPdfViewer = require('@embedpdf/react-pdf-viewer');
 var hi = require('react-icons/hi');
 var bs = require('react-icons/bs');
 var tfi = require('react-icons/tfi');
@@ -2834,6 +2835,285 @@ var InfoContainer = styled__default.div(_templateObject$9 || (_templateObject$9
   return props.fontColor;
 });
 
+var DISABLED_CATEGORIES = ['annotation', 'annotation-shape', 'insert', 'form', 'redaction', 'panel-search', 'panel-comment', 'document-open', 'document-close', 'document-export', 'document-capture', 'document-protect'];
+var EMPTY_UNSUBSCRIBERS = [];
+var LOAD_TIMEOUT_MS = 20000;
+var DEFAULT_ERROR_MESSAGE = 'Unable to load this PDF. Please try again later.';
+var safeCall = function safeCall(fn) {
+  try {
+    return typeof fn === 'function' ? fn() : undefined;
+  } catch (error) {
+    console.error('[ViewPdf]', error);
+    return undefined;
+  }
+};
+var clearSubscriptions = function clearSubscriptions(unsubscribersRef) {
+  var list = unsubscribersRef === null || unsubscribersRef === void 0 ? void 0 : unsubscribersRef.current;
+  if (!Array.isArray(list)) return;
+  list.forEach(function (unsubscribe) {
+    safeCall(unsubscribe);
+  });
+  unsubscribersRef.current = [];
+};
+var hideEmptyStateOpenButton = function hideEmptyStateOpenButton(container) {
+  try {
+    var shadow = container === null || container === void 0 ? void 0 : container.shadowRoot;
+    if (!shadow || typeof CSSStyleSheet === 'undefined') return;
+    if (typeof shadow.adoptedStyleSheets === 'undefined') return;
+    var sheet = new CSSStyleSheet();
+    if (typeof (sheet === null || sheet === void 0 ? void 0 : sheet.replaceSync) !== 'function') return;
+    sheet.replaceSync("\n      button[aria-label=\"Open File\"],\n      button[aria-label=\"Open Document\"],\n      button[aria-label*=\"Open Document\"],\n      button.bg-accent.inline-flex {\n        display: none !important;\n        pointer-events: none !important;\n      }\n      p.text-fg-muted.mt-4.text-xs {\n        display: none !important;\n      }\n    ");
+    var existingSheets = Array.isArray(shadow.adoptedStyleSheets) ? shadow.adoptedStyleSheets : [];
+    shadow.adoptedStyleSheets = [].concat(existingSheets, [sheet]);
+  } catch (error) {
+    console.error('[ViewPdf] Failed to hide open-document UI', error);
+  }
+};
+var viewerShellStyle = {
+  position: 'relative',
+  width: '100%',
+  minWidth: 900,
+  minHeight: 600,
+  height: '70vh',
+  boxSizing: 'border-box'
+};
+var overlayStyle = {
+  position: 'absolute',
+  inset: 0,
+  zIndex: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '0.75rem',
+  background: '#f4f5f7',
+  color: '#4b5563',
+  fontSize: '0.95rem',
+  fontWeight: 600,
+  padding: '1.5rem',
+  textAlign: 'center',
+  boxSizing: 'border-box'
+};
+var closeButtonStyle = {
+  marginTop: '0.5rem',
+  padding: '0.5rem 1rem',
+  border: '1px solid #d1d5db',
+  borderRadius: 6,
+  background: '#fff',
+  color: '#374151',
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  cursor: 'pointer'
+};
+var getErrorMessage = function getErrorMessage(error) {
+  var _error$reason;
+  if (typeof error === 'string' && error.trim()) return error.trim();
+  if (error !== null && error !== void 0 && error.message && typeof error.message === 'string' && error.message.trim()) {
+    return error.message.trim();
+  }
+  if (error !== null && error !== void 0 && (_error$reason = error.reason) !== null && _error$reason !== void 0 && _error$reason.message && typeof error.reason.message === 'string' && error.reason.message.trim()) {
+    return error.reason.message.trim();
+  }
+  if (typeof (error === null || error === void 0 ? void 0 : error.reason) === 'string' && error.reason.trim()) {
+    return error.reason.trim();
+  }
+  return DEFAULT_ERROR_MESSAGE;
+};
+var syncDocumentStates = function syncDocumentStates(documentManager, onLoaded, onError) {
+  var documents = typeof (documentManager === null || documentManager === void 0 ? void 0 : documentManager.getOpenDocuments) === 'function' ? documentManager.getOpenDocuments() : [];
+  if (!Array.isArray(documents) || documents.length === 0) return false;
+  var errored = documents.find(function (doc) {
+    return (doc === null || doc === void 0 ? void 0 : doc.status) === 'error';
+  });
+  if (errored) {
+    onError((errored === null || errored === void 0 ? void 0 : errored.error) || DEFAULT_ERROR_MESSAGE);
+    return true;
+  }
+  var loaded = documents.find(function (doc) {
+    return (doc === null || doc === void 0 ? void 0 : doc.status) === 'loaded';
+  });
+  if (loaded) {
+    onLoaded();
+    return true;
+  }
+  return false;
+};
+var ViewPdf = function ViewPdf(_ref) {
+  var _ref$src = _ref.src,
+    src = _ref$src === void 0 ? '' : _ref$src,
+    onRequestClose = _ref.onRequestClose;
+  var _useState = React.useState(Boolean(src)),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _useState2 = React.useState(''),
+    loadError = _useState2[0],
+    setLoadError = _useState2[1];
+  var hadLoadErrorRef = React.useRef(false);
+  var isMountedRef = React.useRef(true);
+  var loadFinishedRef = React.useRef(false);
+  var unsubscribersRef = React.useRef(EMPTY_UNSUBSCRIBERS);
+  var timeoutRef = React.useRef(null);
+  var pdfSrc = typeof src === 'string' ? src.trim() : '';
+  var clearLoadTimeout = React.useCallback(function () {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  React.useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+      clearLoadTimeout();
+      clearSubscriptions(unsubscribersRef);
+    };
+  }, [clearLoadTimeout]);
+  React.useEffect(function () {
+    hadLoadErrorRef.current = false;
+    loadFinishedRef.current = false;
+    clearLoadTimeout();
+    setLoadError('');
+    setIsLoading(Boolean(pdfSrc));
+  }, [pdfSrc, clearLoadTimeout]);
+  var finishWithError = React.useCallback(function (error) {
+    if (loadFinishedRef.current || !isMountedRef.current) return;
+    loadFinishedRef.current = true;
+    clearLoadTimeout();
+    hadLoadErrorRef.current = true;
+    setIsLoading(false);
+    setLoadError(getErrorMessage(error));
+  }, [clearLoadTimeout]);
+  var finishWithSuccess = React.useCallback(function () {
+    if (loadFinishedRef.current || !isMountedRef.current) return;
+    loadFinishedRef.current = true;
+    clearLoadTimeout();
+    hadLoadErrorRef.current = false;
+    setLoadError('');
+    setIsLoading(false);
+  }, [clearLoadTimeout]);
+  var handleInit = React.useCallback(function (container) {
+    hideEmptyStateOpenButton(container);
+  }, []);
+  var handleReady = React.useCallback(function (registry) {
+    try {
+      var _registry$getPlugin, _registry$getPlugin$c, _registry$getPlugin$c2;
+      clearSubscriptions(unsubscribersRef);
+      loadFinishedRef.current = false;
+      clearLoadTimeout();
+      var documentManager = registry === null || registry === void 0 ? void 0 : (_registry$getPlugin = registry.getPlugin) === null || _registry$getPlugin === void 0 ? void 0 : (_registry$getPlugin$c = _registry$getPlugin.call(registry, 'document-manager')) === null || _registry$getPlugin$c === void 0 ? void 0 : (_registry$getPlugin$c2 = _registry$getPlugin$c.provides) === null || _registry$getPlugin$c2 === void 0 ? void 0 : _registry$getPlugin$c2.call(_registry$getPlugin$c);
+      if (!documentManager) {
+        finishWithError('Unable to initialize the PDF viewer.');
+        return;
+      }
+      var trackUnsubscribe = function trackUnsubscribe(unsubscribe) {
+        if (typeof unsubscribe !== 'function') return;
+        if (!Array.isArray(unsubscribersRef === null || unsubscribersRef === void 0 ? void 0 : unsubscribersRef.current)) {
+          unsubscribersRef.current = [];
+        }
+        unsubscribersRef.current.push(unsubscribe);
+      };
+      if (typeof (documentManager === null || documentManager === void 0 ? void 0 : documentManager.onDocumentError) === 'function') {
+        trackUnsubscribe(documentManager.onDocumentError(function (error) {
+          finishWithError(error);
+        }));
+      }
+      if (typeof (documentManager === null || documentManager === void 0 ? void 0 : documentManager.onDocumentOpened) === 'function') {
+        trackUnsubscribe(documentManager.onDocumentOpened(function () {
+          finishWithSuccess();
+        }));
+      }
+      if (typeof (documentManager === null || documentManager === void 0 ? void 0 : documentManager.onDocumentClosed) === 'function') {
+        trackUnsubscribe(documentManager.onDocumentClosed(function () {
+          if (!(hadLoadErrorRef !== null && hadLoadErrorRef !== void 0 && hadLoadErrorRef.current)) return;
+          hadLoadErrorRef.current = false;
+          if (typeof onRequestClose === 'function') {
+            safeCall(onRequestClose);
+          }
+        }));
+      }
+      if (syncDocumentStates(documentManager, finishWithSuccess, finishWithError)) {
+        return;
+      }
+      if (!pdfSrc || typeof (documentManager === null || documentManager === void 0 ? void 0 : documentManager.openDocumentUrl) !== 'function') {
+        finishWithError('No PDF document provided.');
+        return;
+      }
+      timeoutRef.current = setTimeout(function () {
+        finishWithError('The PDF is taking too long to load. Please try again later.');
+      }, LOAD_TIMEOUT_MS);
+      var openTask = documentManager.openDocumentUrl({
+        url: pdfSrc,
+        autoActivate: true
+      });
+      if (!openTask || typeof openTask.wait !== 'function') {
+        finishWithError(DEFAULT_ERROR_MESSAGE);
+        return;
+      }
+      openTask.wait(function (response) {
+        var loadTask = response === null || response === void 0 ? void 0 : response.task;
+        if (!loadTask || typeof loadTask.wait !== 'function') {
+          syncDocumentStates(documentManager, finishWithSuccess, finishWithError);
+          return;
+        }
+        loadTask.wait(function () {
+          finishWithSuccess();
+        }, function (error) {
+          finishWithError(error);
+        });
+      }, function (error) {
+        finishWithError(error);
+      });
+    } catch (error) {
+      console.error('[ViewPdf] Failed during viewer ready setup', error);
+      finishWithError(error);
+    }
+  }, [clearLoadTimeout, finishWithError, finishWithSuccess, onRequestClose, pdfSrc]);
+  if (!pdfSrc) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: _extends({}, viewerShellStyle, overlayStyle, {
+        position: 'relative'
+      })
+    }, /*#__PURE__*/React__default.createElement("span", null, "No PDF document provided."), typeof onRequestClose === 'function' ? /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      style: closeButtonStyle,
+      onClick: onRequestClose
+    }, "Close") : null);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: viewerShellStyle
+  }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
+    style: overlayStyle,
+    "aria-live": "polite",
+    "aria-busy": "true"
+  }, /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    size: 28
+  }), /*#__PURE__*/React__default.createElement("span", null, "Loading...")) : null, loadError ? /*#__PURE__*/React__default.createElement("div", {
+    style: overlayStyle,
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/React__default.createElement("span", null, loadError), typeof onRequestClose === 'function' ? /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    style: closeButtonStyle,
+    onClick: onRequestClose
+  }, "Close") : null) : null, /*#__PURE__*/React__default.createElement(reactPdfViewer.PDFViewer, {
+    key: pdfSrc,
+    style: {
+      height: '100%',
+      width: '100%',
+      minHeight: 600
+    },
+    onInit: handleInit,
+    onReady: handleReady,
+    config: {
+      theme: {
+        preference: 'light'
+      },
+      tabBar: 'never',
+      disabledCategories: DISABLED_CATEGORIES
+    }
+  }));
+};
+
 var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var totalIcons = [{
   name: '',
@@ -2877,7 +3157,8 @@ var Dashboard = function Dashboard(_ref) {
     showOnlyRecentOrder = _ref$showOnlyRecentOr === void 0 ? false : _ref$showOnlyRecentOr,
     hidePayActionButton = _ref.hidePayActionButton,
     hideInvoiceTab = _ref.hideInvoiceTab,
-    hideSalesOrderTab = _ref.hideSalesOrderTab;
+    hideSalesOrderTab = _ref.hideSalesOrderTab,
+    showPdfViewer = _ref.showPdfViewer;
   var _useState = React.useState({}),
     customerData = _useState[0],
     setCustomerData = _useState[1];
@@ -3328,8 +3609,15 @@ var Dashboard = function Dashboard(_ref) {
     maxWidth: "lg"
   }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
     dividers: true
-  }, /*#__PURE__*/React__default.createElement("iframe", {
-    src: invoiceModal.url
+  }, showPdfViewer ? /*#__PURE__*/React__default.createElement(ViewPdf, {
+    src: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.url,
+    onRequestClose: function onRequestClose() {
+      return setInvoiceModal({
+        open: false
+      });
+    }
+  }) : /*#__PURE__*/React__default.createElement("iframe", {
+    src: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.url
   }))), /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
@@ -3596,7 +3884,7 @@ var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_tem
   return props.primaryColor;
 });
 var TableContainer = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
-var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  .MuiDialog-paper {\n    width: 100%;\n    max-width: 900px;\n  }\n\n  iframe {\n    width: 900px;\n    max-width: 100%;\n    border: none;\n    height: 600px;\n  }\n"])));
 var TabsContainer = styled__default(material.Tabs)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  button {\n    color: ", " !important;\n    font-size: 1.1rem;\n    font-weight: 600;\n  }\n  .Mui-selected {\n    color: ", " !important;\n  }\n  .MuiTabs-indicator {\n    background-color: ", " !important;\n  }\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
@@ -5300,7 +5588,9 @@ var AccountDetails = function AccountDetails(_ref) {
     _ref$hideSalesOrderTa = _ref.hideSalesOrderTab,
     hideSalesOrderTab = _ref$hideSalesOrderTa === void 0 ? false : _ref$hideSalesOrderTa,
     _ref$hideInvoiceTab = _ref.hideInvoiceTab,
-    hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab;
+    hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab,
+    _ref$showPdfViewer = _ref.showPdfViewer,
+    showPdfViewer = _ref$showPdfViewer === void 0 ? false : _ref$showPdfViewer;
   var _useAllSystemFeatureV = useAllSystemFeatureValues({
       apiEndPoint: apiEndPoint,
       token: token
@@ -5473,7 +5763,8 @@ var AccountDetails = function AccountDetails(_ref) {
             showOnlyRecentOrder: showOnlyRecentOrder,
             hidePayActionButton: hidePayActionButton,
             hideSalesOrderTab: hideSalesOrderTab,
-            hideInvoiceTab: hideInvoiceTab
+            hideInvoiceTab: hideInvoiceTab,
+            showPdfViewer: showPdfViewer
           });
         case 'myProfile':
           return /*#__PURE__*/React__default.createElement(MyProfile, {