oa-componentbook 0.18.277 → 0.18.278

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/components/oa-component-timeline/CustomTimeline.js +3 -10
  2. package/build/components/oa-component-timeline/styles.js +1 -1
  3. package/build/widgets/oa-widget-track-shipment/TrackShipmentWidget.js +110 -26
  4. package/build/widgets/oa-widget-track-shipment/styles.js +1 -1
  5. package/package.json +1 -1
package/build/components/oa-component-timeline/CustomTimeline.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- require("core-js/modules/es.symbol.description.js");
9
8
  var _react = _interopRequireDefault(require("react"));
10
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
10
  var _antd = require("antd");
@@ -22,13 +21,6 @@ function CustomTimeline(_ref) {
22
21
  currentStep
23
22
  } = _ref,
24
23
  props = _objectWithoutProperties(_ref, _excluded);
25
- const customDot = (dot, _ref2) => {
26
- let {
27
- description
28
- } = _ref2;
29
- return (description === null || description === void 0 ? void 0 : description.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Popover, null, dot) : dot;
30
- };
31
- const hasExactly3Items = (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) === 3;
32
24
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
33
25
  theme: {
34
26
  token: {
@@ -45,13 +37,14 @@ function CustomTimeline(_ref) {
45
37
  current: currentStep,
46
38
  labelPlacement: "vertical",
47
39
  items: stepsData,
48
- className: hasExactly3Items ? 'horizontalOnly' : ''
40
+ className: (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) === 3 ? 'horizontalOnly' : ''
49
41
  }, props))));
50
42
  }
51
43
  CustomTimeline.propTypes = {
52
44
  stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
53
45
  title: _propTypes.default.string.isRequired,
54
- description: _propTypes.default.string
46
+ description: _propTypes.default.string,
47
+ status: _propTypes.default.string
55
48
  })).isRequired,
56
49
  currentStep: _propTypes.default.number.isRequired
57
50
  };
package/build/components/oa-component-timeline/styles.js CHANGED
@@ -10,6 +10,6 @@ var _templateObject, _templateObject2;
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
11
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
12
  var _default = exports.default = {};
13
- const StyleTimeline = exports.StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-steps .ant-steps-item-icon {\n width: 24px;\n height: 24px;\n }\n .ant-steps-item-finish .ant-steps-item-icon{\n background-color: var(--color-positive);\n border-color: var(--color-positive);\n }\n .ant-steps.ant-steps-label-vertical .ant-steps-item-tail{ \n padding: 2px 8px;\n }\n \n .ant-steps .ant-steps-item-icon{\n line-height: 27px;\n }\n .ant-steps .ant-steps-item-error .ant-steps-item-icon {\n background-color: #fff;\n }\n .ant-steps .ant-steps-item-tail{\n top: 9px;\n }\n .ant-steps .ant-steps-item-finish .ant-steps-item-icon >.ant-steps-icon{\n color: #fff;\n font-size: 14px;\n }\n .ant-steps-item-process .ant-steps-item-icon{\n background-color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n .ant-steps-item-wait .ant-steps-item-icon{\n background-color: #fff;\n position: relative;\n border-color: var(--color-disabled-button);\n \n }\n .estimationDrawer .ant-steps-item-process .ant-steps-icon{\n display: block;\n width: 16px;\n height: 16px;\n vertical-align: middle;\n border: var(--color-positive) 1px solid;\n border-radius: 50%;\n }\n .ant-steps-item-content{\n margin-top: 8px !important;\n }\n .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon{\n top: -2px;\n }\n .ant-steps .ant-steps-item-title{\n line-height: 24px;\n }\n .ant-steps-item-wait .ant-steps-icon{\n visibility: hidden;\n\n }\n @media only screen and (max-width: 574px) {\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {\n width: 100%; \n height: 1px;\n }\n .ant-steps.horizontalOnly {\n display: flex;\n flex-direction: row;\n }\n .horizontalOnly .ant-steps-item-container{\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail{\n \n top: 12px; \n inset-inline-start: 15px;\n width: 100%;\n height: 1px; \n padding: 0;\n }\n }\n"])));
13
+ const StyleTimeline = exports.StyleTimeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-steps .ant-steps-item-icon {\n width: 24px;\n height: 24px;\n }\n .ant-steps-item-finish .ant-steps-item-icon{\n background-color: var(--color-positive);\n border-color: var(--color-positive);\n }\n\n \n .ant-steps.ant-steps-label-vertical .ant-steps-item-tail{ \n padding: 2px 8px;\n }\n \n .ant-steps .ant-steps-item-icon{\n line-height: 27px;\n }\n \n\n .ant-steps-item-error .ant-steps-item-icon{\n background-color: var(--color-negative);\n border-color: var(--color-negative);\n }\n\n .ant-steps .ant-steps-item-tail{\n top: 9px;\n }\n .ant-steps .ant-steps-item-finish .ant-steps-item-icon >.ant-steps-icon{\n color: #fff;\n font-size: 14px;\n }\n .ant-steps-item-process .ant-steps-item-icon{\n background-color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n .ant-steps-item-wait .ant-steps-item-icon{\n background-color: #fff;\n position: relative;\n border-color: var(--color-disabled-button);\n \n }\n .estimationDrawer .ant-steps-item-process .ant-steps-icon{\n display: block;\n width: 16px;\n height: 16px;\n vertical-align: middle;\n border: var(--color-positive) 1px solid;\n border-radius: 50%;\n }\n .ant-steps-item-content{\n margin-top: 8px !important;\n }\n .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon{\n top: -2px;\n }\n .ant-steps .ant-steps-item-title{\n line-height: 24px;\n }\n .ant-steps-item-wait .ant-steps-icon{\n visibility: hidden;\n\n }\n @media only screen and (max-width: 574px) {\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {\n width: 100%; \n height: 1px;\n }\n .ant-steps.horizontalOnly {\n display: flex;\n flex-direction: row;\n }\n .horizontalOnly .ant-steps-item-container{\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n .ant-steps.horizontalOnly >.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail{\n \n top: 12px; \n inset-inline-start: 15px;\n width: 100%;\n height: 1px; \n padding: 0;\n }\n }\n"])));
14
14
  const CustomSteps = exports.CustomSteps = (0, _styledComponents.default)(_antd.Steps)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n \n"])));
15
15
  CustomSteps.Step = _antd.Steps.Step;
package/build/widgets/oa-widget-track-shipment/TrackShipmentWidget.js CHANGED
@@ -1,54 +1,140 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/es.weak-map.js");
4
+ require("core-js/modules/web.dom-collections.iterator.js");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
9
+ var _react = _interopRequireWildcard(require("react"));
8
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
+ var _FileCopyOutlined = _interopRequireDefault(require("@material-ui/icons/FileCopyOutlined"));
9
12
  var _AddressWidget = _interopRequireDefault(require("../oa-widget-address/AddressWidget"));
10
13
  var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
11
14
  var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
12
- var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
15
+ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
13
16
  var _styles = require("./styles");
17
+ var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
14
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+ 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); }
20
+ 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; }
15
21
  function TrackShipmentWidget(_ref) {
22
+ var _tableData, _tableData2;
16
23
  let {
17
24
  awbNumber,
18
- currentStep,
19
- stepsData,
20
25
  fromAddress,
21
26
  tableData,
22
27
  title,
23
- toAddress
28
+ toAddress,
29
+ heading
24
30
  } = _ref;
31
+ // local variables
32
+ const deilveryStageText = 'SHIPMENT DELIVERED to Customer';
33
+
34
+ // show notification when user click on clipboard
35
+ const notificationRef = (0, _react.useRef)(null);
36
+ const openNotification = parameters => {
37
+ var _notificationRef$curr;
38
+ return notificationRef === null || notificationRef === void 0 || (_notificationRef$curr = notificationRef.current) === null || _notificationRef$curr === void 0 ? void 0 : _notificationRef$curr.openNotification(parameters);
39
+ };
40
+ const handleCopyToClipboard = () => {
41
+ navigator.clipboard.writeText(awbNumber).then(() => {
42
+ openNotification({
43
+ description: 'Copy to clipboard',
44
+ type: 'success'
45
+ });
46
+ }).catch(err => {
47
+ openNotification({
48
+ description: 'Failed to copy text',
49
+ type: 'failure'
50
+ });
51
+ });
52
+ };
53
+
54
+ // return circle color depands on stageConsistent key coming from backend
55
+ const getCircleClass = (row, isTimeLineStep) => {
56
+ if (row.stageConsistent) {
57
+ return isTimeLineStep ? 'finish' : 'greenBg';
58
+ }
59
+ if (row.toDate === null && row.oneassistDisplayStatus === deilveryStageText) {
60
+ return isTimeLineStep ? 'process' : 'greenBr';
61
+ }
62
+ return isTimeLineStep ? 'error' : 'redBg';
63
+ };
64
+
65
+ // check if current stage is delivery stage or not
66
+ 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;
67
+
68
+ // remove duplicate consicutive objects only show single unique objects
69
+ const stepsData = tableData.map(item => ({
70
+ title: item.oneassistDisplayStatus,
71
+ status: getCircleClass(item, true)
72
+ })).filter((item, index) => {
73
+ var _tableData3;
74
+ return item.title !== ((_tableData3 = tableData[index - 1]) === null || _tableData3 === void 0 ? void 0 : _tableData3.oneassistDisplayStatus);
75
+ });
25
76
  return /*#__PURE__*/_react.default.createElement(_styles.StyleTrackShipment, {
26
77
  className: "trackingDetails"
27
- }, title && /*#__PURE__*/_react.default.createElement("h1", {
78
+ }, /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
79
+ ref: notificationRef
80
+ }), title ? /*#__PURE__*/_react.default.createElement("h1", {
28
81
  className: "type-t1-500"
29
- }, title), /*#__PURE__*/_react.default.createElement("h3", {
82
+ }, title) : null, /*#__PURE__*/_react.default.createElement("h3", {
30
83
  className: "type-t1-500"
31
- }, "Shipment tracking details"), /*#__PURE__*/_react.default.createElement("p", {
32
- className: "type-b2-400"
33
- }, "AWB Number:", ' ', awbNumber), /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
84
+ }, heading), /*#__PURE__*/_react.default.createElement("p", {
85
+ className: "type-b2-400 disFlex"
86
+ }, "AWB Number:", awbNumber, awbNumber && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
87
+ icon: _FileCopyOutlined.default,
88
+ size: 20,
89
+ onClick: handleCopyToClipboard,
90
+ style: {
91
+ cursor: 'pointer',
92
+ color: '014FC5'
93
+ }
94
+ })), /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
34
95
  address: fromAddress
35
96
  }), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
36
97
  address: toAddress
37
- })), /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
38
- currentStep: currentStep,
98
+ })), /*#__PURE__*/_react.default.createElement("div", {
99
+ className: "cstScroll"
100
+ }, /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
101
+ currentStep: isOnDeliveryStage ? stepsData.length : stepsData.length - 1,
39
102
  stepsData: stepsData
40
- }), /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
103
+ })), /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
104
+ bordered: true,
41
105
  rowKey: "key",
42
106
  columns: [{
43
107
  title: 'Stage',
44
- dataIndex: 'shipmentStatus',
45
- key: 'shipmentStatus'
108
+ dataIndex: 'oneassistDisplayStatus',
109
+ key: 'oneassistDisplayStatus',
110
+ render: (text, row, index) => {
111
+ const obj = {
112
+ children: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("em", {
113
+ className: "comIcon ".concat(getCircleClass(row))
114
+ }), text),
115
+ props: {}
116
+ };
117
+ if (index === 0 || tableData[index - 1].oneassistDisplayStatus !== text) {
118
+ let rowSpanCount = 1;
119
+ for (let i = index + 1; i < tableData.length; i += 1) {
120
+ if (tableData[i].oneassistDisplayStatus === text) {
121
+ rowSpanCount += 1;
122
+ } else {
123
+ break;
124
+ }
125
+ }
126
+ obj.props.rowSpan = rowSpanCount;
127
+ } else {
128
+ obj.props.rowSpan = 0;
129
+ }
130
+ return obj;
131
+ }
46
132
  }, {
47
- title: 'Start Time',
48
- dataIndex: 'fromDate',
49
- key: 'fromDate'
133
+ title: 'description from partner',
134
+ dataIndex: 'partnerStatus',
135
+ key: 'partnerStatus'
50
136
  }, {
51
- title: 'End Time',
137
+ title: 'Time',
52
138
  dataIndex: 'toDate',
53
139
  key: 'toDate'
54
140
  }],
@@ -57,10 +143,6 @@ function TrackShipmentWidget(_ref) {
57
143
  }
58
144
  TrackShipmentWidget.propTypes = {
59
145
  awbNumber: _propTypes.default.string.isRequired,
60
- currentStep: _propTypes.default.number.isRequired,
61
- stepsData: _propTypes.default.arrayOf(_propTypes.default.shape({
62
- title: _propTypes.default.string.isRequired
63
- })).isRequired,
64
146
  fromAddress: _propTypes.default.shape({
65
147
  heading: _propTypes.default.string,
66
148
  addressLine1: _propTypes.default.string,
@@ -78,11 +160,12 @@ TrackShipmentWidget.propTypes = {
78
160
  }),
79
161
  tableData: _propTypes.default.arrayOf(_propTypes.default.shape({
80
162
  key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
81
- fromDate: _propTypes.default.string,
82
- toDate: _propTypes.default.string,
83
- shipmentStatus: _propTypes.default.string
163
+ oneassistDisplayStatus: _propTypes.default.string,
164
+ partnerStatus: _propTypes.default.string,
165
+ toDate: _propTypes.default.string
84
166
  })).isRequired,
85
167
  title: _propTypes.default.string,
168
+ heading: _propTypes.default.string,
86
169
  toAddress: _propTypes.default.shape({
87
170
  heading: _propTypes.default.string,
88
171
  addressLine1: _propTypes.default.string,
@@ -104,6 +187,7 @@ TrackShipmentWidget.defaultProps = {
104
187
  heading: ''
105
188
  },
106
189
  title: '',
190
+ heading: 'Shipment tracking details',
107
191
  toAddress: {
108
192
  heading: ''
109
193
  }
package/build/widgets/oa-widget-track-shipment/styles.js CHANGED
@@ -9,5 +9,5 @@ var _templateObject, _templateObject2;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
11
  var _default = exports.default = {};
12
- const StyleTrackShipment = exports.StyleTrackShipment = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 "])));
12
+ const StyleTrackShipment = exports.StyleTrackShipment = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.cstScroll{\noverflow-y: hidden;\n overflow-x: scroll;\n margin: 0 12px 24px 12px;\n padding-bottom:8px;\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}\n\n\n "])));
13
13
  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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.277",
3
+ "version": "0.18.278",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",