oa-componentbook 0.18.94 → 0.18.96

package/build/index.js

@@ -221,6 +221,12 @@ Object.defineProperty(exports, "CustomTooltip", {
     return _CustomTooltip.default;
   }
 });
+Object.defineProperty(exports, "DocUploadWidget", {
+  enumerable: true,
+  get: function get() {
+    return _DocUploadWidget.default;
+  }
+});
 Object.defineProperty(exports, "Elevation", {
   enumerable: true,
   get: function get() {
@@ -275,6 +281,12 @@ Object.defineProperty(exports, "MembershipCard", {
     return _MembershipCard.default;
   }
 });
+Object.defineProperty(exports, "MembershipDetailCard", {
+  enumerable: true,
+  get: function get() {
+    return _MembershipDetailCard.default;
+  }
+});
 Object.defineProperty(exports, "NotesWidget", {
   enumerable: true,
   get: function get() {
@@ -359,12 +371,6 @@ Object.defineProperty(exports, "UploadDownloadWidget", {
     return _UploadDownloadWidget.default;
   }
 });
-Object.defineProperty(exports, "UploadUploadWidget", {
-  enumerable: true,
-  get: function get() {
-    return _UploadUploadWidget.default;
-  }
-});
 Object.defineProperty(exports, "ViewHistoryWidget", {
   enumerable: true,
   get: function get() {
@@ -403,7 +409,7 @@ Object.defineProperty(exports, "typographyOptions", {
 });
 var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
 var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
-var _UploadUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/UploadUploadWidget"));
+var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
 var _BarChart = _interopRequireDefault(require("./components/oa-component-bar-chart/BarChart"));
 var _BorderRadiusDemo = _interopRequireDefault(require("./components/oa-component-demo-border-radius/BorderRadiusDemo"));
 var _ColorVariablesDemo = _interopRequireDefault(require("./components/oa-component-demo-color-variables/ColorVariablesDemo"));
@@ -464,6 +470,7 @@ var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-vie
 var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
 var _ChatWidget = _interopRequireDefault(require("./widgets/oa-widget-chat/ChatWidget"));
 var _MembershipCard = _interopRequireDefault(require("./widgets/oa-widget-card/MembershipCard"));
+var _MembershipDetailCard = _interopRequireDefault(require("./widgets/oa-detailWidget-card/MembershipDetailCard"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/widgets/oa-detailWidget-card/MembershipDetailCard.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _ArrowForwardIosSharp = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIosSharp"));
+var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+var _offer = _interopRequireDefault(require("../../images/offer.svg"));
+var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function MembershipDetailCard(_ref) {
+  let {
+    card
+  } = _ref;
+  const {
+    body
+  } = card;
+  const {
+    heading,
+    subHeading,
+    primaryInfo,
+    primaryPanel,
+    secondaryInfo,
+    alert
+  } = body || {};
+  return /*#__PURE__*/_react.default.createElement(_styles.MembershipCardStyle, null, body && /*#__PURE__*/_react.default.createElement(_styles.CardBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cardHead"
+  }, /*#__PURE__*/_react.default.createElement("div", null, subHeading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-sl1-700",
+    color: "secondary-content"
+  }, subHeading), heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, heading))), primaryInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primary-info"
+  }, secondaryInfo && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b2-400"
+  }, secondaryInfo)), /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: primaryInfo.type === 'success' ? 'positive' : 'negative',
+    className: "type-b2-400"
+  }, primaryInfo.label)))), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primaryInfo"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "paraWithIcon"
+  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    style: {
+      width: '24px'
+    },
+    alt: "phone img",
+    src: _offer.default
+  }), /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-background",
+    className: "type-link-button-500"
+  }, primaryPanel.label))), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: primaryPanel.name,
+    onKeyDown: e => {
+      if (e.key === 'Enter') primaryPanel.name();
+    },
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    icon: _ArrowForwardIos.default
+  }))), alert.length && alert.map((item, i) => {
+    var _item$description, _item$description2, _item$description3, _item$description4;
+    return ((item === null || item === void 0 ? void 0 : item.subHeading) !== '' || (item === null || item === void 0 ? void 0 : item.heading) !== '' || (item === null || item === void 0 || (_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.text) !== undefined) && /*#__PURE__*/_react.default.createElement("div", {
+      className: item !== null && item !== void 0 && (_item$description2 = item.description) !== null && _item$description2 !== void 0 && _item$description2.text && (item === null || item === void 0 || (_item$description3 = item.description) === null || _item$description3 === void 0 ? void 0 : _item$description3.text) !== '' ? "toolTipInfo ".concat(item.type) : 'toolTipInfo flexChangeBody'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "toolTip"
+    }, item.tooltip && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+      isDisplayed: true
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      color: item.type,
+      icon: _InfoOutlined.default
+    })), /*#__PURE__*/_react.default.createElement("div", null, (item === null || item === void 0 ? void 0 : item.subHeading) && /*#__PURE__*/_react.default.createElement("h3", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "secondary-content",
+      className: "type-sl1-700"
+    }, item === null || item === void 0 ? void 0 : item.subHeading)), (item === null || item === void 0 ? void 0 : item.heading) && /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      className: "type-t2-700"
+    }, item === null || item === void 0 ? void 0 : item.heading)), (item === null || item === void 0 ? void 0 : item.description) && (item === null || item === void 0 || (_item$description4 = item.description) === null || _item$description4 === void 0 ? void 0 : _item$description4.text) && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      className: "type-b2-400"
+    }, item.description.text)))), item.actions && /*#__PURE__*/_react.default.createElement("div", null, item.actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: action.label,
+      label: action.label,
+      type: action.type,
+      onClick: action.name,
+      iconConfig: {
+        icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _ArrowForwardIosSharp.default,
+          size: 16
+        }),
+        position: 'right'
+      }
+    }))));
+  })));
+}
+MembershipDetailCard.propTypes = {
+  card: _propTypes.default.shape({
+    body: _propTypes.default.shape({
+      heading: _propTypes.default.string,
+      subHeading: _propTypes.default.string,
+      primaryInfo: _propTypes.default.shape({
+        label: _propTypes.default.string,
+        type: _propTypes.default.string
+      }),
+      secondaryInfo: _propTypes.default.string,
+      primaryPanel: _propTypes.default.shape({
+        icon: _propTypes.default.node,
+        label: _propTypes.default.string,
+        name: _propTypes.default.func
+      }),
+      alert: _propTypes.default.shape({
+        tooltip: _propTypes.default.string,
+        subHeading: _propTypes.default.string,
+        heading: _propTypes.default.string,
+        description: _propTypes.default.shape({
+          text: _propTypes.default.string
+        }),
+        actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+          label: _propTypes.default.string,
+          type: _propTypes.default.string,
+          name: _propTypes.default.func
+        }))
+      })
+    })
+  })
+};
+MembershipDetailCard.defaultProps = {
+  card: null
+};
+var _default = exports.default = MembershipDetailCard;

package/build/widgets/oa-detailWidget-card/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MembershipCardStyle = exports.CardBody = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+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 MembershipCardStyle = exports.MembershipCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h2{\n  margin: 0;\n}\n  padding: 24px;\n  background: var(--color-primary-background);\n  border-radius: 12px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  position: relative;\n  margin: 0 0 24px;\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n  }\n  .primaryInfo{\n    display: flex;\n    padding: 12px 8px;\n    justify-content: space-between;\n    background: var(--color-primary);\n    border-radius: 8px;\n    align-items: center;\n  }\n  .primaryInfo img{\n    width: 24px;\n  }\n  .toolTipInfo .text-container svg {\n    color: var(--color-primary);\n    font-size: 16px !important;\n  }\n  .paraWithIcon{\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  }\n  .toolTipInfo{\n    display: flex;\n    gap: 8px;\n    background: var(--color-background-positive);\n    padding: 12px;\n    border-radius: 8px;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  .flexChangeBody{\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .toolTipInfo .toolTip + div{\n    display: flex;\n    justify-content: end;\n  }\n  .error{\n    background: var(--color-background-negative);\n  }\n  .error svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n\n  .success svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\n    width: 80%;\n  }\n  .cardHead{\n    display: flex;\n    justify-content: space-between;\n    gap: 32px;\n    flex-direction: column;\n  }\n  .imgBg{\n    border-radius: 8px;\n    background: #DEF1FB;\n    width: 56px;\n    height: 56px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n \n  .ant-modal-footer{\n    display: none;\n  }\n  .toolTip svg{\n    margin: 4px 0 0;\n  }\n  @media only screen and (max-width: 600px) {\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 16px;\n      align-items: unset;\n    }\n    .cardHead h2 > span{\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 24px;\n    }\n  }\n"])));
+const CardBody = exports.CardBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\nflex-direction: column;\ngap: 32px;\n\n"])));

package/build/widgets/oa-widget-document-upload/{UploadUploadWidget.js → DocUploadWidget.js}

@@ -1,36 +1,33 @@
 "use strict";
 
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 require("core-js/modules/es.promise.js");
-require("core-js/modules/es.string.starts-with.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
+var _RemoveRedEye = _interopRequireDefault(require("@material-ui/icons/RemoveRedEye"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _styles = require("./styles");
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const getBase64 = file => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = () => resolve(reader.result);
   reader.onerror = error => reject(error);
 });
-const isImageFile = file => file.type.startsWith('image/');
 const downloadFile = (base64String, fileName) => {
   const link = document.createElement('a');
   link.href = base64String;
@@ -42,30 +39,49 @@ function DocumentUpload(props) {
     uploadedDocuments = [],
     onChange,
     subText,
-    heading
+    heading,
+    formName,
+    getPreview
   } = props;
   const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
-  const [previewImage, setPreviewImage] = (0, _react.useState)('');
+  const [previewImage, setPreviewImage] = (0, _react.useState)(null);
   const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
   const [loading, setLoading] = (0, _react.useState)(false);
   const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
   const handleCancel = () => setPreviewOpen(false);
+  function isImageFile(fileName) {
+    var _fileName$split;
+    // Extract the file extension from the file name
+    const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split('.')) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
+
+    // Define an array of image file extensions
+    const imageFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
+
+    // Check if the file extension is in the array of image file extensions
+    if (imageFileExtensions.indexOf(fileExtension) !== -1) {
+      return true;
+    }
+    return false;
+  }
   const handlePreview = async file => {
-    var _modifiedFile;
-    let modifiedFile = file;
-    if (!file.url && !file.preview) {
-      const base64Preview = await getBase64(file.originFileObj);
-      modifiedFile = _objectSpread(_objectSpread({}, file), {}, {
-        preview: base64Preview
-      });
-      if (!isImageFile(file)) {
-        downloadFile(file.preview, file.name);
-        return;
+    if (file !== null && file !== void 0 && file.originFileObj) {
+      if (isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+        const base64Preview = await getBase64(file.originFileObj);
+        setPreviewImage(base64Preview);
+        setPreviewOpen(true);
+      } else {
+        const base64Preview = await getBase64(file.originFileObj);
+        downloadFile(base64Preview, file === null || file === void 0 ? void 0 : file.name);
       }
+    } else if (isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+      const url = await getPreview();
+      setPreviewOpen(true);
+      setPreviewImage(url);
+    } else {
+      const url = await getPreview();
+      downloadFile(url, file === null || file === void 0 ? void 0 : file.name);
     }
-    setPreviewImage(modifiedFile.url || modifiedFile.preview);
-    setPreviewOpen(true);
-    setPreviewTitle((_modifiedFile = modifiedFile) === null || _modifiedFile === void 0 ? void 0 : _modifiedFile.name);
+    setPreviewTitle(file === null || file === void 0 ? void 0 : file.name);
   };
   const handleChange = async _ref => {
     let {
@@ -76,21 +92,25 @@ function DocumentUpload(props) {
       onChange(null, 'removed');
     }
     const modifiedList = await Promise.all(newFileList.map(async files => {
-      const modifiedFile = files;
-      // if (file.status === 'uploading') {
+      let modifiedFile = files;
       setLoading(true);
       try {
         await onChange(files);
         modifiedFile.status = 'done';
+        if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+          var _modifiedFile, _modifiedFile2;
+          modifiedFile.url = _PdfSampleImage.default;
+          (_modifiedFile = modifiedFile) === null || _modifiedFile === void 0 || delete _modifiedFile.originFileObj;
+          (_modifiedFile2 = modifiedFile) === null || _modifiedFile2 === void 0 || delete _modifiedFile2.type;
+        }
       } catch (error) {
-        console.error('Error during upload:', error);
-        modifiedFile.status = 'error';
+        modifiedFile = null;
       }
       setLoading(false);
-      // }
       return modifiedFile;
     }));
-    setFileList(modifiedList);
+    const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
+    setFileList(tempList);
   };
   const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
     style: {
@@ -124,35 +144,50 @@ function DocumentUpload(props) {
         colorText: _ColorVariablesMap.default['--color-primary']
       }
     }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: formName
   }, /*#__PURE__*/_react.default.createElement(_antd.Upload, {
     customRequest: () => {},
     listType: "picture-card",
     fileList: fileList,
     onPreview: handlePreview,
-    onChange: handleChange
-  }, fileList.length >= 1 ? null : uploadButton))))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    onChange: handleChange,
+    showUploadList: {
+      showDownloadIcon: false,
+      removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
+      previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    }
+  }, fileList.length >= 1 ? null : uploadButton)))))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
     open: previewOpen,
     title: previewTitle,
     footer: null,
     onCancel: handleCancel
-  }, /*#__PURE__*/_react.default.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, ' ', previewImage ? /*#__PURE__*/_react.default.createElement("img", {
     alt: "example",
     style: {
       width: '100%'
     },
     src: previewImage
-  })));
+  }) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
 }
 DocumentUpload.propTypes = {
   uploadedDocuments: _propTypes.default.array,
   onChange: _propTypes.default.func,
   subText: _propTypes.default.string,
-  heading: _propTypes.default.string
+  heading: _propTypes.default.string,
+  formName: _propTypes.default.string,
+  getPreview: _propTypes.default.func // Define the getPreview prop type
 };
 DocumentUpload.defaultProps = {
   uploadedDocuments: [],
   onChange: () => {},
   subText: '',
-  heading: ''
+  heading: '',
+  formName: '',
+  getPreview: () => {}
 };
 var _default = exports.default = DocumentUpload;

package/package.json

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