oa-componentbook 1.0.1-stage.44 → 1.0.1-stage.45
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.
- package/build/components/oa-component-accordion/Accordion.js +5 -16
- package/build/components/oa-component-info/CustomInfo.js +4 -9
- package/build/components/oa-component-info/styles.js +3 -3
- package/build/dev/oa-widget-track-shipment/TrackShipmentWidget.js +195 -0
- package/build/index.js +10 -3
- package/build/widgets/oa-widget-image-carousel/ImageCarouselWidget.js +230 -0
- package/build/widgets/oa-widget-image-carousel/styles.js +12 -0
- package/build/widgets/oa-widget-track-shipment/TrackShipmentWidget.js +6 -28
- package/package.json +2 -2
- package/build/widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList.js +0 -103
- package/build/widgets/oa-widget-track-shipment-list/fn.js +0 -69
- /package/build/{widgets/oa-widget-track-shipment-list → dev/oa-widget-track-shipment}/styles.js +0 -0
|
@@ -45,8 +45,6 @@ CollapseIcon.propTypes = {
|
|
|
45
45
|
* @param {string | number} [key] - Key to be used for the collapsible panel.
|
|
46
46
|
* @param {string | number} [defaultActiveKey] - Key of the collapsible panel that should be active by default.
|
|
47
47
|
* @param {boolean} [hasContentPadding=true] - Whether to apply content padding to the collapsible panel or not.
|
|
48
|
-
* @param {Function} [onChange=() => {}] - Function to be called when the panel is expanded or collapsed.
|
|
49
|
-
* @param {string | number} [activeKey] - Key of the collapsible panel that is currently active.
|
|
50
48
|
*/
|
|
51
49
|
function Accordion(_ref2) {
|
|
52
50
|
let {
|
|
@@ -57,10 +55,7 @@ function Accordion(_ref2) {
|
|
|
57
55
|
smallText,
|
|
58
56
|
key,
|
|
59
57
|
defaultActiveKey,
|
|
60
|
-
hasContentPadding
|
|
61
|
-
// New prop to determine whether to apply contentPadding
|
|
62
|
-
onChange,
|
|
63
|
-
activeKey
|
|
58
|
+
hasContentPadding // New prop to determine whether to apply contentPadding
|
|
64
59
|
} = _ref2;
|
|
65
60
|
const themeConfig = {
|
|
66
61
|
components: {
|
|
@@ -75,12 +70,11 @@ function Accordion(_ref2) {
|
|
|
75
70
|
}, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
|
|
76
71
|
expandIcon: CollapseIcon,
|
|
77
72
|
expandIconPosition: "end",
|
|
78
|
-
defaultActiveKey: disabled ? '-1' : defaultActiveKey
|
|
79
|
-
onChange: onChange
|
|
73
|
+
defaultActiveKey: disabled ? '-1' : defaultActiveKey
|
|
80
74
|
}, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
|
|
81
75
|
"data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
|
|
82
76
|
collapsible: disabled ? 'disabled' : undefined,
|
|
83
|
-
key:
|
|
77
|
+
key: key,
|
|
84
78
|
header: /*#__PURE__*/_react.default.createElement("div", {
|
|
85
79
|
"data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
|
|
86
80
|
className: "type-button-500"
|
|
@@ -98,9 +92,7 @@ Accordion.propTypes = {
|
|
|
98
92
|
hasContentPadding: _propTypes.default.bool,
|
|
99
93
|
// New prop for controlling contentPadding
|
|
100
94
|
key: _propTypes.default.string,
|
|
101
|
-
defaultActiveKey: _propTypes.default.string
|
|
102
|
-
onChange: _propTypes.default.func,
|
|
103
|
-
activeKey: _propTypes.default.string || _propTypes.default.number
|
|
95
|
+
defaultActiveKey: _propTypes.default.string
|
|
104
96
|
};
|
|
105
97
|
Accordion.defaultProps = {
|
|
106
98
|
body: '',
|
|
@@ -109,9 +101,6 @@ Accordion.defaultProps = {
|
|
|
109
101
|
smallText: '',
|
|
110
102
|
key: '1',
|
|
111
103
|
defaultActiveKey: '1',
|
|
112
|
-
hasContentPadding: true
|
|
113
|
-
// Default value for contentPadding
|
|
114
|
-
onChange: () => {},
|
|
115
|
-
activeKey: null
|
|
104
|
+
hasContentPadding: true // Default value for contentPadding
|
|
116
105
|
};
|
|
117
106
|
var _default = exports.default = Accordion;
|
|
@@ -27,7 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
27
27
|
* @param {string} fontColor - The color of the text.
|
|
28
28
|
* @param {object} iconConfig - Configuration for the icon.
|
|
29
29
|
* @param {string} title - The title to be displayed.
|
|
30
|
-
* @param {string} borderColor - The border color of the component.
|
|
31
30
|
*
|
|
32
31
|
* @returns {ReactElement} A styled component with the specified properties.
|
|
33
32
|
*/
|
|
@@ -38,8 +37,7 @@ function CustomInfo(_ref) {
|
|
|
38
37
|
description,
|
|
39
38
|
fontColor,
|
|
40
39
|
iconConfig,
|
|
41
|
-
title
|
|
42
|
-
borderColor
|
|
40
|
+
title
|
|
43
41
|
} = _ref;
|
|
44
42
|
/**
|
|
45
43
|
* Renders the icon based on the presence of a title.
|
|
@@ -67,8 +65,7 @@ function CustomInfo(_ref) {
|
|
|
67
65
|
}, renderIcon()) : renderIcon();
|
|
68
66
|
};
|
|
69
67
|
return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
|
|
70
|
-
$color: color
|
|
71
|
-
$borderColor: borderColor
|
|
68
|
+
$color: color
|
|
72
69
|
}, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
73
70
|
color: fontColor,
|
|
74
71
|
typography: "type-t2-700"
|
|
@@ -99,8 +96,7 @@ CustomInfo.propTypes = {
|
|
|
99
96
|
position: _propTypes.default.oneOf(['left', 'right']),
|
|
100
97
|
tooltipText: _propTypes.default.string
|
|
101
98
|
}),
|
|
102
|
-
title: _propTypes.default.string
|
|
103
|
-
borderColor: _propTypes.default.string
|
|
99
|
+
title: _propTypes.default.string
|
|
104
100
|
};
|
|
105
101
|
CustomInfo.defaultProps = {
|
|
106
102
|
buttonConfig: {
|
|
@@ -114,6 +110,5 @@ CustomInfo.defaultProps = {
|
|
|
114
110
|
},
|
|
115
111
|
fontColor: 'primary-content',
|
|
116
112
|
title: '',
|
|
117
|
-
description: ''
|
|
118
|
-
borderColor: ''
|
|
113
|
+
description: ''
|
|
119
114
|
};
|
|
@@ -8,8 +8,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
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
|
-
const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
12
|
-
const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
11
|
+
const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
12
|
+
const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
13
13
|
const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
|
|
14
14
|
as: 'section'
|
|
15
|
-
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 12px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n
|
|
15
|
+
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 12px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n \n button {\n margin-left: 8px;\n };\n"])), props => props.$color);
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _FileCopyOutlined = _interopRequireDefault(require("@material-ui/icons/FileCopyOutlined"));
|
|
12
|
+
var _AddressWidget = _interopRequireDefault(require("../../widgets/oa-widget-address/AddressWidget"));
|
|
13
|
+
var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
|
|
14
|
+
var _CustomTimeline = _interopRequireDefault(require("../oa-component-timeline/CustomTimeline"));
|
|
15
|
+
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
|
|
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; }
|
|
21
|
+
function TrackShipmentWidget(_ref) {
|
|
22
|
+
var _tableData, _tableData2;
|
|
23
|
+
let {
|
|
24
|
+
awbNumber,
|
|
25
|
+
fromAddress,
|
|
26
|
+
tableData,
|
|
27
|
+
title,
|
|
28
|
+
toAddress,
|
|
29
|
+
heading
|
|
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
|
+
});
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_styles.StyleTrackShipment, {
|
|
77
|
+
className: "trackingDetails"
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
|
|
79
|
+
ref: notificationRef
|
|
80
|
+
}), title ? /*#__PURE__*/_react.default.createElement("h1", {
|
|
81
|
+
className: "type-t1-500"
|
|
82
|
+
}, title) : null, /*#__PURE__*/_react.default.createElement("h3", {
|
|
83
|
+
className: "type-t1-500"
|
|
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, {
|
|
95
|
+
address: fromAddress
|
|
96
|
+
}), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
97
|
+
address: toAddress
|
|
98
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
99
|
+
className: "cstScroll"
|
|
100
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
|
|
101
|
+
currentStep: isOnDeliveryStage ? stepsData.length : stepsData.length - 1,
|
|
102
|
+
stepsData: stepsData
|
|
103
|
+
})), /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
|
|
104
|
+
bordered: true,
|
|
105
|
+
rowKey: "key",
|
|
106
|
+
columns: [{
|
|
107
|
+
title: 'Stage',
|
|
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
|
+
}
|
|
132
|
+
}, {
|
|
133
|
+
title: 'description from partner',
|
|
134
|
+
dataIndex: 'partnerStatus',
|
|
135
|
+
key: 'partnerStatus'
|
|
136
|
+
}, {
|
|
137
|
+
title: 'Time',
|
|
138
|
+
dataIndex: 'toDate',
|
|
139
|
+
key: 'toDate'
|
|
140
|
+
}],
|
|
141
|
+
dataSource: tableData
|
|
142
|
+
}));
|
|
143
|
+
}
|
|
144
|
+
TrackShipmentWidget.propTypes = {
|
|
145
|
+
awbNumber: _propTypes.default.string.isRequired,
|
|
146
|
+
fromAddress: _propTypes.default.shape({
|
|
147
|
+
heading: _propTypes.default.string,
|
|
148
|
+
addressLine1: _propTypes.default.string,
|
|
149
|
+
addressLine2: _propTypes.default.string,
|
|
150
|
+
addressLine3: _propTypes.default.string,
|
|
151
|
+
landmark: _propTypes.default.string,
|
|
152
|
+
pincode: _propTypes.default.string || _propTypes.default.number,
|
|
153
|
+
city: _propTypes.default.string,
|
|
154
|
+
state: _propTypes.default.string,
|
|
155
|
+
type: _propTypes.default.oneOf(['permanent', 'temporary']),
|
|
156
|
+
additional_info: _propTypes.default.shape({
|
|
157
|
+
lat: _propTypes.default.string,
|
|
158
|
+
long: _propTypes.default.string
|
|
159
|
+
})
|
|
160
|
+
}),
|
|
161
|
+
tableData: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
162
|
+
key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
163
|
+
oneassistDisplayStatus: _propTypes.default.string,
|
|
164
|
+
partnerStatus: _propTypes.default.string,
|
|
165
|
+
toDate: _propTypes.default.string
|
|
166
|
+
})).isRequired,
|
|
167
|
+
title: _propTypes.default.string,
|
|
168
|
+
heading: _propTypes.default.string,
|
|
169
|
+
toAddress: _propTypes.default.shape({
|
|
170
|
+
heading: _propTypes.default.string,
|
|
171
|
+
addressLine1: _propTypes.default.string,
|
|
172
|
+
addressLine2: _propTypes.default.string,
|
|
173
|
+
addressLine3: _propTypes.default.string,
|
|
174
|
+
landmark: _propTypes.default.string,
|
|
175
|
+
pincode: _propTypes.default.string || _propTypes.default.number,
|
|
176
|
+
city: _propTypes.default.string,
|
|
177
|
+
state: _propTypes.default.string,
|
|
178
|
+
type: _propTypes.default.oneOf(['permanent', 'temporary']),
|
|
179
|
+
additional_info: _propTypes.default.shape({
|
|
180
|
+
lat: _propTypes.default.string,
|
|
181
|
+
long: _propTypes.default.string
|
|
182
|
+
})
|
|
183
|
+
})
|
|
184
|
+
};
|
|
185
|
+
TrackShipmentWidget.defaultProps = {
|
|
186
|
+
fromAddress: {
|
|
187
|
+
heading: ''
|
|
188
|
+
},
|
|
189
|
+
title: '',
|
|
190
|
+
heading: 'Shipment tracking details',
|
|
191
|
+
toAddress: {
|
|
192
|
+
heading: ''
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
var _default = exports.default = TrackShipmentWidget;
|
package/build/index.js
CHANGED
|
@@ -353,6 +353,12 @@ Object.defineProperty(exports, "GridLayout", {
|
|
|
353
353
|
return _GridLayout.default;
|
|
354
354
|
}
|
|
355
355
|
});
|
|
356
|
+
Object.defineProperty(exports, "ImageCarouselWidget", {
|
|
357
|
+
enumerable: true,
|
|
358
|
+
get: function get() {
|
|
359
|
+
return _ImageCarouselWidget.default;
|
|
360
|
+
}
|
|
361
|
+
});
|
|
356
362
|
Object.defineProperty(exports, "KeyValueWidget", {
|
|
357
363
|
enumerable: true,
|
|
358
364
|
get: function get() {
|
|
@@ -497,10 +503,10 @@ Object.defineProperty(exports, "TrackShipmentWidget", {
|
|
|
497
503
|
return _TrackShipmentWidget.default;
|
|
498
504
|
}
|
|
499
505
|
});
|
|
500
|
-
Object.defineProperty(exports, "
|
|
506
|
+
Object.defineProperty(exports, "TrackShipmentWidgetDev", {
|
|
501
507
|
enumerable: true,
|
|
502
508
|
get: function get() {
|
|
503
|
-
return
|
|
509
|
+
return _TrackShipmentWidget2.default;
|
|
504
510
|
}
|
|
505
511
|
});
|
|
506
512
|
Object.defineProperty(exports, "Typographies", {
|
|
@@ -622,7 +628,6 @@ var _SparePartsWidget = _interopRequireDefault(require("./widgets/oa-widget-spar
|
|
|
622
628
|
var _SparePartsCollapseWidget = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePartsCollapseWidget"));
|
|
623
629
|
var _StageTimelineWidget = _interopRequireWildcard(require("./widgets/oa-widget-stage-timeline/StageTimelineWidget"));
|
|
624
630
|
var _TrackShipmentWidget = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipmentWidget"));
|
|
625
|
-
var _TrackShipmentWidgetList = _interopRequireDefault(require("./widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList"));
|
|
626
631
|
var _UploadDownloadWidget = _interopRequireDefault(require("./widgets/oa-widget-upload-download/UploadDownloadWidget"));
|
|
627
632
|
var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-view-history/ViewHistoryWidget"));
|
|
628
633
|
var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
|
|
@@ -633,6 +638,7 @@ var _ServiceCard = _interopRequireDefault(require("./widgets/oa-widget-serviceca
|
|
|
633
638
|
var _CustomProgressBar = _interopRequireDefault(require("./components/oa-component-progress-bar/CustomProgressBar"));
|
|
634
639
|
var _CustomHeaderWidget = _interopRequireDefault(require("./widgets/oa-widget-header/CustomHeaderWidget"));
|
|
635
640
|
var _CustomPinPatternCaptureWidget = _interopRequireDefault(require("./widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget"));
|
|
641
|
+
var _ImageCarouselWidget = _interopRequireDefault(require("./widgets/oa-widget-image-carousel/ImageCarouselWidget"));
|
|
636
642
|
var _CustomFormWidget = _interopRequireDefault(require("./widgets/oa-widget-form/CustomFormWidget"));
|
|
637
643
|
var _DateDropDown = _interopRequireDefault(require("./widgets/oa-widget-date-dropdown/DateDropDown"));
|
|
638
644
|
var _CustomRating = _interopRequireDefault(require("./components/oa-component-rating/CustomRating"));
|
|
@@ -643,6 +649,7 @@ var _Preview = _interopRequireDefault(require("./widgets/oa-widget-preview/Previ
|
|
|
643
649
|
var _PincodeBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-pincode-base-location/PincodeBaseLocation"));
|
|
644
650
|
var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-base-location/MapBaseLocation"));
|
|
645
651
|
var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
|
|
652
|
+
var _TrackShipmentWidget2 = _interopRequireDefault(require("./dev/oa-widget-track-shipment/TrackShipmentWidget"));
|
|
646
653
|
var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
|
|
647
654
|
var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
|
|
648
655
|
var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.symbol.description.js");
|
|
4
|
+
require("core-js/modules/es.weak-map.js");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
10
|
+
require("core-js/modules/es.promise.js");
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
var _antd = require("antd");
|
|
14
|
+
var _icons = require("@ant-design/icons");
|
|
15
|
+
var _reactZoomPanPinch = require("react-zoom-pan-pinch");
|
|
16
|
+
var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));
|
|
17
|
+
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
18
|
+
var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
|
|
19
|
+
var _styles = require("./styles");
|
|
20
|
+
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
21
|
+
var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
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); }
|
|
24
|
+
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; }
|
|
25
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
28
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
29
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
30
|
+
/**
|
|
31
|
+
* ImageCarouselWidget is a component that displays images in a carousel and allows zooming and switching between original and heatmap images.
|
|
32
|
+
* @param {object} props The props passed to the component
|
|
33
|
+
* @param {array} [props.images={}] An object with keys representing image types and values as arrays of images
|
|
34
|
+
* @param {boolean} [props.visible=false] Whether the modal is visible
|
|
35
|
+
* @param {function} [props.onClose] A function that is called when the modal is closed
|
|
36
|
+
* @returns {object} A React component
|
|
37
|
+
*/
|
|
38
|
+
function ImageCarouselWidget(_ref) {
|
|
39
|
+
let {
|
|
40
|
+
images = [],
|
|
41
|
+
visible,
|
|
42
|
+
onClose,
|
|
43
|
+
headingSuffixText,
|
|
44
|
+
typeToNamemapping,
|
|
45
|
+
s3DownloadApiUrl
|
|
46
|
+
} = _ref;
|
|
47
|
+
const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
|
|
48
|
+
const [showHeatmap, setShowHeatmap] = (0, _react.useState)(false);
|
|
49
|
+
const [fullscreen, setFullscreen] = (0, _react.useState)(false);
|
|
50
|
+
const [imageUrls, setImageUrls] = (0, _react.useState)([]);
|
|
51
|
+
const [loading, setLoading] = (0, _react.useState)(false);
|
|
52
|
+
|
|
53
|
+
// Fetch image URL by UUID
|
|
54
|
+
const fetchImageUrl = uuid => fetch("".concat(s3DownloadApiUrl).concat(uuid)).then(response => response.json()).then(data => {
|
|
55
|
+
var _data$data;
|
|
56
|
+
return data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.downloadUrl;
|
|
57
|
+
}) // Assuming the API response has `src` key for the image URL
|
|
58
|
+
.catch(error => {
|
|
59
|
+
console.error('Error fetching image URL:', error);
|
|
60
|
+
return ''; // Return an empty string if there's an error
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
// Fetch image URLs for all grouped images
|
|
64
|
+
(0, _react.useEffect)(() => {
|
|
65
|
+
const fetchImages = async () => {
|
|
66
|
+
setLoading(true);
|
|
67
|
+
const urls = await Promise.all(images.map(async img => {
|
|
68
|
+
const originalUrl = await fetchImageUrl(img.originalDocId); // Fetch URL for the original image
|
|
69
|
+
return _objectSpread(_objectSpread({}, img), {}, {
|
|
70
|
+
originalImageUrl: originalUrl,
|
|
71
|
+
// Add the original image URL to the object
|
|
72
|
+
heatmapImageUrl: '' // Set heatmap image URL as empty initially
|
|
73
|
+
});
|
|
74
|
+
}));
|
|
75
|
+
console.log(urls);
|
|
76
|
+
setImageUrls(urls);
|
|
77
|
+
setLoading(false);
|
|
78
|
+
};
|
|
79
|
+
fetchImages();
|
|
80
|
+
}, [images === null || images === void 0 ? void 0 : images.length]);
|
|
81
|
+
|
|
82
|
+
// Enter fullscreen for the whole document
|
|
83
|
+
const enterFullscreen = () => {
|
|
84
|
+
if (document.documentElement.requestFullscreen) {
|
|
85
|
+
document.documentElement.requestFullscreen();
|
|
86
|
+
} else if (document.documentElement.mozRequestFullScreen) {
|
|
87
|
+
// Firefox
|
|
88
|
+
document.documentElement.mozRequestFullScreen();
|
|
89
|
+
} else if (document.documentElement.webkitRequestFullscreen) {
|
|
90
|
+
// Chrome, Safari, Opera
|
|
91
|
+
document.documentElement.webkitRequestFullscreen();
|
|
92
|
+
} else if (document.documentElement.msRequestFullscreen) {
|
|
93
|
+
// IE/Edge
|
|
94
|
+
document.documentElement.msRequestFullscreen();
|
|
95
|
+
}
|
|
96
|
+
setFullscreen(true);
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
// Exit fullscreen
|
|
100
|
+
const exitFullscreen = () => {
|
|
101
|
+
if (document.exitFullscreen) {
|
|
102
|
+
document.exitFullscreen();
|
|
103
|
+
} else if (document.mozCancelFullScreen) {
|
|
104
|
+
// Firefox
|
|
105
|
+
document.mozCancelFullScreen();
|
|
106
|
+
} else if (document.webkitExitFullscreen) {
|
|
107
|
+
// Chrome, Safari and Opera
|
|
108
|
+
document.webkitExitFullscreen();
|
|
109
|
+
} else if (document.msExitFullscreen) {
|
|
110
|
+
// IE/Edge
|
|
111
|
+
document.msExitFullscreen();
|
|
112
|
+
}
|
|
113
|
+
setFullscreen(false);
|
|
114
|
+
};
|
|
115
|
+
const handleFullscreenToggle = () => {
|
|
116
|
+
if (fullscreen) {
|
|
117
|
+
exitFullscreen();
|
|
118
|
+
} else {
|
|
119
|
+
enterFullscreen();
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
const handleImageChange = newIndex => {
|
|
123
|
+
setCurrentIndex(newIndex);
|
|
124
|
+
};
|
|
125
|
+
const handleShowHeatmap = async () => {
|
|
126
|
+
const currentViewType = !showHeatmap; // Toggle the current view mode (show heatmap or not)
|
|
127
|
+
setLoading(true);
|
|
128
|
+
|
|
129
|
+
// Fetching URLs for all images based on the new view mode
|
|
130
|
+
const updatedImages = await Promise.all(imageUrls.map(async img => {
|
|
131
|
+
var _img$heatmapImageUrl, _img$originalImageUrl;
|
|
132
|
+
// Check if the image is already fetched
|
|
133
|
+
const isImageAlreadyFetched = currentViewType && ((_img$heatmapImageUrl = img.heatmapImageUrl) === null || _img$heatmapImageUrl === void 0 ? void 0 : _img$heatmapImageUrl.length) > 0 || !currentViewType && ((_img$originalImageUrl = img.originalImageUrl) === null || _img$originalImageUrl === void 0 ? void 0 : _img$originalImageUrl.length) > 0;
|
|
134
|
+
// Fetch the image URL only if it's not already fetched
|
|
135
|
+
if (!isImageAlreadyFetched) {
|
|
136
|
+
const imageSrcUrl = await fetchImageUrl(currentViewType ? img.heatmapDocId : img.originalDocId);
|
|
137
|
+
// Return the updated image object with the appropriate URL
|
|
138
|
+
return _objectSpread(_objectSpread({}, img), currentViewType ? {
|
|
139
|
+
heatmapImageUrl: imageSrcUrl
|
|
140
|
+
} : {
|
|
141
|
+
originalImageUrl: imageSrcUrl
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
// If image is already fetched, return it as is
|
|
145
|
+
return img;
|
|
146
|
+
}));
|
|
147
|
+
|
|
148
|
+
// Update state with the new image URLs
|
|
149
|
+
setImageUrls(updatedImages);
|
|
150
|
+
setLoading(false);
|
|
151
|
+
setShowHeatmap(currentViewType); // Toggle the view mode
|
|
152
|
+
};
|
|
153
|
+
const currentImage = imageUrls[currentIndex];
|
|
154
|
+
return /*#__PURE__*/_react.default.createElement(_styles.ImageCarouselWidgetStyle, null, /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
155
|
+
open: visible,
|
|
156
|
+
onCancel: onClose,
|
|
157
|
+
footer: null,
|
|
158
|
+
className: fullscreen ? 'fullscreen-modal' : ''
|
|
159
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
|
|
160
|
+
spinning: loading
|
|
161
|
+
}, !fullscreen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
162
|
+
style: {
|
|
163
|
+
textAlign: 'center',
|
|
164
|
+
fontSize: 18,
|
|
165
|
+
fontWeight: 'bold'
|
|
166
|
+
}
|
|
167
|
+
}, typeToNamemapping && typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] ? typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] : currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType, ' ', headingSuffixText), /*#__PURE__*/_react.default.createElement("p", {
|
|
168
|
+
style: {
|
|
169
|
+
color: 'red',
|
|
170
|
+
textAlign: 'center'
|
|
171
|
+
}
|
|
172
|
+
}, currentImage === null || currentImage === void 0 ? void 0 : currentImage.rejectReason), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
173
|
+
onClick: handleShowHeatmap,
|
|
174
|
+
type: "text-only",
|
|
175
|
+
label: showHeatmap ? 'View Original Image' : 'View Heatmap Image'
|
|
176
|
+
}), /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
|
|
177
|
+
afterChange: handleImageChange,
|
|
178
|
+
dots: true,
|
|
179
|
+
infinite: true
|
|
180
|
+
}, imageUrls.map(img => /*#__PURE__*/_react.default.createElement("div", {
|
|
181
|
+
key: img.imageType
|
|
182
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
183
|
+
icon: _Fullscreen.default,
|
|
184
|
+
onClick: handleFullscreenToggle
|
|
185
|
+
}), /*#__PURE__*/_react.default.createElement("img", {
|
|
186
|
+
src: showHeatmap ? img.heatmapImageUrl : img.originalImageUrl,
|
|
187
|
+
alt: img.imageType,
|
|
188
|
+
style: {
|
|
189
|
+
width: '100%',
|
|
190
|
+
maxHeight: '400px',
|
|
191
|
+
objectFit: 'contain'
|
|
192
|
+
}
|
|
193
|
+
})))))), fullscreen && /*#__PURE__*/_react.default.createElement("div", {
|
|
194
|
+
style: {
|
|
195
|
+
textAlign: 'center',
|
|
196
|
+
marginTop: 20
|
|
197
|
+
}
|
|
198
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
199
|
+
style: {
|
|
200
|
+
fontSize: 18,
|
|
201
|
+
fontWeight: 'bold'
|
|
202
|
+
}
|
|
203
|
+
}, typeToNamemapping && typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] ? typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] : currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType, ' ', headingSuffixText), /*#__PURE__*/_react.default.createElement("p", {
|
|
204
|
+
style: {
|
|
205
|
+
color: 'red'
|
|
206
|
+
}
|
|
207
|
+
}, currentImage === null || currentImage === void 0 ? void 0 : currentImage.rejectReason), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
|
|
208
|
+
style: {
|
|
209
|
+
fontSize: '26px'
|
|
210
|
+
},
|
|
211
|
+
onClick: handleFullscreenToggle
|
|
212
|
+
}), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("img", {
|
|
213
|
+
src: showHeatmap ? currentImage === null || currentImage === void 0 ? void 0 : currentImage.heatmapImageUrl : currentImage === null || currentImage === void 0 ? void 0 : currentImage.originalImageUrl,
|
|
214
|
+
alt: currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType
|
|
215
|
+
}))), /*#__PURE__*/_react.default.createElement("div", null, "Pinch in/out to zoom")))));
|
|
216
|
+
}
|
|
217
|
+
ImageCarouselWidget.propTypes = {
|
|
218
|
+
images: _propTypes.default.array.isRequired,
|
|
219
|
+
visible: _propTypes.default.bool.isRequired,
|
|
220
|
+
onClose: _propTypes.default.func.isRequired,
|
|
221
|
+
headingSuffixText: _propTypes.default.string,
|
|
222
|
+
typeToNamemapping: _propTypes.default.object,
|
|
223
|
+
s3DownloadApiUrl: _propTypes.default.string
|
|
224
|
+
};
|
|
225
|
+
ImageCarouselWidget.defaultProps = {
|
|
226
|
+
headingSuffixText: 'Damage',
|
|
227
|
+
typeToNamemapping: {},
|
|
228
|
+
s3DownloadApiUrl: ''
|
|
229
|
+
};
|
|
230
|
+
var _default = exports.default = ImageCarouselWidget;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ImageCarouselWidgetStyle = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
+
var _default = exports.default = {};
|
|
12
|
+
const ImageCarouselWidgetStyle = exports.ImageCarouselWidgetStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n"])));
|
|
@@ -9,14 +9,12 @@ exports.default = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _FileCopyOutlined = _interopRequireDefault(require("@material-ui/icons/FileCopyOutlined"));
|
|
12
|
-
var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
|
|
13
12
|
var _AddressWidget = _interopRequireDefault(require("../oa-widget-address/AddressWidget"));
|
|
14
13
|
var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
|
|
15
14
|
var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
|
|
16
15
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
17
16
|
var _styles = require("./styles");
|
|
18
17
|
var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
|
|
19
|
-
var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
|
|
20
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
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); }
|
|
22
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; }
|
|
@@ -43,9 +41,7 @@ function TrackShipmentWidget(_ref) {
|
|
|
43
41
|
tableData,
|
|
44
42
|
title,
|
|
45
43
|
toAddress,
|
|
46
|
-
heading
|
|
47
|
-
partnerName,
|
|
48
|
-
errorReason
|
|
44
|
+
heading
|
|
49
45
|
} = _ref;
|
|
50
46
|
// local variables
|
|
51
47
|
const deilveryStageText = 'SHIPMENT DELIVERED to Customer';
|
|
@@ -85,7 +81,7 @@ function TrackShipmentWidget(_ref) {
|
|
|
85
81
|
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;
|
|
86
82
|
|
|
87
83
|
// remove duplicate consicutive objects only show single unique objects
|
|
88
|
-
const stepsData = tableData
|
|
84
|
+
const stepsData = tableData.map(item => ({
|
|
89
85
|
title: item.oneassistDisplayStatus,
|
|
90
86
|
status: getCircleClass(item, true)
|
|
91
87
|
})).filter((item, index) => {
|
|
@@ -100,7 +96,7 @@ function TrackShipmentWidget(_ref) {
|
|
|
100
96
|
className: "type-t1-500"
|
|
101
97
|
}, title) : null, /*#__PURE__*/_react.default.createElement("h3", {
|
|
102
98
|
className: "type-t1-500"
|
|
103
|
-
}, heading),
|
|
99
|
+
}, heading), /*#__PURE__*/_react.default.createElement("p", {
|
|
104
100
|
className: "type-b2-400 disFlex"
|
|
105
101
|
}, "AWB Number:", awbNumber, awbNumber && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
106
102
|
icon: _FileCopyOutlined.default,
|
|
@@ -110,30 +106,16 @@ function TrackShipmentWidget(_ref) {
|
|
|
110
106
|
cursor: 'pointer',
|
|
111
107
|
color: '014FC5'
|
|
112
108
|
}
|
|
113
|
-
})),
|
|
114
|
-
className: "type-b2-400 disFlex"
|
|
115
|
-
}, "Partner:", partnerName), fromAddress && toAddress && /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
109
|
+
})), /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
116
110
|
address: fromAddress
|
|
117
111
|
}), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
118
112
|
address: toAddress
|
|
119
|
-
})),
|
|
113
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
120
114
|
className: "cstScroll"
|
|
121
115
|
}, /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
|
|
122
116
|
currentStep: isOnDeliveryStage ? stepsData.length : stepsData.length - 1,
|
|
123
117
|
stepsData: stepsData
|
|
124
|
-
})),
|
|
125
|
-
className: "margin-top-16 margin-bottom-16"
|
|
126
|
-
}, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
|
|
127
|
-
iconConfig: {
|
|
128
|
-
icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
129
|
-
color: "warning",
|
|
130
|
-
size: 24,
|
|
131
|
-
icon: _InfoOutlined.default
|
|
132
|
-
}),
|
|
133
|
-
position: 'left'
|
|
134
|
-
},
|
|
135
|
-
description: errorReason
|
|
136
|
-
})), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
|
|
118
|
+
})), /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
|
|
137
119
|
bordered: true,
|
|
138
120
|
rowKey: "key",
|
|
139
121
|
columns: [{
|
|
@@ -176,8 +158,6 @@ function TrackShipmentWidget(_ref) {
|
|
|
176
158
|
}
|
|
177
159
|
TrackShipmentWidget.propTypes = {
|
|
178
160
|
awbNumber: _propTypes.default.string.isRequired,
|
|
179
|
-
errorReason: _propTypes.default.string,
|
|
180
|
-
partnerName: _propTypes.default.string,
|
|
181
161
|
fromAddress: _propTypes.default.shape({
|
|
182
162
|
heading: _propTypes.default.string,
|
|
183
163
|
addressLine1: _propTypes.default.string,
|
|
@@ -218,8 +198,6 @@ TrackShipmentWidget.propTypes = {
|
|
|
218
198
|
})
|
|
219
199
|
};
|
|
220
200
|
TrackShipmentWidget.defaultProps = {
|
|
221
|
-
errorReason: '',
|
|
222
|
-
partnerName: '',
|
|
223
201
|
fromAddress: {
|
|
224
202
|
heading: ''
|
|
225
203
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oa-componentbook",
|
|
3
|
-
"version": "1.0.1-stage.
|
|
3
|
+
"version": "1.0.1-stage.45",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Reusable components",
|
|
6
6
|
"main": "build/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"react-markdown": "^8.0.7",
|
|
28
28
|
"react-pattern-lock": "^12.0.12",
|
|
29
29
|
"react-pdf": "^5.3.0",
|
|
30
|
-
"react-zoom-pan-pinch": "^3.
|
|
30
|
+
"react-zoom-pan-pinch": "^3.7.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@babel/cli": "^7.22.9",
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _fn = require("./fn");
|
|
10
|
-
var _TrackShipmentWidget = _interopRequireDefault(require("../oa-widget-track-shipment/TrackShipmentWidget"));
|
|
11
|
-
var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function TrackShipmentWidgetList(_ref) {
|
|
14
|
-
var _assignments$map;
|
|
15
|
-
let {
|
|
16
|
-
shipmentData,
|
|
17
|
-
onChange
|
|
18
|
-
} = _ref;
|
|
19
|
-
const assignments = (shipmentData === null || shipmentData === void 0 ? void 0 : shipmentData.assignments) || [];
|
|
20
|
-
if (assignments.length === 0) {
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(shipmentData));
|
|
22
|
-
}
|
|
23
|
-
if (assignments.length === 1) {
|
|
24
|
-
return /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(assignments[0]));
|
|
25
|
-
}
|
|
26
|
-
const lastReassignmentId = assignments && assignments.length > 0 ? assignments[assignments.length - 1].assignmentId || 0 : 0;
|
|
27
|
-
return assignments === null || assignments === void 0 || (_assignments$map = assignments.map) === null || _assignments$map === void 0 ? void 0 : _assignments$map.call(assignments, (item, index) => {
|
|
28
|
-
const {
|
|
29
|
-
assignmentId,
|
|
30
|
-
assignmentDate,
|
|
31
|
-
assignmentClosedTime,
|
|
32
|
-
status
|
|
33
|
-
} = item !== null && item !== void 0 ? item : {};
|
|
34
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
-
className: "margin-bottom-16",
|
|
36
|
-
key: assignmentId
|
|
37
|
-
}, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
|
|
38
|
-
defaultActiveKey: lastReassignmentId,
|
|
39
|
-
activeKey: assignmentId,
|
|
40
|
-
body: /*#__PURE__*/_react.default.createElement(_TrackShipmentWidget.default, (0, _fn.getSingleShipmentHistory)(item)),
|
|
41
|
-
headerText: (0, _fn.headerText)(index, assignmentDate, assignmentClosedTime, status)
|
|
42
|
-
}));
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
const HistoryPropType = _propTypes.default.shape({
|
|
46
|
-
shipmentStatus: _propTypes.default.string.isRequired,
|
|
47
|
-
fromDate: _propTypes.default.string.isRequired,
|
|
48
|
-
toDate: _propTypes.default.string.isRequired,
|
|
49
|
-
partnerStatus: _propTypes.default.string,
|
|
50
|
-
customerDisplayStatus: _propTypes.default.string.isRequired,
|
|
51
|
-
oneassistDisplayStatus: _propTypes.default.string.isRequired,
|
|
52
|
-
stageConsistent: _propTypes.default.bool.isRequired
|
|
53
|
-
});
|
|
54
|
-
const AssignmentPropType = _propTypes.default.shape({
|
|
55
|
-
assignmentDate: _propTypes.default.number.isRequired,
|
|
56
|
-
assignmentClosedTime: _propTypes.default.number.isRequired,
|
|
57
|
-
logisticPartnerName: _propTypes.default.string.isRequired,
|
|
58
|
-
assignmentId: _propTypes.default.number.isRequired,
|
|
59
|
-
logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
60
|
-
originAddressLine1: _propTypes.default.string.isRequired,
|
|
61
|
-
originDistrict: _propTypes.default.string.isRequired,
|
|
62
|
-
originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
63
|
-
destAddressLine1: _propTypes.default.string.isRequired,
|
|
64
|
-
destDistrict: _propTypes.default.string,
|
|
65
|
-
destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
66
|
-
history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
|
|
67
|
-
origAddressFullName: _propTypes.default.string.isRequired,
|
|
68
|
-
destAddressFullName: _propTypes.default.string.isRequired,
|
|
69
|
-
assignments: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
70
|
-
logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
71
|
-
originAddressLine1: _propTypes.default.string.isRequired,
|
|
72
|
-
originDistrict: _propTypes.default.string.isRequired,
|
|
73
|
-
originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
74
|
-
destAddressLine1: _propTypes.default.string.isRequired,
|
|
75
|
-
destDistrict: _propTypes.default.string,
|
|
76
|
-
destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
77
|
-
history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
|
|
78
|
-
origAddressFullName: _propTypes.default.string.isRequired,
|
|
79
|
-
destAddressFullName: _propTypes.default.string.isRequired,
|
|
80
|
-
assignments: _propTypes.default.array // Placeholder to break recursion
|
|
81
|
-
}))
|
|
82
|
-
});
|
|
83
|
-
TrackShipmentWidgetList.propTypes = {
|
|
84
|
-
shipmentData: _propTypes.default.shape({
|
|
85
|
-
logisticPartnerRefNum: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
86
|
-
originAddressLine1: _propTypes.default.string.isRequired,
|
|
87
|
-
originDistrict: _propTypes.default.string.isRequired,
|
|
88
|
-
originPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
89
|
-
destAddressLine1: _propTypes.default.string.isRequired,
|
|
90
|
-
destDistrict: _propTypes.default.string,
|
|
91
|
-
destPincode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
|
|
92
|
-
history: _propTypes.default.arrayOf(HistoryPropType).isRequired,
|
|
93
|
-
origAddressFullName: _propTypes.default.string.isRequired,
|
|
94
|
-
destAddressFullName: _propTypes.default.string.isRequired,
|
|
95
|
-
assignments: _propTypes.default.arrayOf(AssignmentPropType)
|
|
96
|
-
}),
|
|
97
|
-
onChange: _propTypes.default.func
|
|
98
|
-
};
|
|
99
|
-
TrackShipmentWidgetList.defaultProps = {
|
|
100
|
-
shipmentData: {},
|
|
101
|
-
onChange: () => {}
|
|
102
|
-
};
|
|
103
|
-
var _default = exports.default = TrackShipmentWidgetList;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isActive = exports.headerText = exports.getSingleShipmentHistory = exports.getDateString = exports.getCurrentShipmentLabel = void 0;
|
|
7
|
-
function numberToOrdinal(number) {
|
|
8
|
-
const suffixes = ['th', 'st', 'nd', 'rd'];
|
|
9
|
-
const value = number % 100;
|
|
10
|
-
const suffix = value >= 11 && value <= 13 ? suffixes[0] // 11th, 12th, 13th
|
|
11
|
-
: suffixes[number % 10] || suffixes[0]; // 1st, 2nd, 3rd, others
|
|
12
|
-
return "".concat(number).concat(suffix); // Use template literal correctly
|
|
13
|
-
}
|
|
14
|
-
const getDateFromEpoch = date => {
|
|
15
|
-
if (!date) {
|
|
16
|
-
return '';
|
|
17
|
-
}
|
|
18
|
-
const dateObj = new Date(date);
|
|
19
|
-
const day = dateObj.getDate();
|
|
20
|
-
const month = dateObj.getMonth();
|
|
21
|
-
const year = dateObj.getFullYear();
|
|
22
|
-
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
23
|
-
return "".concat(day, " ").concat(months[month], " ").concat(year);
|
|
24
|
-
};
|
|
25
|
-
const getDateString = (startTime, endTime) => {
|
|
26
|
-
const startDate = getDateFromEpoch(startTime);
|
|
27
|
-
const endDate = getDateFromEpoch(endTime);
|
|
28
|
-
if (startDate === '' && endDate === '') {
|
|
29
|
-
return '';
|
|
30
|
-
}
|
|
31
|
-
if (endDate === '') {
|
|
32
|
-
return startDate;
|
|
33
|
-
}
|
|
34
|
-
return "".concat(startDate, " - ").concat(endDate);
|
|
35
|
-
};
|
|
36
|
-
exports.getDateString = getDateString;
|
|
37
|
-
const getCurrentShipmentLabel = number => {
|
|
38
|
-
const ordinalNumber = numberToOrdinal(number);
|
|
39
|
-
return "".concat(ordinalNumber, " Shipment");
|
|
40
|
-
};
|
|
41
|
-
exports.getCurrentShipmentLabel = getCurrentShipmentLabel;
|
|
42
|
-
const isActive = time => time === null;
|
|
43
|
-
exports.isActive = isActive;
|
|
44
|
-
const headerText = (index, reassignmentTime, modifiedTime, status) => "".concat(getCurrentShipmentLabel(index + 1), " | ").concat(getDateString(reassignmentTime, modifiedTime)).concat(isActive(modifiedTime) ? ' - Present' : '');
|
|
45
|
-
exports.headerText = headerText;
|
|
46
|
-
const getSingleShipmentHistory = item => {
|
|
47
|
-
var _item$history;
|
|
48
|
-
return {
|
|
49
|
-
partnerName: item === null || item === void 0 ? void 0 : item.logisticPartnerName,
|
|
50
|
-
errorReason: item === null || item === void 0 ? void 0 : item.failureReason,
|
|
51
|
-
awbNumber: item === null || item === void 0 ? void 0 : item.logisticPartnerRefNum,
|
|
52
|
-
fromAddress: {
|
|
53
|
-
heading: 'From Address:',
|
|
54
|
-
addressLine1: item === null || item === void 0 ? void 0 : item.origAddressFullName,
|
|
55
|
-
addressLine2: item === null || item === void 0 ? void 0 : item.originAddressLine1,
|
|
56
|
-
pincode: item === null || item === void 0 ? void 0 : item.originPincode,
|
|
57
|
-
city: item === null || item === void 0 ? void 0 : item.originDistrict
|
|
58
|
-
},
|
|
59
|
-
toAddress: {
|
|
60
|
-
heading: 'To Address:',
|
|
61
|
-
addressLine1: item === null || item === void 0 ? void 0 : item.destAddressFullName,
|
|
62
|
-
addressLine2: item === null || item === void 0 ? void 0 : item.destAddressLine1,
|
|
63
|
-
pincode: item === null || item === void 0 ? void 0 : item.destPincode,
|
|
64
|
-
city: item === null || item === void 0 ? void 0 : item.destDistrict
|
|
65
|
-
},
|
|
66
|
-
tableData: (_item$history = item === null || item === void 0 ? void 0 : item.history) !== null && _item$history !== void 0 ? _item$history : []
|
|
67
|
-
};
|
|
68
|
-
};
|
|
69
|
-
exports.getSingleShipmentHistory = getSingleShipmentHistory;
|
/package/build/{widgets/oa-widget-track-shipment-list → dev/oa-widget-track-shipment}/styles.js
RENAMED
|
File without changes
|