oa-componentbook 1.0.1-stage.40 → 1.0.1-stage.401
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 +120 -42
- package/build/components/oa-component-accordion/styles.js +2 -2
- package/build/components/oa-component-button/CustomButton.js +24 -19
- package/build/components/oa-component-button/styles.js +1 -1
- package/build/components/oa-component-checkbox/CustomCheckBox.js +20 -17
- package/build/components/oa-component-checkbox/styles.js +1 -1
- package/build/components/oa-component-datepicker/CustomDatePicker.js +37 -26
- package/build/components/oa-component-drawer/CustomDrawer.js +2 -0
- package/build/components/oa-component-dropdown/CustomDropdown.js +16 -4
- package/build/components/oa-component-icons/MaterialIcon.js +1 -1
- package/build/components/oa-component-modal/CustomModal.js +51 -46
- package/build/components/oa-component-modal/styles.js +3 -2
- package/build/components/oa-component-pagination/CustomPagination.js +111 -0
- package/build/components/oa-component-pagination/styles.js +12 -0
- package/build/components/oa-component-select/CustomSelect.js +116 -56
- package/build/components/oa-component-steps/CustomSteps.js +117 -0
- package/build/components/oa-component-steps/styles.js +12 -0
- package/build/components/oa-component-table/CustomTable.js +28 -5
- package/build/components/oa-component-table/CustomTableV1.js +610 -0
- package/build/components/oa-component-table/styles.js +1 -1
- package/build/components/oa-component-table/stylesV1.js +19 -0
- package/build/components/oa-component-tabs/CustomTabs.js +1 -1
- package/build/components/oa-component-tag/CustomTag.js +29 -11
- package/build/components/oa-component-tag/styles.js +30 -3
- package/build/components/oa-component-textarea/{TextArea.js → CustomTextArea.js} +4 -4
- package/build/components/oa-component-tooltip/CustomTooltip.js +8 -4
- package/build/components/oa-component-upload/CustomUpload.js +120 -40
- package/build/components/oa-component-viewer/CustomViewer.js +3 -1
- package/build/dev/oa-component-document-viewer/CustomDocumentViewer.js +367 -0
- package/build/dev/oa-component-document-viewer/styles.js +12 -0
- package/build/dev/oa-component-upload/CustomUpload.js +3 -0
- package/build/dev/oa-widget-document-modal/DocumentSideModal.js +166 -0
- package/build/dev/oa-widget-document-modal/styles.js +12 -0
- package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js +196 -0
- package/build/dev/oa-widget-document-side-drawer/styles.js +12 -0
- package/build/global-css/GlobalCss.js +2 -1
- package/build/global-css/GridLayout.js +1 -1
- package/build/global-css/commonStyles.js +11 -0
- package/build/images/Car.png +0 -0
- package/build/images/TwoWheeler.png +0 -0
- package/build/images/astronaut_emptystate.png +0 -0
- package/build/images/exportGrp01.png +0 -0
- package/build/images/exportGrp02.png +0 -0
- package/build/images/exportGrp03.png +0 -0
- package/build/images/outOfStock.png +0 -0
- package/build/index.js +114 -2
- package/build/layout/DetailDataLayout/DetailDataLayout.js +20 -0
- package/build/layout/DetailDataLayout/components/Form.js +22 -0
- package/build/layout/DetailDataLayout/components/Header.js +32 -0
- package/build/layout/DetailDataLayout/style.css +9 -0
- package/build/layout/DetailDataLayout/styles.js +12 -0
- package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js +235 -0
- package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js +63 -0
- package/build/layout/EntityOverviewLayout/styles.js +13 -0
- package/build/layout/GenricLayOut/GenricLayOut.js +2351 -0
- package/build/layout/GenricLayOut/components/AppliedFilters.js +91 -0
- package/build/layout/GenricLayOut/components/CardList.js +34 -0
- package/build/layout/GenricLayOut/components/DropdownSearch.js +48 -0
- package/build/layout/GenricLayOut/components/Header.js +74 -0
- package/build/layout/GenricLayOut/components/Modal.js +93 -0
- package/build/layout/GenricLayOut/components/ProfileSection.js +87 -0
- package/build/layout/GenricLayOut/components/Search.js +51 -0
- package/build/layout/GenricLayOut/components/StaticFilter.css +73 -0
- package/build/layout/GenricLayOut/components/StaticFilter.js +37 -0
- package/build/layout/GenricLayOut/reducer/layoutReducer.js +306 -0
- package/build/layout/GenricLayOut/resolver/staticConfigResolver.js +98 -0
- package/build/layout/GenricLayOut/styles.js +30 -0
- package/build/utils/download-file.js +23 -0
- package/build/widgets/oa-form-widget/FormWidget.js +576 -0
- package/build/widgets/oa-form-widget/FormWidgetStyle.js +18 -0
- package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js +80 -16
- package/build/widgets/oa-widget-add-spare-part/AddSparePartWidget.js +50 -7
- package/build/widgets/oa-widget-address/AddressWidget.js +12 -17
- package/build/widgets/oa-widget-approval/ApprovalWidget.js +19 -11
- package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js +492 -0
- package/build/widgets/oa-widget-approval/styles.js +2 -2
- package/build/widgets/oa-widget-chat/ChatWidget.js +5 -5
- package/build/widgets/oa-widget-close-claim/CloseClaimWidget.js +17 -5
- package/build/widgets/oa-widget-collapsible-key-value/CollapsibleKeyValueWidget.js +396 -0
- package/build/widgets/oa-widget-collapsible-key-value/styles.js +16 -0
- package/build/widgets/oa-widget-content-panel/ContentPanel.js +82 -0
- package/build/widgets/oa-widget-content-panel/styles.js +12 -0
- package/build/widgets/oa-widget-customer-rating-card/CustomerRatingCard.js +5 -5
- package/build/widgets/oa-widget-detailcard/styles.js +1 -1
- package/build/widgets/oa-widget-document-upload/DocUploadWidget.js +6 -9
- package/build/widgets/oa-widget-dropdown-search-input/DropdownSearchInput.js +53 -19
- package/build/widgets/oa-widget-dropdown-search-input/styles.js +1 -1
- package/build/widgets/oa-widget-guide/GuideWidget.js +70 -0
- package/build/widgets/oa-widget-guide/GuideWidgetStyle.js +12 -0
- package/build/widgets/oa-widget-hub-automation-modal/HubAutomationDeleteBiker.js +24 -0
- package/build/widgets/oa-widget-hub-automation-modal/HubAutomationModal.js +34 -0
- package/build/widgets/oa-widget-hub-automation-modal/HubAutomationModalStyle.js +13 -0
- package/build/widgets/oa-widget-image-carousel/ImageCarouselWidget.js +256 -0
- package/build/widgets/oa-widget-image-carousel/styles.js +23 -0
- package/build/widgets/oa-widget-image-gallery/FullscreenViewer.js +169 -0
- package/build/widgets/oa-widget-image-gallery/ImageGallery.js +87 -0
- package/build/widgets/oa-widget-image-gallery/ThumbnailGrid.js +146 -0
- package/build/widgets/oa-widget-image-gallery/imageCache.js +15 -0
- package/build/widgets/oa-widget-image-gallery/imageGalleryStyle.js +16 -0
- package/build/widgets/oa-widget-item-info-card/InfoCardListWidget.js +60 -0
- package/build/widgets/oa-widget-item-info-card/ItemInfoCardWidget.js +77 -0
- package/build/widgets/oa-widget-item-info-card/styles.css +50 -0
- package/build/widgets/oa-widget-item-info-card/styles.js +14 -0
- package/build/widgets/oa-widget-key-value/KeyValueWidget.js +46 -12
- package/build/widgets/oa-widget-key-value/styles.js +1 -1
- package/build/widgets/oa-widget-kpi/KPICardWidget.js +86 -0
- package/build/widgets/oa-widget-kpi/styles.js +12 -0
- package/build/widgets/oa-widget-map-base-location/AddressDetails.js +21 -7
- package/build/widgets/oa-widget-map-base-location/AddressForm.js +32 -5
- package/build/widgets/oa-widget-map-base-location/MapBaseLocation.js +9 -3
- package/build/widgets/oa-widget-map-base-location/MapComponent.js +17 -2
- package/build/widgets/oa-widget-membershipcard/MembershipCard.js +14 -3
- package/build/widgets/oa-widget-membershipcard/styles.js +1 -1
- package/build/widgets/oa-widget-notes/NotesWidget.js +32 -30
- package/build/widgets/oa-widget-notes/styles.js +4 -3
- package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js +117 -0
- package/build/widgets/oa-widget-profile-data/styles.js +13 -0
- package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js +362 -0
- package/build/widgets/oa-widget-progressive-steps/styles.js +12 -0
- package/build/widgets/oa-widget-reimbursement-breakup/ReimbursementBreakupWidget.js +18 -9
- package/build/widgets/oa-widget-reimbursement-breakup/styles.js +1 -1
- package/build/widgets/oa-widget-reupload-drawer/ReUploadDrawer.js +164 -0
- package/build/widgets/oa-widget-select-list-item-modal/SelectListItemModal.js +79 -0
- package/build/widgets/oa-widget-sidebar/SidebarWidget.js +175 -0
- package/build/widgets/oa-widget-sidebar/components/Header.js +33 -0
- package/build/widgets/oa-widget-sidebar/styles.js +13 -0
- package/build/widgets/oa-widget-spare-part/SparePartsWidget.js +57 -29
- package/build/widgets/oa-widget-track-shipment-list/fn.js +16 -4
- package/build/widgets/oa-widget-user-management/UserManagementWidget.js +352 -0
- package/build/widgets/oa-widget-user-management/styles.js +15 -0
- package/package.json +4 -2
|
@@ -14,6 +14,7 @@ var _CustomTable = _interopRequireDefault(require("../../components/oa-component
|
|
|
14
14
|
var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
|
|
15
15
|
var _styles = require("./styles");
|
|
16
16
|
const _excluded = ["data-test", "disabled", "records", "tableBorder", "onBlur", "extraColumnData"];
|
|
17
|
+
/* eslint-disable */
|
|
17
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
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); }
|
|
19
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; }
|
|
@@ -22,7 +23,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
22
23
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
24
|
function NotesWidget(_ref) {
|
|
24
25
|
let {
|
|
25
|
-
|
|
26
|
+
"data-test": dataTest,
|
|
26
27
|
disabled,
|
|
27
28
|
records,
|
|
28
29
|
tableBorder,
|
|
@@ -30,32 +31,32 @@ function NotesWidget(_ref) {
|
|
|
30
31
|
extraColumnData
|
|
31
32
|
} = _ref,
|
|
32
33
|
antDesignTableProps = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
const [noteInputValue, setNoteInputValue] = (0, _react.useState)(
|
|
34
|
+
const [noteInputValue, setNoteInputValue] = (0, _react.useState)("");
|
|
34
35
|
|
|
35
36
|
/**
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
* Call to callback from props.
|
|
38
|
+
* Clearing the notes input, on blur.
|
|
39
|
+
*/
|
|
39
40
|
const handleBlur = event => {
|
|
40
41
|
// Call to callback from props.
|
|
41
42
|
onBlur(event);
|
|
42
43
|
|
|
43
44
|
// Clearing the notes input, on blur.
|
|
44
|
-
setNoteInputValue(
|
|
45
|
+
setNoteInputValue("");
|
|
45
46
|
};
|
|
46
47
|
|
|
47
48
|
// Used a local variable to avoid mutating the passed prop.
|
|
48
49
|
const mutatedRecords = [...records];
|
|
49
50
|
if (!disabled) {
|
|
50
51
|
mutatedRecords === null || mutatedRecords === void 0 || mutatedRecords.unshift({
|
|
51
|
-
key:
|
|
52
|
+
key: "0"
|
|
52
53
|
});
|
|
53
54
|
}
|
|
54
55
|
const extraColumns = Array.isArray(extraColumnData) && extraColumnData.map(column => ({
|
|
55
56
|
title: column.title,
|
|
56
57
|
dataIndex: column.dataIndex,
|
|
57
58
|
key: column.key,
|
|
58
|
-
width:
|
|
59
|
+
width: "20%"
|
|
59
60
|
}));
|
|
60
61
|
const columns = [
|
|
61
62
|
// {
|
|
@@ -65,9 +66,9 @@ function NotesWidget(_ref) {
|
|
|
65
66
|
// width: '20%',
|
|
66
67
|
// },
|
|
67
68
|
{
|
|
68
|
-
title:
|
|
69
|
-
width:
|
|
70
|
-
dataIndex:
|
|
69
|
+
title: "NOTES",
|
|
70
|
+
width: "40%",
|
|
71
|
+
dataIndex: "notes",
|
|
71
72
|
render: (text, obj, index) => {
|
|
72
73
|
if (!disabled && index === 0) {
|
|
73
74
|
return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
|
|
@@ -76,35 +77,36 @@ function NotesWidget(_ref) {
|
|
|
76
77
|
value: noteInputValue,
|
|
77
78
|
onChange: event => setNoteInputValue(event.target.value),
|
|
78
79
|
onBlur: handleBlur,
|
|
79
|
-
placeholder: "Type here .."
|
|
80
|
+
placeholder: "Type here ..",
|
|
81
|
+
maxLength: 500
|
|
80
82
|
});
|
|
81
83
|
}
|
|
82
84
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
83
85
|
style: {
|
|
84
|
-
overflow:
|
|
86
|
+
overflow: "auto"
|
|
85
87
|
}
|
|
86
88
|
}, text);
|
|
87
89
|
},
|
|
88
|
-
key:
|
|
90
|
+
key: "notes"
|
|
89
91
|
}, {
|
|
90
|
-
title:
|
|
91
|
-
dataIndex:
|
|
92
|
-
key:
|
|
92
|
+
title: "DATE AND TIME",
|
|
93
|
+
dataIndex: "dateTime",
|
|
94
|
+
key: "dateTime"
|
|
93
95
|
}, {
|
|
94
|
-
title:
|
|
95
|
-
dataIndex:
|
|
96
|
-
key:
|
|
97
|
-
width:
|
|
96
|
+
title: "USER",
|
|
97
|
+
dataIndex: "user",
|
|
98
|
+
key: "user",
|
|
99
|
+
width: "20%"
|
|
98
100
|
}, ...(extraColumns || [])];
|
|
99
101
|
const tableStyle = {
|
|
100
|
-
borderTop:
|
|
101
|
-
borderRight: tableBorder ?
|
|
102
|
-
borderBottom: tableBorder ?
|
|
103
|
-
borderLeft: tableBorder ?
|
|
104
|
-
borderRadius: tableBorder ?
|
|
102
|
+
borderTop: "1px solid var(--color-divider)",
|
|
103
|
+
borderRight: tableBorder ? "1px solid var(--color-divider)" : "0",
|
|
104
|
+
borderBottom: tableBorder ? "1px solid var(--color-divider)" : "0",
|
|
105
|
+
borderLeft: tableBorder ? "1px solid var(--color-divider)" : "0",
|
|
106
|
+
borderRadius: tableBorder ? "4px" : "0"
|
|
105
107
|
// visibility: (!(records.length > 0) && disabled) ? 'hidden' : undefined,
|
|
106
108
|
};
|
|
107
|
-
return /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
|
|
109
|
+
return /*#__PURE__*/_react.default.createElement(_styles.NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
|
|
108
110
|
style: tableStyle,
|
|
109
111
|
columns: columns,
|
|
110
112
|
dataSource: mutatedRecords,
|
|
@@ -112,10 +114,10 @@ function NotesWidget(_ref) {
|
|
|
112
114
|
size: "small",
|
|
113
115
|
emptyText: "No Notes Available",
|
|
114
116
|
tableBorder: tableBorder
|
|
115
|
-
}, antDesignTableProps));
|
|
117
|
+
}, antDesignTableProps)));
|
|
116
118
|
}
|
|
117
119
|
NotesWidget.propTypes = {
|
|
118
|
-
|
|
120
|
+
"data-test": _propTypes.default.string,
|
|
119
121
|
disabled: _propTypes.default.bool,
|
|
120
122
|
records: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))),
|
|
121
123
|
onBlur: _propTypes.default.func,
|
|
@@ -123,7 +125,7 @@ NotesWidget.propTypes = {
|
|
|
123
125
|
extraColumnData: _propTypes.default.array
|
|
124
126
|
};
|
|
125
127
|
NotesWidget.defaultProps = {
|
|
126
|
-
|
|
128
|
+
"data-test": null,
|
|
127
129
|
disabled: false,
|
|
128
130
|
onBlur: () => {},
|
|
129
131
|
records: [],
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.NoNotesMessage = void 0;
|
|
6
|
+
exports.default = exports.NotesTable = exports.NoNotesMessage = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
8
|
+
var _templateObject, _templateObject2;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = exports.default = {};
|
|
12
|
-
const NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n input{\n height: 30px;\n }\n"])));
|
|
12
|
+
const NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n input {\n height: 30px;\n }\n"])));
|
|
13
|
+
const NotesTable = exports.NotesTable = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n table {\n width: auto !important;\n }\n"])));
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ProfileDataWidget;
|
|
7
|
+
require("core-js/modules/es.string.trim.js");
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
11
|
+
var _styles = require("./styles");
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
/* eslint-disable */
|
|
14
|
+
|
|
15
|
+
function ProfileDataWidget(_ref) {
|
|
16
|
+
let {
|
|
17
|
+
image,
|
|
18
|
+
title,
|
|
19
|
+
line1,
|
|
20
|
+
line2,
|
|
21
|
+
line3,
|
|
22
|
+
line4,
|
|
23
|
+
line5,
|
|
24
|
+
alignProfile
|
|
25
|
+
} = _ref;
|
|
26
|
+
// Determine what to display in the icon
|
|
27
|
+
const getIconContent = () => {
|
|
28
|
+
if (!(image !== null && image !== void 0 && image.visible)) return null;
|
|
29
|
+
if (image.imageType === "source" && image.imageFile) {
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement("img", {
|
|
31
|
+
src: image.imageFile,
|
|
32
|
+
alt: "Profile",
|
|
33
|
+
style: {
|
|
34
|
+
width: "100%",
|
|
35
|
+
height: "100%",
|
|
36
|
+
borderRadius: "50%",
|
|
37
|
+
objectFit: "cover"
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
if (image.imageType === "letterIcon") {
|
|
42
|
+
const letter = title !== null && title !== void 0 && title.label ? title.label.charAt(0).toUpperCase() : "";
|
|
43
|
+
return letter;
|
|
44
|
+
}
|
|
45
|
+
return null;
|
|
46
|
+
};
|
|
47
|
+
const resolveToken = token => "var(--color-".concat(String(token || "").trim(), ")");
|
|
48
|
+
return /*#__PURE__*/_react.default.createElement(_styles.ProfileDataContainer, {
|
|
49
|
+
alignProfile: alignProfile
|
|
50
|
+
}, (image === null || image === void 0 ? void 0 : image.visible) && /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
|
|
51
|
+
style: {
|
|
52
|
+
backgroundColor: resolveToken(image === null || image === void 0 ? void 0 : image.bgColor),
|
|
53
|
+
color: resolveToken(image === null || image === void 0 ? void 0 : image.color)
|
|
54
|
+
}
|
|
55
|
+
}, getIconContent()), /*#__PURE__*/_react.default.createElement(_styles.ProfileInfo, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
56
|
+
color: (title === null || title === void 0 ? void 0 : title.color) || "primary-content",
|
|
57
|
+
typography: (title === null || title === void 0 ? void 0 : title.typography) || "type-h3-500",
|
|
58
|
+
className: "company-name"
|
|
59
|
+
}, (title === null || title === void 0 ? void 0 : title.label) || ""), /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
+
className: "company-details"
|
|
61
|
+
}, line1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
62
|
+
color: line1.color || "secondary-content",
|
|
63
|
+
typography: line1.typography || "type-b1-400"
|
|
64
|
+
}, line1.label || ""), line2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
65
|
+
color: line2.color || "secondary-content",
|
|
66
|
+
typography: line2.typography || "type-b1-400"
|
|
67
|
+
}, line2.label || ""), line3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
68
|
+
color: line3.color || "secondary-content",
|
|
69
|
+
typography: line3.typography || "type-b1-400"
|
|
70
|
+
}, line3.label || ""), line4 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
71
|
+
color: line4.color || "secondary-content",
|
|
72
|
+
typography: line4.typography || "type-b1-400"
|
|
73
|
+
}, line4.label || ""), line5 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
74
|
+
color: line5.color || "secondary-content",
|
|
75
|
+
typography: line5.typography || "type-b1-400"
|
|
76
|
+
}, line5.label || ""))));
|
|
77
|
+
}
|
|
78
|
+
ProfileDataWidget.propTypes = {
|
|
79
|
+
image: _propTypes.default.shape({
|
|
80
|
+
visible: _propTypes.default.bool,
|
|
81
|
+
imageType: _propTypes.default.oneOf(["source", "letterIcon"]),
|
|
82
|
+
imageFile: _propTypes.default.string,
|
|
83
|
+
color: _propTypes.default.string,
|
|
84
|
+
bgColor: _propTypes.default.string
|
|
85
|
+
}),
|
|
86
|
+
title: _propTypes.default.shape({
|
|
87
|
+
label: _propTypes.default.string,
|
|
88
|
+
typography: _propTypes.default.string,
|
|
89
|
+
color: _propTypes.default.string
|
|
90
|
+
}),
|
|
91
|
+
line1: _propTypes.default.shape({
|
|
92
|
+
label: _propTypes.default.string,
|
|
93
|
+
typography: _propTypes.default.string,
|
|
94
|
+
color: _propTypes.default.string
|
|
95
|
+
}),
|
|
96
|
+
line2: _propTypes.default.shape({
|
|
97
|
+
label: _propTypes.default.string,
|
|
98
|
+
typography: _propTypes.default.string,
|
|
99
|
+
color: _propTypes.default.string
|
|
100
|
+
}),
|
|
101
|
+
line3: _propTypes.default.shape({
|
|
102
|
+
label: _propTypes.default.string,
|
|
103
|
+
typography: _propTypes.default.string,
|
|
104
|
+
color: _propTypes.default.string
|
|
105
|
+
}),
|
|
106
|
+
line4: _propTypes.default.shape({
|
|
107
|
+
label: _propTypes.default.string,
|
|
108
|
+
typography: _propTypes.default.string,
|
|
109
|
+
color: _propTypes.default.string
|
|
110
|
+
}),
|
|
111
|
+
line5: _propTypes.default.shape({
|
|
112
|
+
label: _propTypes.default.string,
|
|
113
|
+
typography: _propTypes.default.string,
|
|
114
|
+
color: _propTypes.default.string
|
|
115
|
+
}),
|
|
116
|
+
alignProfile: _propTypes.default.string
|
|
117
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ProfileInfo = exports.ProfileIcon = exports.ProfileDataContainer = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
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
|
+
const ProfileDataContainer = exports.ProfileDataContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n gap: 24px;\n padding: ", ";\n background: ", ";\n border-radius: ", ";\n margin: ", ";\n box-shadow: ", ";\n border: ", ";\n max-width: ", ";\n justify-content: ", ";\n\n @media (max-width: 768px) {\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: 16px;\n margin: ", ";\n padding: 24px;\n }\n"])), props => props.alignProfile === 'center' ? '32px' : '32px', props => props.alignProfile === 'center' ? 'transparent' : '#ffffff', props => props.alignProfile === 'center' ? '0' : '12px', props => props.alignProfile === 'center' ? '24px auto' : '24px', props => props.alignProfile === 'center' ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.1)', props => props.alignProfile === 'center' ? 'none' : '1px solid #f0f0f0', props => props.alignProfile === 'center' ? '600px' : 'none', props => props.alignProfile === 'center' ? 'center' : 'flex-start', props => props.alignProfile === 'center' ? '16px auto' : '16px');
|
|
12
|
+
const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 48px;\n font-weight: 700;\n flex-shrink: 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n font-size: 36px;\n }\n"])));
|
|
13
|
+
const ProfileInfo = exports.ProfileInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n\n .company-name {\n margin-bottom: 4px;\n font-size: 24px;\n font-weight: 700;\n color: #333333;\n }\n\n .company-details {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n .ant-typography {\n font-size: 14px;\n line-height: 1.5;\n color: #666666;\n }\n }\n"])));
|
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.assign.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.symbol.description.js");
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
var _icons = require("@ant-design/icons");
|
|
14
|
+
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
15
|
+
var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
|
|
16
|
+
var _CustomUpload = _interopRequireDefault(require("../../components/oa-component-upload/CustomUpload"));
|
|
17
|
+
var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
|
|
18
|
+
var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
|
|
19
|
+
var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
|
|
20
|
+
var _CustomTextArea = _interopRequireDefault(require("../../components/oa-component-textarea/CustomTextArea"));
|
|
21
|
+
var _CustomSteps = _interopRequireDefault(require("../../components/oa-component-steps/CustomSteps"));
|
|
22
|
+
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
23
|
+
var _utils = require("../../utils");
|
|
24
|
+
var _styles = require("./styles");
|
|
25
|
+
const _excluded = ["data", "data-test", "current", "initialAnswers", "onComplete", "onStepChange", "style", "showSubmitButton"];
|
|
26
|
+
/* eslint-disable */
|
|
27
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
28
|
+
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); }
|
|
29
|
+
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; }
|
|
30
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
|
+
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; }
|
|
32
|
+
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; }
|
|
33
|
+
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; }
|
|
34
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
35
|
+
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); }
|
|
36
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
37
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
38
|
+
/**
|
|
39
|
+
* ProgressiveStepsWidget: Advanced progressive question stepper with answer capturing
|
|
40
|
+
* - Shows questions progressively as user answers previous ones
|
|
41
|
+
* - Handles different answer types (singleSelect, text, upload, etc.)
|
|
42
|
+
* - Manages internal state and emits complete answers
|
|
43
|
+
* - Uses the original CustomSteps component for step display
|
|
44
|
+
*/
|
|
45
|
+
function ProgressiveStepsWidget(_ref) {
|
|
46
|
+
let {
|
|
47
|
+
data,
|
|
48
|
+
"data-test": dataTest,
|
|
49
|
+
current: externalCurrent,
|
|
50
|
+
initialAnswers = {},
|
|
51
|
+
onComplete,
|
|
52
|
+
onStepChange,
|
|
53
|
+
style,
|
|
54
|
+
showSubmitButton = true
|
|
55
|
+
} = _ref,
|
|
56
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
57
|
+
const [currentStep, setCurrentStep] = (0, _react.useState)(externalCurrent || 0);
|
|
58
|
+
const [answers, setAnswers] = (0, _react.useState)(initialAnswers);
|
|
59
|
+
const [visibleSteps, setVisibleSteps] = (0, _react.useState)(1);
|
|
60
|
+
const steps = (data === null || data === void 0 ? void 0 : data.steps) || [];
|
|
61
|
+
|
|
62
|
+
// Update current step when external prop changes
|
|
63
|
+
(0, _react.useEffect)(() => {
|
|
64
|
+
if (externalCurrent !== undefined) {
|
|
65
|
+
setCurrentStep(externalCurrent);
|
|
66
|
+
}
|
|
67
|
+
}, [externalCurrent]);
|
|
68
|
+
|
|
69
|
+
// Initialize answers with provided initialAnswers
|
|
70
|
+
(0, _react.useEffect)(() => {
|
|
71
|
+
if (Object.keys(initialAnswers).length > 0) {
|
|
72
|
+
setAnswers(initialAnswers);
|
|
73
|
+
}
|
|
74
|
+
}, [initialAnswers]);
|
|
75
|
+
|
|
76
|
+
// Calculate visible steps based on current step
|
|
77
|
+
(0, _react.useEffect)(() => {
|
|
78
|
+
// Show current step + 1 (for the disabled next step)
|
|
79
|
+
const maxVisible = Math.min(currentStep + 2, steps.length);
|
|
80
|
+
setVisibleSteps(maxVisible);
|
|
81
|
+
}, [currentStep, steps.length]);
|
|
82
|
+
const handleAnswer = (stepIndex, answer) => {
|
|
83
|
+
const step = steps[stepIndex];
|
|
84
|
+
const stepId = step.key || stepIndex;
|
|
85
|
+
const newAnswers = _objectSpread(_objectSpread({}, answers), {}, {
|
|
86
|
+
[stepId]: answer
|
|
87
|
+
});
|
|
88
|
+
setAnswers(newAnswers);
|
|
89
|
+
|
|
90
|
+
// Only auto-advance if this is the current active step and not the last step
|
|
91
|
+
if (stepIndex === currentStep && stepIndex < steps.length - 1) {
|
|
92
|
+
const nextStep = stepIndex + 1;
|
|
93
|
+
setCurrentStep(nextStep);
|
|
94
|
+
if (onStepChange) {
|
|
95
|
+
onStepChange(nextStep, newAnswers, stepId);
|
|
96
|
+
}
|
|
97
|
+
} else if (onStepChange) {
|
|
98
|
+
// For editing previous answers, just notify about the change
|
|
99
|
+
onStepChange(currentStep, newAnswers, stepId);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const handleSubmit = () => {
|
|
103
|
+
if (onComplete) {
|
|
104
|
+
onComplete(answers, currentStep);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
// Check if all steps are completed (including pre-populated ones)
|
|
109
|
+
const isAllStepsCompleted = () => steps.every((step, index) => {
|
|
110
|
+
const stepId = step.key || index;
|
|
111
|
+
return answers[stepId] !== undefined;
|
|
112
|
+
});
|
|
113
|
+
const renderAnswerInput = (step, stepIndex) => {
|
|
114
|
+
const {
|
|
115
|
+
answerType,
|
|
116
|
+
answerOptions,
|
|
117
|
+
placeholder,
|
|
118
|
+
customComponent
|
|
119
|
+
} = step;
|
|
120
|
+
const stepId = step.key || stepIndex;
|
|
121
|
+
const currentAnswer = answers[stepId];
|
|
122
|
+
switch (answerType) {
|
|
123
|
+
case "singleSelect":
|
|
124
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
125
|
+
className: "optionBtnSec"
|
|
126
|
+
}, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
127
|
+
key: idx,
|
|
128
|
+
type: currentAnswer === (option.value || option) ? "primary" : "secondary",
|
|
129
|
+
onClick: () => handleAnswer(stepIndex, option.value || option),
|
|
130
|
+
label: option.label || option,
|
|
131
|
+
"data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
|
|
132
|
+
})));
|
|
133
|
+
case "button":
|
|
134
|
+
return /*#__PURE__*/_react.default.createElement("div", null, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
135
|
+
key: idx,
|
|
136
|
+
type: option.type || "primary",
|
|
137
|
+
onClick: () => {
|
|
138
|
+
// Execute custom click function if provided
|
|
139
|
+
if (option.onClick) {
|
|
140
|
+
option.onClick(option.value || option, stepIndex, answers);
|
|
141
|
+
}
|
|
142
|
+
// Optionally also save the answer if needed
|
|
143
|
+
if (option.saveAnswer !== false) {
|
|
144
|
+
handleAnswer(stepIndex, option.value || option);
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
label: option.label || option,
|
|
148
|
+
size: option.size || "default",
|
|
149
|
+
"data-test": dataTest ? "".concat(dataTest, "--button-").concat(stepIndex, "-").concat(idx) : undefined
|
|
150
|
+
})));
|
|
151
|
+
case "custom":
|
|
152
|
+
// Render custom component with props for integration
|
|
153
|
+
if (customComponent) {
|
|
154
|
+
const CustomComponent = customComponent;
|
|
155
|
+
return /*#__PURE__*/_react.default.createElement(CustomComponent, _extends({
|
|
156
|
+
value: currentAnswer,
|
|
157
|
+
onChange: value => handleAnswer(stepIndex, value),
|
|
158
|
+
stepIndex: stepIndex,
|
|
159
|
+
dataTest: dataTest ? "".concat(dataTest, "--custom-").concat(stepIndex) : undefined
|
|
160
|
+
}, step.customProps));
|
|
161
|
+
}
|
|
162
|
+
return null;
|
|
163
|
+
case "paymentOptions":
|
|
164
|
+
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
165
|
+
className: "bankDetailSec"
|
|
166
|
+
}, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement("li", {
|
|
167
|
+
key: idx
|
|
168
|
+
// onClick={() => handleAnswer(stepIndex, option.value || option)}
|
|
169
|
+
,
|
|
170
|
+
"data-test": dataTest ? "".concat(dataTest, "--payment-option-").concat(stepIndex, "-").concat(idx) : undefined
|
|
171
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
172
|
+
typography: "type-button-500"
|
|
173
|
+
}, option.label || option), option.description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
174
|
+
typography: "type-b2-400",
|
|
175
|
+
color: "secondary-content"
|
|
176
|
+
}, option.description)), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
177
|
+
type: "text-only",
|
|
178
|
+
size: "medium",
|
|
179
|
+
label: option.detailsText || "Enter details",
|
|
180
|
+
onClick: e => {
|
|
181
|
+
e.stopPropagation();
|
|
182
|
+
if (option.onDetailsClick) {
|
|
183
|
+
option.onDetailsClick(option.value || option);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}))));
|
|
187
|
+
case "text":
|
|
188
|
+
return /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
|
|
189
|
+
placeholder: placeholder || "Enter your answer...",
|
|
190
|
+
value: currentAnswer || "",
|
|
191
|
+
onChange: e => handleAnswer(stepIndex, e.target.value),
|
|
192
|
+
"data-test": dataTest ? "".concat(dataTest, "--text-input-").concat(stepIndex) : undefined
|
|
193
|
+
});
|
|
194
|
+
case "textarea":
|
|
195
|
+
return /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
|
|
196
|
+
placeholder: placeholder || "Enter your answer...",
|
|
197
|
+
value: currentAnswer || "",
|
|
198
|
+
onChange: e => handleAnswer(stepIndex, e.target.value),
|
|
199
|
+
rows: 4,
|
|
200
|
+
"data-test": dataTest ? "".concat(dataTest, "--textarea-").concat(stepIndex) : undefined
|
|
201
|
+
});
|
|
202
|
+
case "upload":
|
|
203
|
+
return /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
|
|
204
|
+
beforeUpload: file => {
|
|
205
|
+
handleAnswer(stepIndex, file);
|
|
206
|
+
return false; // Prevent default upload
|
|
207
|
+
},
|
|
208
|
+
"data-test": dataTest ? "".concat(dataTest, "--upload-").concat(stepIndex) : undefined
|
|
209
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
210
|
+
iconConfig: {
|
|
211
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null),
|
|
212
|
+
position: "left"
|
|
213
|
+
},
|
|
214
|
+
label: "Upload File"
|
|
215
|
+
}));
|
|
216
|
+
case "radio":
|
|
217
|
+
return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
|
|
218
|
+
value: currentAnswer,
|
|
219
|
+
onChange: e => handleAnswer(stepIndex, e.target.value),
|
|
220
|
+
"data-test": dataTest ? "".concat(dataTest, "--radio-").concat(stepIndex) : undefined
|
|
221
|
+
}, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
|
|
222
|
+
key: idx,
|
|
223
|
+
value: option.value || option,
|
|
224
|
+
label: option.label || option
|
|
225
|
+
})));
|
|
226
|
+
case "checkbox":
|
|
227
|
+
return /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default.Group, {
|
|
228
|
+
value: currentAnswer || [],
|
|
229
|
+
onChange: values => handleAnswer(stepIndex, values),
|
|
230
|
+
"data-test": dataTest ? "".concat(dataTest, "--checkbox-").concat(stepIndex) : undefined
|
|
231
|
+
}, answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
|
|
232
|
+
key: idx,
|
|
233
|
+
value: option.value || option,
|
|
234
|
+
label: option.label || option
|
|
235
|
+
})));
|
|
236
|
+
case "select":
|
|
237
|
+
return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
|
|
238
|
+
placeholder: placeholder || "Select an option...",
|
|
239
|
+
value: currentAnswer,
|
|
240
|
+
onSelectionChange: value => handleAnswer(stepIndex, value.value),
|
|
241
|
+
options: answerOptions === null || answerOptions === void 0 ? void 0 : answerOptions.map((option, idx) => ({
|
|
242
|
+
label: option.label || option,
|
|
243
|
+
value: option.value || option
|
|
244
|
+
})),
|
|
245
|
+
"data-test": dataTest ? "".concat(dataTest, "--select-").concat(stepIndex) : undefined
|
|
246
|
+
});
|
|
247
|
+
default:
|
|
248
|
+
return null;
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
// Prepare steps data for CustomSteps component
|
|
253
|
+
const prepareStepsForCustomSteps = () => steps.map((step, stepIndex) => {
|
|
254
|
+
const stepId = step.key || stepIndex;
|
|
255
|
+
const isActive = stepIndex === currentStep;
|
|
256
|
+
const isCompleted = stepIndex < currentStep && answers[stepId] !== undefined;
|
|
257
|
+
const isDisabled = stepIndex > currentStep;
|
|
258
|
+
const isVisible = stepIndex < visibleSteps;
|
|
259
|
+
const hasAnswer = answers[stepId] !== undefined;
|
|
260
|
+
if (!isVisible) return null;
|
|
261
|
+
|
|
262
|
+
// Get dynamic content based on answer state
|
|
263
|
+
const getDynamicContent = () => {
|
|
264
|
+
if (!hasAnswer || !step.dynamicContent) return null;
|
|
265
|
+
const {
|
|
266
|
+
dynamicContent
|
|
267
|
+
} = step;
|
|
268
|
+
|
|
269
|
+
// Check if we should show dynamic content for this answer
|
|
270
|
+
const shouldShowDynamic = typeof dynamicContent.showFor === "function" ? dynamicContent.showFor(answers[stepId]) : dynamicContent.showFor === answers[stepId] || dynamicContent.showFor === true;
|
|
271
|
+
if (!shouldShowDynamic) return null;
|
|
272
|
+
return {
|
|
273
|
+
title: dynamicContent.title || step.title,
|
|
274
|
+
description: typeof dynamicContent.description === "function" ? dynamicContent.description(answers[stepId]) : dynamicContent.description,
|
|
275
|
+
descriptionStyle: dynamicContent.descriptionStyle,
|
|
276
|
+
hideAnswerInput: dynamicContent.hideAnswerInput || false
|
|
277
|
+
};
|
|
278
|
+
};
|
|
279
|
+
const dynamicContent = getDynamicContent();
|
|
280
|
+
const displayTitle = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.title) || step.title;
|
|
281
|
+
const displayDescription = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.description) || step.description;
|
|
282
|
+
const displayDescriptionStyle = dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.descriptionStyle;
|
|
283
|
+
const shouldHideAnswerInput = (dynamicContent === null || dynamicContent === void 0 ? void 0 : dynamicContent.hideAnswerInput) || false;
|
|
284
|
+
|
|
285
|
+
// Create the step content with question and answer
|
|
286
|
+
const stepContent = /*#__PURE__*/_react.default.createElement("div", {
|
|
287
|
+
className: "stepQanAnsBox"
|
|
288
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
289
|
+
color: isActive ? "primary-content" : isCompleted ? "secondary-content" : isDisabled ? "secondary-content" : "secondary-content",
|
|
290
|
+
typography: isActive ? "type-button-500" : isCompleted ? "type-b2-400" : isDisabled ? "type-b2-400" : "type-b2-400"
|
|
291
|
+
}, (0, _utils.isString)(displayTitle) || (0, _utils.isNumber)(displayTitle) ? /*#__PURE__*/_react.default.createElement("span", {
|
|
292
|
+
"data-test": "".concat(dataTest, "--title-(").concat(displayTitle, ")")
|
|
293
|
+
}, displayTitle) : displayTitle), displayDescription && /*#__PURE__*/_react.default.createElement("div", {
|
|
294
|
+
className: "margin-top-4"
|
|
295
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({}, displayDescriptionStyle, {
|
|
296
|
+
color: "secondary-content",
|
|
297
|
+
typography: "type-b2-400"
|
|
298
|
+
}), displayDescription)), (isActive || isCompleted) && !shouldHideAnswerInput && /*#__PURE__*/_react.default.createElement("div", {
|
|
299
|
+
className: "margin-top-12"
|
|
300
|
+
}, renderAnswerInput(step, stepIndex)));
|
|
301
|
+
return {
|
|
302
|
+
key: step.key || stepIndex,
|
|
303
|
+
title: stepContent,
|
|
304
|
+
disabled: isDisabled
|
|
305
|
+
};
|
|
306
|
+
}).filter(Boolean); // Remove null entries
|
|
307
|
+
return /*#__PURE__*/_react.default.createElement(_styles.StepsContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSteps.default, _extends({
|
|
308
|
+
data: {
|
|
309
|
+
steps: prepareStepsForCustomSteps()
|
|
310
|
+
},
|
|
311
|
+
current: currentStep,
|
|
312
|
+
direction: "vertical",
|
|
313
|
+
"data-test": dataTest
|
|
314
|
+
}, otherProps)), showSubmitButton && isAllStepsCompleted() && /*#__PURE__*/_react.default.createElement(_styles.SubmitButton, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
315
|
+
type: "primary",
|
|
316
|
+
size: "large",
|
|
317
|
+
onClick: handleSubmit,
|
|
318
|
+
label: "Submit All Answers",
|
|
319
|
+
"data-test": dataTest ? "".concat(dataTest, "--submit-button") : undefined
|
|
320
|
+
})));
|
|
321
|
+
}
|
|
322
|
+
ProgressiveStepsWidget.propTypes = {
|
|
323
|
+
data: _propTypes.default.shape({
|
|
324
|
+
steps: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
325
|
+
key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
326
|
+
title: _propTypes.default.node,
|
|
327
|
+
description: _propTypes.default.node,
|
|
328
|
+
answerType: _propTypes.default.oneOf(["singleSelect", "button", "paymentOptions", "text", "textarea", "upload", "radio", "checkbox", "select", "custom"]),
|
|
329
|
+
answerOptions: _propTypes.default.array,
|
|
330
|
+
placeholder: _propTypes.default.string,
|
|
331
|
+
customComponent: _propTypes.default.elementType,
|
|
332
|
+
customProps: _propTypes.default.object,
|
|
333
|
+
dynamicContent: _propTypes.default.shape({
|
|
334
|
+
showFor: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.func]),
|
|
335
|
+
title: _propTypes.default.node,
|
|
336
|
+
description: _propTypes.default.node,
|
|
337
|
+
descriptionStyle: _propTypes.default.object,
|
|
338
|
+
hideAnswerInput: _propTypes.default.bool
|
|
339
|
+
})
|
|
340
|
+
}))
|
|
341
|
+
}),
|
|
342
|
+
"data-test": _propTypes.default.string,
|
|
343
|
+
current: _propTypes.default.number,
|
|
344
|
+
initialAnswers: _propTypes.default.object,
|
|
345
|
+
onComplete: _propTypes.default.func,
|
|
346
|
+
onStepChange: _propTypes.default.func,
|
|
347
|
+
style: _propTypes.default.object,
|
|
348
|
+
showSubmitButton: _propTypes.default.bool
|
|
349
|
+
};
|
|
350
|
+
ProgressiveStepsWidget.defaultProps = {
|
|
351
|
+
data: {
|
|
352
|
+
steps: []
|
|
353
|
+
},
|
|
354
|
+
"data-test": null,
|
|
355
|
+
current: 0,
|
|
356
|
+
initialAnswers: {},
|
|
357
|
+
onComplete: undefined,
|
|
358
|
+
onStepChange: undefined,
|
|
359
|
+
style: {},
|
|
360
|
+
showSubmitButton: true
|
|
361
|
+
};
|
|
362
|
+
var _default = exports.default = ProgressiveStepsWidget;
|