oa-componentbook 1.0.1-stage.43 → 1.0.1-stage.44
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 +16 -5
- package/build/components/oa-component-info/CustomInfo.js +9 -4
- package/build/components/oa-component-info/styles.js +3 -3
- package/build/index.js +3 -10
- package/build/widgets/oa-widget-track-shipment/TrackShipmentWidget.js +28 -6
- package/build/widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList.js +103 -0
- package/build/widgets/oa-widget-track-shipment-list/fn.js +69 -0
- package/package.json +2 -2
- package/build/dev/oa-widget-track-shipment/TrackShipmentWidget.js +0 -195
- package/build/widgets/oa-widget-image-carousel/ImageCarouselWidget.js +0 -214
- package/build/widgets/oa-widget-image-carousel/styles.js +0 -12
- /package/build/{dev/oa-widget-track-shipment → widgets/oa-widget-track-shipment-list}/styles.js +0 -0
|
@@ -45,6 +45,8 @@ 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.
|
|
48
50
|
*/
|
|
49
51
|
function Accordion(_ref2) {
|
|
50
52
|
let {
|
|
@@ -55,7 +57,10 @@ function Accordion(_ref2) {
|
|
|
55
57
|
smallText,
|
|
56
58
|
key,
|
|
57
59
|
defaultActiveKey,
|
|
58
|
-
hasContentPadding
|
|
60
|
+
hasContentPadding,
|
|
61
|
+
// New prop to determine whether to apply contentPadding
|
|
62
|
+
onChange,
|
|
63
|
+
activeKey
|
|
59
64
|
} = _ref2;
|
|
60
65
|
const themeConfig = {
|
|
61
66
|
components: {
|
|
@@ -70,11 +75,12 @@ function Accordion(_ref2) {
|
|
|
70
75
|
}, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
|
|
71
76
|
expandIcon: CollapseIcon,
|
|
72
77
|
expandIconPosition: "end",
|
|
73
|
-
defaultActiveKey: disabled ? '-1' : defaultActiveKey
|
|
78
|
+
defaultActiveKey: disabled ? '-1' : defaultActiveKey,
|
|
79
|
+
onChange: onChange
|
|
74
80
|
}, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
|
|
75
81
|
"data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
|
|
76
82
|
collapsible: disabled ? 'disabled' : undefined,
|
|
77
|
-
key: key,
|
|
83
|
+
key: activeKey || key,
|
|
78
84
|
header: /*#__PURE__*/_react.default.createElement("div", {
|
|
79
85
|
"data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
|
|
80
86
|
className: "type-button-500"
|
|
@@ -92,7 +98,9 @@ Accordion.propTypes = {
|
|
|
92
98
|
hasContentPadding: _propTypes.default.bool,
|
|
93
99
|
// New prop for controlling contentPadding
|
|
94
100
|
key: _propTypes.default.string,
|
|
95
|
-
defaultActiveKey: _propTypes.default.string
|
|
101
|
+
defaultActiveKey: _propTypes.default.string,
|
|
102
|
+
onChange: _propTypes.default.func,
|
|
103
|
+
activeKey: _propTypes.default.string || _propTypes.default.number
|
|
96
104
|
};
|
|
97
105
|
Accordion.defaultProps = {
|
|
98
106
|
body: '',
|
|
@@ -101,6 +109,9 @@ Accordion.defaultProps = {
|
|
|
101
109
|
smallText: '',
|
|
102
110
|
key: '1',
|
|
103
111
|
defaultActiveKey: '1',
|
|
104
|
-
hasContentPadding: true
|
|
112
|
+
hasContentPadding: true,
|
|
113
|
+
// Default value for contentPadding
|
|
114
|
+
onChange: () => {},
|
|
115
|
+
activeKey: null
|
|
105
116
|
};
|
|
106
117
|
var _default = exports.default = Accordion;
|
|
@@ -27,6 +27,7 @@ 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.
|
|
30
31
|
*
|
|
31
32
|
* @returns {ReactElement} A styled component with the specified properties.
|
|
32
33
|
*/
|
|
@@ -37,7 +38,8 @@ function CustomInfo(_ref) {
|
|
|
37
38
|
description,
|
|
38
39
|
fontColor,
|
|
39
40
|
iconConfig,
|
|
40
|
-
title
|
|
41
|
+
title,
|
|
42
|
+
borderColor
|
|
41
43
|
} = _ref;
|
|
42
44
|
/**
|
|
43
45
|
* Renders the icon based on the presence of a title.
|
|
@@ -65,7 +67,8 @@ function CustomInfo(_ref) {
|
|
|
65
67
|
}, renderIcon()) : renderIcon();
|
|
66
68
|
};
|
|
67
69
|
return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
|
|
68
|
-
$color: color
|
|
70
|
+
$color: color,
|
|
71
|
+
$borderColor: borderColor
|
|
69
72
|
}, /*#__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, {
|
|
70
73
|
color: fontColor,
|
|
71
74
|
typography: "type-t2-700"
|
|
@@ -96,7 +99,8 @@ CustomInfo.propTypes = {
|
|
|
96
99
|
position: _propTypes.default.oneOf(['left', 'right']),
|
|
97
100
|
tooltipText: _propTypes.default.string
|
|
98
101
|
}),
|
|
99
|
-
title: _propTypes.default.string
|
|
102
|
+
title: _propTypes.default.string,
|
|
103
|
+
borderColor: _propTypes.default.string
|
|
100
104
|
};
|
|
101
105
|
CustomInfo.defaultProps = {
|
|
102
106
|
buttonConfig: {
|
|
@@ -110,5 +114,6 @@ CustomInfo.defaultProps = {
|
|
|
110
114
|
},
|
|
111
115
|
fontColor: 'primary-content',
|
|
112
116
|
title: '',
|
|
113
|
-
description: ''
|
|
117
|
+
description: '',
|
|
118
|
+
borderColor: ''
|
|
114
119
|
};
|
|
@@ -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 \n button {\n margin-left: 8px;\n }
|
|
15
|
+
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 12px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n border: 1px solid var(--color-", ");\n\n button {\n margin-left: 8px;\n }\n"])), props => props.$color, props => props.$borderColor);
|
package/build/index.js
CHANGED
|
@@ -353,12 +353,6 @@ 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
|
-
});
|
|
362
356
|
Object.defineProperty(exports, "KeyValueWidget", {
|
|
363
357
|
enumerable: true,
|
|
364
358
|
get: function get() {
|
|
@@ -503,10 +497,10 @@ Object.defineProperty(exports, "TrackShipmentWidget", {
|
|
|
503
497
|
return _TrackShipmentWidget.default;
|
|
504
498
|
}
|
|
505
499
|
});
|
|
506
|
-
Object.defineProperty(exports, "
|
|
500
|
+
Object.defineProperty(exports, "TrackShipmentWidgetList", {
|
|
507
501
|
enumerable: true,
|
|
508
502
|
get: function get() {
|
|
509
|
-
return
|
|
503
|
+
return _TrackShipmentWidgetList.default;
|
|
510
504
|
}
|
|
511
505
|
});
|
|
512
506
|
Object.defineProperty(exports, "Typographies", {
|
|
@@ -628,6 +622,7 @@ var _SparePartsWidget = _interopRequireDefault(require("./widgets/oa-widget-spar
|
|
|
628
622
|
var _SparePartsCollapseWidget = _interopRequireDefault(require("./widgets/oa-widget-spare-part/SparePartsCollapseWidget"));
|
|
629
623
|
var _StageTimelineWidget = _interopRequireWildcard(require("./widgets/oa-widget-stage-timeline/StageTimelineWidget"));
|
|
630
624
|
var _TrackShipmentWidget = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipmentWidget"));
|
|
625
|
+
var _TrackShipmentWidgetList = _interopRequireDefault(require("./widgets/oa-widget-track-shipment-list/TrackShipmentWidgetList"));
|
|
631
626
|
var _UploadDownloadWidget = _interopRequireDefault(require("./widgets/oa-widget-upload-download/UploadDownloadWidget"));
|
|
632
627
|
var _ViewHistoryWidget = _interopRequireDefault(require("./widgets/oa-widget-view-history/ViewHistoryWidget"));
|
|
633
628
|
var _ViewPreviousDescriptionWidget = _interopRequireDefault(require("./widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget"));
|
|
@@ -638,7 +633,6 @@ var _ServiceCard = _interopRequireDefault(require("./widgets/oa-widget-serviceca
|
|
|
638
633
|
var _CustomProgressBar = _interopRequireDefault(require("./components/oa-component-progress-bar/CustomProgressBar"));
|
|
639
634
|
var _CustomHeaderWidget = _interopRequireDefault(require("./widgets/oa-widget-header/CustomHeaderWidget"));
|
|
640
635
|
var _CustomPinPatternCaptureWidget = _interopRequireDefault(require("./widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget"));
|
|
641
|
-
var _ImageCarouselWidget = _interopRequireDefault(require("./widgets/oa-widget-image-carousel/ImageCarouselWidget"));
|
|
642
636
|
var _CustomFormWidget = _interopRequireDefault(require("./widgets/oa-widget-form/CustomFormWidget"));
|
|
643
637
|
var _DateDropDown = _interopRequireDefault(require("./widgets/oa-widget-date-dropdown/DateDropDown"));
|
|
644
638
|
var _CustomRating = _interopRequireDefault(require("./components/oa-component-rating/CustomRating"));
|
|
@@ -649,7 +643,6 @@ var _Preview = _interopRequireDefault(require("./widgets/oa-widget-preview/Previ
|
|
|
649
643
|
var _PincodeBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-pincode-base-location/PincodeBaseLocation"));
|
|
650
644
|
var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-base-location/MapBaseLocation"));
|
|
651
645
|
var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
|
|
652
|
-
var _TrackShipmentWidget2 = _interopRequireDefault(require("./dev/oa-widget-track-shipment/TrackShipmentWidget"));
|
|
653
646
|
var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
|
|
654
647
|
var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
|
|
655
648
|
var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
|
|
@@ -9,12 +9,14 @@ 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"));
|
|
12
13
|
var _AddressWidget = _interopRequireDefault(require("../oa-widget-address/AddressWidget"));
|
|
13
14
|
var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
|
|
14
15
|
var _CustomTimeline = _interopRequireDefault(require("../../components/oa-component-timeline/CustomTimeline"));
|
|
15
16
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
16
17
|
var _styles = require("./styles");
|
|
17
18
|
var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
|
|
19
|
+
var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
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
22
|
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; }
|
|
@@ -41,7 +43,9 @@ function TrackShipmentWidget(_ref) {
|
|
|
41
43
|
tableData,
|
|
42
44
|
title,
|
|
43
45
|
toAddress,
|
|
44
|
-
heading
|
|
46
|
+
heading,
|
|
47
|
+
partnerName,
|
|
48
|
+
errorReason
|
|
45
49
|
} = _ref;
|
|
46
50
|
// local variables
|
|
47
51
|
const deilveryStageText = 'SHIPMENT DELIVERED to Customer';
|
|
@@ -81,7 +85,7 @@ function TrackShipmentWidget(_ref) {
|
|
|
81
85
|
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;
|
|
82
86
|
|
|
83
87
|
// remove duplicate consicutive objects only show single unique objects
|
|
84
|
-
const stepsData = tableData.map(item => ({
|
|
88
|
+
const stepsData = tableData === null || tableData === void 0 ? void 0 : tableData.map(item => ({
|
|
85
89
|
title: item.oneassistDisplayStatus,
|
|
86
90
|
status: getCircleClass(item, true)
|
|
87
91
|
})).filter((item, index) => {
|
|
@@ -96,7 +100,7 @@ function TrackShipmentWidget(_ref) {
|
|
|
96
100
|
className: "type-t1-500"
|
|
97
101
|
}, title) : null, /*#__PURE__*/_react.default.createElement("h3", {
|
|
98
102
|
className: "type-t1-500"
|
|
99
|
-
}, heading), /*#__PURE__*/_react.default.createElement("p", {
|
|
103
|
+
}, heading), awbNumber && /*#__PURE__*/_react.default.createElement("p", {
|
|
100
104
|
className: "type-b2-400 disFlex"
|
|
101
105
|
}, "AWB Number:", awbNumber, awbNumber && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
102
106
|
icon: _FileCopyOutlined.default,
|
|
@@ -106,16 +110,30 @@ function TrackShipmentWidget(_ref) {
|
|
|
106
110
|
cursor: 'pointer',
|
|
107
111
|
color: '014FC5'
|
|
108
112
|
}
|
|
109
|
-
})),
|
|
113
|
+
})), partnerName && /*#__PURE__*/_react.default.createElement("p", {
|
|
114
|
+
className: "type-b2-400 disFlex"
|
|
115
|
+
}, "Partner:", partnerName), fromAddress && toAddress && /*#__PURE__*/_react.default.createElement(_styles.AddressesContainer, null, /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
110
116
|
address: fromAddress
|
|
111
117
|
}), /*#__PURE__*/_react.default.createElement(_AddressWidget.default, {
|
|
112
118
|
address: toAddress
|
|
113
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
119
|
+
})), (stepsData === null || stepsData === void 0 ? void 0 : stepsData.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
114
120
|
className: "cstScroll"
|
|
115
121
|
}, /*#__PURE__*/_react.default.createElement(_CustomTimeline.default, {
|
|
116
122
|
currentStep: isOnDeliveryStage ? stepsData.length : stepsData.length - 1,
|
|
117
123
|
stepsData: stepsData
|
|
118
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
124
|
+
})), errorReason && /*#__PURE__*/_react.default.createElement("div", {
|
|
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, {
|
|
119
137
|
bordered: true,
|
|
120
138
|
rowKey: "key",
|
|
121
139
|
columns: [{
|
|
@@ -158,6 +176,8 @@ function TrackShipmentWidget(_ref) {
|
|
|
158
176
|
}
|
|
159
177
|
TrackShipmentWidget.propTypes = {
|
|
160
178
|
awbNumber: _propTypes.default.string.isRequired,
|
|
179
|
+
errorReason: _propTypes.default.string,
|
|
180
|
+
partnerName: _propTypes.default.string,
|
|
161
181
|
fromAddress: _propTypes.default.shape({
|
|
162
182
|
heading: _propTypes.default.string,
|
|
163
183
|
addressLine1: _propTypes.default.string,
|
|
@@ -198,6 +218,8 @@ TrackShipmentWidget.propTypes = {
|
|
|
198
218
|
})
|
|
199
219
|
};
|
|
200
220
|
TrackShipmentWidget.defaultProps = {
|
|
221
|
+
errorReason: '',
|
|
222
|
+
partnerName: '',
|
|
201
223
|
fromAddress: {
|
|
202
224
|
heading: ''
|
|
203
225
|
},
|
|
@@ -0,0 +1,103 @@
|
|
|
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;
|
|
@@ -0,0 +1,69 @@
|
|
|
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/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.44",
|
|
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.4.4"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@babel/cli": "^7.22.9",
|
|
@@ -1,195 +0,0 @@
|
|
|
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;
|
|
@@ -1,214 +0,0 @@
|
|
|
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 _FullscreenExitOutlined = _interopRequireDefault(require("@material-ui/icons/FullscreenExitOutlined"));
|
|
17
|
-
var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));
|
|
18
|
-
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
19
|
-
var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
|
|
20
|
-
var _styles = require("./styles");
|
|
21
|
-
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
22
|
-
var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
|
|
23
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
24
|
-
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); }
|
|
25
|
-
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; }
|
|
26
|
-
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; }
|
|
27
|
-
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; }
|
|
28
|
-
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; }
|
|
29
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
30
|
-
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); }
|
|
31
|
-
/**
|
|
32
|
-
* ImageCarouselWidget is a component that displays images in a carousel and allows zooming and switching between original and heatmap images.
|
|
33
|
-
* @param {object} props The props passed to the component
|
|
34
|
-
* @param {array} [props.images={}] An object with keys representing image types and values as arrays of images
|
|
35
|
-
* @param {boolean} [props.visible=false] Whether the modal is visible
|
|
36
|
-
* @param {function} [props.onClose] A function that is called when the modal is closed
|
|
37
|
-
* @returns {object} A React component
|
|
38
|
-
*/
|
|
39
|
-
function ImageCarouselWidget(_ref) {
|
|
40
|
-
let {
|
|
41
|
-
images = [],
|
|
42
|
-
visible,
|
|
43
|
-
onClose,
|
|
44
|
-
headingSuffixText,
|
|
45
|
-
typeToNamemapping,
|
|
46
|
-
s3DownloadApiUrl
|
|
47
|
-
} = _ref;
|
|
48
|
-
const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
|
|
49
|
-
const [showHeatmap, setShowHeatmap] = (0, _react.useState)(false);
|
|
50
|
-
const [fullscreen, setFullscreen] = (0, _react.useState)(false);
|
|
51
|
-
const [imageUrls, setImageUrls] = (0, _react.useState)([]);
|
|
52
|
-
const [loading, setLoading] = (0, _react.useState)(false);
|
|
53
|
-
|
|
54
|
-
// Fetch image URL by UUID
|
|
55
|
-
const fetchImageUrl = uuid => fetch("".concat(s3DownloadApiUrl).concat(uuid)).then(response => response.json()).then(data => {
|
|
56
|
-
var _data$data;
|
|
57
|
-
return data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.downloadUrl;
|
|
58
|
-
}) // Assuming the API response has `src` key for the image URL
|
|
59
|
-
.catch(error => {
|
|
60
|
-
console.error('Error fetching image URL:', error);
|
|
61
|
-
return ''; // Return an empty string if there's an error
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
// Fetch image URLs for all grouped images
|
|
65
|
-
(0, _react.useEffect)(() => {
|
|
66
|
-
const fetchImages = async () => {
|
|
67
|
-
setLoading(true);
|
|
68
|
-
const urls = await Promise.all(images.map(async img => {
|
|
69
|
-
const originalUrl = await fetchImageUrl(img.originalDocId); // Fetch URL for the original image
|
|
70
|
-
return _objectSpread(_objectSpread({}, img), {}, {
|
|
71
|
-
originalImageUrl: originalUrl,
|
|
72
|
-
// Add the original image URL to the object
|
|
73
|
-
heatmapImageUrl: '' // Set heatmap image URL as empty initially
|
|
74
|
-
});
|
|
75
|
-
}));
|
|
76
|
-
console.log(urls);
|
|
77
|
-
setImageUrls(urls);
|
|
78
|
-
setLoading(false);
|
|
79
|
-
};
|
|
80
|
-
fetchImages();
|
|
81
|
-
}, [images === null || images === void 0 ? void 0 : images.length]);
|
|
82
|
-
|
|
83
|
-
// Enter fullscreen for the whole document
|
|
84
|
-
const enterFullscreen = () => {
|
|
85
|
-
if (document.documentElement.requestFullscreen) {
|
|
86
|
-
document.documentElement.requestFullscreen();
|
|
87
|
-
} else if (document.documentElement.mozRequestFullScreen) {
|
|
88
|
-
// Firefox
|
|
89
|
-
document.documentElement.mozRequestFullScreen();
|
|
90
|
-
} else if (document.documentElement.webkitRequestFullscreen) {
|
|
91
|
-
// Chrome, Safari, Opera
|
|
92
|
-
document.documentElement.webkitRequestFullscreen();
|
|
93
|
-
} else if (document.documentElement.msRequestFullscreen) {
|
|
94
|
-
// IE/Edge
|
|
95
|
-
document.documentElement.msRequestFullscreen();
|
|
96
|
-
}
|
|
97
|
-
setFullscreen(true);
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// Exit fullscreen
|
|
101
|
-
const exitFullscreen = () => {
|
|
102
|
-
if (document.exitFullscreen) {
|
|
103
|
-
document.exitFullscreen();
|
|
104
|
-
} else if (document.mozCancelFullScreen) {
|
|
105
|
-
// Firefox
|
|
106
|
-
document.mozCancelFullScreen();
|
|
107
|
-
} else if (document.webkitExitFullscreen) {
|
|
108
|
-
// Chrome, Safari and Opera
|
|
109
|
-
document.webkitExitFullscreen();
|
|
110
|
-
} else if (document.msExitFullscreen) {
|
|
111
|
-
// IE/Edge
|
|
112
|
-
document.msExitFullscreen();
|
|
113
|
-
}
|
|
114
|
-
setFullscreen(false);
|
|
115
|
-
};
|
|
116
|
-
const handleFullscreenToggle = () => {
|
|
117
|
-
if (fullscreen) {
|
|
118
|
-
exitFullscreen();
|
|
119
|
-
} else {
|
|
120
|
-
enterFullscreen();
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
const handleImageChange = newIndex => {
|
|
124
|
-
setCurrentIndex(newIndex);
|
|
125
|
-
};
|
|
126
|
-
const handleShowHeatmap = async () => {
|
|
127
|
-
const updatedImages = [...imageUrls];
|
|
128
|
-
const currentImage = updatedImages[currentIndex];
|
|
129
|
-
if (!currentImage.heatmapImageUrl) {
|
|
130
|
-
// Only fetch the heatmap image if it's not already fetched
|
|
131
|
-
const heatmapUrl = await fetchImageUrl(currentImage.heatmapDocId);
|
|
132
|
-
updatedImages[currentIndex].heatmapImageUrl = heatmapUrl;
|
|
133
|
-
}
|
|
134
|
-
setImageUrls(updatedImages);
|
|
135
|
-
setShowHeatmap(!showHeatmap);
|
|
136
|
-
};
|
|
137
|
-
const currentImage = imageUrls[currentIndex];
|
|
138
|
-
return /*#__PURE__*/_react.default.createElement(_styles.ImageCarouselWidgetStyle, null, /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
139
|
-
open: visible,
|
|
140
|
-
onCancel: onClose,
|
|
141
|
-
footer: null,
|
|
142
|
-
className: fullscreen ? 'fullscreen-modal' : ''
|
|
143
|
-
}, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
|
|
144
|
-
spinning: loading
|
|
145
|
-
}, !fullscreen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
-
style: {
|
|
147
|
-
textAlign: 'center',
|
|
148
|
-
fontSize: 18,
|
|
149
|
-
fontWeight: 'bold'
|
|
150
|
-
}
|
|
151
|
-
}, 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", {
|
|
152
|
-
style: {
|
|
153
|
-
color: 'red',
|
|
154
|
-
textAlign: 'center'
|
|
155
|
-
}
|
|
156
|
-
}, currentImage === null || currentImage === void 0 ? void 0 : currentImage.rejectReason), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
157
|
-
onClick: handleShowHeatmap,
|
|
158
|
-
type: "text-only",
|
|
159
|
-
label: showHeatmap ? 'View Original Image' : 'View Heatmap Image'
|
|
160
|
-
}), /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
|
|
161
|
-
afterChange: handleImageChange,
|
|
162
|
-
dots: true,
|
|
163
|
-
infinite: true
|
|
164
|
-
}, imageUrls.map(img => /*#__PURE__*/_react.default.createElement("div", {
|
|
165
|
-
key: img.imageType
|
|
166
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
167
|
-
icon: _Fullscreen.default,
|
|
168
|
-
onClick: handleFullscreenToggle
|
|
169
|
-
}), /*#__PURE__*/_react.default.createElement("img", {
|
|
170
|
-
src: showHeatmap ? img.heatmapImageUrl : img.originalImageUrl,
|
|
171
|
-
alt: img.imageType,
|
|
172
|
-
style: {
|
|
173
|
-
width: '100%',
|
|
174
|
-
maxHeight: '400px',
|
|
175
|
-
objectFit: 'contain'
|
|
176
|
-
}
|
|
177
|
-
})))))), fullscreen && /*#__PURE__*/_react.default.createElement("div", {
|
|
178
|
-
style: {
|
|
179
|
-
textAlign: 'center',
|
|
180
|
-
marginTop: 20
|
|
181
|
-
}
|
|
182
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
183
|
-
style: {
|
|
184
|
-
fontSize: 18,
|
|
185
|
-
fontWeight: 'bold'
|
|
186
|
-
}
|
|
187
|
-
}, 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", {
|
|
188
|
-
style: {
|
|
189
|
-
color: 'red'
|
|
190
|
-
}
|
|
191
|
-
}, currentImage === null || currentImage === void 0 ? void 0 : currentImage.rejectReason), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
|
|
192
|
-
style: {
|
|
193
|
-
fontSize: '26px'
|
|
194
|
-
},
|
|
195
|
-
onClick: handleFullscreenToggle
|
|
196
|
-
}), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("img", {
|
|
197
|
-
src: showHeatmap ? currentImage === null || currentImage === void 0 ? void 0 : currentImage.heatmapImageUrl : currentImage === null || currentImage === void 0 ? void 0 : currentImage.originalImageUrl,
|
|
198
|
-
alt: currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType
|
|
199
|
-
}))), /*#__PURE__*/_react.default.createElement("div", null, "Pinch in/out to zoom")))));
|
|
200
|
-
}
|
|
201
|
-
ImageCarouselWidget.propTypes = {
|
|
202
|
-
images: _propTypes.default.array.isRequired,
|
|
203
|
-
visible: _propTypes.default.bool.isRequired,
|
|
204
|
-
onClose: _propTypes.default.func.isRequired,
|
|
205
|
-
headingSuffixText: _propTypes.default.string,
|
|
206
|
-
typeToNamemapping: _propTypes.default.object,
|
|
207
|
-
s3DownloadApiUrl: _propTypes.default.string
|
|
208
|
-
};
|
|
209
|
-
ImageCarouselWidget.defaultProps = {
|
|
210
|
-
headingSuffixText: 'Damage',
|
|
211
|
-
typeToNamemapping: {},
|
|
212
|
-
s3DownloadApiUrl: ''
|
|
213
|
-
};
|
|
214
|
-
var _default = exports.default = ImageCarouselWidget;
|
|
@@ -1,12 +0,0 @@
|
|
|
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"])));
|
/package/build/{dev/oa-widget-track-shipment → widgets/oa-widget-track-shipment-list}/styles.js
RENAMED
|
File without changes
|