thm-p3-configurator 0.0.335 → 0.0.337

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/src/shared/__components__/Form/DatePickerInput.js +27 -5
  2. package/dist/src/shared/__components__/Form/TimePickerInput.js +27 -5
  3. package/dist/src/shared/__components__/LocationsSelector/index.js +12 -17
  4. package/dist/src/shared/__context__/OrderSessionContext.js +2 -1
  5. package/dist/src/shared/__helpers__/dossier.js +13 -5
  6. package/dist/src/shared/__style__/components/_datepicker.scss +4 -14
  7. package/dist/src/shared/__style__/components/form/_form.scss +20 -7
  8. package/package.json +1 -1
package/dist/src/shared/__components__/Form/DatePickerInput.js CHANGED
@@ -56,7 +56,7 @@ const DatePickerInput = _ref => {
56
56
  minDate = new Date(),
57
57
  maxDate
58
58
  } = _ref;
59
- const [value, setValue] = (0, _react.useState)();
59
+ const [value, setValue] = (0, _react.useState)(null);
60
60
  const [isTouched, setIsTouched] = (0, _react.useState)(false);
61
61
  (0, _react.useEffect)(() => {
62
62
  if (initialValue && (0, _moment.default)().isValid(initialValue)) {
@@ -76,9 +76,28 @@ const DatePickerInput = _ref => {
76
76
  htmlFor: name,
77
77
  className: (0, _helpers__.withStyle)('form-label text-black')
78
78
  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
79
- className: "".concat((0, _helpers__.withStyle)('form-group__icon'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
80
- }, /*#__PURE__*/_react.default.createElement("i", {
81
- className: "fal fa-calendar"
79
+ className: isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : ''
80
+ }, /*#__PURE__*/_react.default.createElement("div", {
81
+ className: (0, _helpers__.withStyle)('form-group__icon-field'),
82
+ style: {
83
+ position: 'relative',
84
+ width: '100%'
85
+ }
86
+ }, /*#__PURE__*/_react.default.createElement("span", {
87
+ className: "fal fa-calendar",
88
+ "aria-hidden": "true",
89
+ role: "presentation",
90
+ style: {
91
+ position: 'absolute',
92
+ left: '1rem',
93
+ top: '50%',
94
+ transform: 'translateY(-50%)',
95
+ zIndex: 2,
96
+ pointerEvents: 'none',
97
+ fontSize: '1rem',
98
+ color: '#6c757d',
99
+ fontStyle: 'normal'
100
+ }
82
101
  }), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
83
102
  dateFormat: "dd-MM-yyyy",
84
103
  id: name,
@@ -88,13 +107,16 @@ const DatePickerInput = _ref => {
88
107
  e.preventDefault();
89
108
  },
90
109
  wrapperClassName: (0, _helpers__.withStyle)('react-datepicker-wrapper'),
110
+ popperProps: {
111
+ strategy: 'fixed'
112
+ },
91
113
  minDate: minDate,
92
114
  maxDate: maxDate,
93
115
  locale: "nl",
94
116
  onFocus: handleFocus,
95
117
  onChange: date => handleChange(date),
96
118
  className: "".concat((0, _helpers__.withStyle)('form-control'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
97
- }), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
119
+ })), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
98
120
  message: errorMessage
99
121
  })));
100
122
  };
package/dist/src/shared/__components__/Form/TimePickerInput.js CHANGED
@@ -57,7 +57,7 @@ const TimePickerInput = _ref => {
57
57
  isStrict = false,
58
58
  errorMessage
59
59
  } = _ref;
60
- const [value, setValue] = (0, _react.useState)();
60
+ const [value, setValue] = (0, _react.useState)(null);
61
61
  const [isTouched, setIsTouched] = (0, _react.useState)(false);
62
62
  (0, _react.useEffect)(() => {
63
63
  if ((0, _moment.default)().isValid(initialValue)) {
@@ -77,9 +77,28 @@ const TimePickerInput = _ref => {
77
77
  htmlFor: name,
78
78
  className: (0, _helpers__.withStyle)('form-label')
79
79
  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
80
- className: "".concat((0, _helpers__.withStyle)('form-group__icon'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
81
- }, /*#__PURE__*/_react.default.createElement("i", {
82
- className: "fal fa-clock"
80
+ className: isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : ''
81
+ }, /*#__PURE__*/_react.default.createElement("div", {
82
+ className: (0, _helpers__.withStyle)('form-group__icon-field'),
83
+ style: {
84
+ position: 'relative',
85
+ width: '100%'
86
+ }
87
+ }, /*#__PURE__*/_react.default.createElement("span", {
88
+ className: "fal fa-clock",
89
+ "aria-hidden": "true",
90
+ role: "presentation",
91
+ style: {
92
+ position: 'absolute',
93
+ left: '1rem',
94
+ top: '50%',
95
+ transform: 'translateY(-50%)',
96
+ zIndex: 2,
97
+ pointerEvents: 'none',
98
+ fontSize: '1rem',
99
+ color: '#6c757d',
100
+ fontStyle: 'normal'
101
+ }
83
102
  }), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
84
103
  dateFormat: "HH:mm",
85
104
  showTimeSelect: true,
@@ -98,9 +117,12 @@ const TimePickerInput = _ref => {
98
117
  locale: "nl",
99
118
  onFocus: handleFocus,
100
119
  wrapperClassName: (0, _helpers__.withStyle)('react-datepicker-wrapper'),
120
+ popperProps: {
121
+ strategy: 'fixed'
122
+ },
101
123
  onChange: date => handleChange(date),
102
124
  className: "".concat((0, _helpers__.withStyle)('form-control w-100'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
103
- }), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
125
+ })), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
104
126
  message: errorMessage
105
127
  })));
106
128
  };
package/dist/src/shared/__components__/LocationsSelector/index.js CHANGED
@@ -81,23 +81,18 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
81
81
  var _branchTypes$byId$aut, _authSession$branch;
82
82
  return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch = authSession.branch) === null || _authSession$branch === void 0 || (_authSession$branch = _authSession$branch.organisatietype) === null || _authSession$branch === void 0 ? void 0 : _authSession$branch[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title) === _constants__.TMG_ORGANIZATION_TYPE;
83
83
  }, [branchTypes, authSession]);
84
- let locations;
85
- if (isTMGOrganization || !APP_CONFIG.internal) {
86
- const {
87
- branches
88
- } = (0, _queries.useBranchesQuery)({
89
- offset: 0,
90
- limit: 400,
91
- formula,
92
- franchiseName
93
- });
94
- locations = (branches === null || branches === void 0 ? void 0 : branches.results) || [];
95
- } else {
96
- const {
97
- myBranches
98
- } = (0, _queries.useMyBranches)(formula);
99
- locations = myBranches || [];
100
- }
84
+ const {
85
+ branches
86
+ } = (0, _queries.useBranchesQuery)({
87
+ offset: 0,
88
+ limit: 400,
89
+ formula,
90
+ franchiseName
91
+ });
92
+ const {
93
+ myBranches
94
+ } = (0, _queries.useMyBranches)(formula);
95
+ const locations = isTMGOrganization || !APP_CONFIG.internal ? (branches === null || branches === void 0 ? void 0 : branches.results) || [] : myBranches || [];
101
96
  const {
102
97
  byId,
103
98
  allIds
package/dist/src/shared/__context__/OrderSessionContext.js CHANGED
@@ -579,7 +579,8 @@ const orderSessionReducer = (state, action) => {
579
579
  // Show warning first
580
580
  if (!state.isBoardComputerDeselected && id == null) {
581
581
  return _objectSpread(_objectSpread({}, state), {}, {
582
- isBoardComputerDeselected: true
582
+ isBoardComputerDeselected: true,
583
+ selectedBoardComputer: null
583
584
  });
584
585
  }
585
586
  return _objectSpread(_objectSpread({}, state), {}, {
package/dist/src/shared/__helpers__/dossier.js CHANGED
@@ -98,7 +98,7 @@ const getDossierValue = function getDossierValue() {
98
98
  * @description Covnerts an existing hyper dossier object into a local order session
99
99
  */
100
100
  const parseDossierToOrderSession = exports.parseDossierToOrderSession = function parseDossierToOrderSession() {
101
- var _dossier$lines, _dossier$statusBeoord, _dossier$kanaal, _dossier$kanaalPartne, _dossier$kanaalHoofka, _dossier$kanaalWebsit, _dossier$kanaal2, _dossier$statusDossie, _dossier$statusDossie2, _dossier$lines$some, _dossier$lines2, _dossier$vestiging, _dossier$chassisnumme, _dossier$typeEigendom, _getDossierValue, _getDossierValue2, _getDossierValue3, _getDossierValue4, _getDossierValue5, _dossier$anwbId, _dossier$bedrijfsnaam, _dossier$placeholderB, _dossier$kvkNummer, _dossier$btwNummer, _ref2, _dossier$leasemaatsch, _dossier$leasemaatsch2, _ref3, _ref4, _dossier$leasemaatsch3, _dossier$leasemaatsch4, _dossier$leasemaatsch5, _dossier$leasemaatsch6, _dossier$leasemaatsch7, _dossier$leasemaatsch8, _dossier$zakelijkCont, _dossier$zakelijkCont2, _ref5, _dossier$zakeiljkCont, _dossier$zakelijkCont3, _dossier$hasGoedkeuri, _dossier$factuurbetal, _meerprijsLine$consum, _meerprijsLine$extraN;
101
+ var _dossier$lines, _dossier$statusBeoord, _dossier$kanaal, _dossier$kanaalPartne, _dossier$kanaalHoofka, _dossier$kanaalWebsit, _dossier$kanaal2, _dossier$statusDossie, _dossier$statusDossie2, _dossier$vestiging, _dossier$chassisnumme, _dossier$typeEigendom, _getDossierValue, _getDossierValue2, _getDossierValue3, _getDossierValue4, _getDossierValue5, _dossier$anwbId, _dossier$bedrijfsnaam, _dossier$placeholderB, _dossier$kvkNummer, _dossier$btwNummer, _ref2, _dossier$leasemaatsch, _dossier$leasemaatsch2, _ref3, _ref4, _dossier$leasemaatsch3, _dossier$leasemaatsch4, _dossier$leasemaatsch5, _dossier$leasemaatsch6, _dossier$leasemaatsch7, _dossier$leasemaatsch8, _dossier$zakelijkCont, _dossier$zakelijkCont2, _ref5, _dossier$zakeiljkCont, _dossier$zakelijkCont3, _dossier$hasGoedkeuri, _dossier$factuurbetal, _meerprijsLine$consum, _meerprijsLine$extraN;
102
102
  let dossier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
103
103
  // Detect meerprijs (extra price) line from dossier lines
104
104
  const meerprijsLine = dossier === null || dossier === void 0 || (_dossier$lines = dossier.lines) === null || _dossier$lines === void 0 ? void 0 : _dossier$lines.find(line => line.articleNumber === 'MEERPRIJS' && line.activeArticle);
@@ -137,10 +137,18 @@ const parseDossierToOrderSession = exports.parseDossierToOrderSession = function
137
137
  buildYear: null,
138
138
  brand: null,
139
139
  isTouched: false,
140
- isBoardComputerDeselected: (_dossier$lines$some = dossier === null || dossier === void 0 || (_dossier$lines2 = dossier.lines) === null || _dossier$lines2 === void 0 ? void 0 : _dossier$lines2.some(line => {
141
- var _line$name;
142
- return ((_line$name = line.name) === null || _line$name === void 0 ? void 0 : _line$name.includes('Voertuigcodering')) && line.activeArticle === false;
143
- })) !== null && _dossier$lines$some !== void 0 ? _dossier$lines$some : false,
140
+ isBoardComputerDeselected: ((_dossier$lines2, _dossier$lines3, _dossier$lines4) => {
141
+ const hasInactiveVoertuigcodering = dossier === null || dossier === void 0 || (_dossier$lines2 = dossier.lines) === null || _dossier$lines2 === void 0 ? void 0 : _dossier$lines2.some(line => {
142
+ var _line$name;
143
+ return ((_line$name = line.name) === null || _line$name === void 0 ? void 0 : _line$name.includes('Voertuigcodering')) && line.activeArticle === false;
144
+ });
145
+ const hasBoardComputerCableset = dossier === null || dossier === void 0 || (_dossier$lines3 = dossier.lines) === null || _dossier$lines3 === void 0 ? void 0 : _dossier$lines3.some(line => line.boardComputer === true && line.activeArticle === true);
146
+ const hasNoVoertuigcodering = !(dossier !== null && dossier !== void 0 && (_dossier$lines4 = dossier.lines) !== null && _dossier$lines4 !== void 0 && _dossier$lines4.some(line => {
147
+ var _line$name2;
148
+ return (_line$name2 = line.name) === null || _line$name2 === void 0 ? void 0 : _line$name2.includes('Voertuigcodering');
149
+ }));
150
+ return hasInactiveVoertuigcodering || hasBoardComputerCableset && hasNoVoertuigcodering;
151
+ })(),
144
152
  selectedBranch: dossier === null || dossier === void 0 || (_dossier$vestiging = dossier.vestiging) === null || _dossier$vestiging === void 0 ? void 0 : _dossier$vestiging.entityId,
145
153
  discountCode: dossier === null || dossier === void 0 ? void 0 : dossier.discountCode,
146
154
  anwbDiscountValidated,
package/dist/src/shared/__style__/components/_datepicker.scss CHANGED
@@ -1,22 +1,15 @@
1
1
  /* ==========================================================================
2
2
  Datepicker
3
3
  ========================================================================== */
4
- .react-datepicker__tab-loop {
5
- @extend .position-absolute;
6
-
7
- top: 0;
8
- z-index: 2;
4
+ /* Above sibling inputs (e.g. date popper vs time field below); lib default is z-index: 1 */
5
+ .react-datepicker-popper {
6
+ z-index: 1070 !important;
9
7
  }
10
8
 
11
9
  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
12
10
  border-top-right-radius: 0;
13
11
  }
14
12
 
15
- .react-datepicker__triangle {
16
- transform: translate3d(82px, 0, 0) !important;
17
- z-index: 2 !important;
18
- }
19
-
20
13
  .react-datepicker-popper[data-placement^='top'] {
21
14
  .react-datepicker {
22
15
  border-bottom-right-radius: 0 !important;
@@ -30,12 +23,9 @@ Datepicker
30
23
 
31
24
  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
32
25
  margin-left: -4.6px !important;
33
-
34
- .react-datepicker__triangle {
35
- margin-left: -4.6px !important;
36
- }
37
26
  }
38
27
 
39
28
  .react-datepicker-wrapper {
29
+ display: block !important;
40
30
  width: 100% !important;
41
31
  }
package/dist/src/shared/__style__/components/form/_form.scss CHANGED
@@ -14,25 +14,38 @@ Form Group
14
14
  }
15
15
 
16
16
  /* ==========================================================================
17
- Form Group Icon
17
+ Form group: leading icon inside the field (e.g. date / time pickers)
18
18
  ========================================================================== */
19
- .form-group__icon {
19
+ .form-group__icon-field {
20
20
  @extend .position-relative;
21
21
 
22
- [class*='fa'] {
23
- @extend .ms-15;
22
+ width: 100%;
24
23
 
24
+ > span[class*='fa-'] {
25
25
  @include font-size(24px);
26
26
 
27
27
  color: $gray-600;
28
- left: 0;
28
+ font-style: normal;
29
+ left: 1rem;
30
+ line-height: 1;
31
+ pointer-events: none;
29
32
  position: absolute;
30
- top: 11px;
31
- z-index: 1;
33
+ text-rendering: auto;
34
+ top: 50%;
35
+ transform: translateY(-50%);
36
+ z-index: 2;
37
+ }
38
+
39
+ .react-datepicker-wrapper {
40
+ display: block !important;
41
+ width: 100% !important;
32
42
  }
33
43
 
34
44
  .form-control {
35
45
  @extend .ps-5;
46
+
47
+ min-width: 0;
48
+ width: 100%;
36
49
  }
37
50
  }
38
51
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "thm-p3-configurator",
3
- "version": "0.0.335",
3
+ "version": "0.0.337",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": "EnoRm.",