oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,492 @@
+"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", "maxLength"];
+/* 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$disable5, _actionContent$label, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$remarks2, _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,
+      maxLength
+    } = _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)(approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved);
+  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);
+  const getApprovalText = (questionId, type) => {
+    const formValue = form.getFieldValue("validateDocumentButton#".concat(questionId));
+    let approvalStatus = "";
+    if (type === "buttonWithFormV4") {
+      approvalStatus = formValue === null || formValue === void 0 ? void 0 : formValue["isApproved-".concat(questionId)];
+    } else if (type === "buttonWithForm") {
+      approvalStatus = formValue === null || formValue === void 0 ? void 0 : formValue["srDoc#status#".concat(questionId)];
+    }
+    switch (approvalStatus) {
+      case 1:
+      case true:
+      case "Complete":
+        return "Marked as approved";
+      case 0:
+      case false:
+      case "Incomplete":
+        return "Marked as pending";
+      default:
+        return "";
+    }
+  };
+  const getRemarksText = (questionId, type) => {
+    const formValue = form.getFieldValue("validateDocumentButton#".concat(questionId));
+    let approvalStatus = "";
+    let remarks = "";
+    if (type === "buttonWithFormV4") {
+      approvalStatus = formValue === null || formValue === void 0 ? void 0 : formValue["isApproved-".concat(questionId)];
+      remarks = formValue === null || formValue === void 0 ? void 0 : formValue["remarks-".concat(questionId)];
+    } else if (type === "buttonWithForm") {
+      approvalStatus = formValue === null || formValue === void 0 ? void 0 : formValue["srDoc#status#".concat(questionId)];
+      remarks = formValue === null || formValue === void 0 ? void 0 : formValue["srDoc#remarks#".concat(questionId)];
+    }
+    switch (approvalStatus) {
+      case 0:
+      case false:
+      case "Incomplete":
+        return "Remark: ".concat(remarks);
+      default:
+        return "";
+    }
+  };
+
+  /**
+   * Renders the approval radio group with validation
+   * @param {boolean} isRequired - Whether the field is required
+   * @returns {React.ReactNode} Radio group component
+   */
+  const renderApprovalRadioGroup = function renderApprovalRadioGroup() {
+    var _approvalForm$disable, _approvalForm$disable2;
+    let isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      name: "isApproved-".concat(questionId),
+      className: "custom-radio-group",
+      initialValue: isApproved,
+      rules: isRequired ? [{
+        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$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : 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$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
+      label: "Mark as Pending",
+      value: 0
+    })));
+  };
+
+  /**
+   * Renders the remarks textarea with validation
+   * @param {boolean} isRequired - Whether the field is required
+   * @returns {React.ReactNode} Remarks section component
+   */
+  const renderRemarksSection = function renderRemarksSection() {
+    var _approvalForm$remarks, _approvalForm$disable3;
+    let isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    return 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: [isRequired && {
+        required: true,
+        message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+          "data-test": "".concat(dataTest, "--remarks-validation-message")
+        }, "Remarks cannot be empty.") : "Remarks cannot be empty."
+      }, maxLength && {
+        max: maxLength,
+        message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+          "data-test": "".concat(dataTest, "--remarks-maxlength-validation-message")
+        }, "Remarks cannot exceed ".concat(maxLength, " characters.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Remarks cannot exceed ".concat(maxLength, " characters."))
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+      "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+      disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
+    })));
+  };
+
+  /**
+   * BUSINESS LOGIC: Two different radio implementations exist for different approval scenarios
+   *
+   * "radio" - MANDATORY APPROVAL: Always requires user to select approval status
+   * - Used when approval decision is compulsory (e.g., critical business processes)
+   * - Both approval status AND remarks (if pending) are mandatory
+   * - Cannot proceed without making a selection
+   *
+   * "radioOptional" - OPTIONAL APPROVAL: Approval status depends on isMandatory flag
+   * - Used when approval might be optional based on business rules
+   * - If isMandatory=true: Same behavior as "radio" (mandatory)
+   * - If isMandatory=false: User can skip approval selection
+   * - Provides flexibility for different approval workflows
+   *
+   * This separation allows the same component to handle both strict and flexible approval processes
+   *
+   * Renders the approval section based on action render type
+   * @returns {React.ReactNode} Approval section component
+   */
+  const renderApprovalSection = () => {
+    const isRadioType = actionRenderType === "radio" || actionRenderType === "radioOptional";
+    if (!isRadioType) return null;
+    const isRequired = actionRenderType === "radio" || isMandatory;
+    return /*#__PURE__*/_react.default.createElement("div", null, renderApprovalRadioGroup(isRequired), renderRemarksSection(isRequired));
+  };
+  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$disable4;
+    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$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : 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$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : 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$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
+  }, actionContent)), renderApprovalSection(), 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"
+    }] : [],
+    initialValue: approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved
+  })( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (actionContent === null || actionContent === void 0 ? void 0 : actionContent.showAgentFeedback) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, getApprovalText(questionId, "buttonWithForm")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "secondary-content"
+  }, getRemarksText(questionId, "buttonWithForm")))), /*#__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), {
+    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(_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."
+    }, maxLength && {
+      max: maxLength,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-maxlength-validation-message")
+      }, "Remarks cannot exceed ".concat(maxLength, " characters.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Remarks cannot exceed ".concat(maxLength, " characters."))
+    }],
+    initialValue: (_approvalForm$remarks2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks2 !== void 0 ? _approvalForm$remarks2 : ""
+  })( /*#__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."
+    }] : []
+  }, (actionContent === null || actionContent === void 0 ? void 0 : actionContent.showAgentFeedback) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, getApprovalText(questionId, "buttonWithFormV4")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "secondary-content"
+  }, getRemarksText(questionId, "buttonWithFormV4")))), /*#__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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Styledescription = exports.StyledContainer = exports.RedText = void 0;
+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;\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"])));