oa-componentbook 0.17.42 → 0.17.44

package/build/index.js

@@ -179,10 +179,10 @@ Object.defineProperty(exports, "SpacingScales", {
     return _SpacingScales.default;
   }
 });
-Object.defineProperty(exports, "SparePart", {
+Object.defineProperty(exports, "SparePartsWidget", {
   enumerable: true,
   get: function get() {
-    return _SparePart.default;
+    return _SparePartsWidget.default;
   }
 });
 Object.defineProperty(exports, "StageTimelineChild", {
@@ -286,9 +286,9 @@ var _UploadDownloadWidget = _interopRequireDefault(require("./widgets/oa-widget-
 var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/NotesWidget"));
 var _SendPaymentLinkWidget = _interopRequireDefault(require("./widgets/oa-widget-send-payment-link/SendPaymentLinkWidget"));
 var _StageTimelineWidget = require("./widgets/oa-widget-stage-timeline/StageTimelineWidget");
-var _SparePart = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePart"));
 var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
 var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-view-history/ViewHistoryWidget"));
+var _SparePartsWidget = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePartsWidget"));
 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 }; }

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -40,7 +40,8 @@ function NotesWidget(_ref) {
   }
   const columns = [{
     title: 'SERIAL NO.',
-    dataIndex: 'sr'
+    dataIndex: 'sr',
+    key: 'sr'
   }, {
     title: 'NOTES',
     dataIndex: 'notes',
@@ -56,13 +57,16 @@ function NotesWidget(_ref) {
         });
       }
       return text;
-    }
+    },
+    key: 'notes'
   }, {
     title: 'DATE AND TIME',
-    dataIndex: 'dateTime'
+    dataIndex: 'dateTime',
+    key: 'dateTime'
   }, {
     title: 'USER',
-    dataIndex: 'user'
+    dataIndex: 'user',
+    key: 'user'
   }];
   return /*#__PURE__*/_react.default.createElement(_styles.StyledAside, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
     columns: columns,

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

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _nanoid = require("nanoid");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Mapping of how costs are covered
+const costCoveredBy = {
+  costToCompany: 'Cost to Company',
+  costToCustomer: 'Cost to Customer',
+  costToInsurer: 'Cost to Insurer',
+  costToOneassist: 'Cost to OneAssist'
+};
+
+// Mapping of action icons
+const iconMapping = {
+  view: /*#__PURE__*/_react.default.createElement(_icons.EyeOutlined, null),
+  edit: /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, null),
+  delete: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
+};
+
+// Renders the cost with currency formatting
+const renderCost = cost => {
+  var _Number;
+  return /*#__PURE__*/_react.default.createElement("span", null, (_Number = Number(cost)) === null || _Number === void 0 ? void 0 : _Number.toLocaleString('en-IN', {
+    style: 'currency',
+    currency: 'INR'
+  }));
+};
+
+// Renders the coverage status with appropriate class name
+const renderCoverage = (isCovered, className) => /*#__PURE__*/_react.default.createElement("span", {
+  className: className
+}, isCovered === 'Y' ? 'Covered' : 'Not Covered');
+
+// Renders an action button
+const renderAction = (action, record) => /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  key: action.key,
+  className: action.className,
+  onClick: () => action.successCallback(record),
+  icon: iconMapping[action.icon]
+});
+function SparePartsWidget(_ref) {
+  let {
+    scopeDetails,
+    actions,
+    showCostBreakdown = true,
+    coverageShow = true
+  } = _ref;
+  const columns = [{
+    title: 'Spare Part',
+    dataIndex: 'scopeName',
+    key: 'scopeName'
+  }, {
+    title: 'Cost',
+    dataIndex: 'cost',
+    key: 'cost',
+    render: (cost, record) => renderCost(cost)
+  }];
+  if (coverageShow) {
+    columns.push({
+      title: 'Coverage',
+      dataIndex: 'isCovered',
+      key: 'isCovered',
+      render: (text, record) => renderCoverage(record.isCovered, record.className)
+    });
+  }
+  // check if there are any actions then create action column
+  if (actions && actions.length > 0) {
+    columns.push({
+      title: 'Action',
+      key: 'action',
+      render: (text, record) => /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        size: "middle"
+      }, actions.map(action => renderAction(action, record)))
+    });
+  }
+  if (scopeDetails) {
+    const unCoveredScope = scopeDetails.unCoveredScope || [];
+    const coveredScope = scopeDetails.coveredScope || [];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scopeDetails.unCoveredScope.length > 0 && /*#__PURE__*/_react.default.createElement("div", null, "Multiple components need to be repaired which are not covered in this plan "), /*#__PURE__*/_react.default.createElement(_antd.Table, {
+      columns: columns,
+      dataSource: [...unCoveredScope, ...coveredScope],
+      pagination: false
+    }), showCostBreakdown && /*#__PURE__*/_react.default.createElement("div", {
+      className: "cost-breakdown"
+    }, Object.keys(scopeDetails).map((key, index) => {
+      if (costCoveredBy[key] && scopeDetails[key] != null && scopeDetails[key] !== undefined) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: (0, _nanoid.nanoid)(),
+          className: "row"
+        }, /*#__PURE__*/_react.default.createElement("span", null, costCoveredBy[key]), ' ', /*#__PURE__*/_react.default.createElement("span", null, renderCost(scopeDetails[key])));
+      }
+      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({
+    key: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.string.isRequired,
+    successCallback: _propTypes.default.func.isRequired
+  })),
+  showCostBreakdown: _propTypes.default.bool,
+  coverageShow: _propTypes.default.bool
+};
+
+// Define default props for SpareParts component
+SparePartsWidget.defaultProps = {
+  showCostBreakdown: true,
+  coverageShow: true,
+  scopeDetails: {
+    unCoveredScope: [],
+    coveredScope: []
+  },
+  actions: null
+};
+var _default = SparePartsWidget;
+exports.default = _default;

package/package.json

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

package/build/components/GridSystem.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = GridSystem;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-require("./grid-system.css");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function GridSystem(_ref) {
-  let {
-    children,
-    isFluid
-  } = _ref;
-  const BasicGrid = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: grid;\n    /* \n    Small breakpoint: 4 columns.\n    */\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n\n    /* \n    Medium breakpoint: 8 columns.\n    */\n    @media screen and (min-width: 768px) {\n        grid-template-columns: repeat(8, 1fr);\n        gap: 16px;\n    }\n\n    /* \n    Large breakpoint : 12 columns.\n    */\n    @media screen and (min-width: 992px) {\n        grid-template-columns: repeat(12, 1fr);\n        gap: 24px;\n    }\n\n    /* \n    Extra Large breakpoint: 12 columns.\n    */\n    @media screen and (min-width: 1200px) {\n        grid-template-columns: repeat(12, 1fr);\n        gap: 24px;\n    }\n  "])));
-  let FluidOrFixedGrid;
-  if (isFluid) {
-    FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: 100%;\n    "])));
-  } else {
-    FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0 16px;\n\n        /* \n        Medium breakpoint: 8 columns.\n        */\n        @media screen and (min-width: 768px) {\n            margin: 0 32px;\n        }\n\n        /* \n        Large breakpoint : 12 columns.\n        */\n        @media screen and (min-width: 992px) {\n            margin: 0 32px;\n        }\n\n        /* \n        Extra Large breakpoint: 12 columns.\n        */\n        @media screen and (min-width: 1200px) {\n            width: 1128px;\n            margin: 0 auto;\n        }        \n    "])));
-  }
-  return /*#__PURE__*/_react.default.createElement(FluidOrFixedGrid, null, children);
-}
-GridSystem.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  isFluid: _propTypes.default.bool
-};
-GridSystem.defaultProps = {
-  isFluid: false
-};

package/build/components/grid-system.css

@@ -1,205 +0,0 @@
-/* 
-Small breakpoint. 
-
-On small screens, there are only 4 columns, so an element can take 4 columns at max.
-*/
-.col-s-1 {
-    /* No start or end defined. Span 1 columns. */
-    grid-column: span 1 / auto;
-}
-
-.col-s-2 {
-    /* No start or end defined. Span 2 columns. */
-    grid-column: span 2 / auto;
-}
-
-.col-s-3 {
-/* No start or end defined. Span 3 columns. */
-    grid-column: span 3 / auto;
-}
-
-.col-s-4 {
-    /* No start or end defined. Span 4 columns. */
-    grid-column: span 4 / auto;
-}
-
-/* 
-Medium breakpoint.
-
-On medium screens, there are 8 columns, so an element can take 8 columns at max.
-*/
-@media screen and (min-width: 768px) {
-    .col-m-1 {
-    /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-m-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-m-3 {
-        /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-m-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-m-5 {
-        /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-m-6 {
-        /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-m-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-m-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-}
-
-/* 
-Large breakpoint. 
-
-On large screens, there are 12 columns, so an element can take 12 columns at max.
-*/
-@media screen and (min-width: 992px) {
-    .col-l-1 {
-    /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-l-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-l-3 {
-        /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-l-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-l-5 {
-        /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-l-6 {
-    /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-l-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-l-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-
-    .col-l-9 {
-        /* No start or end defined. Span 9 columns. */
-        grid-column: span 9 / auto;
-    }
-
-    .col-l-10 {
-        /* No start or end defined. Span 10 columns. */
-        grid-column: span 10 / auto;
-    }
-
-    .col-l-11 {
-        /* No start or end defined. Span 11 columns. */
-        grid-column: span 11 / auto;
-    }
-
-    .col-l-12 {
-        /* No start or end defined. Span 12 columns. */
-        grid-column: span 12 / auto;
-    }
-}
-
-/* 
-Extra Large breakpoint. 
-
-On extra large screens, there are 12 columns, so an element can take 12 columns at max.
-*/
-@media screen and (min-width: 1200px) {
-    .col-xl-1 {
-        /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-xl-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-xl-3 {
-    /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-xl-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-xl-5 {
-    /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-xl-6 {
-        /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-xl-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-xl-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-
-    .col-xl-9 {
-        /* No start or end defined. Span 9 columns. */
-        grid-column: span 9 / auto;
-    }
-
-    .col-xl-10 {
-        /* No start or end defined. Span 10 columns. */
-        grid-column: span 10 / auto;
-    }
-
-    .col-xl-11 {
-        /* No start or end defined. Span 11 columns. */
-        grid-column: span 11 / auto;
-    }
-
-    .col-xl-12 {
-        /* No start or end defined. Span 12 columns. */
-        grid-column: span 12 / auto;
-    }
-}

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

@@ -1,50 +0,0 @@
-"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 _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireWildcard(require("../../components/oa-component-typography/Typography"));
-var _styles = 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 SparePart(_ref) {
-  let {
-    cost,
-    onDelete,
-    partId,
-    partName,
-    type
-  } = _ref;
-  const handleDelete = () => {
-    // Call to `onDelete` callback received from props.
-    onDelete(partId);
-  };
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledWrapper, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "secondary-content"
-  }, "".concat(partName, " ").concat(partId !== null ? "(".concat(partId, ")") : '')), /*#__PURE__*/_react.default.createElement(_styles.StatusContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "secondary-content"
-  }, "\u20B9 ".concat(cost)), type === 'delete' && /*#__PURE__*/_react.default.createElement(_styles.DeleteButton, {
-    type: "button",
-    onClick: handleDelete
-  }, /*#__PURE__*/_react.default.createElement(_styles.DeleteIcon, null))), type !== 'delete' && /*#__PURE__*/_react.default.createElement(_styles.StatusContainer, null, type === 'covered' ? /*#__PURE__*/_react.default.createElement(_styles.CheckIcon, null) : /*#__PURE__*/_react.default.createElement(_styles.CloseIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.default, null, type === 'covered' ? 'Covered by Insurer' : 'Not Covered')));
-}
-SparePart.propTypes = {
-  cost: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  onDelete: _propTypes.default.func,
-  partId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  partName: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['delete', 'covered', 'not covered'])
-};
-SparePart.defaultProps = {
-  partId: null,
-  onDelete: () => {},
-  type: 'delete'
-};
-var _default = SparePart;
-exports.default = _default;