npm - oa-componentbook - Versions diffs - 1.0.1-stage.97 → 1.0.1-stage.99 - Mend

oa-componentbook 1.0.1-stage.97 → 1.0.1-stage.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/build/components/oa-component-modal/styles.js CHANGED Viewed

@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n  padding: 0 42px 0 0;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

package/build/dev/oa-component-document-viewer/CustomDocumentViewer.js ADDED Viewed

@@ -0,0 +1,281 @@
+"use strict";
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url-search-params.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactPdf = require("react-pdf");
+var _icons = require("@material-ui/icons");
+var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRight"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _system = require("@material-ui/system");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable */
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const ZOOM_STEP = 0.2;
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 3.0;
+function CustomDocumentViewer(_ref) {
+  let {
+    fileType,
+    fileUrl,
+    onDownload,
+    hideZoom,
+    hideDownload,
+    hidePageNumber,
+    hideRotate,
+    documentViewerOverlayHeight,
+    docHeight
+  } = _ref;
+  const [totalPages, setTotalPages] = (0, _react.useState)(null);
+  const [scale, setScale] = (0, _react.useState)(1.0);
+  const [currentPage, setCurrentPage] = (0, _react.useState)(1);
+  // For image rotation.
+  const [rotation, setRotation] = (0, _react.useState)(0);
+  const containerRef = (0, _react.useRef)(null);
+  const pageRefs = (0, _react.useRef)([]);
+  // When the document loads, update total pages (for PDFs).
+  const onDocumentLoadSuccess = _ref2 => {
+    let {
+      numPages
+    } = _ref2;
+    setTotalPages(numPages);
+  };
+  // Zoom handlers.
+  const handleZoomIn = (0, _react.useCallback)(() => setScale(prev => Math.min(prev + ZOOM_STEP, MAX_ZOOM)), []);
+  const handleZoomOut = (0, _react.useCallback)(() => setScale(prev => Math.max(prev - ZOOM_STEP, MIN_ZOOM)), []);
+  const handleResetZoom = (0, _react.useCallback)(() => setScale(1.0), []);
+  // Single rotation handler for images – rotates 90° clockwise each click.
+  const handleRotate = (0, _react.useCallback)(() => {
+    setRotation(prev => prev + 90);
+  }, []);
+  // Default download function; can be overridden by passing an onDownload prop.
+  const defaultDownload = (0, _react.useCallback)(() => {
+    if (fileType === "image") {
+      // Fetch the image as a blob to force download.
+      fetch(fileUrl, {
+        mode: "cors"
+      }).then(res => res.blob()).then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileUrl.split("/").pop();
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }).catch(error => {
+        console.error("Image download failed:", error);
+      });
+    } else {
+      // For PDFs and other file types, use the standard download.
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      link.download = fileUrl.split("/").pop();
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [fileUrl, fileType]);
+  const handleDownload = onDownload || defaultDownload;
+  // Enable dragging when zoomed in.
+  (0, _react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let isDragging = false;
+    let startX;
+    let startY;
+    let scrollLeft;
+    let scrollTop;
+    const onMouseDown = e => {
+      if (scale > 1.0) {
+        isDragging = true;
+        container.style.cursor = "grabbing";
+        startX = e.pageX;
+        startY = e.pageY;
+        scrollLeft = container.scrollLeft;
+        scrollTop = container.scrollTop;
+      }
+    };
+    const onMouseMove = e => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const deltaX = e.pageX - startX;
+      const deltaY = e.pageY - startY;
+      container.scrollLeft = scrollLeft - deltaX;
+      container.scrollTop = scrollTop - deltaY;
+    };
+    const onMouseUp = function onMouseUp() {
+      isDragging = false;
+      container.style.cursor = scale > 1.0 ? "grab" : "auto";
+    };
+    container.addEventListener("mousedown", onMouseDown);
+    container.addEventListener("mousemove", onMouseMove);
+    container.addEventListener("mouseup", onMouseUp);
+    container.addEventListener("mouseleave", onMouseUp);
+    return () => {
+      container.removeEventListener("mousedown", onMouseDown);
+      container.removeEventListener("mousemove", onMouseMove);
+      container.removeEventListener("mouseup", onMouseUp);
+      container.removeEventListener("mouseleave", onMouseUp);
+    };
+  }, [scale]);
+  // (Optional) Scroll event to update the current page (for PDFs).
+  const handleScroll = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    let closestPage = 1;
+    let minDistance = Infinity;
+    pageRefs.current.forEach((ref, index) => {
+      if (ref) {
+        const rect = ref.getBoundingClientRect();
+        const distance = Math.abs(rect.top - containerRect.top);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestPage = index + 1;
+        }
+      }
+    });
+    setCurrentPage(closestPage);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    documentViewerOverlayHeight: documentViewerOverlayHeight
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "customDocumentViewerOverlay ".concat(docHeight),
+    style: {
+      cursor: scale > 1.0 ? "grab" : "auto"
+    },
+    onScroll: handleScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlayHeader"
+  }, fileType === "pdf" && !hidePageNumber ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pageNumber"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-button-500",
+    color: "primary-background"
+  }, "Page ", currentPage, " of ", totalPages)) : fileType === "image" && !hideRotate ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pageNumber"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _RotateRight.default,
+    onClick: handleRotate,
+    style: {
+      cursor: "pointer"
+    }
+  })) : null, !hideZoom && /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlayHeaderIcons"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.RemoveRounded,
+    onClick: handleZoomOut,
+    style: {
+      cursor: scale === MIN_ZOOM ? "not-allowed" : "pointer"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.ZoomInRounded,
+    onClick: handleResetZoom,
+    style: {
+      cursor: scale === 1.0 ? "not-allowed" : "pointer"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.AddRounded,
+    onClick: handleZoomIn,
+    style: {
+      cursor: scale === MAX_ZOOM ? "not-allowed" : "pointer"
+    }
+  })), !hideDownload && /*#__PURE__*/_react.default.createElement("div", {
+    className: "downloadIcon"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.GetAppRounded,
+    onClick: handleDownload
+  }))), fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      transform: "scale(".concat(scale, ")"),
+      transformOrigin: "top center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, Array.from({
+    length: totalPages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(index + 1),
+    ref: el => pageRefs.current[index] = el,
+    style: {
+      marginBottom: "20px",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: index + 1,
+    scale: 1.0
+  }))))), fileType === "image" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaImgCenter",
+    style: {
+      transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)"),
+      transformOrigin: scale > 1.4 ? "left top" : "center center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: fileUrl,
+    alt: "document",
+    style: {
+      transition: "transform 0.3s ease-in-out",
+      maxWidth: "100%",
+      maxHeight: "80vh"
+    }
+  })))));
+}
+CustomDocumentViewer.propTypes = {
+  fileType: _propTypes.default.string.isRequired,
+  // "pdf" or "image"
+  fileUrl: _propTypes.default.string.isRequired,
+  onDownload: _propTypes.default.func,
+  // Optional custom download function
+  hideZoom: _propTypes.default.bool,
+  // If true, hide zoom controls (for PDFs)
+  hideDownload: _propTypes.default.bool,
+  // If true, hide download button
+  hidePageNumber: _propTypes.default.bool,
+  // If true, hide page number display (for PDFs)
+  hideRotate: _propTypes.default.bool,
+  // If true, hide rotate control (for images)
+  documentViewerOverlayHeight: _propTypes.default.string,
+  docHeight: _propTypes.default.string
+};
+CustomDocumentViewer.defaultProps = {
+  onDownload: null,
+  hideZoom: false,
+  hideDownload: false,
+  hidePageNumber: false,
+  hideRotate: false,
+  documentViewerOverlayHeight: "100vh",
+  docHeight: ""
+};
+var _default = exports.default = CustomDocumentViewer;

package/build/dev/oa-component-document-viewer/styles.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const DocumentViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .customDocumentViewerOverlay {\n    background-color: var(--color-primary-content);\n    height: ", ";\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    flex-direction: column;\n    overflow: auto;\n    align-items: center; position: relative;\n  }\n\n  .documentPdfHeight{height:calc(100vh - 114px);}\n\n  .customDocumentViewerOverlayHeader {\n    position: fixed;\n    padding: 0 16px;\n    bottom: 74px;\n    left: auto;\n    right: auto;\n    border-radius: 4px;\n    z-index: 99;\n    background: rgba(0, 0, 0, 0.7);\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    top:auto;\n  }\n  .customDocumentViewerOverlayHeaderIcons {\n    display: flex;\n    padding: 8px 0;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .downloadIcon {\n    border-left: solid 1px #fff;\n    padding-left: 16px;\n    margin-left: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .pageNumber {\n    border-right: solid 1px #fff;\n    padding-right: 16px;\n    margin-right: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .ant-radio-group {\n    display: flex;\n    white-space: nowrap;\n  }\n    .oaImgCenter{\n        height: calc(-114px + 100vh);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n    }\n"])), props => props.documentViewerOverlayHeight);
+var _default = exports.default = DocumentViewerContainer;

package/build/dev/oa-component-upload/CustomUpload.js CHANGED Viewed

@@ -196,6 +196,9 @@ function DocumentUpload(_ref) {
     rules: [{
       validator: (rule, value) => {
         if (isMandatory && !(value !== null && value !== void 0 && value.length)) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            return Promise.resolve();
+          }
           return Promise.reject(new Error('Please upload the document.'));
         }
         return Promise.resolve();

package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js ADDED Viewed

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("react-pdf/dist/esm/Page/AnnotationLayer.css");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _styles = _interopRequireDefault(require("./styles"));
+const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView"];
+/* eslint-disable */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function DocumentSideDrawer(_ref) {
+  var _drawerTagConfig$view;
+  let {
+      title,
+      handleCloseDrawer,
+      documentConfig,
+      drawerWidth,
+      drawerButtonConfig,
+      drawerTagConfig,
+      onlyDocumentView
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Calculate the drawer width based on documentConfig or fallback to 480
+  const calculatedWidth = drawerWidth !== null && drawerWidth !== void 0 ? drawerWidth : documentConfig ? 1200 : 480;
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    buttonConfig: drawerButtonConfig,
+    "data-test": "document-side-drawer",
+    rootClassName: "documentDrawer",
+    width: calculatedWidth,
+    onClose: handleCloseDrawer,
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewerContainer"
+  }, documentConfig && /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, documentConfig), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightContSection"
+  }, drawerTagConfig && /*#__PURE__*/_react.default.createElement("div", {
+    className: "grayBoxSec"
+  }, drawerTagConfig.heading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-content"
+  }, drawerTagConfig.heading), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-12 statusSec"
+  }, drawerTagConfig.tag && (
+  // Conditionally render CustomTag or Typography based on tag type
+  drawerTagConfig.tag.type ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+    label: drawerTagConfig.tag.label,
+    type: drawerTagConfig.tag.type
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-button-500"
+  }, drawerTagConfig.tag.label)), ((_drawerTagConfig$view = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view === void 0 || (_drawerTagConfig$view = _drawerTagConfig$view.items) === null || _drawerTagConfig$view === void 0 ? void 0 : _drawerTagConfig$view.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    overlayClassName: "multipleDocumentTooltip",
+    isDisplayed: true,
+    title: ((_drawerTagConfig$view2, _drawerTagConfig$view3, _drawerTagConfig$view4, _drawerTagConfig$view5) => {
+      const totalItems = (_drawerTagConfig$view2 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view2 === void 0 ? void 0 : _drawerTagConfig$view2.items.length;
+      const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
+      const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
+      const col2Size = totalItems - col1Size; // Remaining items go to second column
+      const columns = [(_drawerTagConfig$view3 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view3 === void 0 ? void 0 : _drawerTagConfig$view3.items.slice(0, col1Size), // First column
+      (_drawerTagConfig$view4 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view4 === void 0 ? void 0 : _drawerTagConfig$view4.items.slice(col1Size) // Second column
+      ];
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_drawerTagConfig$view5 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view5 === void 0 ? void 0 : _drawerTagConfig$view5.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: "type-sl1-700",
+        color: "secondary-content"
+      }, drawerTagConfig.viewDetails.title), /*#__PURE__*/_react.default.createElement("div", {
+        className: "tooltip-grid",
+        style: {
+          flexDirection: totalItems === 1 ? "column" : "row",
+          // Single column if only 1 item
+          width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
+        }
+      }, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
+        key: "col-".concat(colIndex),
+        className: "tooltip-column"
+      }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
+        key: item.title,
+        className: "tooltip-item"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        size: 20,
+        icon: item.type === "positive" ? _Check.default : _Close.default,
+        color: item.type === "positive" ? "positive" : "negative"
+      }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
+    })()
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    label: drawerTagConfig.viewDetails.label
+  })))), props.children))));
+}
+// Define the prop types to enforce correct data types for the props
+DocumentSideDrawer.propTypes = {
+  title: _propTypes.default.string,
+  handleCloseDrawer: _propTypes.default.func,
+  documentConfig: _propTypes.default.object,
+  // Pass the document configuration as an object
+  drawerWidth: _propTypes.default.string,
+  // Optional custom drawer width
+  drawerButtonConfig: _propTypes.default.object,
+  // Button configuration for the drawer
+  drawerTagConfig: _propTypes.default.object,
+  // Tag configuration (heading, tag, viewDetails)
+  onlyDocumentView: _propTypes.default.bool // Optional prop to render only document viewer
+};
+// Default props to provide fallback values for optional props
+DocumentSideDrawer.defaultProps = {
+  title: "",
+  handleCloseDrawer: () => {},
+  documentConfig: null,
+  drawerWidth: null,
+  drawerButtonConfig: null,
+  drawerTagConfig: null,
+  onlyDocumentView: false
+};
+var _default = exports.default = DocumentSideDrawer;

package/build/dev/oa-widget-document-side-drawer/styles.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .viewerContainer > div {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  .viewerContainer {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n  .rightContSection {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n  }\n  .grayBoxSec {\n    border-radius: 8px;\n    background: #f6f6f6;\n    padding: 12px 16px;\n  }\n  .statusSec {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  .statusSec button {\n    margin-left: 8px;\n  }\n"])));
+var _default = exports.default = ViewerContainer;

package/build/global-css/commonStyles.js CHANGED Viewed

@@ -7,5 +7,5 @@ exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n    vertical-align: middle;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item {  \n  min-height: auto;\n  padding: 12px 16px;\n  color: var(--color-primary-content) ;\n  line-height: 20px;\n  border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n  padding: 24px 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: 348px;\n  border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n  background: #fff !important;\n}\n.OaFooterBtn{\n  display: flex;\n  justify-content: end;\n}\n.OaTooltip{\n  max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
+const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n  display: flex;\n  align-items: flex-start;\n  padding: 8px 0 0;\n  gap: 0px 32px;\n}\n\n.tooltip-column {\n  display: flex;\n  flex-direction: column;\n  width: 280px;\n}\n\n\n.multipleDocumentTooltip .ant-tooltip-inner{\n  padding: 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: max-content;\n  border-radius: 12px;\n  min-width: 300px;\n\n}\n  .multipleDocumentTooltip .ant-tooltip-arrow:before{\n  background: #fff;\n  }\n     .multipleDocumentTooltip li.tooltip-item{\n      display: flex;\n      gap: 8px;\n      align-items: flex-start;\n      color: #212121;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px; \n      padding: 8px 0;\n          // width: max-content;\n      }\n          .tooltip-item p{\n              margin: 0;\n          }\n     .multipleDocumentTooltip ul .headingName{\n      color: #717171;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 700;\n      line-height: 16px; \n      letter-spacing: 0.24px;\n      text-transform: uppercase;\n      padding: 0 0 16px;\n     }\n      .multipleDocumentTooltip .flexWrap{\n          display: flex;\n          flex-wrap: wrap;\n          column-count: 1;\n          column-gap: 8px;\n          list-style: none;\n          justify-content: space-between;\n      }\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n    .documentDrawer .ant-drawer-body{\n        overflow: hidden;\n        padding: 0;\n    }\n  .documentDrawer .rightContSection {\n    overflow-y: scroll;\n    height: calc(100vh - 114px);\n  }\n    .documentDrawer .ant-radio-group{\n        display: flex;\n    white-space: nowrap;\n    }\n    .documentDrawer .ant-drawer-content-wrapper{\n      width: 100% !important;\n    }\n    .documentDrawer .ant-select-selector .ant-select-selection-item > span{\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width: 269px;\n          display: block;\n    }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n    vertical-align: middle;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item {  \n  min-height: auto;\n  padding: 12px 16px;\n  color: var(--color-primary-content) ;\n  line-height: 20px;\n  border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n  padding: 24px 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: 348px;\n  border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n  background: #fff !important;\n}\n.OaFooterBtn{\n  display: flex;\n  justify-content: end;\n}\n.OaTooltip{\n  max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n\n"])));
 var _default = exports.default = CommonStyles;

package/build/index.js CHANGED Viewed

@@ -35,6 +35,12 @@ Object.defineProperty(exports, "ApprovalWidget", {
     return _ApprovalWidget.default;
   }
 });
+Object.defineProperty(exports, "ApprovalWidgetNew", {
+  enumerable: true,
+  get: function get() {
+    return _ApprovalWidgetNew.default;
+  }
+});
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
   get: function get() {
@@ -119,6 +125,12 @@ Object.defineProperty(exports, "CustomDetails", {
     return _CustomDetails.default;
   }
 });
+Object.defineProperty(exports, "CustomDocumentViewer", {
+  enumerable: true,
+  get: function get() {
+    return _CustomDocumentViewer.default;
+  }
+});
 Object.defineProperty(exports, "CustomDrawer", {
   enumerable: true,
   get: function get() {
@@ -311,6 +323,12 @@ Object.defineProperty(exports, "DocUploadWidget", {
     return _DocUploadWidget.default;
   }
 });
+Object.defineProperty(exports, "DocumentSideDrawer", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentSideDrawer.default;
+  }
+});
 Object.defineProperty(exports, "DropdownSearchInput", {
   enumerable: true,
   get: function get() {
@@ -335,6 +353,12 @@ Object.defineProperty(exports, "FeedbackWidget", {
     return _FeedbackWidget.default;
   }
 });
+Object.defineProperty(exports, "GenericUpload", {
+  enumerable: true,
+  get: function get() {
+    return _ReUploadDrawer.default;
+  }
+});
 Object.defineProperty(exports, "GlobalCss", {
   enumerable: true,
   get: function get() {
@@ -545,6 +569,12 @@ Object.defineProperty(exports, "colorOptions", {
     return _colorOptions.colorOptions;
   }
 });
+Object.defineProperty(exports, "customForm", {
+  enumerable: true,
+  get: function get() {
+    return _antd.Form;
+  }
+});
 Object.defineProperty(exports, "getCheckboxTheme", {
   enumerable: true,
   get: function get() {
@@ -563,6 +593,8 @@ Object.defineProperty(exports, "typographyOptions", {
     return _typographyOptions.typographyOptions;
   }
 });
+var _antd = require("antd");
+var _ReUploadDrawer = _interopRequireDefault(require("./widgets/oa-widget-reupload-drawer/ReUploadDrawer"));
 var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
 var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
 var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
@@ -616,6 +648,7 @@ var _AddressWidget = _interopRequireDefault(require("./widgets/oa-widget-address
 var _AddSparePartWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartWidget"));
 var _AddSparePartCollapseWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget"));
 var _ApprovalWidget = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidget"));
+var _ApprovalWidgetNew = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidgetNew"));
 var _CloseClaimWidget = _interopRequireDefault(require("./widgets/oa-widget-close-claim/CloseClaimWidget"));
 var _KeyValueWidget = _interopRequireDefault(require("./widgets/oa-widget-key-value/KeyValueWidget"));
 var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/NotesWidget"));
@@ -652,6 +685,8 @@ var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-b
 var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
 var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
+var _DocumentSideDrawer = _interopRequireDefault(require("./dev/oa-widget-document-side-drawer/DocumentSideDrawer"));
+var _CustomDocumentViewer = _interopRequireDefault(require("./dev/oa-component-document-viewer/CustomDocumentViewer"));
 var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js ADDED Viewed

@@ -0,0 +1,376 @@
+"use strict";
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _UploadDownloadWidget = _interopRequireDefault(require("../oa-widget-upload-download/UploadDownloadWidget"));
+var _styles = require("./styles");
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+const _excluded = ["children", "description", "docDetails", "multipleDocDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "actionRenderType", "actionContent", "systemStatus", "documentTitle", "descriptionTitle", "data-test", "form", "columnDynamicCssClass", "tooltipPlacement"];
+/* eslint-disable */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @typedef {import('../../components/oa-component-upload/CustomUpload').DocumentDetails} DocumentDetails
+ *
+ * @typedef {Object} ApprovalForm
+ * @property {boolean} [disabled=false] Whether the approval form is disabled.
+ * @property {boolean} [hidden=false] Whether the approval form is hidden.
+ * @property {boolean} [invisible=false] Whether the approval form is invisible (preserving layout).
+ * @property {boolean} [isApproved] Initial value for the approval status.
+ * @property {string} [remarks] Initial value for the remarks.
+ *
+ * @typedef {Object} Props
+ * @property {React.ReactNode} [children] Content to be rendered inside the ApprovalWidget.
+ * @property {string} [description] Description for the widget.
+ * @property {DocumentDetails} [docDetails] Document details for the widget.
+ * @property {ApprovalForm} [approvalForm] Form data for approval.
+ * @property {boolean} [isMandatory=false] Whether the widget is mandatory.
+ * @property {boolean} [hasDivider=false] Display a divider line beneath the widget.
+ * @property {boolean} [isQuestionStyleWidget=false] Whether the widget has a question-style layout.
+ * @property {string|number} questionId Identifier for the question.
+ * @property {string} title Title of the widget.
+ * @property {Function} [viewOnClick] Callback function for the view action.
+ * @property {string} ['data-test'] Data test string to be applied to the outermost element.
+ */
+function ApprovalWidget(_ref) {
+  var _approvalForm$disable2, _actionContent$label, _approvalForm$disable3, _approvalForm$disable4, _approvalForm$disable5, _approvalForm$remarks, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$disable10;
+  let {
+      children,
+      description,
+      docDetails,
+      multipleDocDetails,
+      approvalForm,
+      isMandatory,
+      hasDivider,
+      isQuestionStyleWidget,
+      questionId,
+      title,
+      viewOnClick,
+      actionRenderType,
+      actionContent,
+      systemStatus,
+      documentTitle,
+      descriptionTitle,
+      "data-test": dataTest,
+      form,
+      columnDynamicCssClass,
+      tooltipPlacement
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const getInitialValue = isApproved => {
+    switch (isApproved) {
+      case true:
+        return 1;
+      case false:
+        return 0;
+      default:
+        return undefined;
+    }
+  };
+  const [isApproved, setIsApproved] = (0, _react.useState)(getInitialValue(approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved));
+  const [radioButtonValue, setRadioButtonValue] = (0, _react.useState)(null);
+  const getFieldDecorator = form === null || form === void 0 ? void 0 : form.getFieldDecorator;
+  const onRadioChange = event => setIsApproved(event.target.value);
+  const onChangeRadioWithForm = event => setRadioButtonValue(event.target.value);
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.firstColumn
+  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "type-button-500"
+  }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, descriptionTitle), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "primary-content"
+  }, description)), !isQuestionStyleWidget && ((multipleDocDetails === null || multipleDocDetails === void 0 ? void 0 : multipleDocDetails.length) > 0 ? multipleDocDetails.map(docDetails => {
+    var _approvalForm$disable;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "oaCustomerResponse"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "secondary-content"
+    }, docDetails.documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
+      disabled: (_approvalForm$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
+      "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
+    }, docDetails, {
+      formName: isMandatory ? "file-".concat(questionId) : undefined
+    })));
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaCustomerResponse"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
+    disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
+    "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
+  }, docDetails, {
+    formName: isMandatory ? "file-".concat(questionId) : undefined
+  })))), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children), viewOnClick && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    className: "view-button",
+    "data-test": dataTest ? "".concat(dataTest, "--view-button") : undefined,
+    onClick: () => viewOnClick(questionId),
+    type: "text-only",
+    label:
+    // isQuestionStyleWidget
+    //   ? "View Previous Description"
+    //   :
+    "View History"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.secondColumn
+  }, systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.map(status => {
+    var _status$items;
+    return /*#__PURE__*/_react.default.createElement("div", null, status.renderType === "text" && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "secondary-content"
+    }, status.label), status.renderType === "tag" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, status)), status.renderType === "toolTip" && ((_status$items = status.items) === null || _status$items === void 0 ? void 0 : _status$items.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+      overlayClassName: "multipleDocumentTooltip",
+      isDisplayed: true,
+      placement: status.tooltipPlacement // Pass placement as a prop
+      ,
+      title: (() => {
+        const totalItems = status.items.length;
+        const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
+        const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
+        const col2Size = totalItems - col1Size; // Remaining items go to second column
+        const columns = [status.items.slice(0, col1Size),
+        // First column
+        status.items.slice(col1Size) // Second column
+        ];
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (status === null || status === void 0 ? void 0 : status.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: "type-sl1-700",
+          color: "secondary-content"
+        }, status.title), /*#__PURE__*/_react.default.createElement("div", {
+          className: "tooltip-grid",
+          style: {
+            flexDirection: totalItems === 1 ? "column" : "row",
+            // Make it single column if only 1 item
+            width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
+          }
+        }, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
+          key: "col-".concat(colIndex),
+          className: "tooltip-column"
+        }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
+          key: item.title,
+          className: "tooltip-item"
+        }, !(status !== null && status !== void 0 && status.hideIcon) && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          size: 20,
+          icon: item.type === "positive" ? _Check.default : _Close.default,
+          color: item.type === "positive" ? "positive" : "negative"
+        }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
+      })()
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      type: "text-only",
+      label: status.label
+    })));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.thirdColumn
+  }, actionRenderType === "text" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaActionText"
+  }, (actionContent === null || actionContent === void 0 ? void 0 : actionContent.icon) && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CheckCircle.default,
+    size: 20,
+    color: "secondary-content"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : "-")), actionRenderType === "button" && /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
+    disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
+  }, actionContent)), actionRenderType === "radio" &&
+  /*#__PURE__*/
+  //className="col-sm-12 col-md-4 col-lg-4"
+  _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "isApproved-".concat(questionId),
+    className: "custom-radio-group",
+    initialValue: isApproved,
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-approved-validation-message")
+      }, "Approval status needs to be selected.") : "Approval status needs to be selected."
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
+    onChange: onRadioChange,
+    value: isApproved
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
+    disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
+    label: "Mark as Approved",
+    value: 1
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
+    disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false,
+    label: "Mark as Pending",
+    value: 0
+  }))), isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "type-b2-400"
+  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "remarks-".concat(questionId),
+    initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-validation-message")
+      }, "Remarks cannot be empty.") : "Remarks cannot be empty."
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+    disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
+  })))), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    validateStatus: form.getFieldError("validateDocumentButton#".concat(questionId)) ? "error" : "",
+    help: /*#__PURE__*/_react.default.createElement("div", {
+      className: "errorForRtv"
+    }, form.getFieldError("validateDocumentButton#".concat(questionId)) || "")
+  }, getFieldDecorator("validateDocumentButton#".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: "This field is required"
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({}, actionContent, {
+    disabled: (_approvalForm$disable7 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable7 !== void 0 ? _approvalForm$disable7 : false
+  })))), actionRenderType === "radioWithForm" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    className: "custom-radio-group",
+    validateStatus: form.getFieldError("icQues_status_".concat(questionId)) ? "error" : "",
+    help: form.getFieldError("icQues_status_".concat(questionId)) || ""
+  }, getFieldDecorator("icQues_status_".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-approved-validation-message")
+      }, "Approval status needs to be selected.") : "Approval status needs to be selected."
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
+    onChange: onChangeRadioWithForm,
+    value: radioButtonValue
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
+    label: "Mark as Approved",
+    value: "Complete",
+    disabled: (_approvalForm$disable8 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable8 !== void 0 ? _approvalForm$disable8 : false
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
+    label: "Mark as Pending",
+    value: "Incomplete",
+    disabled: (_approvalForm$disable9 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable9 !== void 0 ? _approvalForm$disable9 : false
+  })))), form.getFieldValue("icQues_status_".concat(questionId)) == "Incomplete" && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "type-b2-400"
+  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    validateStatus: form.getFieldError("icQues_remarks_".concat(questionId)) ? "error" : "",
+    help: form.getFieldError("icQues_remarks_".concat(questionId)) || ""
+  }, getFieldDecorator("icQues_remarks_".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-validation-message")
+      }, "Remarks cannot be empty.") : "Remarks cannot be empty."
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+    disabled: (_approvalForm$disable10 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable10 !== void 0 ? _approvalForm$disable10 : false
+  }))))), actionRenderType === "buttonWithFormV4" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "validateDocumentButton#".concat(questionId),
+    initialValue: approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved,
+    rules: isMandatory ? [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-approved-validation-message")
+      }, "Approval status needs to be selected.") : "Approval status needs to be selected."
+    }] : []
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent)))), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
+}
+ApprovalWidget.propTypes = {
+  children: _propTypes.default.node,
+  "data-test": _propTypes.default.string,
+  description: _propTypes.default.string,
+  // Leave description optional
+  docDetails: _propTypes.default.shape({
+    multiple: _propTypes.default.bool,
+    onUpload: _propTypes.default.func,
+    uploadedDocuments: _propTypes.default.arrayOf(_propTypes.default.shape({
+      name: _propTypes.default.string,
+      onDelete: _propTypes.default.func,
+      onDownload: _propTypes.default.func
+    }))
+  }),
+  multipleDocDetails: _propTypes.default.array,
+  hasDivider: _propTypes.default.bool,
+  // Leave hasDivider optional,
+  approvalForm: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    hidden: _propTypes.default.bool,
+    invisible: _propTypes.default.bool,
+    isApproved: _propTypes.default.bool,
+    remarks: _propTypes.default.string
+  }),
+  isMandatory: _propTypes.default.bool,
+  isQuestionStyleWidget: _propTypes.default.bool,
+  questionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  title: _propTypes.default.string.isRequired,
+  // Make title required
+  viewOnClick: _propTypes.default.func,
+  actionRenderType: _propTypes.default.string,
+  actionContent: _propTypes.default.shape({
+    label: _propTypes.default.string
+  }),
+  systemStatus: _propTypes.default.arrayOf(_propTypes.default.shape({
+    renderType: _propTypes.default.string,
+    label: _propTypes.default.string,
+    title: _propTypes.default.string
+  })),
+  documentTitle: _propTypes.default.string,
+  descriptionTitle: _propTypes.default.string,
+  form: _propTypes.default.object,
+  tooltipPlacement: _propTypes.default.string,
+  columnDynamicCssClass: _propTypes.default.object
+};
+ApprovalWidget.defaultProps = {
+  children: null,
+  "data-test": undefined,
+  description: "",
+  docDetails: {},
+  approvalForm: {},
+  isMandatory: false,
+  hasDivider: false,
+  isQuestionStyleWidget: false,
+  viewOnClick: undefined,
+  actionRenderType: undefined,
+  actionContent: {},
+  systemStatus: [],
+  documentTitle: "",
+  descriptionTitle: "",
+  form: null,
+  tooltipPlacement: "bottom",
+  // Default placement
+  columnDynamicCssClass: {
+    firstColumn: "col-sm-12 col-md-5 col-lg-5",
+    secondColumn: "col-sm-12 col-md-4 col-lg-4 flexCol8",
+    thirdColumn: "col-sm-12 col-md-3 col-lg-3"
+  }
+};
+var _default = exports.default = ApprovalWidget;

package/build/widgets/oa-widget-approval/styles.js CHANGED Viewed

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Styledescription = exports.Styledescription = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 0 8px;\n"])));
-const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 0 16px;\nlabel.ant-radio-wrapper:first-child{\n  margin-inline-end: 16px;\n}\n.paddind-bottom-4{\n  padding: 0 0 4px;\n}\n  .container {\n    margin-bottom: 16px;\n  }\n\n  h4{\n    padding: 0 0 4px;\n  }\n.view-button {\n  justify-content: start;\n}\n  .ant-form-item.custom-radio-group {\n    margin-bottom: 12px;\n  }\n\n  .ant-divider-horizontal {\n    margin: 16px 0px 0px;\n  }\n\n  .ant-form-item .ant-form-item-control-input {\n    min-height: auto;\n  }\n\n  .ant-radio-group-outline {\n    display: flex;\n    justify-content: start;\n  }\n\n  textarea {\n    padding: 16px; \n    min-height: 88px;\n    resize: none;\n    border-radius: 4px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  h5 {\n    margin: 0 0 4px;\n    color: var(--color-primary-content);\n  }\n\n  radiofield label {\n    white-space: nowrap;\n  }\n\n  docdetailstag a {\n    white-space: nowrap;\n  }\n  \n"])));
+const Styledescription = exports.Styledescription = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // padding: 0 0 8px;\n"])));
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 0 16px;\n  label.ant-radio-wrapper:first-child {\n    margin-inline-end: 16px;\n  }\n  .ant-radio-wrapper {\n    white-space: nowrap;\n  }\n  .paddind-bottom-4 {\n    padding: 0 0 4px;\n  }\n  .container {\n    margin-bottom: 16px;\n  }\n\n  .view-button {\n    justify-content: start;\n  }\n  .ant-form-item.custom-radio-group {\n    margin-bottom: 12px;\n  }\n\n  .ant-divider-horizontal {\n    margin: 16px 0px 0px;\n  }\n\n  .ant-form-item .ant-form-item-control-input {\n    min-height: auto;\n  }\n\n  .ant-radio-group-outline {\n    display: flex;\n    justify-content: start;\n  }\n\n  textarea {\n    padding: 16px;\n    min-height: 88px;\n    resize: none;\n    border-radius: 4px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  h5 {\n    margin: 0 0 4px;\n    color: var(--color-primary-content);\n  }\n\n  radiofield label {\n    white-space: nowrap;\n  }\n\n  docdetailstag a {\n    white-space: nowrap;\n  }\n  .oaCustomerResponse {\n    display: flex;\n    align-items: center;\n    align-items: flex-start;\n  }\n    .oaCustomerResponse button{\n    padding: 0;\n    }\n  .oaCustomerResponse section {\n    padding: 0;\n  }\n  .oaActionText {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    height: fit-content;\n  }\n  .flexCol8 {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .flexCol12 {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n    .flexCol12 button{\n    padding: 0;\n    }\n"])));
 const RedText = exports.RedText = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: red;\n  margin-left: 4px;\n"])));

package/build/widgets/oa-widget-document-upload/DocUploadWidget.js CHANGED Viewed

@@ -86,8 +86,8 @@ function DocumentUpload(props) {
   const handleCancel = () => setPreviewOpen(false);
   /**
-  * Determines if the given file is an image file based on its file extension.
-  */
+   * Determines if the given file is an image file based on its file extension.
+   */
   function isImageFile(fileName) {
     var _fileName$split;
     // Extract the file extension from the file name
@@ -192,10 +192,10 @@ function DocumentUpload(props) {
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondary-content",
     className: "type-b2-400"
-  }, subText)), infoText && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
-    color: "background-warning",
-    description: infoText
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, subText)), infoText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative",
+    className: "type-b2-400"
+  }, infoText)), /*#__PURE__*/_react.default.createElement("div", {
     className: "uploadDiv"
   }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {

package/build/widgets/oa-widget-map-base-location/AddressDetails.js CHANGED Viewed

@@ -33,7 +33,8 @@ function AddressDetails(_ref) {
     pinCodeServisible,
     editLocationHandler,
     onFinish,
-    showAddressType
+    showAddressType,
+    isSaveButtonDisabled
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "addresBoxDiv"
@@ -63,7 +64,8 @@ function AddressDetails(_ref) {
   })), pinCodeServisible ? /*#__PURE__*/_react.default.createElement(_AddressForm.default, {
     geolocationData: geolocationData,
     onFinish: onFinish,
-    showAddressType: showAddressType
+    showAddressType: showAddressType,
+    isSaveButtonDisabled: isSaveButtonDisabled
   }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "negative"
   }, "Pincode according to your pin on map is Non-serviceable, please move the pin to serviceable pincode."));

package/build/widgets/oa-widget-map-base-location/AddressForm.js CHANGED Viewed

@@ -30,7 +30,8 @@ function AddressForm(props) {
   const {
     geolocationData,
     onFinish,
-    showAddressType
+    showAddressType,
+    isSaveButtonDisabled = false
   } = props;
   return /*#__PURE__*/_react.default.createElement(_antd.Form, {
     form: form,
@@ -93,6 +94,7 @@ function AddressForm(props) {
   }))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttonBottom margin-top-24"
   }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    disabled: isSaveButtonDisabled || false,
     type: "primary",
     size: "large",
     label: "Save and Proceed",

package/build/widgets/oa-widget-map-base-location/MapBaseLocation.js CHANGED Viewed

@@ -45,7 +45,8 @@ function MapBaseLocation(_ref) {
     onFinish,
     openLocationNotDetectedModal,
     setOpenLocationNotDetectedModalState,
-    showAddressType
+    showAddressType,
+    isSaveButtonDisabled
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_styles.MapStyles, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "containerMap"
@@ -75,6 +76,7 @@ function MapBaseLocation(_ref) {
     fetchAddressFromGoogleApi: fetchAddressFromGoogleApi,
     setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModal
   }), /*#__PURE__*/_react.default.createElement(_AddressDetails.default, {
+    isSaveButtonDisabled: isSaveButtonDisabled,
     showAddressType: showAddressType,
     geolocationData: geolocationData,
     pinCodeServisible: pinCodeServisible,

package/build/widgets/oa-widget-notes/NotesWidget.js CHANGED Viewed

@@ -76,7 +76,8 @@ function NotesWidget(_ref) {
           value: noteInputValue,
           onChange: event => setNoteInputValue(event.target.value),
           onBlur: handleBlur,
-          placeholder: "Type here .."
+          placeholder: "Type here ..",
+          maxLength: 500
         });
       }
       return /*#__PURE__*/_react.default.createElement("div", {

package/build/widgets/oa-widget-reupload-drawer/ReUploadDrawer.js ADDED Viewed

@@ -0,0 +1,164 @@
+"use strict";
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireDefault(require("react"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomUpload = _interopRequireDefault(require("../../dev/oa-component-upload/CustomUpload"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function GenericUpload(_ref) {
+  var _config$documents;
+  let {
+    config,
+    uploadHandler,
+    deleteHandler: _deleteHandler,
+    downloadHandler,
+    previewHandler,
+    visible,
+    onClose,
+    validationConfig = {
+      maxSize: 5,
+      allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+      customValidation: null
+    },
+    uploadedDocuments,
+    showDelete = true,
+    showPreview = false,
+    form
+  } = _ref;
+  const validateFile = (file, docTypeId) => {
+    const isValidType = validationConfig.allowedTypes.includes(file.type);
+    if (!isValidType) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["Only ".concat(validationConfig.allowedTypes.map(type => type.split('/')[1].toUpperCase()).join('/'), " files are allowed!")]
+      }]);
+      return false;
+    }
+    const isValidSize = file.size / 1024 / 1024 < validationConfig.maxSize;
+    if (!isValidSize) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["File must be smaller than ".concat(validationConfig.maxSize, "MB!")]
+      }]);
+      return false;
+    }
+    if (validationConfig.customValidation) {
+      return validationConfig.customValidation(file, docTypeId);
+    }
+    return true;
+  };
+  const handleUpload = async (file, docTypeId, documentId) => {
+    if (!validateFile(file, docTypeId)) {
+      return null;
+    }
+    return uploadHandler(file, docTypeId, documentId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: config.title,
+    width: config.width,
+    open: visible,
+    onClose: onClose,
+    buttonConfig: config.buttonConfig
+  }, config.systemInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({}, config.systemInfo, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoOutlined.default,
+        size: 24,
+        color: "negative"
+      }),
+      position: 'left'
+    }
+  }))), (config === null || config === void 0 ? void 0 : config.heading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, config.heading, ' ')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, (_config$documents = config.documents) === null || _config$documents === void 0 ? void 0 : _config$documents.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.docTypeId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-500",
+    color: "primary-content"
+  }, item === null || item === void 0 ? void 0 : item.docName)), /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
+    isMandatory: true,
+    handleCustomOnChange: (file, status) => handleUpload(file, item.docTypeId, item.documentId),
+    formName: item.docTypeId,
+    uploadedDocuments: uploadedDocuments && uploadedDocuments[item.docTypeId] ? [uploadedDocuments[item.docTypeId]] : [],
+    deleteHandler: selectedFile => _deleteHandler(item.docTypeId),
+    downloadCallback: file => downloadHandler(item.docTypeId),
+    getPreview: previewHandler || (() => {}),
+    showDelete: showDelete,
+    showPreview: showPreview,
+    accept: validationConfig.allowedTypes.join(', '),
+    docName: item.docName
+  })))));
+}
+GenericUpload.propTypes = {
+  config: _propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    width: _propTypes.default.number,
+    buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+      callback: _propTypes.default.func,
+      label: _propTypes.default.string,
+      type: _propTypes.default.string
+    })),
+    systemInfo: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      color: _propTypes.default.string,
+      description: _propTypes.default.node
+    }),
+    heading: _propTypes.default.string,
+    documents: _propTypes.default.arrayOf(_propTypes.default.shape({
+      title: _propTypes.default.string,
+      docTypeId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      docName: _propTypes.default.string
+    }))
+  }).isRequired,
+  uploadHandler: _propTypes.default.func.isRequired,
+  deleteHandler: _propTypes.default.func.isRequired,
+  downloadHandler: _propTypes.default.func.isRequired,
+  previewHandler: _propTypes.default.func,
+  validationConfig: _propTypes.default.shape({
+    maxSize: _propTypes.default.number,
+    allowedTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+    customValidation: _propTypes.default.func
+  }),
+  uploadedDocuments: _propTypes.default.object,
+  showDelete: _propTypes.default.bool,
+  showPreview: _propTypes.default.bool,
+  form: _propTypes.default.object.isRequired,
+  visible: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired
+};
+GenericUpload.defaultProps = {
+  previewHandler: () => {},
+  validationConfig: {
+    maxSize: 5,
+    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+    customValidation: null
+  },
+  uploadedDocuments: {},
+  showDelete: true,
+  showPreview: false
+};
+var _default = exports.default = GenericUpload;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.97",
+  "version": "1.0.1-stage.99",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",