oa-componentbook 0.18.361 → 0.18.362

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

@@ -54,7 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @property {string} ['data-test'] Data test string to be applied to the outermost element.
  */
 function ApprovalWidget(_ref) {
-  var _approvalForm$disable2, _actionContent$label, _approvalForm$disable3, _approvalForm$disable4, _approvalForm$disable5, _approvalForm$remarks, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$remarks2, _approvalForm$disable10;
+  var _approvalForm$disable5, _actionContent$label, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$remarks2, _approvalForm$disable10;
   let {
       children,
       description,
@@ -134,6 +134,92 @@ function ApprovalWidget(_ref) {
         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."
+      }] : []
+    }, /*#__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", {
@@ -147,14 +233,14 @@ function ApprovalWidget(_ref) {
     typography: "type-b2-400",
     color: "primary-content"
   }, description)), !isQuestionStyleWidget && ((multipleDocDetails === null || multipleDocDetails === void 0 ? void 0 : multipleDocDetails.length) > 0 ? multipleDocDetails.map(docDetails => {
-    var _approvalForm$disable;
+    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$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
+      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
@@ -165,7 +251,7 @@ function ApprovalWidget(_ref) {
     typography: "type-b2-400",
     color: "secondary-content"
   }, documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
-    disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
+    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
@@ -240,49 +326,8 @@ function ApprovalWidget(_ref) {
     typography: "type-b2-400",
     color: "secondary-content"
   }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : "-")), actionRenderType === "button" && /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
-    disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
-  }, actionContent)), actionRenderType === "radio" &&
-  /*#__PURE__*/
-  //className="col-sm-12 col-md-4 col-lg-4"
-  _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "isApproved-".concat(questionId),
-    className: "custom-radio-group",
-    initialValue: isApproved,
-    rules: [{
-      required: true,
-      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
-        "data-test": "".concat(dataTest, "--is-approved-validation-message")
-      }, "Approval status needs to be selected.") : "Approval status needs to be selected."
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
-    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
-    onChange: onRadioChange,
-    value: isApproved
-  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
-    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
-    disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
-    label: "Mark as Approved",
-    value: 1
-  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
-    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
-    disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false,
-    label: "Mark as Pending",
-    value: 0
-  }))), isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
-    className: "type-b2-400"
-  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "remarks-".concat(questionId),
-    initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
-    rules: [{
-      required: true,
-      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
-        "data-test": "".concat(dataTest, "--remarks-validation-message")
-      }, "Remarks cannot be empty.") : "Remarks cannot be empty."
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
-    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
     disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
-  })))), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+  }, 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"

package/package.json

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