oa-componentbook 0.18.15 → 0.18.17

package/build/components/oa-component-icons/MaterialIcon.js

@@ -12,7 +12,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _colorOptions = require("../../global-css/color-options");
 var _utils = require("../../utils");
-const _excluded = ["color", "icon", "onClick", "rotate", "size", "style"];
+const _excluded = ["color", "data-test", "icon", "onClick", "rotate", "size", "style"];
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -29,6 +29,7 @@ function MaterialIcon(_ref) {
   let {
       color,
       // By default, material icons inherit font color
+      'data-test': dataTest,
       icon: Icon,
       onClick,
       rotate,
@@ -46,11 +47,13 @@ function MaterialIcon(_ref) {
   }, props));
   return (0, _utils.isFunction)(onClick) ? /*#__PURE__*/_react.default.createElement(UnstyledButton, _extends({
     onClick: onClick,
-    size: size
+    size: size,
+    "data-test": dataTest
   }, props), renderedIcon) : renderedIcon;
 }
 MaterialIcon.propTypes = {
   color: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  'data-test': _propTypes.default.string,
   icon: _propTypes.default.element.isRequired,
   onClick: _propTypes.default.func,
   rotate: _propTypes.default.number,
@@ -59,6 +62,7 @@ MaterialIcon.propTypes = {
 };
 MaterialIcon.defaultProps = {
   color: null,
+  'data-test': null,
   onClick: null,
   rotate: 0,
   size: null,

package/build/components/oa-component-modal/CustomModal.js

@@ -69,7 +69,7 @@ function CustomModal(_ref) {
   ((0, _utils.isString)(children) || (0, _utils.isNumber)(children)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondary-content",
     typography: typographies.children
-  }, children) || /*#__PURE__*/_react.default.isValidElement(children) && children));
+  }, children) || children));
 }
 CustomModal.propTypes = {
   // Array of button configurations

package/build/index.js

@@ -251,6 +251,12 @@ Object.defineProperty(exports, "NotesWidget", {
     return _NotesWidget.default;
   }
 });
+Object.defineProperty(exports, "ReimbursementBreakupWidget", {
+  enumerable: true,
+  get: function get() {
+    return _ReimbursementBreakupWidget.default;
+  }
+});
 Object.defineProperty(exports, "SendPaymentLinkWidget", {
   enumerable: true,
   get: function get() {
@@ -393,6 +399,7 @@ var _ApprovalWidget = _interopRequireDefault(require("./widgets/oa-widget-approv
 var _CloseClaimWidget = _interopRequireDefault(require("./widgets/oa-widget-close-claim/CloseClaimWidget"));
 var _KeyValueWidget = _interopRequireDefault(require("./widgets/oa-widget-key-value/KeyValueWidget"));
 var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/NotesWidget"));
+var _ReimbursementBreakupWidget = _interopRequireDefault(require("./widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget"));
 var _SendPaymentLinkWidget = _interopRequireDefault(require("./widgets/oa-widget-send-payment-link/SendPaymentLinkWidget"));
 var _SparePartsWidget = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePartsWidget"));
 var _StageTimelineWidget = _interopRequireWildcard(require("./widgets/oa-widget-stage-timeline/StageTimelineWidget"));

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

@@ -63,9 +63,7 @@ function ChatWidget(_ref) {
     clearInput
   } = _ref;
   const [message, setMessage] = (0, _react.useState)(initialMsg || '');
-  const onClearInput = () => {
-    clearInput && setMessage('');
-  };
+  const onClearInput = () => clearInput && setMessage('');
   const onMsgSend = () => {
     onMessageInput(message);
     onClearInput();

package/build/widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ReimbursementBreakupWidget;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+var _utils = require("../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ReimbursementBreakupWidget(props) {
+  const {
+    cardData,
+    closeBreakUpModal,
+    'data-test': dataTest,
+    visible
+  } = props;
+  const btnConfig = [{
+    label: 'Okay',
+    callback: closeBreakUpModal
+  }];
+  const getClassForTableRow = type => {
+    switch (type) {
+      case 'HEADER':
+        return 'gridTableHeader';
+      case 'FOOTER':
+        return 'gridtableFooter';
+      default:
+        return '';
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    buttonConfig: btnConfig,
+    open: visible,
+    onCancel: closeBreakUpModal,
+    onOk: closeBreakUpModal
+  }, /*#__PURE__*/_react.default.createElement(_styles.WidgetContainer, null, cardData === null || cardData === void 0 ? void 0 : cardData.map(item => {
+    var _item$tableRows, _item$tableRows2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "rmbsProdAmt",
+      key: (0, _utils.getUUID)()
+    }, item.title && /*#__PURE__*/_react.default.createElement("h5", null, item.title), item.tableType === 'NON_GRID' && /*#__PURE__*/_react.default.createElement("ul", {
+      className: "calSecBox",
+      id: "Claimgrid"
+    }, item === null || item === void 0 || (_item$tableRows = item.tableRows) === null || _item$tableRows === void 0 ? void 0 : _item$tableRows.map(tableRow => {
+      var _tableRow$data;
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: getClassForTableRow(tableRow.type),
+        key: (0, _utils.getUUID)()
+      }, tableRow === null || tableRow === void 0 || (_tableRow$data = tableRow.data) === null || _tableRow$data === void 0 ? void 0 : _tableRow$data.map((innerItem, index) => /*#__PURE__*/_react.default.createElement("aside", {
+        key: (0, _utils.getUUID)(),
+        className: innerItem.isBold ? 'boldText' : ''
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          color: tableRow.color
+        }
+      }, innerItem.text, ' ', innerItem.scroll && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoRounded.default,
+        size: 12,
+        "data-test": dataTest ? "".concat(dataTest, "--info-button-").concat(index) : null,
+        onClick: this.scrollToRef
+      })), ' ')));
+    })), item.tableType === 'GRID' && /*#__PURE__*/_react.default.createElement("ul", {
+      className: "listofProd",
+      id: "gridView"
+    }, item === null || item === void 0 || (_item$tableRows2 = item.tableRows) === null || _item$tableRows2 === void 0 ? void 0 : _item$tableRows2.map(tableRow => {
+      var _tableRow$data2;
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: tableRow.type === 'HEADER' ? 'nonGridTableHeader' : ''
+      }, tableRow === null || tableRow === void 0 || (_tableRow$data2 = tableRow.data) === null || _tableRow$data2 === void 0 ? void 0 : _tableRow$data2.map(innerItem => /*#__PURE__*/_react.default.createElement("aside", {
+        className: innerItem.isBold ? 'boldText' : ''
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          color: tableRow.color
+        },
+        dangerouslySetInnerHTML: {
+          html: innerItem.text
+        }
+      }), innerItem.scroll && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _InfoRounded.default,
+        size: 12
+      }))));
+    })));
+  })));
+}
+ReimbursementBreakupWidget.propTypes = {
+  cardData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    cardType: _propTypes.default.oneOf(['tableCard']).isRequired,
+    rowSeparator: _propTypes.default.bool.isRequired,
+    tableType: _propTypes.default.oneOf(['NON_GRID', 'GRID']).isRequired,
+    tableRows: _propTypes.default.arrayOf(_propTypes.default.shape({
+      type: _propTypes.default.oneOf(['DATA', 'FOOTER']).isRequired,
+      data: _propTypes.default.arrayOf(_propTypes.default.shape({
+        text: _propTypes.default.string.isRequired,
+        isBold: _propTypes.default.bool
+      })).isRequired,
+      color: _propTypes.default.string // Optional, only for FOOTER type
+    })).isRequired
+  })),
+  closeBreakUpModal: _propTypes.default.func,
+  'data-test': _propTypes.default.string,
+  visible: _propTypes.default.bool
+};
+ReimbursementBreakupWidget.defaultProps = {
+  cardData: null,
+  closeBreakUpModal: () => {},
+  'data-test': null,
+  visible: true
+};

package/build/widgets/oa-widget-reimbursement-breakup/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WidgetContainer = 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 WidgetContainer = exports.WidgetContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.oaReimbursFlow {\n  background: #fff;\n  border-radius: 8px 8px 0px 0px;\n  color: #212121;\n  padding: 16px 12px;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  display: flex;\n  flex-direction: column;\n}\n\n.amoutCalculat {\n  color: #0282F0;\n  padding: 16px 12px 0;\n  border-top: solid 1px rgba(0, 0, 0, 0.08);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 150%;\n  width: calc(100% + 24px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: 12px 0 0 -12px;\n  cursor: pointer;\n  justify-content: space-between;\n}\n\n.rmbsProdAmt {\n  display: flex;\n  flex-direction: column;\n}\n\n.rmbsProdAmt h5 {\n  font-style: normal;\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 22px;\n  margin: 0 0 0 -12px;\n  border-top: solid 1px rgba(230, 230, 230, 1);\n  padding: 24px 0 12px 12px;\n  width: calc(100% + 24px);\n}\n\nul.calSecBox {\n  display: flex;\n  flex-direction: column;\n  margin: 24px 0 0 0;\n}\n\nul.calSecBox li {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0 0 12px 0;\n}\n\n.gridtableFooter {\n  border-top: solid 1px rgba(230, 230, 230, 1);\n  padding: 16px 0 0 0;\n  /* color: #259B24;\n     */\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 22px;\n}\n\n.gridtableFooter aside {\n  font-weight: 700;\n}\n\nul.calSecBox li aside {\n  width: 170px;\n  color: #212121;\n  position: relative;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 22px;\n  /* 157.143% */\n  text-transform: capitalize;\n}\n\nul.calSecBox li aside+aside {\n  width: auto;\n  font-weight: 700;\n}\n\nul.calSecBox li aside p {\n  margin: 0;\n}\n\n.infoIconScroll img {\n  width: 12px;\n  height: 12px;\n  margin: 0 0 0 5px;\n}\n\n.rmbsProdAmt ul.listofProd {\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px 4px 0px 0px;\n  border: 1px solid #F6F6F6;\n  overflow: hidden;\n  border-top: none !important;\n  border-bottom: none !important;\n  background: #FFF;\n  margin: 0;\n}\n\n.rmbsProdAmt ul.listofProd li {\n  border-bottom: solid 1px #E6E6E6;\n  padding: 12px 12px 14px 12px;\n  display: flex;\n  flex-direction: row;\n}\n\n.nonGridTableHeader {\n  background: #F6F6F6;\n  border-bottom: none;\n}\n\n.rmbsProdAmt ul.listofProd li aside {\n  color: #212121;\n  width: 120px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  white-space: normal;\n}\n\n.nonGridTableHeader aside {\n  white-space: nowrap;\n  font-size: 10px;\n  color: rgba(117, 117, 117, 1) !important;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 150%;\n  /* 15px */\n  text-transform: uppercase;\n}\n"])));

package/package.json

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