oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-detailcard/MembershipDetailCard.js

@@ -0,0 +1,182 @@
+"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 }; }
+/**
+ * MembershipDetailCard component
+ *
+ * @param {Object} card - The card object which contains all the necessary data to render the component
+ * @param {Object} card.body - The body object which contains the properties for the card
+ * @param {string} card.body.heading - The heading of the card
+ * @param {string} card.body.subHeading - The subheading of the card
+ * @param {Object} card.body.primaryInfo - The primary info object which contains the label and type of the primary info
+ * @param {string} card.body.primaryInfo.label - The label of the primary info
+ * @param {string} card.body.primaryInfo.type - The type of the primary info
+ * @param {Object} card.body.primaryPanel - The primary panel object which contains the label, icon and function to be called on click
+ * @param {string} card.body.primaryPanel.label - The label of the primary panel
+ * @param {function} card.body.primaryPanel.name - The function to be called on click
+ * @param {Object} card.body.primaryPanel.icon - The icon of the primary panel
+ * @param {string} card.body.secondaryInfo - The secondary info of the card
+ * @param {Array} card.body.alert - The alert array which contains objects with heading, subheading, description and actions
+ * @param {Object} card.body.alert[i] - The alert object
+ * @param {string} card.body.alert[i].heading - The heading of the alert
+ * @param {string} card.body.alert[i].subHeading - The subheading of the alert
+ * @param {Object} card.body.alert[i].description - The description object of the alert
+ * @param {string} card.body.alert[i].description.text - The description text of the alert
+ * @param {Array} card.body.alert[i].actions - The actions array of the alert
+ * @param {Object} card.body.alert[i].actions[j] - The action object
+ * @param {string} card.body.alert[i].actions[j].label - The label of the action
+ * @param {string} card.body.alert[i].actions[j].type - The type of the action
+ * @param {function} card.body.alert[i].actions[j].name - The function to be called on click
+ * @returns {React.ReactElement} The rendered component
+ */
+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", {
+    className: "titleHead"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, heading))), (primaryInfo || secondaryInfo) && /*#__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, ' ', primaryInfo && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: (primaryInfo === null || primaryInfo === void 0 ? void 0 : primaryInfo.type) === 'success' ? 'positive' : 'negative',
+    className: "type-b2-400"
+  }, primaryInfo.label)))), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
+    className: "primaryInfo",
+    onClick: primaryPanel.name,
+    onKeyDown: e => {
+      if (e.key === 'Enter') primaryPanel.name();
+    },
+    tabIndex: 0,
+    role: "button"
+  }, /*#__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", {
+    className: "displayFlex"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    icon: _ArrowForwardIos.default
+  }))), alert.length > 0 && 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 ".concat(item.type, " 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,
+      size: 24
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flexGap"
+    }, (item === null || item === void 0 ? void 0 : item.subHeading) && /*#__PURE__*/_react.default.createElement("div", null, /*#__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("div", null, /*#__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("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      className: "preline"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "primary-content",
+      className: "type-b2-400"
+    }, item.description.text))))), item.actions && /*#__PURE__*/_react.default.createElement("div", {
+      className: "viewStatus"
+    }, 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-widget-detailcard/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.flexGap div{\n  padding: 0 0 8px;\n}\n.viewStatus button{\n  padding: 16px 0 0;\n}\n.flexGap div:last-child{\n  padding: 0;\n}\n.primaryInfo svg{\n  cursor: pointer;\n}\np,h2,h3{\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  border: 1px solid var(--color-divider);\n  margin: 0 0 24px;\n  @media only screen and (max-width: 600px) {\n    gap: 16px;\n    padding: 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    cursor: pointer;\n  }\n  .primaryInfo img{\n    width: 24px;\n    height: 24px;\n  }\n  .toolTipInfo .text-container svg {\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    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 .toolTip svg{\n    color: var(--color-negative);\n  }\n  .warning{\n    background: var(--color-background-warning);\n  }\n  .warning .toolTip svg{\n    color: var(--color-warning);\n  }\n  .success{\n    background: var(--color-background-positive);\n  }\n    \n  .intermediate{\n    background: var(--color-background-info);\n  }\n\n  .success .toolTip svg{\n    color: var(--color-positive);\n  }\n  .toolTip{\n    display: flex;\n    gap: 8px;\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    min-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: 0px 0 0;\n  }\n  .displayFlex{\n    display: flex;\n  }\n\n.preline span{\n  white-space: pre-line;\n}\n\n  @media only screen and (max-width: 600px) {\n    .toolTipInfo {\n      flex-direction: column;\n      gap: 0;\n      align-items: unset;\n    }\n    .cardHead{\n      gap: 24px;\n    }\n    .cardHead .titleHead > 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@media only screen and (max-width: 600px) {\n  gap: 24px;\n}\n"])));

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

@@ -0,0 +1,264 @@
+"use strict";
+
+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/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 _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+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"));
+var _upload = _interopRequireDefault(require("../../images/upload.svg"));
+var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
+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; }
+/**
+ * Takes a file and returns a Promise that resolves with the file as a base64 encoded string.
+ * The Promise is rejected if there is an error reading the file.
+ * @param {File} file The file to be converted to base64
+ * @returns {Promise<string>} A Promise that resolves with the file as a base64 encoded string
+ */
+const getBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = error => reject(error);
+});
+/**
+ * Downloads a file from a base64 encoded string.
+ * @param {string} base64String The base64 encoded string of the file to be downloaded
+ * @param {string} [fileName] The name of the file to be downloaded. If not provided, the file will be downloaded with the name 'download'.
+ * @returns {undefined}
+ */
+const downloadFile = (base64String, fileName) => {
+  const link = document.createElement('a');
+  link.href = base64String;
+  link.download = fileName || 'download';
+  link.click();
+};
+
+/**
+ * DocumentUpload is a component that allows users to upload documents. It takes a number of props which control its behavior.
+ * @param {object} props The props passed to the component
+ * @param {array} [props.uploadedDocuments=[]] An array of documents that have already been uploaded
+ * @param {function} props.onChange A function that is called whenever the list of uploaded documents changes
+ * @param {number} [props.multipleDoc=0] The maximum number of documents that can be uploaded. If set to 0, there is no limit
+ * @param {boolean} [props.showDelete=false] Whether or not to show a delete button next to each uploaded document
+ * @param {string} [props.subText] A string that is displayed below the heading
+ * @param {string} [props.heading] A string that is displayed above the upload button
+ * @param {string} [props.formName] The name of the form field that the uploaded documents should be associated with
+ * @param {function} [props.getPreview] A function that is called whenever the user clicks on an uploaded document. It should return a Promise that resolves with the URL of the document
+ * @param {string} [props.infoText] A string that is displayed below the subText
+ * @param {boolean} [props.isMandatory=false] Whether or not the component is mandatory
+ * @returns {object} A React component
+ */
+function DocumentUpload(props) {
+  const {
+    uploadedDocuments = [],
+    onChange,
+    multipleDoc,
+    showDelete,
+    subText,
+    heading,
+    formName,
+    getPreview,
+    infoText,
+    isMandatory
+  } = props;
+  const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
+  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);
+
+  /**
+   * 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
+    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;
+  }
+  (0, _react.useEffect)(() => {
+    setFileList(uploadedDocuments);
+  }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
+  /**
+   * Opens a preview of the given file, or downloads the file if it is not an image.
+   * If the file is an image, the preview is displayed in a modal dialog.
+   * If the file is not an image, the file is downloaded to the user's computer.
+   * @param {Object} file The file to be previewed or downloaded.
+   */
+  const handlePreview = async file => {
+    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);
+    }
+    setPreviewTitle(file === null || file === void 0 ? void 0 : file.name);
+  };
+  /**
+   * Called whenever the list of uploaded documents changes.
+   * If the file that was added/removed is an image, it is displayed in a modal dialog.
+   * If the file that was added/removed is not an image, it is downloaded to the user's computer.
+   * @param {{ fileList: Object[], file: Object }} props An object containing the new list of uploaded documents and the file that was added/removed
+   * @returns {Promise<void>} A Promise that resolves when the operation is complete
+   */
+  const handleChange = async _ref => {
+    let {
+      fileList: newFileList,
+      file
+    } = _ref;
+    if (file.status === 'removed') {
+      onChange(null, 'removed');
+    }
+    const modifiedList = await Promise.all(newFileList.map(async files => {
+      let modifiedFile = files;
+      setLoading(true);
+      try {
+        await onChange(files);
+        modifiedFile.status = 'done';
+        if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+          modifiedFile.url = _PdfSampleImage.default;
+        }
+      } catch (error) {
+        modifiedFile = null;
+      }
+      setLoading(false);
+      return modifiedFile;
+    }));
+    const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
+    setFileList(tempList);
+  };
+  const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 0,
+      background: 'none'
+    },
+    type: "button"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    className: "UploadImg",
+    alt: "phone img",
+    src: _upload.default
+  }), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, (heading || subText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "uploadSecPad"
+  }, heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, heading, isMandatory && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, " *"))), subText && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      whiteSpace: 'pre-line'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b2-400"
+  }, 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: {
+      token: {
+        colorBorder: _ColorVariablesMap.default['--color-primary'],
+        borderRadiusLG: 4,
+        colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
+        colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        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,
+    showUploadList: {
+      showDownloadIcon: false,
+      showRemoveIcon: showDelete,
+      removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
+      previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    }
+  }, (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= 1 ? null : uploadButton)))))), previewOpen && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    open: previewOpen,
+    title: previewTitle,
+    footer: null,
+    onCancel: handleCancel
+  }, /*#__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,
+  formName: _propTypes.default.string,
+  infoText: _propTypes.default.string,
+  showDelete: _propTypes.default.bool,
+  multipleDoc: _propTypes.default.number,
+  getPreview: _propTypes.default.func,
+  // Define the getPreview prop type
+  isMandatory: _propTypes.default.bool
+};
+DocumentUpload.defaultProps = {
+  uploadedDocuments: [],
+  onChange: () => {},
+  subText: '',
+  heading: '',
+  formName: '',
+  infoText: '',
+  multipleDoc: 0,
+  showDelete: true,
+  getPreview: () => {},
+  isMandatory: true
+};
+var _default = exports.default = DocumentUpload;

package/build/widgets/oa-widget-document-upload/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSection = exports.MainStyleSec = void 0;
+var _antd = require("antd");
+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 MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n.uploadDiv{\n  width: 96px;\n  position: relative;\n}\n.uploadDiv em{\n  position: absolute;\n  right: -9px;\n  top: -9px;\n  font-style: normal;\n  width: 20px;\n  height: 20px;\n  background: var(--color-warning);\n  z-index: 9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  color: #fff;\n  font-size: 12px;\n  line-height: 0;\n}\n.UploadImg img{\n  height: 24px;\n  width: 24px;\n\n}\n.UploadImg{\n  justify-content: center;\n  cursor: pointer;\n}\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before ant-upload-list-item-actions > a\n  {\n    background: red !important;\n  }\n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before{\n    background: transparent;\n    opacity: 1;\n  }\n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n    opacity: 1;\n  }\n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n    color: #fff;\n  }\n  @media only screen and (max-width: 600px) {\n    .uploadDiv {\n      width: 64px;\n  }\n  .uploadDiv em{\n    width: 16px;\n    height: 16px;\n  }\n  }\n"])));
+const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n  .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n    width: 96px;\n    height: 96px;\n    margin: 0;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n    width: 96px !important;\n    height: 96px !important;\n    margin: 0;\n  }\n  @media only screen and (max-width: 600px) {\n    .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px !important;\n      height: 64px !important;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n      font-size:12px;\n      margin: 0 !important;\n      padding: 0 !important;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));