oa-componentbook 0.17.6 → 0.17.8

package/build/components/oa-component-button/CustomButton.js

@@ -46,7 +46,7 @@ CustomButton.propTypes = {
   iconConfig: _propTypes.default.shape({
     icon: _propTypes.default.node,
     position: _propTypes.default.oneOf(['left', 'right']),
-    style: _propTypes.default.objectOf(_propTypes.default.string || _propTypes.default.number)
+    style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
   }),
   label: _propTypes.default.string.isRequired,
   type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']),

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -72,12 +72,12 @@ CustomDrawer.propTypes = {
   open: _propTypes.default.bool,
   placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
   title: _propTypes.default.node,
-  height: _propTypes.default.number || _propTypes.default.string,
-  width: _propTypes.default.number || _propTypes.default.string
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 CustomDrawer.defaultProps = {
   buttonConfig: null,
-  open: true,
+  open: false,
   placement: 'right',
   title: null,
   height: 378,

package/build/components/oa-component-loader/CustomLoader.js

@@ -0,0 +1,38 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+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");
+const _excluded = ["children", "size", "spinning"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function CustomLoader(_ref) {
+  let {
+      children,
+      size,
+      spinning
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.Spin, _extends({
+    delay: 500,
+    size: size,
+    spinning: spinning
+  }, antDesignProps), children);
+}
+CustomLoader.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  size: _propTypes.default.oneOf(['small', 'default', 'large']),
+  spinning: _propTypes.default.bool.isRequired
+};
+CustomLoader.defaultProps = {
+  size: 'default'
+};
+var _default = CustomLoader;
+exports.default = _default;

package/build/components/oa-component-table/CustomTable.js

@@ -1,47 +1,45 @@
 "use strict";
 
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _antd = require("antd");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _styles = require("./styles");
+const _excluded = ["columns", "dataSource", "pagination", "rowKey"];
 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; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function CustomTable(_ref) {
   let {
-    columns,
-    dataSource,
-    pagination,
-    rowKey
-  } = _ref;
-  const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    th.ant-table-cell{\n      font-size: 10px;\n      letter-spacing: 1px;\n      text-transform: uppercase;\n      color: #6f7c87 !important;\n      line-height: 10px;\n    }\n    .ant-table-tbody > tr > td{\n      font-size: 14px;\n      letter-spacing: 0;\n      line-height: 22px;\n      color: #454545 !important;\n    }\n    .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{\n      display: none;\n    }\n    .ant-pagination-item{\n      border-radius: 0;\n    }\n    .ant-pagination-item-link{\n      border: 1px solid #d9d9d9 !important;\n      border-radius: 0 !important;\n    }\n    .ant-table-thead > tr > th{\n      background: #f6f6f6;\n      white-space: nowrap;\n    }\n  "])));
-  return /*#__PURE__*/_react.default.createElement(StyledTable, {
+      columns,
+      dataSource,
+      pagination,
+      rowKey
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTable, _extends({
     columns: columns,
     dataSource: dataSource,
     pagination: pagination,
     rowKey: rowKey
-  });
+    // This allows for all ant design props to be supported.
+  }, antDesignProps));
 }
 CustomTable.propTypes = {
   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
-  })])
+  pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  rowKey: _propTypes.default.string
 };
 CustomTable.defaultProps = {
   dataSource: [],
   columns: [],
-  pagination: false
+  pagination: false,
+  rowKey: ''
 };
 var _default = CustomTable;
 exports.default = _default;

package/build/components/oa-component-table/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTable = void 0;
+var _antd = require("antd");
+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 = _default;
+const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #e8e8e8;\n    border-radius: 4px;\n    th.ant-table-cell{\n        font-size: 10px;\n        letter-spacing: 1px;\n        text-transform: uppercase;\n        color: #6f7c87 !important;\n        line-height: 10px;\n    }\n    .ant-table-tbody > tr > td{\n        font-size: 14px;\n        letter-spacing: 0;\n        line-height: 22px;\n        color: #454545 !important;\n    }\n    .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{\n        display: none;\n    }\n    .ant-pagination-item{\n        border-radius: 0;\n    }\n    .ant-pagination-item-link{\n        border: 1px solid #d9d9d9 !important;\n        border-radius: 0 !important;\n    }\n    .ant-table-thead > tr > th{\n        background: #f6f6f6;\n        white-space: nowrap;\n    }\n"])));
+exports.StyledTable = StyledTable;

package/build/components/oa-component-tag/Tag.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Tag(_ref) {
+  let {
+    text,
+    type,
+    visible
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, {
+    type: type,
+    visible: visible
+  }, /*#__PURE__*/_react.default.createElement("span", null, text));
+}
+Tag.propTypes = {
+  text: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'other']),
+  visible: _propTypes.default.bool
+};
+Tag.defaultProps = {
+  type: 'other',
+  visible: true
+};
+var _default = Tag;
+exports.default = _default;

package/build/components/oa-component-tag/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTag = 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) } })); }
+const getColorStyles = type => {
+  if (type === 'success') {
+    return {
+      backgroundColor: '#E1F1EC',
+      borderColor: 'var(--color-green-success)',
+      textColor: 'var(--color-green-success)'
+    };
+  }
+  if (type === 'pending') {
+    return {
+      backgroundColor: '#FFF2E2',
+      borderColor: 'var(--color-yellow-warning)',
+      textColor: 'var(--color-yellow-warning)'
+    };
+  }
+  if (type === 'failed') {
+    return {
+      backgroundColor: '#FBE5DF',
+      borderColor: 'var(--color-red-error)',
+      textColor: 'var(--color-red-error)'
+    };
+  }
+  return {
+    backgroundColor: '#CCCCCC',
+    borderColor: '#CCCCCC',
+    textColor: 'var(--color-primarygrey-text)'
+  };
+};
+var _default = {};
+exports.default = _default;
+const StyledTag = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 4px 12px;\n  color: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  visibility: ", ";\n"])), props => getColorStyles(props.type).textColor, props => getColorStyles(props.type).backgroundColor, props => getColorStyles(props.type).borderColor, props => props.visible ? 'visible' : 'hidden');
+exports.StyledTag = StyledTag;

package/build/index.js

@@ -65,6 +65,12 @@ Object.defineProperty(exports, "CustomDrawer", {
     return _CustomDrawer.default;
   }
 });
+Object.defineProperty(exports, "CustomLoader", {
+  enumerable: true,
+  get: function get() {
+    return _CustomLoader.default;
+  }
+});
 Object.defineProperty(exports, "CustomModal", {
   enumerable: true,
   get: function get() {
@@ -143,6 +149,12 @@ Object.defineProperty(exports, "StageTimelineChild", {
     return _StageTimeline.StageTimelineChild;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function get() {
@@ -191,6 +203,7 @@ var _CornerRadius = _interopRequireDefault(require("./components/oa-component-co
 var _CustomButton = _interopRequireDefault(require("./components/oa-component-button/CustomButton"));
 var _CustomCheckBox = _interopRequireDefault(require("./components/oa-component-checkbox/CustomCheckBox"));
 var _CustomDrawer = _interopRequireDefault(require("./components/oa-component-drawer/CustomDrawer"));
+var _CustomLoader = _interopRequireDefault(require("./components/oa-component-loader/CustomLoader"));
 var _CustomModal = _interopRequireDefault(require("./components/oa-component-modal/CustomModal"));
 var _CustomNotification = _interopRequireDefault(require("./components/oa-component-notification/CustomNotification"));
 var _CustomRadio = _interopRequireDefault(require("./components/oa-component-radio/CustomRadio"));
@@ -198,6 +211,7 @@ var _SpacingScales = _interopRequireDefault(require("./components/oa-component-s
 var _CustomTable = _interopRequireDefault(require("./components/oa-component-table/CustomTable"));
 var _CustomTabs = _interopRequireDefault(require("./components/oa-component-tabs/CustomTabs"));
 var _TextArea = _interopRequireDefault(require("./components/oa-component-textarea/TextArea"));
+var _Tag = _interopRequireDefault(require("./components/oa-component-tag/Tag"));
 var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
 var _CustomToggle = _interopRequireDefault(require("./components/oa-component-toggle/CustomToggle"));
 var _TrackShipment = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipment"));

package/build/widgets/oa-widget-address/Address.js

@@ -20,7 +20,7 @@ function Address(_ref) {
     heading,
     typography
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.AddressContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.AddressContainer, null, heading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: typography
   }, heading), /*#__PURE__*/_react.default.createElement(_styles.AddressLines, null, address.addressLine1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
@@ -37,7 +37,7 @@ function Address(_ref) {
   }, "Near", ' ', address.landmark)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
-  }, address.city, ', ', address.state, "-", address.pincode), ((_address$additional_i = address.additional_info) === null || _address$additional_i === void 0 ? void 0 : _address$additional_i.lat) && ((_address$additional_i2 = address.additional_info) === null || _address$additional_i2 === void 0 ? void 0 : _address$additional_i2.long) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, address.city, ', ', address.state, "-", address.pincode), (address === null || address === void 0 || (_address$additional_i = address.additional_info) === null || _address$additional_i === void 0 ? void 0 : _address$additional_i.lat) && (address === null || address === void 0 || (_address$additional_i2 = address.additional_info) === null || _address$additional_i2 === void 0 ? void 0 : _address$additional_i2.long) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondarygrey-text",
     typography: typography
   }, "Location:", ' ', address.additional_info.lat, ",", address.additional_info.long)));
@@ -61,5 +61,6 @@ Address.propTypes = {
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
 Address.defaultProps = {
+  heading: undefined,
   typography: 'type-b2-400'
 };

package/build/widgets/oa-widget-approval/ApprovalWidget.js

@@ -21,15 +21,17 @@ const StyledAside = _styledComponents.default.aside(_templateObject || (_templat
 const isUndefined = () => typeof testVar === 'undefined';
 function ApprovalWidget(_ref) {
   let {
-    title,
-    description,
-    key,
-    layoutType,
-    field,
-    remarks,
-    view,
-    docDetails,
-    divider
+    data: {
+      title,
+      description,
+      key,
+      isFaq,
+      field,
+      remarks,
+      view,
+      docDetails,
+      divider
+    }
   } = _ref;
   const [drawer, setDrawer] = (0, _react.useState)(false);
   const isDivider = isUndefined(divider) ? true : divider;
@@ -93,7 +95,7 @@ ApprovalWidget.propTypes = {
     field: _propTypes.default.shape({
       options: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.string)),
       onChange: _propTypes.default.func,
-      value: _propTypes.default.string || _propTypes.default.number
+      value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
     }),
     remarks: _propTypes.default.shape({
       onChange: _propTypes.default.func,

package/build/widgets/oa-widget-keyValueDataView/KeyValueDataView.js

@@ -16,28 +16,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function KeyValueDataView(_ref) {
   let {
     data,
-    columnLayout,
-    footerHeading,
-    heading,
-    viewMore
+    columnLayout
   } = _ref;
-  const dataLength = Object.keys(data).length;
-  let numOfEntries = dataLength;
-  const actualColumnLayout = [];
+  let actualColumnLayout = [];
   if (columnLayout.length === 0) {
     actualColumnLayout[0] = Object.keys(data).length;
   } else {
-    columnLayout.forEach((rowCt, layoutIdx) => {
-      if (numOfEntries < rowCt) {
-        actualColumnLayout[layoutIdx] = numOfEntries;
-        return;
-      }
-      actualColumnLayout[layoutIdx] = rowCt;
-      numOfEntries -= rowCt;
-    });
-    if (numOfEntries !== 0) {
-      actualColumnLayout.push(numOfEntries);
-    }
+    actualColumnLayout = columnLayout;
   }
   let entryIdx = 0;
   return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroups, {
@@ -46,7 +31,12 @@ function KeyValueDataView(_ref) {
     entryIdx += layoutIdx - 1 >= 0 ? actualColumnLayout[layoutIdx - 1] : 0;
     return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroup, {
       key: element
-    }, Object.entries(data).splice(entryIdx, element).map(_ref2 => {
+    }, Object.entries(data)
+
+    /*
+    When no more elements are left, entryIdx is more than last index of `data`,
+    resulting in no elements selected.
+    */.splice(entryIdx, element).map(_ref2 => {
       let [key, value] = _ref2;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.StyledBold, null, key, ":"), /*#__PURE__*/_react.default.createElement(_styles.StyledSpan, null, value));
     }));
@@ -54,16 +44,10 @@ function KeyValueDataView(_ref) {
 }
 KeyValueDataView.propTypes = {
   columnLayout: _propTypes.default.arrayOf(_propTypes.default.number),
-  data: _propTypes.default.objectOf(_propTypes.default.string).isRequired,
-  heading: _propTypes.default.string,
-  footerHeading: _propTypes.default.string,
-  viewMore: _propTypes.default.node
+  data: _propTypes.default.objectOf(_propTypes.default.string).isRequired
 };
 KeyValueDataView.defaultProps = {
-  columnLayout: [],
-  heading: '',
-  footerHeading: '',
-  viewMore: null
+  columnLayout: []
 };
 var _default = KeyValueDataView;
 exports.default = _default;

package/build/widgets/oa-widget-send-payment-link/SendPaymentLink.js

@@ -25,12 +25,13 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function SendPaymentLink(_ref) {
   let {
     heading,
-    options,
-    onSubmit
+    onClose,
+    onSubmit,
+    open,
+    options
   } = _ref;
   const [form] = _antd.Form.useForm();
   const [selectedRadio, setSelectedRadio] = (0, _react.useState)(0);
-  const [open, setOpen] = (0, _react.useState)(true);
   const onChange = event => {
     setSelectedRadio(event.target.value);
 
@@ -41,28 +42,34 @@ function SendPaymentLink(_ref) {
     }, options[event.target.value].data);
     form.setFieldsValue(newValues);
   };
-  const onOpen = () => {
-    setOpen(true);
-  };
-  const onClose = () => {
-    setOpen(false);
-  };
-  const onClick = () => {
+  const handleSubmit = () => {
+    // Customize submit behavior over here.
+
+    // Call to `onSubmit` callback received from props.
+    onSubmit();
+
+    // Submitting the form.
     form.submit();
   };
+  const handleClose = () => {
+    // Customize close behavior over here.
+
+    // Call to `onClose` callback received from props.
+    onClose();
+  };
   return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
     closable: true,
     buttonConfig: [{
       label: 'Cancel',
-      onClick: onClose,
+      onClick: handleClose,
       type: 'secondary'
     }, {
       label: 'Send',
       // Calling submit on the form, if the Send button is clicked
-      onClick,
+      onClick: handleSubmit,
       type: 'primary'
     }],
-    onClose: onClose,
+    onClose: handleClose,
     open: open,
     title: /*#__PURE__*/_react.default.createElement(_Typography.default, null, heading)
   }, /*#__PURE__*/_react.default.createElement(_styles.RadioContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -79,8 +86,8 @@ function SendPaymentLink(_ref) {
     form: form,
     initialValues: options[0].data,
     layout: "vertical",
-    onFinish: onSubmit
-    // The provided callback `onSubmit` (using the alias `onFinish`)
+    onFinish: handleSubmit
+    // `handleSubmit` (using the alias `onFinish`)
     // is called with the form data, upon the form being submitted
   }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
     label: /*#__PURE__*/_react.default.createElement(_Typography.default, null, "Mobile Number"),
@@ -96,16 +103,21 @@ function SendPaymentLink(_ref) {
 }
 SendPaymentLink.propTypes = {
   heading: _propTypes.default.string,
-  onSubmit: _propTypes.default.func.isRequired,
+  onClose: _propTypes.default.func,
+  onSubmit: _propTypes.default.func,
+  open: _propTypes.default.bool,
   options: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string.isRequired,
     value: _propTypes.default.string.isRequired,
     data: _propTypes.default.shape({
-      mobileNum: _propTypes.default.number || _propTypes.default.string,
+      mobileNum: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
       email: _propTypes.default.string
     })
   })).isRequired
 };
 SendPaymentLink.defaultProps = {
+  onClose: () => {},
+  onSubmit: () => {},
+  open: false,
   heading: ''
 };

package/build/widgets/oa-widget-sparePart/SparePart.js

@@ -41,9 +41,9 @@ function SparePart(_ref) {
   }, type === 'covered' ? 'Covered by Insurer' : 'Not Covered')));
 }
 SparePart.propTypes = {
-  cost: (_propTypes.default.string || _propTypes.default.number).isRequired,
+  cost: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
   onDelete: _propTypes.default.func,
-  partId: _propTypes.default.string || _propTypes.default.number,
+  partId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   partName: _propTypes.default.string.isRequired,
   type: _propTypes.default.oneOf(['delete', 'covered', 'not covered']),
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)

package/build/widgets/oa-widget-stage-timeline/StageTimeline.js

@@ -10,37 +10,64 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Import the styles
-
 function StageTimelineChild(_ref) {
+  var _data$subStages;
   let {
     data
   } = _ref;
-  let pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageDefault, null);
-  let className = '';
+  let className = 'notstarted';
   if (data.status === 'completed') {
     className = 'completed';
-    pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageSuccess, null);
   } else if (data.status === 'In-Progress') {
     className = 'inprogress';
-    pickedIcon = /*#__PURE__*/_react.default.createElement(_styles.StageInprocess, null);
   }
+  const StageDetailsDisplay = /*#__PURE__*/_react.default.createElement(_styles.StageDetails, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_styles.DotIcon, {
+    className: className
+  }, className === 'completed' && /*#__PURE__*/_react.default.createElement(_styles.CheckIcon, null)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: className === 'inprogress' ? 'type-button-500' : 'type-b2-400'
+  }, data.stageName));
   return /*#__PURE__*/_react.default.createElement("li", {
     key: data.stageId
-  }, /*#__PURE__*/_react.default.createElement(_styles.StageInfo, {
+  }, (data === null || data === void 0 || (_data$subStages = data.subStages) === null || _data$subStages === void 0 ? void 0 : _data$subStages.length) > 0 ? /*#__PURE__*/_react.default.createElement(_styles.CollapsibleStage
+  // onClick of the stage passed to onChange of the collapse
+  , {
+    onChange: data.onClick,
+    className: className,
+    expandIconPosition: "end",
+    ghost: true,
+    items: [{
+      key: data.stageId,
+      label: StageDetailsDisplay,
+      children: /*#__PURE__*/_react.default.createElement(_styles.SubStageContainer, null, data.subStages.map(subStage => /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
+        key: subStage,
+        className: subStage.status,
+        onClick: subStage.onClick,
+        type: "button",
+        disabled: subStage.status === 'disabled'
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: subStage.status === 'active' ? 'type-button-500' : 'type-b2-400'
+      }, subStage.stageName))))
+    }]
+  }) : /*#__PURE__*/_react.default.createElement(_styles.StaticStage, {
     onClick: data.onClick,
     className: className
-  }, /*#__PURE__*/_react.default.createElement(_styles.StageIcon, null, pickedIcon), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: "type-b2-400"
-  }, data.stageName)));
+  }, StageDetailsDisplay));
 }
 StageTimelineChild.propTypes = {
   data: _propTypes.default.shape({
     data: _propTypes.default.objectOf(_propTypes.default.string),
-    onClick: _propTypes.default.func.isRequired,
-    stageId: (_propTypes.default.string || _propTypes.default.number).isRequired,
+    onClick: _propTypes.default.func,
+    stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
     stageName: _propTypes.default.string.isRequired,
-    status: _propTypes.default.oneOf(['Not-Started', 'In-Progress', 'completed']).isRequired
+    status: _propTypes.default.oneOf(['Not-Started', 'In-Progress', 'completed']).isRequired,
+    subStages: _propTypes.default.arrayOf(_propTypes.default.shape({
+      stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+      stageName: _propTypes.default.string.isRequired,
+      status: _propTypes.default.oneOf(['active', 'inactive', 'disabled']).isRequired,
+      onClick: _propTypes.default.func
+    }))
   }).isRequired
 };
 function StageTimeline(_ref2) {

package/build/widgets/oa-widget-stage-timeline/styles.js

@@ -3,20 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StagesList = exports.StageSuccess = exports.StageInprocess = exports.StageInfo = exports.StageIcon = exports.StageDefault = void 0;
+exports.SubStageContainer = exports.SubStage = exports.StaticStage = exports.StagesList = exports.StageDetails = exports.DotIcon = exports.CollapsibleStage = exports.CheckIcon = void 0;
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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 StageInfo = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-grey2-disabled);\n  display: flex;\n  align-items: center;\n  padding: 12px 24px 12px 24px;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: 28px;\n\n  &.inprogress {\n    display: flex;\n    align-items: center;\n    color: #014FC5;\n    background: #DEF1FB;\n    border-color: #DEF1FB;\n  }\n\n  &.completed {\n    color: var(--color-secondarygrey-text);\n    border: 1px solid var(--color-secondarygrey-text);\n    background: #fff;\n  }\n"])));
-exports.StageInfo = StageInfo;
-const StageIcon = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  margin: 0 10px 0 0;\n  display: flex;\n"])));
-exports.StageIcon = StageIcon;
-const StageInprocess = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #014FC5;\n  border-radius: 50px;\n"])));
-exports.StageInprocess = StageInprocess;
-const StageDefault = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #BFBFBF;\n  border-radius: 50px;\n"])));
-exports.StageDefault = StageDefault;
-const StageSuccess = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: green;\n  border-radius: 50px;\n"])));
-exports.StageSuccess = StageSuccess;
-const StagesList = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n"])));
-exports.StagesList = StagesList;
+const CheckIcon = (0, _styledComponents.default)(_icons.CheckOutlined)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-green-success);\n"])));
+exports.CheckIcon = CheckIcon;
+const CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n  & .ant-collapse-header * {\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress .ant-collapse-header * {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed .ant-collapse-header * {\n    color: var(--color-secondarygrey-text);\n  }\n\n  & .ant-collapse-header {\n    /* !important needed to override pre-existing ant design styles */\n    padding: 12px 24px 12px 24px !important;\n    border-radius: 28px !important;\n    border: 1px solid transparent;\n  }\n  \n\n  &.inprogress .ant-collapse-header {\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-secondarygrey-text);\n    background: #fff;\n  }\n"])));
+exports.CollapsibleStage = CollapsibleStage;
+const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  \n  /* Space between the icon and the stage name. */\n  margin: 0 12px 0 0;\n  \n  border-radius: 50px;\n\n  display: flex;\n  background: ", ";\n"])), props => {
+  switch (props.className) {
+    case 'inprogress':
+      return 'var(--color-blue-CTA)';
+    case 'notstarted':
+      return 'var(--color-grey2-disabled)';
+    default:
+      return '';
+  }
+});
+exports.DotIcon = DotIcon;
+const StageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.notstarted {\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed {\n    color: var(--color-secondarygrey-text);\n  }\n"])));
+exports.StageDetails = StageDetails;
+const StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  padding: 12px 24px 12px 24px;\n  \n  cursor: pointer;\n\n  border: 1px solid transparent;\n  color: var(--color-grey2-disabled);\n  \n  text-decoration: none;\n  border-radius: 28px;\n\n  &.inprogress {\n    color: var(--color-blue-CTA);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.completed {\n    color: var(--color-secondarygrey-text);\n    border: 1px solid var(--color-secondarygrey-text);\n    background: #fff;\n  }\n"])));
+exports.StaticStage = StaticStage;
+const StagesList = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n  \n  /* Since width is 100%, it'll take up all of its container */\n  /* width: 100%; */\n"])));
+exports.StagesList = StagesList;
+const SubStage = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 4px 1px 4px calc(12px + 12px + 10px);\n  \n  background: inherit;\n  border: none;\n  text-align: left;\n  \n  cursor: pointer;\n  \n  &.active {\n    color: var(--color-primarygrey-text);\n  } \n  \n  &.inactive {\n    color: var(--color-secondarygrey-text);\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    color: var(--color-grey2-disabled);\n  }\n  "])));
+exports.SubStage = SubStage;
+const SubStageContainer = _styledComponents.default.section(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n"])));
+exports.SubStageContainer = SubStageContainer;

package/build/widgets/oa-widget-track-shipment/TrackShipment.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Address = _interopRequireDefault(require("../oa-widget-address/Address"));
+var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
 var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
 var _Typography = _interopRequireWildcard(require("../../components/oa-component-typography/Typography"));
 var _templateObject;
@@ -18,6 +19,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 AddressesContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));
+
+// TODO: Resolve lint errors.
+
 function TrackShipment(_ref) {
   let {
     awbNumber,
@@ -25,6 +29,7 @@ function TrackShipment(_ref) {
     stepsData,
     fromAddressHeading,
     fromAddressObject,
+    tableConfig,
     title,
     toAddressHeading,
     toAddressObject,
@@ -46,7 +51,7 @@ function TrackShipment(_ref) {
     currentStep: currentStep,
     stepsData: stepsData,
     typography: typographies.steps
-  }));
+  }), /*#__PURE__*/_react.default.createElement(_CustomTable.default, tableConfig));
 }
 TrackShipment.propTypes = {
   awbNumber: _propTypes.default.string.isRequired,
@@ -69,6 +74,12 @@ TrackShipment.propTypes = {
       long: _propTypes.default.string
     })
   }),
+  tableConfig: _propTypes.default.shape({
+    columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    dataSource: _propTypes.default.arrayOf(_propTypes.default.string),
+    pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+    rowKey: _propTypes.default.string
+  }),
   title: _propTypes.default.string.isRequired,
   toAddressHeading: _propTypes.default.string,
   toAddressObject: _propTypes.default.shape({
@@ -92,6 +103,11 @@ TrackShipment.propTypes = {
   })
 };
 TrackShipment.defaultProps = {
+  fromAddressHeading: '',
+  fromAddressObject: {},
+  tableConfig: null,
+  toAddressHeading: '',
+  toAddressObject: {},
   typographies: {
     awb: 'type-b2-400',
     steps: 'type-b3-400',

package/package.json

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