oa-componentbook 0.6.0 → 0.7.0

package/build/components/{Table.js → TableDesign.js}

@@ -7,32 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _antd = require("antd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("./styles");
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const TableDesign = props => {
-  const {
-    dataSource,
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function TableDesign(_ref) {
+  let {
     columns,
+    dataSource,
     pagination,
     rowKey
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_antd.Table, {
-    style: _styles.tableStyles['.tableBorder'],
-    dataSource: dataSource,
+  } = _ref;
+  const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: '1px solid #e8e8e8';\n  "])));
+  return /*#__PURE__*/_react.default.createElement(StyledTable, {
     columns: columns,
+    dataSource: dataSource,
     pagination: pagination,
     rowKey: rowKey
   });
-};
+}
 TableDesign.propTypes = {
-  dataSource: _propTypes.default.array,
-  rowKey: _propTypes.default.string,
-  columns: _propTypes.default.array,
-  rowKey: _propTypes.default.string,
+  columns: _propTypes.default.arrayOf(_propTypes.default.string),
+  dataSource: _propTypes.default.arrayOf(_propTypes.default.string),
+  rowKey: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
     // Define the shape of your object if needed
   })])

package/build/components/TabsDesign.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+require("antd/dist/reset.css");
+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); } // Keeping a static import in this component so that styling is picked up appropriately
+const {
+  TabPane
+} = _antd.Tabs;
+function TabsDesign(_ref) {
+  let {
+    defaultActiveKey,
+    data,
+    disabled,
+    style,
+    tabPosition,
+    type
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
+    defaultActiveKey: defaultActiveKey,
+    style: _objectSpread({}, style),
+    tabPosition: tabPosition,
+    type: type
+  }, data.tabs.length > 0 && data.tabs.map((item, i) => /*#__PURE__*/_react.default.createElement(TabPane, {
+    disabled: item.disabled,
+    key: item.key,
+    tab: item.label
+  }, item.body))));
+}
+TabsDesign.propTypes = {
+  data: _propTypes.default.shape({
+    tabs: _propTypes.default.arrayOf({
+      key: _propTypes.default.string.isRequired,
+      label: _propTypes.default.string.isRequired,
+      body: _propTypes.default.string.isRequired,
+      disabled: _propTypes.default.bool
+    }).isRequired
+  }),
+  defaultActiveKey: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
+  style: _propTypes.default.objectOf(_propTypes.default.string)
+};
+TabsDesign.defaultProps = {
+  data: {},
+  defaultActiveKey: '1',
+  tabPosition: 'top',
+  type: 'line',
+  disabled: false,
+  style: {}
+};
+var _default = TabsDesign;
+exports.default = _default;

package/build/components/{QuesAnsView.js → Toggle.js}

@@ -7,29 +7,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-require("./Wallet Service Details/styles/styles.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const QuesAnsView = props => {
-  var _props$data;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "walletContent"
-  }, ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) > 0 && props.data.map((item, index) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "custumerSaid"
-  }, /*#__PURE__*/_react.default.createElement("p", null, item.questionName), /*#__PURE__*/_react.default.createElement("span", null, "Customer said \u201C", item.customerAnwser, "\u201D")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "rightAlign"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "widthRadio"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
-    className: "radioAlign"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
-    key: "1",
-    value: "Complete"
-  }, "Mark as Approved"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
-    key: "2",
-    value: "Incomplete"
-  }, "Mark as Pending")))))))));
+function Toggle(_ref) {
+  let {
+    disabled,
+    onChange,
+    text,
+    type,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Switch: {
+          handleSize: 28,
+          trackHeight: 32,
+          trackMinWidth: 56,
+          colorPrimary: '#00875A',
+          colorPrimaryHover: '#717171'
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    className: className,
+    disabled: disabled,
+    onChange: disabled ? null : onChange,
+    defaultChecked: true
+  })), /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    className: className,
+    disabled: disabled,
+    onChange: disabled ? null : onChange,
+    defaultChecked: true
+  }));
+}
+Toggle.propTypes = {
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  text: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['primary-toggle', 'success-toggle']).isRequired
 };
-var _default = QuesAnsView;
+Toggle.defaultProps = {
+  className: '',
+  disabled: false
+  // typography: 'type-d1-500',
+};
+var _default = Toggle;
 exports.default = _default;

package/build/components/Typography.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typographyOptions = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ColorUsage = require("./ColorUsage");
+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) } })); }
+const typographyOptions = ['type-d1-500', 'type-d2-500', 'type-h1-500', 'type-h2-500', 'type-h3-500', 'type-t1-500', 'type-t2-700', 'type-b1-400', 'type-b2-400', 'type-b3-400', 'type-button-500', 'type-sl1-700'];
+exports.typographyOptions = typographyOptions;
+const TypeComponent = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // If a color is provided then that is used, otherwise the color is inherited from parent.\n  color: ", ";\n\n  &.type-d1-500 {\n    font-size: 56px;\n    font-weight: 500;\n    line-height: 68px;\n  }\n  \n  &.type-d2-500 {\n    font-size: 40px;\n    font-weight: 500;\n    line-height: 52px;\n  }\n  \n  &.type-h1-500 {\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 40px;\n  }\n  \n  &.type-h2-500 {\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 36px;\n  }\n  \n  &.type-h3-500 {\n    font-size: 24px;\n    font-weight: 600;\n    line-height: 32px;\n  }\n  \n  &.type-t1-500 {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n  }\n  \n  &.type-t2-700 {\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n  }\n  \n  &.type-b1-400 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 24px;\n  }\n  \n  &.type-b2-400 {\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  \n  &.type-b3-400 {\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n  }\n  \n  &.type-button-500 {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n  \n  &.type-sl1-700 {\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px;\n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n"])), props => props.color !== null ? "var(--color-".concat(props.color, ")") : 'inherit');
+function Typography(_ref) {
+  let {
+    children,
+    color,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(TypeComponent, {
+    color: color,
+    className: "".concat(typography)
+  }, children);
+}
+Typography.propTypes = {
+  color: _propTypes.default.oneOf(_ColorUsage.colorOptions) || null,
+  children: _propTypes.default.node.isRequired,
+  typography: _propTypes.default.oneOf(typographyOptions).isRequired
+};
+Typography.defaultProps = {
+  color: null
+};
+var _default = Typography;
+exports.default = _default;

package/build/components/oa-button/OACustomButton.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _Typography = _interopRequireWildcard(require("../Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function OACustomButton(_ref) {
+  let {
+    className,
+    disabled,
+    onClick,
+    position,
+    size,
+    text,
+    type,
+    typography
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.default, {
+    className: "\n        ".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " \n        ").concat(className, "\n      "),
+    disabled: disabled,
+    onClick: disabled ? null : onClick,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-container"
+  }, position === 'left' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: typography
+  }, text), position === 'right' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)));
+}
+OACustomButton.propTypes = {
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  position: _propTypes.default.oneOf(['left', 'right', 'none']),
+  text: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']),
+  typography: _propTypes.default.oneOf(_Typography.typographyOptions)
+};
+OACustomButton.defaultProps = {
+  className: '',
+  disabled: false,
+  size: 'medium',
+  position: 'left',
+  type: 'primary',
+  typography: 'type-button-500'
+};
+var _default = OACustomButton;
+exports.default = _default;

package/build/components/oa-button/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const getSizeStyles = size => {
+  switch (size) {
+    case 'small':
+      {
+        return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          min-width: 80px;\n          padding: 10px 16px;\n          font-size: 12px;\n          font-weight: 400;\n          line-height: 16px;\n        "])));
+      }
+    case 'medium':
+      {
+        return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          min-width: 100px;\n          padding: 10px 16px;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 20px;    \n        "])));
+      }
+    case 'large':
+      {
+        return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          min-width: 136px;\n          padding: 10px 24px;\n          font-size: 16px;\n          font-weight: 700;\n          line-height: 24px;\n          "])));
+      }
+    default:
+      {
+        return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          min-width: 100px;\n          padding: 10px 16px;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 20px;    \n          "])));
+      }
+  }
+};
+const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  ", "\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n  }\n\n  .anticon-search {\n    margin: 0 8px 0 0;\n  }\n"])), props => getSizeStyles(props.size));
+const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &.primary {\n    background: var(--color-blue-CTA);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-white-background);\n  }\n  &.primary:hover {\n    background: var(--color-blue-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-grey2-disabled);\n    cursor: not-allowed;\n    color: var(--color-white-background);\n  }\n\n  &.secondary {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-blue-CTA);\n    color: var(--color-blue-CTA);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-blue-hover);\n    color: var(--color-blue-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-white-background);\n    border: 1px solid var(--color-grey2-disabled);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n\n  &.text-only {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-blue-CTA);\n  }\n  &.text-only:hover {\n    color: var(--color-blue-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-white-background);\n    color: var(--color-grey2-disabled);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-red-error);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-error);\n  }\n  &.danger-primary:hover {\n    background: var(--color-red-hover);\n    color: var(--color-white-background);\n    border: 1px solid var(--color-red-hover);\n  }\n\n  &.danger-secondary {\n    color: var(--color-red-error);\n    border: 1px solid var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-red-hover);\n    border: 1px solid var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-red-error);\n    background: var(--color-white-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-red-hover);\n    background: var(--color-white-background);\n  }\n"])));
+var _default = ColoredStyledButton;
+exports.default = _default;

package/build/components/peclaim-components/CloseClaim.js

@@ -4,16 +4,12 @@ require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.CloseClaimForm = CloseClaimForm;
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/es.promise.js");
-require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.string.replace.js");
-require("core-js/modules/es.regexp.to-string.js");
-require("core-js/modules/es.json.stringify.js");
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _Button = _interopRequireDefault(require("../Button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,190 +19,79 @@ const {
 const {
   TextArea
 } = _antd.Input;
-function CloseClaim(_ref) {
+function CloseClaimForm(_ref) {
   let {
-    servicerequestId,
-    referenceTrackingNo,
-    closingClaimReasons,
-    fraudReasons,
-    productName
+    form,
+    onCloseClaim,
+    referenceTrackingNo
   } = _ref;
-  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
-  const [successModalVisible, setSuccessModalVisible] = (0, _react.useState)(false);
-  const [form] = _antd.Form.useForm();
+  const [modalData, setModalData] = (0, _react.useState)({
+    open: false
+  });
+  const [successModal, setSuccessModal] = (0, _react.useState)(false);
   const closeClaim = () => {
-    setModalVisible(true);
-  };
-  const validateData = async () => {
-    try {
-      await form.validateFields();
-      const values = form.getFieldsValue();
-      const apiUrl = oasysui.api.closeServiceRequest.replace("{srId}", servicerequestId);
-      const reqObj = {
-        remarks: values.fraudRemark,
-        serviceCancelReason: values.closeReason,
-        isCustomerFraudCase: values.isFraud ? "Y" : "N",
-        communicationDisabled: true
-      };
-      if (values.isFraud) {
-        reqObj.serviceFraudCaseReason = values.fraudReason.toString();
-      }
-      const response = await fetch(apiUrl, {
-        method: "POST",
-        body: JSON.stringify(reqObj)
-      });
-      if (response.status === "success") {
-        setModalVisible(false);
-        setSuccessModalVisible(true);
-      } else {
-        _antd.notification.error({
-          title: "Failed closing claim. " + response.message
-        });
-      }
-    } catch (error) {
-      console.error(error);
-    }
+    setModalData({
+      open: true
+    });
   };
   const onCancel = () => {
-    setModalVisible(false);
+    setModalData({
+      open: false
+    });
     form.resetFields();
   };
-  const gotoDashboard = () => {
-    location.href = "/app/oasys-v2/claim-list/".concat(productName);
-  };
-  const refreshSr = () => {
-    location.reload();
-  };
-  const checkNextSr = () => {
-    let srArray = sessionStorage.getItem("srArray");
-    srArray = srArray.split(",");
-    const curIndex = srArray.indexOf(referenceTrackingNo);
-    const nextSR = srArray && curIndex + 1 < srArray.length ? srArray[curIndex + 1] : srArray[0];
-    location.href = "/app/oasys-v2/claim-list/".concat(productName, "/").concat(nextSR);
+  const validateData = e => {
+    e.preventDefault();
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        onCloseClaim(values);
+      }
+    });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: closeClaim,
     className: "ant-btn-primary",
-    text: "Close Claim",
-    onClick: closeClaim
-  }), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    visible: modalVisible,
+    type: "button"
+  }, "Close Claim"), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: modalData.open,
     onCancel: onCancel,
     cancelButtonProps: {
       style: {
-        display: "none"
+        display: 'none'
       }
     },
     okButtonProps: {
       style: {
-        display: "none"
+        display: 'none'
       }
     },
     width: 768,
-    className: "closeClaimModal",
-    title: "Close Claim",
-    footer: [/*#__PURE__*/_react.default.createElement(_antd.Button, {
-      key: "cancel",
-      onClick: onCancel
-    }, "Cancel"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-      key: "closeClaim",
-      type: "primary",
-      onClick: validateData
-    }, "Close Claim")]
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Are you sure you would like to close this claim as this action will close the SR#", referenceTrackingNo, " 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("div", null, /*#__PURE__*/_react.default.createElement("label", null, "Select reason for rejection (Visible to the customer)"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "closeReason",
-    rules: [{
-      required: true,
-      message: "Required"
-    }],
-    initialValue: undefined
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
-    placeholder: "Select"
-  }, /*#__PURE__*/_react.default.createElement(Option, {
-    value: true,
-    disabled: true
-  }, "Select"), closingClaimReasons && closingClaimReasons.map(row => /*#__PURE__*/_react.default.createElement(Option, {
-    title: row.value,
-    key: row.key,
-    value: row.key,
-    width: 432
-  }, row.value)))), /*#__PURE__*/_react.default.createElement("label", null, "Is this a fraud case?"), /*#__PURE__*/_react.default.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "isFraud",
-    rules: [{
-      required: true,
-      message: "Required"
-    }],
-    initialValue: null
-  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
-    name: "isFraud"
-  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
-    value: true
-  }, "Yes"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
-    value: false
-  }, "No")))), form.getFieldValue("isFraud") && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "Why is this a fraud case?", /*#__PURE__*/_react.default.createElement("span", {
-    className: "redColor"
-  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "fraudReason",
-    rules: [{
-      required: true,
-      message: "Required",
-      type: "array"
-    }],
-    initialValue: undefined
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
-    mode: "multiple",
-    placeholder: "Select"
-  }, /*#__PURE__*/_react.default.createElement(Option, {
-    value: true,
-    disabled: true
-  }, "Select"), fraudReasons && fraudReasons.map(row => /*#__PURE__*/_react.default.createElement(Option, {
-    title: row.value,
-    key: row.key,
-    value: row.key
-  }, row.value)))))), /*#__PURE__*/_react.default.createElement("label", null, "Remarks", /*#__PURE__*/_react.default.createElement("span", {
-    className: "redColor"
-  }, "*")), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
-    name: "fraudRemark",
-    rules: [{
-      required: true,
-      message: "Required"
-    }],
-    initialValue: null
-  }, /*#__PURE__*/_react.default.createElement(TextArea, {
-    rows: "3",
-    placeholder: "Start typing..."
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    visible: successModalVisible,
-    onCancel: () => refreshSr(),
+    className: "closeClaimModal"
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "Close Claim"), /*#__PURE__*/_react.default.createElement("p", null, "Are you sure you would like to close this claim as this action will close the SR#", referenceTrackingNo, ' ', "and no further processing will be allowed. Please provide the reason for closure."), /*#__PURE__*/_react.default.createElement(_antd.Form, null)), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: successModal,
+    onCancel: () => setSuccessModal(false),
     cancelButtonProps: {
       style: {
-        display: "none"
+        display: 'none'
       }
     },
     okButtonProps: {
       style: {
-        display: "none"
+        display: 'none'
       }
     },
     width: 448,
-    className: "claimDashboard",
-    title: "Claim Closed Successfully",
-    footer: [/*#__PURE__*/_react.default.createElement(_antd.Button, {
-      key: "gotoDashboard",
-      type: "default",
-      onClick: gotoDashboard
-    }, "Go to Claims Dashboard"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-      key: "checkNextSr",
-      type: "primary",
-      onClick: checkNextSr
-    }, "Check Next Sr")]
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: "/static/oasys/images/wallet-claim-greentick.svg",
-    alt: "Icon"
-  }), /*#__PURE__*/_react.default.createElement("p", null, "Claim has been closed successfully. Would you like to move on to the next SR?")));
+    className: "claimDashboard"
+  }));
 }
-var _default = CloseClaim;
+CloseClaimForm.propTypes = {
+  form: _propTypes.default.shape({
+    getFieldDecorator: _propTypes.default.func,
+    resetFields: _propTypes.default.func,
+    validateFieldsAndScroll: _propTypes.default.func
+  }).isRequired,
+  onCloseClaim: _propTypes.default.func.isRequired,
+  referenceTrackingNo: _propTypes.default.string.isRequired
+};
+var _default = CloseClaimForm;
 exports.default = _default;