oa-componentbook 1.0.1-stage.7 → 1.0.1-stage.70

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

@@ -0,0 +1,318 @@
+"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", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "actionRenderType", "actionContent", "systemStatus", "documentTitle", "descriptionTitle", "data-test", "form"];
+/* 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$disable, _actionContent$label, _approvalForm$disable2, _approvalForm$disable3, _approvalForm$remarks, _approvalForm$disable4, _approvalForm$disable5, _approvalForm$disable6, _approvalForm$disable7;
+  let {
+      children,
+      description,
+      docDetails,
+      approvalForm,
+      isMandatory,
+      hasDivider,
+      isQuestionStyleWidget,
+      questionId,
+      title,
+      viewOnClick,
+      actionRenderType,
+      actionContent,
+      systemStatus,
+      documentTitle,
+      descriptionTitle,
+      "data-test": dataTest,
+      form
+    } = _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 getFieldDecorator = form === null || form === void 0 ? void 0 : form.getFieldDecorator;
+  const onRadioChange = event => setIsApproved(event.target.value);
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: approvalForm.hidden ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-9 col-lg-9 gutter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: isQuestionStyleWidget ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-8 col-lg-8 gutter flexCol12"
+  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "type-b2-400"
+  }, 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 && /*#__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$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
+    "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
+  }, docDetails, {
+    formName: isMandatory ? "file-".concat(questionId) : undefined
+  }))), 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"
+  }), children)), (systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-4 col-lg-4 flexCol8"
+  }, 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,
+      title: (() => {
+        const maxItemsPerColumn = 6; // Maximum 6 <li> per column
+        const columns = [];
+
+        // Splitting items into columns of max 6 items each
+        for (let i = 0; i < status.items.length; i += maxItemsPerColumn) {
+          columns.push(status.items.slice(i, i + maxItemsPerColumn));
+        }
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "tooltip-grid"
+        }, columns.map(columnItems => {
+          var _columnItems$, _columnItems$2;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: "col-".concat((_columnItems$ = columnItems[0]) === null || _columnItems$ === void 0 ? void 0 : _columnItems$.title),
+            className: "tooltip-column"
+          }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-sl1-700",
+            color: "secondary-content"
+          }, (_columnItems$2 = columnItems[0]) === null || _columnItems$2 === void 0 ? void 0 : _columnItems$2.title), columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
+            key: item.title,
+            className: "tooltip-item"
+          }, item.type && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+            size: 20,
+            icon: item.type === "positive" ? _Check.default : _Close.default,
+            color: item.type === "positive" ? "positive" : "negative"
+          }), item.title)));
+        }));
+      })()
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      type: "text-only",
+      label: status.label
+    })));
+  })))), approvalForm.invisible && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-4 col-lg-4"
+  }) || !approvalForm.hidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, 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,
+    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, actionContent), actionRenderType === "radio" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-4 col-lg-4"
+  }, /*#__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$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : 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$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : 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$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false
+  })))), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, getFieldDecorator("validateDocumentButton#".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: "This field is required"
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent))), actionRenderType === "radioWithForm" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    className: "custom-radio-group"
+  }, getFieldDecorator("icQues_status_".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-approved-validation-message")
+      }, "Approval status needs to be selected.") : "Approval status needs to be selected."
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
+    label: "Mark as Approved",
+    value: "Complete",
+    disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
+    disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false,
+    label: "Mark as Pending",
+    value: "Incomplete"
+  })))), 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, null, getFieldDecorator("icQues_remarks_".concat(questionId), {
+    rules: isMandatory ? [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-validation-message")
+      }, "Remarks cannot be empty.") : "Remarks cannot be empty."
+    }] : []
+  })( /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+    disabled: (_approvalForm$disable7 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable7 !== void 0 ? _approvalForm$disable7 : false
+  })))))) || undefined), 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
+    }))
+  }),
+  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
+};
+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
+};
+var _default = exports.default = ApprovalWidget;

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

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

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

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

package/build/widgets/oa-widget-feedback/FeedbackWidget.js

@@ -0,0 +1,83 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _FeedbackForm = _interopRequireDefault(require("../../components/oa-component-feedback-form/FeedbackForm"));
+var _FeedbackTooltip = _interopRequireDefault(require("../../components/oa-component-feedback-tooltip/FeedbackTooltip"));
+var _styles = require("./styles");
+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; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackWidget renders a feedback form and a tooltip with a button to open the form.
+ * The widget uses a useEffect hook to set the initial state of the component based on
+ * whether the feedback button has been clicked in the past (stored in localStorage).
+ * The component also uses a useCallback hook to memoize the functions used to set the
+ * state and to handle the button clicks.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.scriptSrc - The source URL for the script tag.
+ * @param {string} props.iframeSrc - The source URL for the iframe.
+ * @param {ReactElement} props.WrapperComponent - The component to wrap the FeedbackForm component.
+ * @param {Function} props.setOpen - The function to call when the feedback button is clicked.
+ * @param {boolean} props.open - The current state of the feedback form.
+ *
+ * @returns {ReactElement} The FeedbackWidget component.
+ */
+/** ****  1deff343-01ad-4bdd-848d-22d1f519f3ff  ****** */
+
+function FeedbackWidget(props) {
+  const {
+    scriptSrc,
+    iframeSrc,
+    WrapperComponent,
+    setOpen,
+    open,
+    onClose
+  } = props !== null && props !== void 0 ? props : {};
+  const [hasClickedFeedback, setHasClickedFeedback] = (0, _react.useState)(true);
+  const [tooltipOpen, setTooltipOpen] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    const feedbackClicked = localStorage.getItem('feedbackButtonClicked');
+    if (!feedbackClicked) {
+      setHasClickedFeedback(false);
+    }
+  }, []);
+  const onFeedbackButtonClick = (0, _react.useCallback)(() => {
+    setTooltipOpen(false);
+    setOpen(true);
+    localStorage.setItem('feedbackButtonClicked', true);
+    setHasClickedFeedback(true);
+  }, [setOpen]);
+  const onButtonClick = (0, _react.useCallback)(() => {
+    setTooltipOpen(false);
+    localStorage.setItem('feedbackButtonClicked', true);
+    setHasClickedFeedback(true);
+  }, [setOpen]);
+  return /*#__PURE__*/_react.default.createElement(_styles.OaFeedBackStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: !hasClickedFeedback && 'OaMask'
+  }), /*#__PURE__*/_react.default.createElement(_FeedbackTooltip.default, {
+    setOpen: setOpen,
+    hasClickedFeedback: hasClickedFeedback,
+    setHasClickedFeedback: setHasClickedFeedback,
+    tooltipTitle: "We Value Your Feedback!",
+    tooltipDescription: "Please let us know your thoughts.",
+    tooltipButtonLabel: "Okay",
+    feedbackButtonLabel: "Give Feedback",
+    onFeedbackButtonClick: onFeedbackButtonClick,
+    onButtonClick: onButtonClick,
+    tooltipOpen: tooltipOpen
+  }), /*#__PURE__*/_react.default.createElement(WrapperComponent, null, /*#__PURE__*/_react.default.createElement(_FeedbackForm.default, {
+    scriptSrc: scriptSrc,
+    iframeSrc: iframeSrc,
+    open: open,
+    onClose: onClose
+  })));
+}
+var _default = exports.default = FeedbackWidget;

package/build/widgets/oa-widget-feedback/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OaFeedBackStyle = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const OaFeedBackStyle = exports.OaFeedBackStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .whiteBg{\n        position: fixed;\n        top: 50%;\n        right: 0;\n        transform: translate(0%, -50%) rotate(-90deg);\n        cursor: pointer;\n        z-index: 999;\n    }\n    .whiteBg button{\n        background: #212121 !important;\n        border: 1px solid #212121;\n    }\n\n    .OaMask{\n        width: 100%;\n        position: fixed;\n        background: rgb(0 0 0 / 70%);\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: 9;\n        top: 0;\n    }\n"])));