oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-chat/ChatWidget.js

@@ -0,0 +1,261 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledCustomDrawer = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@material-ui/icons");
+var _system = require("@material-ui/system");
+var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _utils = require("../../utils");
+var _templateObject;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+_dayjs.default.extend(_relativeTime.default);
+const StyledCustomDrawer = exports.StyledCustomDrawer = (0, _styledComponents.default)(_CustomDrawer.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h3 {\n    margin: 0 0 4px;\n  }\n  .ant-drawer-footer {\n    padding: 24px;\n  }\n  .ant-drawer-footer span {\n    margin: 0 0 4px;\n    display: block;\n  }\n  .ant-drawer-footer aside {\n    display: flex;\n    justify-content: end;\n    padding: 16px 0 0;\n  }\n  .ant-drawer-footer aside span {\n    margin: 0;\n  }\n"])));
+const stylesObj = {
+  chatUi: {
+    padding: '16px',
+    backgroundColor: 'var(--color-background-info)',
+    borderRadius: '8px',
+    width: '440px',
+    marginTop: '24px',
+    marginBottom: '8px',
+    wordBreak: 'anywhere'
+  },
+  chatContainer: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    flex: 9,
+    overflow: 'auto'
+  }
+};
+
+/**
+ * ChatWidget
+ *
+ * This is a custom drawer which will have a chat box where the user
+ * can type and send the message to the other user.
+ *
+ * @param {boolean} show - Whether the drawer is initially open or closed.
+ * @param {function} onClose - Function to be called when the drawer is closed.
+ * @param {boolean} isContentLoading - Whether the content is loading or not.
+ * @param {array} queryMessages - Array of chat messages.
+ * @param {string} headerTitle - Title of the chat window.
+ * @param {string} bodyTitle - Title of the chat body.
+ * @param {string} initialMsg - Initial message to be displayed in the chat box.
+ * @param {function} onMessageInput - Function to be called when the user types a message.
+ * @param {boolean} clearInput - Whether to clear the input field after sending a message.
+ * @param {number} inputMaxLength - Maximum length of the input field.
+ *
+ * @returns {ReactElement}
+ */
+function ChatWidget(_ref) {
+  let {
+    show,
+    onClose,
+    isContentLoading,
+    queryMessages,
+    headerTitle,
+    bodyTitle,
+    initialMsg,
+    onMessageInput,
+    clearInput,
+    inputMaxLength
+  } = _ref;
+  const [message, setMessage] = (0, _react.useState)(initialMsg || '');
+  const chatContainerRef = (0, _react.useRef)(null);
+  const onClearInput = () => clearInput && setMessage('');
+  const onMsgSend = () => {
+    onMessageInput(message);
+    onClearInput();
+  };
+  const scrollToBottom = () => {
+    var _chatContainerRef$cur;
+    (_chatContainerRef$cur = chatContainerRef.current) === null || _chatContainerRef$cur === void 0 || _chatContainerRef$cur.scrollIntoView();
+  };
+  (0, _react.useEffect)(() => {
+    scrollToBottom();
+  }, [queryMessages, message]);
+  return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
+    open: show,
+    onClose: onClose,
+    closeIcon: null,
+    isBaseDrawer: true,
+    width: 860,
+    customTitle: true,
+    title: headerTitle,
+    inputMaxLength: 500,
+    footer: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "primary-content"
+    }, "Reply to Query"), /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
+      name: "message",
+      value: message,
+      placeholder: "Type here...",
+      onChange: e => setMessage(e.target.value),
+      maxLength: inputMaxLength
+    }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      onClick: onMsgSend,
+      size: "medium",
+      label: "Send Reply"
+    })))
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading && [...Array((0, _utils.getRandomInt)(2, 5))].map((_, ind) => ind % 2 ?
+  /*#__PURE__*/
+  // Info : This container is to show the loading of the chats
+  // (our chats) in the right side of chat body while chats are fetching.
+  _react.default.createElement(_antd.Skeleton, {
+    loading: isContentLoading,
+    avatar: true,
+    active: true,
+    title: false,
+    style: {
+      backgroundColor: 'red'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, (0, _dayjs.default)().fromNow())))) :
+  /*#__PURE__*/
+  // Info : This container is to show the loading of the chats
+  // (other user) in the left side of chat body while chats are fetching.
+  _react.default.createElement(_antd.Skeleton, {
+    loading: isContentLoading,
+    avatar: true,
+    active: true,
+    title: false,
+    style: {
+      transform: 'scale(-1, 1)'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread(_objectSpread({}, stylesObj.chatUi), {}, {
+      flexDirection: 'column',
+      gap: '2px'
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px'
+    }, stylesObj.chatUi)
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    type: "secondary",
+    style: {
+      fontSize: '10px',
+      alignSelf: 'flex-end',
+      width: 'fit-content'
+    }
+  }, (0, _dayjs.default)().fromNow()))))) || (queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(msg => msg.isUser ?
+  /*#__PURE__*/
+  // Info : This is the chat box of right side which will show messages from user.
+  _react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px'
+    }, stylesObj.chatUi), {}, {
+      backgroundColor: '#f6f6f6'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, msg.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-sl1-700",
+    color: "secondary-content"
+  }, msg.createdAt))) :
+  /*#__PURE__*/
+  /*
+      Info : This is the chat box of left side which will show messages from other user.
+      */
+  _react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread({
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px'
+    }, stylesObj.chatUi)
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b1-400",
+    color: "primary-content"
+  }, msg.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-sl1-700",
+    color: "secondary-content"
+  }, msg.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
+    type: "info",
+    message: "Send a chat to start your chat history for this ticket."
+  })))), /*#__PURE__*/_react.default.createElement("diV", {
+    ref: chatContainerRef
+  }));
+}
+ChatWidget.propTypes = {
+  show: _propTypes.default.bool,
+  onClose: _propTypes.default.func,
+  isContentLoading: _propTypes.default.bool,
+  queryMessages: _propTypes.default.any,
+  headerTitle: _propTypes.default.string,
+  bodyTitle: _propTypes.default.string,
+  onMessageInput: _propTypes.default.func,
+  initialMsg: _propTypes.default.string,
+  clearInput: _propTypes.default.bool,
+  inputMaxLength: _propTypes.default.number
+};
+ChatWidget.defaultProps = {
+  show: false,
+  onClose: () => {},
+  isContentLoading: true,
+  headerTitle: 'VIEW OR REPLY TO QUERY',
+  bodyTitle: 'Purchase Invoice',
+  onMessageInput: msg => alert("This is your msg :".concat(msg)),
+  initialMsg: '',
+  clearInput: true,
+  inputMaxLength: 500,
+  queryMessages: [{
+    createdAt: 'Today 4:00pm',
+    isUser: false,
+    message: 'This is a message from admin',
+    updatedAt: 'Today 4:00pm'
+  }, {
+    createdAt: 'Today 4:00pm',
+    isUser: true,
+    message: 'This is a message from user',
+    updatedAt: 'Today 4:00pm'
+  }, {
+    createdAt: 'Today 4:00pm',
+    isUser: false,
+    message: 'This is a message from admin',
+    updatedAt: 'Today 4:00pm'
+  }]
+};
+var _default = exports.default = ChatWidget;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatUi = exports.ChatFooter = exports.ChatDrawer = exports.ChatContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 ChatUi = exports.ChatUi = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  background-color: var(--color-background-info);\n  border-radius: 4px;\n  max-width: 440px;\n  margin-top: 12px;\n"])));
+const ChatContainer = exports.ChatContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  flex: 9;\n  overflow: auto;\n"])));
+const ChatDrawer = exports.ChatDrawer = (0, _styledComponents.default)(_CustomDrawer.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  // Your CustomDrawer styles here\n"])));
+const ChatFooter = exports.ChatFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow: hidden;\n"])));
+
+// Add more styled components as needed

package/build/widgets/oa-widget-close-claim/CloseClaimWidget.js

@@ -0,0 +1,256 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+const _excluded = ["visible", "onCancel", "onConfirm", "fraudReasons", "isFraudRequired", "closingClaimReasons", "serviceRequestData", "remarkMaxlength", "data-test", "selectModeForRejectionReason", "onSelectionChange", "maxSelectForMultiSelect"];
+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 _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; }
+const {
+  Option
+} = _antd.Select;
+const {
+  TextArea
+} = _antd.Input;
+
+/**
+ * This component is used to close a claim.
+ *
+ * @param {Object} props
+ * @param {boolean} props.visible - Is the drawer visible?
+ * @param {Function} props.onCancel - Callback when the cancel button is clicked.
+ * @param {Function} props.onConfirm - Callback when the close claim button is clicked.
+ * @param {string[]} props.fraudReasons - An array of fraud reason strings.
+ * @param {boolean} props.isFraudRequired - Is fraud reason required?
+ * @param {string[]} props.closingClaimReasons - An array of closing claim reason strings.
+ * @param {Object} props.serviceRequestData - Data for the service request.
+ * @param {number} props.remarkMaxlength - Maximum length of the remark field.
+ * @param {string} props['data-test'] - Data-test for the component.
+ * @return {ReactElement} The component.
+ */
+function CloseClaimWidget(_ref) {
+  let {
+      visible,
+      onCancel,
+      onConfirm,
+      fraudReasons,
+      isFraudRequired,
+      closingClaimReasons,
+      serviceRequestData,
+      // Data for the service request
+      remarkMaxlength,
+      'data-test': dataTest,
+      selectModeForRejectionReason,
+      onSelectionChange,
+      maxSelectForMultiSelect
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [form] = _antd.Form.useForm();
+
+  /*
+  Used 0 and 1, instead of booleans, since radio in antd throws warning in console,
+  if any type other than number or string are used in radio
+  */
+  const [isFraud, setIsFraud] = (0, _react.useState)(0);
+
+  /**
+   * Handle confirm button click.
+   *
+   * Validates the form and calls the `onConfirm` callback with the form data.
+   * Resets the form upon confirm.
+   * If `isFraudRequired` is true, sets the `isFraud` state to the value of the
+   * "isCustomerFraudCase" field.
+   */
+  const handleConfirm = () => {
+    form.validateFields().then(values => {
+      // Passing the form data upto the parent.
+      onConfirm(values);
+
+      // This resets the form upon confirm.
+      form.resetFields();
+      if (isFraudRequired) {
+        setIsFraud(form.getFieldValue('isCustomerFraudCase'));
+      }
+    }).catch(error => console.log(error));
+  };
+
+  /**
+   * Hide or show the fraud reasons based on the radio event.
+   *
+   * @param {Object} radioEvent - The radio event.
+   */
+  const hideOrShowFraudReasons = radioEvent => {
+    setIsFraud(radioEvent.target.value);
+  };
+  const handleCancel = () => {
+    onCancel();
+    form.resetFields();
+    setIsFraud(0);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--drawer") : undefined,
+    title: "Close Claim",
+    buttonConfig: [{
+      callback: handleCancel,
+      label: 'Cancel',
+      type: 'secondary',
+      'data-test': dataTest ? "".concat(dataTest, "--cancel-button") : undefined
+    }, {
+      callback: handleConfirm,
+      label: 'Close Claim',
+      type: 'primary',
+      'data-test': dataTest ? "".concat(dataTest, "--close-claim-button") : undefined
+    }],
+    open: visible,
+    onClose: handleCancel,
+    placement: "right",
+    width: "480"
+  }, /*#__PURE__*/_react.default.createElement(_styles.AsideContainer, null, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "type-t1-500"
+  }, "Close Claim "), /*#__PURE__*/_react.default.createElement("small", {
+    className: "type-b2-400"
+  }, "Are you sure you would like to close this claim as this action will close the SR#", serviceRequestData === null || serviceRequestData === void 0 ? void 0 : serviceRequestData.refPrimaryTrackingNo, ' ', "and no further processing will be allowed. Please provide the reason for closure."), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "labelremarks"
+  }, "Select reason for rejection (Visible to the customer)", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "serviceCancelReason",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--rejection-reason-validation-message")
+      }, "A reason for rejection has to be selected.") : 'A reason for rejection has to be selected.'
+    }],
+    labelCol: {
+      span: 24
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    placeholder: "Select",
+    "data-test": dataTest ? "".concat(dataTest, "--rejection-reason") : undefined,
+    options: closingClaimReasons === null || closingClaimReasons === void 0 ? void 0 : closingClaimReasons.map(row => ({
+      value: row.value,
+      label: row.value
+    })),
+    mode: selectModeForRejectionReason,
+    onSelectionChange: onSelectionChange,
+    maxSelectForMultiSelect: maxSelectForMultiSelect
+  })), isFraudRequired && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "labelremarks"
+  }, "Is this a fraud case?", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "isCustomerFraudCase",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-fraud-radio-validation-message")
+      }, "A selection is required.") : 'A selection is required.'
+    }],
+    initialValue: 0,
+    labelCol: {
+      span: 24
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-fraud-radio-group") : undefined,
+    onChange: hideOrShowFraudReasons,
+    value: isFraud
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-fraud-radio-yes") : undefined,
+    label: "Yes",
+    value: 1
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-fraud-radio-no") : undefined,
+    label: "No",
+    value: 0
+  })))), isFraud === 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "labelremarks"
+  }, "Why is this a fraud case?", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "serviceFraudCaseReason",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--fraud-reason-validation-message")
+      }, "Please select atleast one reason.") : 'Please select atleast one reason.',
+      type: 'array'
+    }],
+    id: "serviceFraudCaseReason",
+    labelCol: {
+      span: 24
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    mode: "multiple",
+    placeholder: "Select",
+    "data-test": dataTest ? "".concat(dataTest, "--fraud-reason") : undefined,
+    options: [{
+      value: 'placeholder',
+      label: 'Select one or more...',
+      disabled: true
+    }, ...fraudReasons.map(row => ({
+      value: row.key,
+      label: row.value
+    }))]
+  })))), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "labelremarks"
+  }, "Remarks", /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    labelCol: {
+      span: 24
+    },
+    name: "remarks",
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-validation-message")
+      }, "Please enter remarks.") : 'Please enter remarks.'
+    }],
+    initialValue: ""
+  }, /*#__PURE__*/_react.default.createElement(TextArea, {
+    rows: "3",
+    placeholder: "Start typing...",
+    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+    maxLength: remarkMaxlength
+  })))));
+}
+CloseClaimWidget.propTypes = {
+  'data-test': _propTypes.default.string,
+  visible: _propTypes.default.bool.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onConfirm: _propTypes.default.func.isRequired,
+  fraudReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))).isRequired,
+  closingClaimReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))).isRequired,
+  // Can't define object type in this because the data is highly dynamic
+  serviceRequestData: _propTypes.default.object.isRequired,
+  isFraudRequired: _propTypes.default.bool,
+  remarkMaxlength: _propTypes.default.number,
+  selectModeForRejectionReason: _propTypes.default.oneOf(['multiple', 'tags']),
+  onSelectionChange: _propTypes.default.func,
+  maxSelectForMultiSelect: _propTypes.default.number
+};
+CloseClaimWidget.defaultProps = {
+  'data-test': null,
+  isFraudRequired: false,
+  remarkMaxlength: 250,
+  selectModeForRejectionReason: null,
+  onSelectionChange: null,
+  maxSelectForMultiSelect: null
+};
+var _default = exports.default = CloseClaimWidget;

package/build/widgets/oa-widget-close-claim/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AsideContainer = void 0;
+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 AsideContainer = exports.AsideContainer = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-form-item-explain-error{\n    color: var(--color-negative);\n    font-size: 12px;\n}\n  h1 {\n    padding: 0 0 8px;\n    margin: 0;\n    color: var(--color-primary-content);\n  }\n\n  small {\n    padding: 0 0 32px;\n    margin: 0;\n    display: block;\n    color: var(--color-primary-content);\n  }\n\n  .ant-radio-group {\n    display: flex;\n  }\n\n  .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n    position: absolute;\n    right:0;\n    color: var(--color-negative);\n    padding: 0;\n  }\n  .ant-form-item {\n    margin-bottom: 36px;\n  }\n\n  textarea {\n    min-height: 108px;\n    resize: none;\n    border-radius: 4px;\n    padding: 12px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  .type-r1-400 {\n    color: var(--color-negative);\n  }\n\n  .ant-form-item .ant-form-item-label {\n    padding: 0;\n  }\n\n  label {\n    padding: 0 0 4px;\n    height: auto !important;\n    color: var(--color-primary-content) !important;\n  }\n\n  form .ant-radio-wrapper {\n    width: 140px;\n  }\n"])));