oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StageTimelineChild = StageTimelineChild;
+exports.default = StageTimelineWidget;
+require("core-js/modules/es.string.ends-with.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CheckRounded = _interopRequireDefault(require("@material-ui/icons/CheckRounded"));
+var _utils = require("../../utils");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A component that displays a stage in a timeline.
+ *
+ * @param {object} props The props of the component.
+ * @prop {string} [data-test] A string for testing purposes.
+ * @prop {boolean} isActive Whether the stage is active or not.
+ * @prop {function} onClick A function to be called when the stage is clicked.
+ * @prop {string} stageName The name of the stage.
+ * @prop {string} status The status of the stage.
+ * @prop {array} subStages An array of substages.
+ *
+ * @returns A component that displays a stage in a timeline.
+ */
+function StageTimelineChild(_ref) {
+  let {
+    'data-test': dataTest,
+    isActive,
+    onClick,
+    stageName,
+    status,
+    subStages
+  } = _ref;
+  let className = 'notstarted';
+  if (status === 'completed' || status === 'Completed') {
+    className = 'completed';
+    if (isActive) {
+      className = 'completed--active';
+    }
+  } else if (status === 'In-Progress') {
+    className = 'inprogress';
+    if (isActive) {
+      className = 'inprogress--active';
+    }
+  }
+  const StageDetailsDisplay = /*#__PURE__*/_react.default.createElement(_styles.StageDetails, {
+    className: className
+  }, className === 'completed' || className === 'completed--active' ? /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CheckRounded.default,
+    color: "positive",
+    size: 20
+  }) : /*#__PURE__*/_react.default.createElement(_styles.DotIcon, {
+    className: className
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: className === 'inprogress--active' || className === 'completed--active' ? 'type-button-500' : 'type-b2-400'
+  }, stageName));
+  return /*#__PURE__*/_react.default.createElement("li", {
+    key: (0, _utils.getUUID)()
+  }, (subStages === null || subStages === void 0 ? void 0 : subStages.length) > 0 ? /*#__PURE__*/_react.default.createElement(_styles.CollapsibleStage
+  // onClick of the stage passed to onChange of the collapse
+  , {
+    onChange: className === 'notstarted' ? null : onClick,
+    className: className,
+    "data-test": dataTest,
+    expandIconPosition: "end",
+    ghost: true
+    /*
+    The accordion and active key props are used to
+    ensure the collapsible stage's substages are shown only
+    when the collapsible stage is active
+    */,
+    accordion: true,
+    activeKey: className.endsWith('--active') ? 1 : -1,
+    items: [{
+      key: 1,
+      label: StageDetailsDisplay,
+      children: /*#__PURE__*/_react.default.createElement(_styles.SubStageContainer, {
+        className: className
+      }, subStages.map(subStage => {
+        let subStageClassName = 'inactive';
+        if (subStage !== null && subStage !== void 0 && subStage.isDisabled) {
+          subStageClassName = 'disabled';
+        } else if (subStage !== null && subStage !== void 0 && subStage.isActive) {
+          subStageClassName = 'active';
+        }
+        return /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
+          key: (0, _utils.getUUID)(),
+          className: subStageClassName,
+          "data-test": dataTest ? "".concat(dataTest, "--substage-(").concat(subStage.stageName, ")") : undefined,
+          onClick: subStage.onClick,
+          type: "button"
+        }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          typography: isActive ? 'type-button-500' : 'type-b2-400'
+        }, subStage.stageName));
+      }))
+    },
+    /*
+    This is an invisible collapse that is switched to
+    when the actual collapse is not active
+    */
+    {
+      key: -1,
+      style: {
+        display: 'none'
+      }
+    }]
+  }) : /*#__PURE__*/_react.default.createElement(_styles.StaticStage, {
+    onClick: className === 'notstarted' ? null : onClick,
+    className: className,
+    role: "tab",
+    "data-test": dataTest
+  }, StageDetailsDisplay));
+}
+StageTimelineChild.propTypes = {
+  'data-test': _propTypes.default.string,
+  isActive: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  stageName: _propTypes.default.string.isRequired,
+  // null and Not-Started result in the same behavior for a state.
+  status: _propTypes.default.oneOf(['Not-Started', 'In-Progress', 'completed', 'Completed']),
+  subStages: _propTypes.default.arrayOf(_propTypes.default.shape({
+    stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    stageName: _propTypes.default.string.isRequired,
+    isDisabled: _propTypes.default.bool,
+    isActive: _propTypes.default.bool,
+    onClick: _propTypes.default.func
+  }))
+};
+StageTimelineChild.defaultProps = {
+  'data-test': null,
+  isActive: false,
+  onClick: () => {},
+  status: null,
+  subStages: []
+};
+function StageTimelineWidget(_ref2) {
+  let {
+    children,
+    'data-test': dataTest
+  } = _ref2;
+  return dataTest ? /*#__PURE__*/_react.default.createElement(_styles.StagesList, {
+    "data-test": dataTest
+  }, children.map(child => ( /*#__PURE__*/_react.default.cloneElement(child, {
+    'data-test': "".concat(dataTest, "--stage-(").concat(child.props.stageName, ")"),
+    key: (0, _utils.getUUID)()
+  })))) : /*#__PURE__*/_react.default.createElement(_styles.StagesList, null, children);
+}
+StageTimelineWidget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  'data-test': _propTypes.default.string
+};
+StageTimelineWidget.defaultProps = {
+  'data-test': null
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubStageContainer = exports.SubStage = exports.StaticStage = exports.StagesList = exports.StageDetails = exports.DotIcon = exports.CollapsibleStage = void 0;
+var _antd = require("antd");
+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 CollapsibleStage = exports.CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n    \n\n  &.notstarted .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-disabled-button);\n  }\n  \n  &.inprogress--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-primary);\n    display: none;\n  }\n\n  // This is for the arrow\n  &.completed .ant-collapse-header .ant-collapse-arrow, \n  &.inprogress .ant-collapse-header .ant-collapse-arrow, \n  &.completed--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-secondary-content);\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    cursor: pointer;\n  }  \n\n  &.notstarted .ant-collapse-header {\n    cursor: not-allowed;\n  }\n\n  &.inprogress .ant-collapse-header, \n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n  }\n\n\n  &.inprogress--active .ant-collapse-header, \n  &.completed--active .ant-collapse-header {\n    background: var(--color-background-info);\n    border: 1px solid var(--color-background-info);\n  }\n"])));
+const DotIcon = exports.DotIcon = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  \n  \n  border-radius: 50px;\n\n  display: flex;\n\n  background: ", ";\n"])), props => {
+  switch (props.className) {
+    case 'inprogress--active':
+      return 'var(--color-primary)';
+    case 'inprogress':
+      return 'var(--color-disabled-button)';
+    case 'notstarted':
+      return 'var(--color-disabled-button)';
+    default:
+      return '';
+  }
+});
+const StageDetails = exports.StageDetails = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  \n  &.notstarted {\n    color: var(--color-disabled-button);\n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n  }\n\n  &.completed, &.inprogress, &.completed--active {\n    color: var(--color-secondary-content);\n  }\n"])));
+const StaticStage = exports.StaticStage = _styledComponents.default.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 16px 24px 16px 24px;  \n  cursor: not-allowed;\n  border: 1px solid transparent;\n  color: var(--color-disabled-button);  \n  text-decoration: none;\n  border-radius: 28px;\n\n  \n \n  &.completed, &.inprogress {\n    border-color: var(--color-divider);\n    background: var(--color-primary-background);\n    cursor: pointer;\n  }\n  \n  &.completed--active {\n    color: var(--color-secondary-content);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    \n  }\n\n  &.inprogress--active {\n    color: var(--color-primary);\n    background: var(--color-background-info);\n    border-color: var(--color-background-info);\n    cursor: pointer;\n  }\n"])));
+const StagesList = exports.StagesList = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _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"])));
+const SubStage = exports.SubStage = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _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-primary-content);\n  } \n  \n  &.inactive {\n    color: var(--color-secondary-content);\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    color: var(--color-disabled-button);\n  }\n"])));
+const SubStageContainer = exports.SubStageContainer = _styledComponents.default.section(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n\n  /* &.notstarted {\n    cursor: not-allowed;\n    pointer-events: none;\n  } */\n"])));

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

@@ -0,0 +1,232 @@
+"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 = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _FileCopyOutlined = _interopRequireDefault(require("@material-ui/icons/FileCopyOutlined"));
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+var _AddressWidget = _interopRequireDefault(require("../oa-widget-address/AddressWidget"));
+var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
+var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _styles = require("./styles");
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+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 TrackShipmentWidget
+ * @description This widget displays the shipment tracking details based on the
+ * given shipment data.
+ *
+ * @prop {string} awbNumber The AWB number for tracking the shipment.
+ * @prop {Object} fromAddress The "from" address for the shipment.
+ * @prop {Array} tableData The array of data for the custom table displaying
+ * shipment details.
+ * @prop {string} title The title of the shipment.
+ * @prop {string} toAddress The "to" address for the shipment.
+ * @prop {string} heading The heading for the shipment tracking details.
+ *
+ * @returns {ReactElement} The rendered component.
+ */
+function TrackShipmentWidget(_ref) {
+  var _tableData, _tableData2;
+  let {
+    awbNumber,
+    fromAddress,
+    tableData,
+    title,
+    toAddress,
+    heading,
+    partnerName,
+    errorReason
+  } = _ref;
+  // local variables
+  const deilveryStageText = 'SHIPMENT DELIVERED to Customer';
+
+  // show notification when user click on clipboard
+  const notificationRef = (0, _react.useRef)(null);
+  const openNotification = parameters => {
+    var _notificationRef$curr;
+    return notificationRef === null || notificationRef === void 0 || (_notificationRef$curr = notificationRef.current) === null || _notificationRef$curr === void 0 ? void 0 : _notificationRef$curr.openNotification(parameters);
+  };
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(awbNumber).then(() => {
+      openNotification({
+        description: 'Copy to clipboard',
+        type: 'success'
+      });
+    }).catch(err => {
+      openNotification({
+        description: 'Failed to copy text',
+        type: 'failure'
+      });
+    });
+  };
+
+  // return circle color depands on stageConsistent key coming from backend
+  const getCircleClass = (row, isTimeLineStep) => {
+    if (row.stageConsistent) {
+      return isTimeLineStep ? 'finish' : 'greenBg';
+    }
+    if (row.toDate === null && row.oneassistDisplayStatus === deilveryStageText) {
+      return isTimeLineStep ? 'process' : 'greenBr';
+    }
+    return isTimeLineStep ? 'error' : 'redBg';
+  };
+
+  // check if current stage is delivery stage or not
+  const isOnDeliveryStage = Array.isArray(tableData) && tableData.length > 0 && ((_tableData = tableData[tableData.length - 1]) === null || _tableData === void 0 ? void 0 : _tableData.oneassistDisplayStatus) === deilveryStageText && ((_tableData2 = tableData[tableData.length - 1]) === null || _tableData2 === void 0 ? void 0 : _tableData2.toDate) === null;
+
+  // remove duplicate consicutive objects only show single unique objects
+  const stepsData = tableData === null || tableData === void 0 ? void 0 : tableData.map(item => ({
+    title: item.oneassistDisplayStatus,
+    status: getCircleClass(item, true)
+  })).filter((item, index) => {
+    var _tableData3;
+    return item.title !== ((_tableData3 = tableData[index - 1]) === null || _tableData3 === void 0 ? void 0 : _tableData3.oneassistDisplayStatus);
+  });
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleTrackShipment, {
+    className: "trackingDetails"
+  }, /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }), title ? /*#__PURE__*/_react.default.createElement("h1", {
+    className: "type-t1-500"
+  }, title) : null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "type-t1-500"
+  }, heading), awbNumber && /*#__PURE__*/_react.default.createElement("p", {
+    className: "type-b2-400 disFlex"
+  }, "AWB Number:", awbNumber, awbNumber && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _FileCopyOutlined.default,
+    size: 20,
+    onClick: handleCopyToClipboard,
+    style: {
+      cursor: 'pointer',
+      color: '014FC5'
+    }
+  })), partnerName && /*#__PURE__*/_react.default.createElement("p", {
+    className: "type-b2-400 disFlex"
+  }, "Partner:", partnerName), fromAddress && toAddress && /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
+    address: fromAddress
+  }), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
+    address: toAddress
+  })), (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cstScroll"
+  }, /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
+    currentStep: isOnDeliveryStage ? stepsData.length : stepsData.length - 1,
+    stepsData: stepsData
+  })), errorReason && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-16 margin-bottom-16"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "warning",
+        size: 24,
+        icon: _InfoOutlined.default
+      }),
+      position: 'left'
+    },
+    description: errorReason
+  })), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
+    bordered: true,
+    rowKey: "key",
+    columns: [{
+      title: 'Stage',
+      dataIndex: 'oneassistDisplayStatus',
+      key: 'oneassistDisplayStatus',
+      render: (text, row, index) => {
+        const obj = {
+          children: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("em", {
+            className: "comIcon ".concat(getCircleClass(row))
+          }), text),
+          props: {}
+        };
+        if (index === 0 || tableData[index - 1].oneassistDisplayStatus !== text) {
+          let rowSpanCount = 1;
+          for (let i = index + 1; i < tableData.length; i += 1) {
+            if (tableData[i].oneassistDisplayStatus === text) {
+              rowSpanCount += 1;
+            } else {
+              break;
+            }
+          }
+          obj.props.rowSpan = rowSpanCount;
+        } else {
+          obj.props.rowSpan = 0;
+        }
+        return obj;
+      }
+    }, {
+      title: 'description from partner',
+      dataIndex: 'partnerStatus',
+      key: 'partnerStatus'
+    }, {
+      title: 'Time',
+      dataIndex: 'toDate',
+      key: 'toDate'
+    }],
+    dataSource: tableData
+  }));
+}
+TrackShipmentWidget.propTypes = {
+  awbNumber: _propTypes.default.string.isRequired,
+  errorReason: _propTypes.default.string,
+  partnerName: _propTypes.default.string,
+  fromAddress: _propTypes.default.shape({
+    heading: _propTypes.default.string,
+    addressLine1: _propTypes.default.string,
+    addressLine2: _propTypes.default.string,
+    addressLine3: _propTypes.default.string,
+    landmark: _propTypes.default.string,
+    pincode: _propTypes.default.string || _propTypes.default.number,
+    city: _propTypes.default.string,
+    state: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['permanent', 'temporary']),
+    additional_info: _propTypes.default.shape({
+      lat: _propTypes.default.string,
+      long: _propTypes.default.string
+    })
+  }),
+  tableData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    oneassistDisplayStatus: _propTypes.default.string,
+    partnerStatus: _propTypes.default.string,
+    toDate: _propTypes.default.string
+  })).isRequired,
+  title: _propTypes.default.string,
+  heading: _propTypes.default.string,
+  toAddress: _propTypes.default.shape({
+    heading: _propTypes.default.string,
+    addressLine1: _propTypes.default.string,
+    addressLine2: _propTypes.default.string,
+    addressLine3: _propTypes.default.string,
+    landmark: _propTypes.default.string,
+    pincode: _propTypes.default.string || _propTypes.default.number,
+    city: _propTypes.default.string,
+    state: _propTypes.default.string,
+    type: _propTypes.default.oneOf(['permanent', 'temporary']),
+    additional_info: _propTypes.default.shape({
+      lat: _propTypes.default.string,
+      long: _propTypes.default.string
+    })
+  })
+};
+TrackShipmentWidget.defaultProps = {
+  errorReason: '',
+  partnerName: '',
+  fromAddress: {
+    heading: ''
+  },
+  title: '',
+  heading: 'Shipment tracking details',
+  toAddress: {
+    heading: ''
+  }
+};
+var _default = exports.default = TrackShipmentWidget;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleTrackShipment = exports.AddressesContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyleTrackShipment = exports.StyleTrackShipment = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.cstScroll{\noverflow-y: hidden;\n    overflow-x: auto;\n}\n\n    .cstScroll::-webkit-scrollbar {\n  height: 4px; border-radius:2px;\n}\n.cstScroll::-webkit-scrollbar-track {\n  background: #f1f1f1; \n}\n.cstScroll::-webkit-scrollbar-thumb {\n  background: #888; border-radius:2px;\n}\n.cstScroll::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\np {\n  color: var(--color-primary-content);\n}\nh3{\n  color: var(--color-primary-content);\n  margin: 0 0 8px;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n  border-start-start-radius: 0;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n  border-start-end-radius: 0;\n}\n.comIcon{width:8px; height:8px; border-radius:50%; display: inline-block;\n    margin: 0 8px 0 0;}\n.ant-table-bordered th.ant-table-cell {\n  border-inline-end: none !important; \n}\n.greenBg{background:#00875A;}\n.redBg{background:#DE350B;}\n.greenBr{border:solid 2px #00875A;}\n.disFlex{display:flex;}\n.disFlex button{margin:0 0 0 8px;}\n  "])));
+const AddressesContainer = exports.AddressesContainer = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));

package/build/widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _fn = require("./fn");
+var _TrackShipmentWidget = _interopRequireDefault(require("../oa-widget-track-shipment/TrackShipmentWidget"));
+var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function TrackShipmentWidgetList(_ref) {
+  var _assignments$map;
+  let {
+    shipmentData,
+    onChange
+  } = _ref;
+  const assignments = (shipmentData === null || shipmentData === void 0 ? void 0 : shipmentData.assignments) || [];
+  if (assignments.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(shipmentData));
+  }
+  if (assignments.length === 1) {
+    return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(assignments[0]));
+  }
+  const lastReassignmentId = assignments && assignments.length > 0 ? assignments[assignments.length - 1].assignmentId || 0 : 0;
+  return assignments === null || assignments === void 0 || (_assignments$map = assignments.map) === null || _assignments$map === void 0 ? void 0 : _assignments$map.call(assignments, (item, index) => {
+    const {
+      assignmentId,
+      assignmentDate,
+      assignmentClosedTime,
+      status
+    } = item !== null && item !== void 0 ? item : {};
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "margin-bottom-16",
+      key: assignmentId
+    }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      defaultActiveKey: lastReassignmentId,
+      activeKey: assignmentId,
+      body: /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(item)),
+      headerText: (0, _fn.headerText)(index, assignmentDate, assignmentClosedTime, status)
+    }));
+  });
+}
+const HistoryPropType = _propTypes.default.shape({
+  shipmentStatus: _propTypes.default.string.isRequired,
+  fromDate: _propTypes.default.string.isRequired,
+  toDate: _propTypes.default.string.isRequired,
+  partnerStatus: _propTypes.default.string,
+  customerDisplayStatus: _propTypes.default.string.isRequired,
+  oneassistDisplayStatus: _propTypes.default.string.isRequired,
+  stageConsistent: _propTypes.default.bool.isRequired
+});
+const AssignmentPropType = _propTypes.default.shape({
+  assignmentDate: _propTypes.default.number.isRequired,
+  assignmentClosedTime: _propTypes.default.number.isRequired,
+  logisticPartnerName: _propTypes.default.string.isRequired,
+  assignmentId: _propTypes.default.number.isRequired,
+  logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  originAddressLine1: _propTypes.default.string.isRequired,
+  originDistrict: _propTypes.default.string.isRequired,
+  originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  destAddressLine1: _propTypes.default.string.isRequired,
+  destDistrict: _propTypes.default.string,
+  destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+  origAddressFullName: _propTypes.default.string.isRequired,
+  destAddressFullName: _propTypes.default.string.isRequired,
+  assignments: _propTypes.default.arrayOf(_propTypes.default.shape({
+    logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    originAddressLine1: _propTypes.default.string.isRequired,
+    originDistrict: _propTypes.default.string.isRequired,
+    originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    destAddressLine1: _propTypes.default.string.isRequired,
+    destDistrict: _propTypes.default.string,
+    destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+    origAddressFullName: _propTypes.default.string.isRequired,
+    destAddressFullName: _propTypes.default.string.isRequired,
+    assignments: _propTypes.default.array // Placeholder to break recursion
+  }))
+});
+TrackShipmentWidgetList.propTypes = {
+  shipmentData: _propTypes.default.shape({
+    logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    originAddressLine1: _propTypes.default.string.isRequired,
+    originDistrict: _propTypes.default.string.isRequired,
+    originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    destAddressLine1: _propTypes.default.string.isRequired,
+    destDistrict: _propTypes.default.string,
+    destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
+    origAddressFullName: _propTypes.default.string.isRequired,
+    destAddressFullName: _propTypes.default.string.isRequired,
+    assignments: _propTypes.default.arrayOf(AssignmentPropType)
+  }),
+  onChange: _propTypes.default.func
+};
+TrackShipmentWidgetList.defaultProps = {
+  shipmentData: {},
+  onChange: () => {}
+};
+var _default = exports.default = TrackShipmentWidgetList;

package/build/widgets/oa-widget-track-shipment-list/fn.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isActive = exports.headerText = exports.getSingleShipmentHistory = exports.getDateString = exports.getCurrentShipmentLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function numberToOrdinal(number) {
+  const suffixes = ['th', 'st', 'nd', 'rd'];
+  const value = number % 100;
+  const suffix = value >= 11 && value <= 13 ? suffixes[0] // 11th, 12th, 13th
+  : suffixes[number % 10] || suffixes[0]; // 1st, 2nd, 3rd, others
+  return "".concat(number).concat(suffix); // Use template literal correctly
+}
+const getDateFromEpoch = date => {
+  if (!date) {
+    return '';
+  }
+  const dateObj = new Date(date);
+  const day = dateObj.getDate();
+  const month = dateObj.getMonth();
+  const year = dateObj.getFullYear();
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return "".concat(day, " ").concat(months[month], " ").concat(year);
+};
+const getDateString = (startTime, endTime) => {
+  const startDate = getDateFromEpoch(startTime);
+  const endDate = getDateFromEpoch(endTime);
+  if (startDate === '' && endDate === '') {
+    return '';
+  }
+  if (endDate === '') {
+    return startDate;
+  }
+  return "".concat(startDate, " - ").concat(endDate);
+};
+exports.getDateString = getDateString;
+const getCurrentShipmentLabel = number => {
+  const ordinalNumber = numberToOrdinal(number);
+  return "".concat(ordinalNumber, " Shipment");
+};
+exports.getCurrentShipmentLabel = getCurrentShipmentLabel;
+const showNewLineChar = addressDetail => {
+  var _splitedAddress$map;
+  const splitedAddress = addressDetail === null || addressDetail === void 0 ? void 0 : addressDetail.split('\n');
+  if ((splitedAddress === null || splitedAddress === void 0 ? void 0 : splitedAddress.length) === 1) return addressDetail;
+  return (_splitedAddress$map = splitedAddress.map((title, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title, index === 0 && /*#__PURE__*/_react.default.createElement("br", null)))) !== null && _splitedAddress$map !== void 0 ? _splitedAddress$map : '';
+};
+const isActive = time => time === null;
+exports.isActive = isActive;
+const headerText = (index, reassignmentTime, modifiedTime, status) => "".concat(getCurrentShipmentLabel(index + 1), " | ").concat(getDateString(reassignmentTime, modifiedTime)).concat(isActive(modifiedTime) ? ' - Present' : '');
+exports.headerText = headerText;
+const getSingleShipmentHistory = item => {
+  var _item$history;
+  return {
+    partnerName: item === null || item === void 0 ? void 0 : item.logisticPartnerName,
+    errorReason: item === null || item === void 0 ? void 0 : item.failureReason,
+    awbNumber: item === null || item === void 0 ? void 0 : item.logisticPartnerRefNum,
+    fromAddress: {
+      heading: 'From Address:',
+      addressLine1: item === null || item === void 0 ? void 0 : item.origAddressFullName,
+      addressLine2: showNewLineChar(item === null || item === void 0 ? void 0 : item.originAddressLine1),
+      pincode: item === null || item === void 0 ? void 0 : item.originPincode,
+      city: item === null || item === void 0 ? void 0 : item.originDistrict,
+      landmark: item === null || item === void 0 ? void 0 : item.originLandmark,
+      state: item === null || item === void 0 ? void 0 : item.originState
+    },
+    toAddress: {
+      heading: 'To Address:',
+      addressLine1: item === null || item === void 0 ? void 0 : item.destAddressFullName,
+      addressLine2: showNewLineChar(item === null || item === void 0 ? void 0 : item.destAddressLine1),
+      pincode: item === null || item === void 0 ? void 0 : item.destPincode,
+      city: item === null || item === void 0 ? void 0 : item.destDistrict,
+      landmark: item === null || item === void 0 ? void 0 : item.destLandmark,
+      state: item === null || item === void 0 ? void 0 : item.destState
+    },
+    tableData: (_item$history = item === null || item === void 0 ? void 0 : item.history) !== null && _item$history !== void 0 ? _item$history : []
+  };
+};
+exports.getSingleShipmentHistory = getSingleShipmentHistory;

package/build/widgets/oa-widget-track-shipment-list/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleTrackShipment = exports.AddressesContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyleTrackShipment = exports.StyleTrackShipment = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.cstScroll{\noverflow-y: hidden;\n    overflow-x: auto;\n}\n\n    .cstScroll::-webkit-scrollbar {\n  height: 4px; border-radius:2px;\n}\n.cstScroll::-webkit-scrollbar-track {\n  background: #f1f1f1; \n}\n.cstScroll::-webkit-scrollbar-thumb {\n  background: #888; border-radius:2px;\n}\n.cstScroll::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\np {\n  color: var(--color-primary-content);\n}\nh3{\n  color: var(--color-primary-content);\n  margin: 0 0 8px;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n  border-start-start-radius: 0;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n  border-start-end-radius: 0;\n}\n.comIcon{width:8px; height:8px; border-radius:50%; display: inline-block;\n    margin: 0 8px 0 0;}\n.ant-table-bordered th.ant-table-cell {\n  border-inline-end: none !important; \n}\n.greenBg{background:#00875A;}\n.redBg{background:#DE350B;}\n.greenBr{border:solid 2px #00875A;}\n.disFlex{display:flex;}\n.disFlex button{margin:0 0 0 8px;}\n  "])));
+const AddressesContainer = exports.AddressesContainer = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  gap: 24px;\n  \n  margin: 24px 0 36px;\n"])));