oa-componentbook 0.0.0-sit1.1

package/build/widgets/oa-widget-sidebar/SidebarWidget.js

@@ -0,0 +1,105 @@
+"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");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _reactRouterDom = require("react-router-dom");
+var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = _interopRequireWildcard(require("./styles"));
+var _CustomDropdown = _interopRequireDefault(require("../../components/oa-component-dropdown/CustomDropdown"));
+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 }; }
+/* eslint-disable */
+
+const {
+  Sider
+} = _antd.Layout;
+function SidebarWidget(_ref) {
+  var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3;
+  let {
+    heading,
+    menuItems = [],
+    mobileMenuItems = [],
+    footer,
+    location,
+    history,
+    handleFooterClick,
+    profileData // Add profileData prop
+  } = _ref;
+  // Determine which menu items to use and whether to show profile icon
+  const shouldShowProfileIcon = (mobileMenuItems === null || mobileMenuItems === void 0 || (_mobileMenuItems$item = mobileMenuItems.items) === null || _mobileMenuItems$item === void 0 ? void 0 : _mobileMenuItems$item.length) > 0;
+  const activeMenuItems = shouldShowProfileIcon ? mobileMenuItems : menuItems;
+  console.log(profileData, "profileData");
+  return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaLeftLayouts"
+  }, /*#__PURE__*/_react.default.createElement(Sider, {
+    width: 250,
+    theme: "light",
+    className: "sidebar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logoContainer"
+  }, (heading === null || heading === void 0 ? void 0 : heading.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, heading), /*#__PURE__*/_react.default.createElement("div", {
+    className: "notShowInDesktop"
+  }, (activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.visible) && /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
+    items: [...((activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.items) || []), ...(footer !== null && footer !== void 0 && footer.visible ? [{
+      label: footer === null || footer === void 0 || (_footer$item = footer.item) === null || _footer$item === void 0 ? void 0 : _footer$item.label,
+      key: "footerAction",
+      onClick: handleFooterClick,
+      danger: true
+    }] : [])],
+    trigger: ["click"],
+    type: "primary",
+    onMenuItemClick: key => {
+      if ((key === null || key === void 0 ? void 0 : key.key) === "footerAction") {
+        handleFooterClick();
+      } else {
+        history.replace(key === null || key === void 0 ? void 0 : key.path);
+      }
+    }
+  }, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
+    style: {
+      backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || 'primary', ")"),
+      color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || 'primary-content', ")")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "white",
+    typography: profileData === null || profileData === void 0 ? void 0 : profileData.mwebTypographyType
+  }, profileData === null || profileData === void 0 ? void 0 : profileData.iconText)) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    icon: _Menu.default,
+    size: 20
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "notShowInMobile"
+  }, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_antd.Menu, {
+    theme: "light",
+    mode: "inline",
+    selectedKeys: [location.pathname],
+    className: "menu",
+    onClick: _ref2 => {
+      let {
+        key
+      } = _ref2;
+      history.replace(key);
+    }
+  }, menuItems === null || menuItems === void 0 || (_menuItems$items = menuItems.items) === null || _menuItems$items === void 0 ? void 0 : _menuItems$items.map(item => /*#__PURE__*/_react.default.createElement(_antd.Menu.Item, {
+    key: item.path
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item.label))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "logoutDiv",
+    onClick: () => handleFooterClick()
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative",
+    typography: "type-button-500"
+  }, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label))))));
+}
+var _default = exports.default = (0, _reactRouterDom.withRouter)(SidebarWidget);

package/build/widgets/oa-widget-sidebar/components/Header.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+function Header(_ref) {
+  let {
+    icons = [],
+    text = null
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "leftLogoSec"
+  }, icons === null || icons === void 0 ? void 0 : icons.map(_ref2 => {
+    let {
+      icon,
+      showLine
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Image, {
+      src: icon,
+      preview: false,
+      className: "logo"
+    }));
+  }), text && /*#__PURE__*/_react.default.createElement(_antd.Typography, {
+    typography: "type-h3-500"
+  }, text));
+}
+var _default = exports.default = Header;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileIcon = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2; // styles.js
+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 OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .oaLeftLayouts {\n    padding: 24px 8px;\n    background: #f6f6f6;\n  }\n\n  .logoContainer {\n    padding: 0 12px 68px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .logoutDiv {\n    display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n  }\n\n  .leftLogoSec {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n  }\n\n  .logoContainer em {\n    width: 1px;\n    background: #e0e0e0;\n  }\n  .logoContainer img {\n    height: 32px;\n  }\n  .ant-layout-sider-light,\n  .ant-menu-light {\n    background: transparent;\n  }\n  .ant-menu-item {\n    padding: 16px;\n    border-radius: 50px;\n    margin: 0 0 8px;\n    height: auto;\n    line-height: normal;\n    border-radius: 999px;\n    border: 1px solid #e0e0e0;\n    background: #fff;\n  }\n\n  .ant-menu-item .ant-menu-title-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n  }\n  .ant-menu-item-active {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-item-selected {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-light:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover,\n  :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n    > .ant-menu:not(.ant-menu-horizontal)\n    .ant-menu-item:not(.ant-menu-item-selected):hover {\n    background: #014fc5;\n    color: #fff;\n  }\n  .ant-menu-light.ant-menu-root.ant-menu-inline {\n    border: none;\n  }\n  .ant-menu-item-selected {\n  }\n\n  .notShowInDesktop {\n    display: none;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .oaLeftLayouts {\n      background: #fff;\n      padding: 16px;\n    }\n    .logoContainer {\n      padding: 0;\n      align-items: center;\n    }\n\n    .notShowInMobile {\n      display: none;\n    }\n    .notShowInDesktop {\n      display: flex;\n    }\n\n    .oaLeftLayouts .ant-layout-sider {\n      max-width: none !important;\n      width: 100% !important;\n    }\n    p.ant-dropdown-trigger {\n      margin-bottom: 0;\n    }\n  }\n"])));
+const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
+var _default = exports.default = OalayoutStyle;

package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+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 {
+  Panel
+} = _antd.Collapse;
+const {
+  Text
+} = _Typography.default;
+const StyledContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  .text-only-size{\n    justify-content: left;\n  }\n"])));
+
+/**
+ * A collapsible widget for displaying spare parts.
+ *
+ * This component displays spare parts in a collapsible table, with each item in the table
+ * containing a label and a value. The table is grouped by panels, each of which has a title
+ * and a subtitle. The subtitle is optional and is only displayed if the value is not empty.
+ * The component also displays a total value at the bottom of each panel and a delete icon
+ * at the top right corner of each panel.
+ *
+ * @param {object[]} data - An array of objects containing the data for each collapsible item
+ * @param {string} data.title - The title of the panel
+ * @param {string} data.subTitle - The subtitle of the panel
+ * @param {string} data.scopeEstimationId - The ID of the scope estimation
+ * @param {object[]} data.items - An array of objects containing the data for each item in the table
+ * @param {string} data.items.label - The label of the item
+ * @param {string} data.items.value - The value of the item
+ * @param {function} data.onDelete - A function to handle the deletion of the item
+ */
+function SparePartsCollapseWidget(_ref) {
+  let {
+    data
+  } = _ref;
+  const generateItemRows = (items, panelKey) => items.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.label,
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      gap: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, item.label), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-button-500",
+    color: "primary-content",
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, item.value)));
+
+  /**
+   * Handles keydown event on delete icon.
+   *
+   * This function is used to handle the deletion of an item when the delete icon is focused and the Enter or Space key is pressed.
+   *
+   * @param {KeyboardEvent} e - The keydown event
+   * @param {function} onDelete - The function to delete the item
+   * @param {object} item - The item to be deleted
+   * @private
+   */
+  const handleKeyDown = (e, onDelete, item) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      // Handling Enter or Space key
+      e.preventDefault();
+      onDelete(item);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    accordion: true
+  }, data.map((panel, index) => /*#__PURE__*/_react.default.createElement(Panel, {
+    header: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t2-700",
+      color: "primary-content"
+    }, panel.title), panel.subTitle && panel.subTitle !== '' && panel.subTitle !== 'NA' && /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-top-4"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "secondary-content"
+    }, panel.subTitle))),
+    key: panel.scopeEstimationId,
+    className: "ascCollapse",
+    extra: /*#__PURE__*/_react.default.createElement("div", {
+      className: "totalVal"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t2-700",
+      color: "primary-content"
+    }, "\u20B9", panel === null || panel === void 0 ? void 0 : panel.total), panel.onDelete && /*#__PURE__*/_react.default.createElement("div", {
+      onClick: e => e.stopPropagation(),
+      onKeyDown: e => handleKeyDown(e, panel.onDelete, panel),
+      role: "button",
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _DeleteForever.default,
+      color: "negative",
+      size: 24,
+      onClick: () => panel.onDelete(panel),
+      type: "text"
+    }))))
+  }, /*#__PURE__*/_react.default.createElement(StyledContainer, null, generateItemRows(panel.items, index)))));
+}
+SparePartsCollapseWidget.propTypes = {
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    subTitle: _propTypes.default.string,
+    scopeEstimationId: _propTypes.default.string.isRequired,
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      label: _propTypes.default.string.isRequired,
+      value: _propTypes.default.string.isRequired
+    })).isRequired,
+    onDelete: _propTypes.default.func
+  })).isRequired
+};
+var _default = exports.default = SparePartsCollapseWidget;

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -0,0 +1,294 @@
+"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");
+require("core-js/modules/es.array.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _DeleteOutlineRounded = _interopRequireDefault(require("@material-ui/icons/DeleteOutlineRounded"));
+var _WarningRounded = _interopRequireDefault(require("@material-ui/icons/WarningRounded"));
+var _icons = require("@ant-design/icons");
+var _utils = require("../../utils");
+var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _templateObject, _templateObject2;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  .text-only-size{\n    justify-content: left;\n  }\n  small{\n    color: var(--color-secondary-content);\n    display: block;\n  }\n  .costClass span {\n    display: block;\n    text-align: end;  \n  }\n"])));
+const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-secondary-background);\n  padding: 0 12px;\n  border-radius: 4px;\n  ul{\n    display: flex;\n    margin: 0;\n    border-bottom: 1px solid var(--color-divider);\n    padding: 12px 0;\n  }\n  ul:last-child{\n    border-bottom: none;\n  }\n  ul li{\n    width: 100%;\n    list-style: none;\n  }\n  ul li:first-child{\n    color: var(--color-primary-content);\n    font-style: normal;\n  }\n  ul li:last-child{\n    font-style: normal;\n    color: var(--color-secondary-content);\n  }\n  .font-bold{\n    font-weight: 700;\n  }\n  .subHeadingclass{\n    color:rgba(113, 113, 113, 1);\n    font-weight: 400;\n  }\n\n  .alignItemsClass{\n    display: flex;\n    flex-direction: column;\n    justify-content: start;\n    gap: 4px;\n  }\n    .breakDownLastChild{\n      text-align: right;\n      margin-right: 8px;\n    }\n   \n"])));
+// Mapping of how costs are covered
+const costCoveredBy = {
+  costToCompany: 'Cost to Company',
+  costToCustomer: 'Cost to Customer',
+  costToInsurer: 'Cost to Insurer',
+  costToOneassist: 'Cost to OneAssist',
+  totalCoverAmount: 'Total Cover Amount',
+  remainingCoverAmount: 'Remaining Cover Amount',
+  totalAmount: 'Total Amount',
+  coveredAmount: 'Covered Amount',
+  amountToPay: 'Amount to Pay'
+};
+
+// Renders the cost with currency formatting
+const renderCost = (cost, config) => {
+  if ( /*#__PURE__*/_react.default.isValidElement(cost)) {
+    return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: config !== null && config !== void 0 && config.isBold ? 'type-b2-700' : 'type-b2-400',
+      color: config !== null && config !== void 0 && config.fontColor ? config === null || config === void 0 ? void 0 : config.fontColor : ''
+    }, cost);
+  }
+  if (!Number.isNaN(cost)) {
+    var _Number;
+    return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: config !== null && config !== void 0 && config.fontColor ? config === null || config === void 0 ? void 0 : config.fontColor : '',
+      typography: config !== null && config !== void 0 && config.isBold ? 'type-b2-700' : 'type-b2-400'
+    }, (_Number = Number(cost)) === null || _Number === void 0 ? void 0 : _Number.toLocaleString('en-IN', {
+      style: 'currency',
+      currency: 'INR'
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: config !== null && config !== void 0 && config.fontColor ? config === null || config === void 0 ? void 0 : config.fontColor : '',
+    typography: config !== null && config !== void 0 && config.isBold ? 'type-b2-700' : 'type-b2-400'
+  }, cost);
+};
+
+// Renders the coverage status with appropriate class name
+const renderCoverage = isCovered => /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  color: isCovered === 'Y' ? 'positive' : 'negative',
+  typography: "type-b2-400"
+}, isCovered === 'Y' ? 'Covered' : 'Not Covered');
+
+// Renders an action button
+const renderAction = (action, record) => {
+  if (action.icon === 'delete') {
+    return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      "data-test": action['data-test'],
+      key: (0, _utils.getUUID)(),
+      onClick: () => action.successCallback(record),
+      type: "danger-text-only",
+      iconConfig: {
+        icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _DeleteOutlineRounded.default,
+          size: 24
+        }),
+        position: 'left'
+      }
+    });
+  }
+  return null;
+};
+
+/**
+ * A widget to display spare parts information.
+ *
+ * @param {Object} scopeDetails - Information about the spare parts, including whether they are covered and their cost.
+ * @param {Array} actions - Actions that can be performed on the spare parts, e.g. deleting them.
+ * @param {boolean} showCostBreakdown - Whether or not to show a cost breakdown component.
+ * @param {boolean} coverageShow - Whether or not to show a coverage column.
+ * @param {boolean} showPriceHistory - Whether or not to show a price history button.
+ * @param {Function} onViewPriceHistory - Function to call when the price history button is clicked.
+ * @param {boolean} showGST - Whether or not to show a GST column.
+ * @param {boolean} showDiscount - Whether or not to show a discount column.
+ * @param {boolean} showSparePartsInfo - Whether or not to show the spare parts info component.
+ */
+function SparePartsWidget(_ref) {
+  let {
+    scopeDetails,
+    actions,
+    showCostBreakdown,
+    coverageShow,
+    showPriceHistory,
+    onViewPriceHistory,
+    showGST,
+    showDiscount,
+    showSparePartsInfo = true,
+    keySettings = {},
+    showNonCoverageMessage,
+    unCoveredScopeDescription
+  } = _ref;
+  const sparePartList = [...scopeDetails.unCoveredScope, ...scopeDetails.coveredScope];
+  const showActionList = sparePartList.some(sparePart => {
+    var _sparePart$action;
+    return (sparePart === null || sparePart === void 0 || (_sparePart$action = sparePart.action) === null || _sparePart$action === void 0 ? void 0 : _sparePart$action.length) > 0;
+  });
+  const columns = [{
+    title: 'Spare Part',
+    dataIndex: 'scopeName',
+    key: 'scopeName',
+    width: '40%',
+    render: (scopeName, record) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400"
+    }, scopeName), (record === null || record === void 0 ? void 0 : record.subText) && /*#__PURE__*/_react.default.createElement("small", {
+      className: "type-b2-400"
+    }, "(", record === null || record === void 0 ? void 0 : record.subText, ")"), (record === null || record === void 0 ? void 0 : record.extraNode) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "extraNode"
+    }, record.extraNode), showPriceHistory && !['Transport Charge', 'Labour Charge'].includes(scopeName) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      onClick: () => {
+        onViewPriceHistory(record);
+      },
+      "data-test": "button",
+      label: "View Price History",
+      type: "text-only"
+    }))
+  }];
+  if (coverageShow) {
+    columns.push({
+      title: 'Coverage',
+      dataIndex: 'isCovered',
+      width: '20%',
+      key: 'isCovered',
+      render: (text, record) => renderCoverage(record.isCovered, record.className)
+    });
+  }
+  // Coverga show column need to be shown first
+  columns.push({
+    title: 'Cost',
+    width: '20%',
+    dataIndex: 'cost',
+    className: 'costClass',
+    key: 'cost',
+    render: (cost, record) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "row",
+      style: {
+        gap: '4px',
+        cursor: 'pointer',
+        justifyContent: 'flex-end'
+      }
+    }, ' ', /*#__PURE__*/_react.default.createElement("span", null, renderCost(record.cost - record.discount)), (record === null || record === void 0 ? void 0 : record.showCostInfo) && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: "Basic Price : ".concat(record.basicPrice, " , Discount : ").concat(record.discount)
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "secondary-content"
+    }, /*#__PURE__*/_react.default.createElement(_icons.InfoCircleFilled, null)))), (record === null || record === void 0 ? void 0 : record.subText2) && /*#__PURE__*/_react.default.createElement("small", {
+      className: "type-b2-400"
+    }, "(", record === null || record === void 0 ? void 0 : record.subText2, ")"))
+  });
+  if (showDiscount) {
+    columns.push({
+      title: 'Discount',
+      dataIndex: 'discount',
+      width: '20%',
+      key: 'discount',
+      render: (text, record) => renderCost(text)
+    });
+  }
+  if (showGST) {
+    columns.push({
+      title: 'GST (18%)',
+      dataIndex: 'gstAmount',
+      width: '20%',
+      key: 'gstAmount',
+      render: (text, record) => renderCost(text)
+    });
+  }
+
+  // check if there are any actions then create action column
+  if (showActionList) {
+    columns.push({
+      title: 'Action',
+      width: '20%',
+      key: 'action',
+      render: (text, record) => {
+        var _record$action;
+        return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+          size: "middle"
+        }, record === null || record === void 0 || (_record$action = record.action) === null || _record$action === void 0 ? void 0 : _record$action.map(action => renderAction(action, record)));
+      }
+    });
+  }
+  if (scopeDetails) {
+    var _scopeDetails$unCover;
+    const unCoveredScope = (scopeDetails === null || scopeDetails === void 0 ? void 0 : scopeDetails.unCoveredScope) || [];
+    const coveredScope = (scopeDetails === null || scopeDetails === void 0 ? void 0 : scopeDetails.coveredScope) || [];
+    return /*#__PURE__*/_react.default.createElement(FlexContainer, null, showNonCoverageMessage && (scopeDetails === null || scopeDetails === void 0 || (_scopeDetails$unCover = scopeDetails.unCoveredScope) === null || _scopeDetails$unCover === void 0 ? void 0 : _scopeDetails$unCover.length) > 0 && coverageShow && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+      color: "background-warning",
+      description: unCoveredScopeDescription,
+      iconConfig: {
+        icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          color: "warning",
+          icon: _WarningRounded.default
+        }),
+        position: 'left'
+      }
+    }), showSparePartsInfo && /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
+      columns: columns,
+      dataSource: [...unCoveredScope, ...coveredScope],
+      pagination: false,
+      size: "middle"
+    }), showCostBreakdown && /*#__PURE__*/_react.default.createElement(CostBreakdown, null, Object.keys(scopeDetails).map((key, index) => {
+      if (costCoveredBy[key] && scopeDetails[key] != null && scopeDetails[key] !== undefined) {
+        const config = keySettings[key] || {};
+        const className = "type-b2-400 alignItemsClass ".concat(config !== null && config !== void 0 && config.isBold ? 'font-bold' : '');
+        return /*#__PURE__*/_react.default.createElement("ul", {
+          key: (0, _utils.getUUID)()
+        }, /*#__PURE__*/_react.default.createElement("li", {
+          className: className
+        }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: config !== null && config !== void 0 && config.fontColor ? config === null || config === void 0 ? void 0 : config.fontColor : ''
+        }, costCoveredBy[key]), ' ', (config === null || config === void 0 ? void 0 : config.subHeading) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          className: "subHeadingclass",
+          typography: "type-b2-400"
+        }, config === null || config === void 0 ? void 0 : config.subHeading)), ' ', /*#__PURE__*/_react.default.createElement("li", {
+          className: "".concat(className, " breakDownLastChild")
+        }, renderCost(scopeDetails[key], config)));
+      }
+      return null; // To satisfy React key warning
+    })));
+  }
+  return null;
+}
+
+// Define prop types for SpareParts component
+SparePartsWidget.propTypes = {
+  scopeDetails: _propTypes.default.shape({
+    unCoveredScope: _propTypes.default.array,
+    coveredScope: _propTypes.default.array
+  }),
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    'data-test': _propTypes.default.string,
+    key: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.string.isRequired,
+    successCallback: _propTypes.default.func.isRequired
+  })),
+  showCostBreakdown: _propTypes.default.bool,
+  coverageShow: _propTypes.default.bool,
+  showPriceHistory: _propTypes.default.bool,
+  onViewPriceHistory: _propTypes.default.func,
+  showSparePartsInfo: _propTypes.default.bool,
+  showGST: _propTypes.default.bool,
+  showDiscount: _propTypes.default.bool,
+  keySettings: _propTypes.default.shape({}),
+  showNonCoverageMessage: _propTypes.default.bool,
+  unCoveredScopeDescription: _propTypes.default.string
+};
+
+// Define default props for SpareParts component
+SparePartsWidget.defaultProps = {
+  showCostBreakdown: true,
+  coverageShow: true,
+  scopeDetails: {
+    unCoveredScope: [],
+    coveredScope: []
+  },
+  actions: null,
+  showPriceHistory: false,
+  onViewPriceHistory: data => console.log(data),
+  showSparePartsInfo: true,
+  showGST: false,
+  showDiscount: false,
+  keySettings: {},
+  showNonCoverageMessage: true,
+  unCoveredScopeDescription: 'Multiple components need to be repaired which are not covered in this plan'
+};
+var _default = exports.default = SparePartsWidget;

package/build/widgets/oa-widget-spare-part/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledWrapper = exports.StatusContainer = exports.MainStyles = exports.DeleteIcon = exports.DeleteButton = exports.CloseIcon = exports.CheckIcon = void 0;
+var _icons = require("@ant-design/icons");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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 StyledWrapper = exports.StyledWrapper = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    gap: 24px;\n    margin: 0;\n\n    padding: 12px;\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    /* max-width: 406px; */\n"])));
+const StatusContainer = exports.StatusContainer = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 8px;\n  align-items: center;\n"])));
+const DeleteButton = exports.DeleteButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: none;\n  color: inherit;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"])));
+const DeleteIcon = exports.DeleteIcon = (0, _styledComponents.default)(_icons.DeleteOutlined)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--color-negative);\n"])));
+const CloseIcon = exports.CloseIcon = (0, _styledComponents.default)(_icons.CloseCircleFilled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: var(--color-negative);\n"])));
+const CheckIcon = exports.CheckIcon = (0, _styledComponents.default)(_icons.CheckCircleFilled)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: var(--color-positive);\n"])));
+const MainStyles = exports.MainStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n.ant-collapse{\n  border: none;\n  background-color: #fff;\n}\n.ant-collapse>.ant-collapse-item{\n  border-bottom: none;\n  border: 1px solid var(--color-divider);\n  border-radius: 4px;\n  overflow: hidden;\n}\n.ant-collapse-arrow {\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n}\n.ant-collapse .ant-collapse-content>.ant-collapse-content-box{\n  padding: 20px 16px;\n}\n.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg);\n}\n.ant-collapse-item{\n  margin: 0 0 24px;\n  background: #f6f6f6;\n}\n.ant-collapse-content-box{\n  border-top: 1px solid var(--color-divider);\n  border-radius: 4px;\n}\n.ant-collapse .ant-collapse-content{\n  border-top: none;\n}\n"])));