@qite/tide-booking-component 1.4.108 → 1.4.109

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 (9) hide show
  1. package/build/build-cjs/index.js +256 -111
  2. package/build/build-esm/index.js +256 -111
  3. package/package.json +1 -1
  4. package/src/content/components/image-with-text.tsx +0 -1
  5. package/src/qsm/components/QSMContainer/qsm-container.tsx +189 -83
  6. package/src/qsm/components/item-picker/index.tsx +2 -6
  7. package/src/qsm/components/mobile-filter-modal/index.tsx +15 -1
  8. package/styles/components/_footer.scss +2 -8
  9. package/styles/components/_search.scss +5 -5
package/build/build-esm/index.js CHANGED
@@ -31778,6 +31778,7 @@ var MobileFilterModal = function () {
31778
31778
  destinationAirport = _b.destinationAirport,
31779
31779
  returnAirport = _b.returnAirport,
31780
31780
  destination = _b.destination;
31781
+ var searchInputRef = useRef(null);
31781
31782
  var _c = useState(''),
31782
31783
  inputValue = _c[0],
31783
31784
  setInputValue = _c[1];
@@ -31794,6 +31795,18 @@ var MobileFilterModal = function () {
31794
31795
  },
31795
31796
  [activeSearchFieldProps]
31796
31797
  );
31798
+ useEffect(
31799
+ function () {
31800
+ if (mobileFilterType !== 'search') return;
31801
+ requestAnimationFrame(function () {
31802
+ var input = searchInputRef.current;
31803
+ if (!input) return;
31804
+ input.focus();
31805
+ input.setSelectionRange(input.value.length, input.value.length);
31806
+ });
31807
+ },
31808
+ [mobileFilterType, activeSearchFieldProps === null || activeSearchFieldProps === void 0 ? void 0 : activeSearchFieldProps.fieldKey]
31809
+ );
31797
31810
  /* ---------------------------------------------------------------- */
31798
31811
  /* Helpers */
31799
31812
  /* ---------------------------------------------------------------- */
@@ -31986,6 +31999,7 @@ var MobileFilterModal = function () {
31986
31999
  'label',
31987
32000
  { className: 'qsm__input-wrapper' },
31988
32001
  React__default.createElement('input', {
32002
+ ref: searchInputRef,
31989
32003
  type: 'text',
31990
32004
  id: 'search',
31991
32005
  value: inputValue,
@@ -31995,7 +32009,6 @@ var MobileFilterModal = function () {
31995
32009
  onChange: function (e) {
31996
32010
  return handleInputChange(e.target.value);
31997
32011
  },
31998
- // onChange={(e) => handleLocationChange(e.target.value)}
31999
32012
  className: 'qsm__input qsm__input--modal qsm__from-to u-ps-2',
32000
32013
  placeholder: activeSearchFieldProps.placeholder
32001
32014
  }),
@@ -32489,7 +32502,6 @@ var ItemPicker$1 = function (_a) {
32489
32502
  isDropdownOpen = _b[0],
32490
32503
  setIsDropdownOpen = _b[1];
32491
32504
  var dropdownRef = useRef(null);
32492
- var toggleButtonRef = useRef(null);
32493
32505
  var handlePick = function (picked, id) {
32494
32506
  setIsDropdownOpen(false);
32495
32507
  onPick(picked, id);
@@ -32511,7 +32523,7 @@ var ItemPicker$1 = function (_a) {
32511
32523
  React__default.createElement('span', { className: 'dropdown__label' }, label),
32512
32524
  React__default.createElement(
32513
32525
  'div',
32514
- { className: 'dropdown' },
32526
+ { className: 'dropdown', ref: dropdownRef },
32515
32527
  React__default.createElement(
32516
32528
  'button',
32517
32529
  {
@@ -32520,8 +32532,7 @@ var ItemPicker$1 = function (_a) {
32520
32532
  return setIsDropdownOpen(function (prev) {
32521
32533
  return !prev;
32522
32534
  });
32523
- },
32524
- ref: toggleButtonRef
32535
+ }
32525
32536
  },
32526
32537
  React__default.createElement('span', null, selection || placeholder),
32527
32538
  React__default.createElement('span', { className: 'arrow' }, '\u25BE')
@@ -32954,58 +32965,16 @@ var QSMContainer = function () {
32954
32965
  );
32955
32966
  })
32956
32967
  ),
32957
- React__default.createElement(
32958
- 'div',
32959
- { className: 'qsm__filter' },
32960
- (qsmType === build.PortalQsmType.Accommodation ||
32961
- qsmType === build.PortalQsmType.AccommodationAndFlight ||
32962
- qsmType === build.PortalQsmType.GroupTour) &&
32963
- React__default.createElement(
32964
- 'div',
32965
- { className: 'radiobutton-group qsm__filter__inputgroup' },
32966
- React__default.createElement(
32967
- 'div',
32968
- { className: 'radiobutton' },
32969
- React__default.createElement(
32970
- 'label',
32971
- { className: 'radiobutton__label' },
32972
- React__default.createElement('input', {
32973
- type: 'radio',
32974
- name: 'numberOfAccommodations',
32975
- // onChange={handleMainBookerChange}
32976
- // onBlur={formik.handleBlur}
32977
- value: '',
32978
- checked: true,
32979
- readOnly: true,
32980
- className: 'radiobutton__input'
32981
- }),
32982
- React__default.createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
32983
- )
32984
- ),
32968
+ !isMobile &&
32969
+ React__default.createElement(
32970
+ 'div',
32971
+ { className: 'qsm__filter' },
32972
+ (qsmType === build.PortalQsmType.Accommodation ||
32973
+ qsmType === build.PortalQsmType.AccommodationAndFlight ||
32974
+ qsmType === build.PortalQsmType.GroupTour) &&
32985
32975
  React__default.createElement(
32986
32976
  'div',
32987
- { className: 'radiobutton' },
32988
- React__default.createElement(
32989
- 'label',
32990
- { className: 'radiobutton__label' },
32991
- React__default.createElement('input', {
32992
- type: 'radio',
32993
- name: 'numberOfAccommodations',
32994
- // onChange={handleMainBookerChange}
32995
- // onBlur={formik.handleBlur}
32996
- value: '',
32997
- className: 'radiobutton__input',
32998
- disabled: true
32999
- }),
33000
- React__default.createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
33001
- )
33002
- )
33003
- ),
33004
- qsmType === build.PortalQsmType.Flight &&
33005
- React__default.createElement(
33006
- 'div',
33007
- { className: 'radiobutton-group qsm__filter__inputgroup' },
33008
- allowOneWay &&
32977
+ { className: 'radiobutton-group qsm__filter__inputgroup' },
33009
32978
  React__default.createElement(
33010
32979
  'div',
33011
32980
  { className: 'radiobutton' },
@@ -33014,18 +32983,17 @@ var QSMContainer = function () {
33014
32983
  { className: 'radiobutton__label' },
33015
32984
  React__default.createElement('input', {
33016
32985
  type: 'radio',
33017
- name: 'tripType',
33018
- value: 'oneway',
33019
- checked: tripType === 'oneway',
33020
- onChange: function () {
33021
- return handleTripTypeChange('oneway');
33022
- },
32986
+ name: 'numberOfAccommodations',
32987
+ // onChange={handleMainBookerChange}
32988
+ // onBlur={formik.handleBlur}
32989
+ value: '',
32990
+ checked: true,
32991
+ readOnly: true,
33023
32992
  className: 'radiobutton__input'
33024
32993
  }),
33025
- React__default.createElement('span', null, translations.QSM.ONEWAY)
32994
+ React__default.createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
33026
32995
  )
33027
32996
  ),
33028
- allowRoundtrip &&
33029
32997
  React__default.createElement(
33030
32998
  'div',
33031
32999
  { className: 'radiobutton' },
@@ -33034,58 +33002,102 @@ var QSMContainer = function () {
33034
33002
  { className: 'radiobutton__label' },
33035
33003
  React__default.createElement('input', {
33036
33004
  type: 'radio',
33037
- name: 'tripType',
33038
- value: 'roundtrip',
33039
- checked: tripType === 'roundtrip',
33040
- onChange: function () {
33041
- return handleTripTypeChange('roundtrip');
33042
- },
33043
- className: 'radiobutton__input'
33005
+ name: 'numberOfAccommodations',
33006
+ // onChange={handleMainBookerChange}
33007
+ // onBlur={formik.handleBlur}
33008
+ value: '',
33009
+ className: 'radiobutton__input',
33010
+ disabled: true
33044
33011
  }),
33045
- React__default.createElement('span', null, translations.QSM.ROUNDTRIP)
33012
+ React__default.createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
33046
33013
  )
33047
- ),
33048
- allowOpenJaw &&
33049
- React__default.createElement(
33050
- 'div',
33051
- { className: 'radiobutton' },
33014
+ )
33015
+ ),
33016
+ qsmType === build.PortalQsmType.Flight &&
33017
+ React__default.createElement(
33018
+ 'div',
33019
+ { className: 'radiobutton-group qsm__filter__inputgroup' },
33020
+ allowOneWay &&
33052
33021
  React__default.createElement(
33053
- 'label',
33054
- { className: 'radiobutton__label' },
33055
- React__default.createElement('input', {
33056
- type: 'radio',
33057
- name: 'tripType',
33058
- value: 'openjaw',
33059
- checked: tripType === 'openjaw',
33060
- onChange: function () {
33061
- return handleTripTypeChange('openjaw');
33062
- },
33063
- className: 'radiobutton__input'
33064
- }),
33065
- React__default.createElement('span', null, translations.QSM.OPENJAW)
33022
+ 'div',
33023
+ { className: 'radiobutton' },
33024
+ React__default.createElement(
33025
+ 'label',
33026
+ { className: 'radiobutton__label' },
33027
+ React__default.createElement('input', {
33028
+ type: 'radio',
33029
+ name: 'tripType',
33030
+ value: 'oneway',
33031
+ checked: tripType === 'oneway',
33032
+ onChange: function () {
33033
+ return handleTripTypeChange('oneway');
33034
+ },
33035
+ className: 'radiobutton__input'
33036
+ }),
33037
+ React__default.createElement('span', null, translations.QSM.ONEWAY)
33038
+ )
33039
+ ),
33040
+ allowRoundtrip &&
33041
+ React__default.createElement(
33042
+ 'div',
33043
+ { className: 'radiobutton' },
33044
+ React__default.createElement(
33045
+ 'label',
33046
+ { className: 'radiobutton__label' },
33047
+ React__default.createElement('input', {
33048
+ type: 'radio',
33049
+ name: 'tripType',
33050
+ value: 'roundtrip',
33051
+ checked: tripType === 'roundtrip',
33052
+ onChange: function () {
33053
+ return handleTripTypeChange('roundtrip');
33054
+ },
33055
+ className: 'radiobutton__input'
33056
+ }),
33057
+ React__default.createElement('span', null, translations.QSM.ROUNDTRIP)
33058
+ )
33059
+ ),
33060
+ allowOpenJaw &&
33061
+ React__default.createElement(
33062
+ 'div',
33063
+ { className: 'radiobutton' },
33064
+ React__default.createElement(
33065
+ 'label',
33066
+ { className: 'radiobutton__label' },
33067
+ React__default.createElement('input', {
33068
+ type: 'radio',
33069
+ name: 'tripType',
33070
+ value: 'openjaw',
33071
+ checked: tripType === 'openjaw',
33072
+ onChange: function () {
33073
+ return handleTripTypeChange('openjaw');
33074
+ },
33075
+ className: 'radiobutton__input'
33076
+ }),
33077
+ React__default.createElement('span', null, translations.QSM.OPENJAW)
33078
+ )
33066
33079
  )
33067
- )
33068
- ),
33069
- React__default.createElement(
33070
- 'div',
33071
- { className: 'qsm__filter__classgroup' },
33072
- qsmType !== build.PortalQsmType.Accommodation &&
33073
- qsmType !== build.PortalQsmType.Car &&
33074
- qsmType !== build.PortalQsmType.Ticket &&
33075
- qsmType !== build.PortalQsmType.Cruise &&
33076
- qsmType !== build.PortalQsmType.Transfer &&
33077
- qsmType !== build.PortalQsmType.GroupTour &&
33078
- askTravelClass &&
33079
- React__default.createElement(TravelClassPicker, null),
33080
- qsmType !== build.PortalQsmType.Multidestination &&
33081
- qsmType !== build.PortalQsmType.Car &&
33082
- qsmType !== build.PortalQsmType.Flight &&
33083
- qsmType !== build.PortalQsmType.Transfer &&
33084
- askTravelType &&
33085
- React__default.createElement(TravelTypePicker, null),
33086
- askNationality && React__default.createElement(TravelNationalityPicker, null)
33087
- )
33088
- ),
33080
+ ),
33081
+ React__default.createElement(
33082
+ 'div',
33083
+ { className: 'qsm__filter__classgroup' },
33084
+ qsmType !== build.PortalQsmType.Accommodation &&
33085
+ qsmType !== build.PortalQsmType.Car &&
33086
+ qsmType !== build.PortalQsmType.Ticket &&
33087
+ qsmType !== build.PortalQsmType.Cruise &&
33088
+ qsmType !== build.PortalQsmType.Transfer &&
33089
+ qsmType !== build.PortalQsmType.GroupTour &&
33090
+ askTravelClass &&
33091
+ React__default.createElement(TravelClassPicker, null),
33092
+ qsmType !== build.PortalQsmType.Multidestination &&
33093
+ qsmType !== build.PortalQsmType.Car &&
33094
+ qsmType !== build.PortalQsmType.Flight &&
33095
+ qsmType !== build.PortalQsmType.Transfer &&
33096
+ askTravelType &&
33097
+ React__default.createElement(TravelTypePicker, null),
33098
+ askNationality && React__default.createElement(TravelNationalityPicker, null)
33099
+ )
33100
+ ),
33089
33101
  React__default.createElement(
33090
33102
  'div',
33091
33103
  { className: 'qsm__input-group' },
@@ -33104,6 +33116,139 @@ var QSMContainer = function () {
33104
33116
  React__default.createElement(SearchInputGroup, { fieldConfig: destination }),
33105
33117
  React__default.createElement(Dates, { value: dateRange, onChange: handleDateChange }),
33106
33118
  askTravelers && React__default.createElement(TravelInputGroup, null),
33119
+ isMobile &&
33120
+ React__default.createElement(
33121
+ 'div',
33122
+ { className: 'qsm__filter' },
33123
+ (qsmType === build.PortalQsmType.Accommodation ||
33124
+ qsmType === build.PortalQsmType.AccommodationAndFlight ||
33125
+ qsmType === build.PortalQsmType.GroupTour) &&
33126
+ React__default.createElement(
33127
+ 'div',
33128
+ { className: 'radiobutton-group qsm__filter__inputgroup' },
33129
+ React__default.createElement(
33130
+ 'div',
33131
+ { className: 'radiobutton' },
33132
+ React__default.createElement(
33133
+ 'label',
33134
+ { className: 'radiobutton__label' },
33135
+ React__default.createElement('input', {
33136
+ type: 'radio',
33137
+ name: 'numberOfAccommodations',
33138
+ // onChange={handleMainBookerChange}
33139
+ // onBlur={formik.handleBlur}
33140
+ value: '',
33141
+ checked: true,
33142
+ readOnly: true,
33143
+ className: 'radiobutton__input'
33144
+ }),
33145
+ React__default.createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
33146
+ )
33147
+ ),
33148
+ React__default.createElement(
33149
+ 'div',
33150
+ { className: 'radiobutton' },
33151
+ React__default.createElement(
33152
+ 'label',
33153
+ { className: 'radiobutton__label' },
33154
+ React__default.createElement('input', {
33155
+ type: 'radio',
33156
+ name: 'numberOfAccommodations',
33157
+ // onChange={handleMainBookerChange}
33158
+ // onBlur={formik.handleBlur}
33159
+ value: '',
33160
+ className: 'radiobutton__input',
33161
+ disabled: true
33162
+ }),
33163
+ React__default.createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
33164
+ )
33165
+ )
33166
+ ),
33167
+ qsmType === build.PortalQsmType.Flight &&
33168
+ React__default.createElement(
33169
+ 'div',
33170
+ { className: 'radiobutton-group qsm__filter__inputgroup' },
33171
+ allowOneWay &&
33172
+ React__default.createElement(
33173
+ 'div',
33174
+ { className: 'radiobutton' },
33175
+ React__default.createElement(
33176
+ 'label',
33177
+ { className: 'radiobutton__label' },
33178
+ React__default.createElement('input', {
33179
+ type: 'radio',
33180
+ name: 'tripType',
33181
+ value: 'oneway',
33182
+ checked: tripType === 'oneway',
33183
+ onChange: function () {
33184
+ return handleTripTypeChange('oneway');
33185
+ },
33186
+ className: 'radiobutton__input'
33187
+ }),
33188
+ React__default.createElement('span', null, translations.QSM.ONEWAY)
33189
+ )
33190
+ ),
33191
+ allowRoundtrip &&
33192
+ React__default.createElement(
33193
+ 'div',
33194
+ { className: 'radiobutton' },
33195
+ React__default.createElement(
33196
+ 'label',
33197
+ { className: 'radiobutton__label' },
33198
+ React__default.createElement('input', {
33199
+ type: 'radio',
33200
+ name: 'tripType',
33201
+ value: 'roundtrip',
33202
+ checked: tripType === 'roundtrip',
33203
+ onChange: function () {
33204
+ return handleTripTypeChange('roundtrip');
33205
+ },
33206
+ className: 'radiobutton__input'
33207
+ }),
33208
+ React__default.createElement('span', null, translations.QSM.ROUNDTRIP)
33209
+ )
33210
+ ),
33211
+ allowOpenJaw &&
33212
+ React__default.createElement(
33213
+ 'div',
33214
+ { className: 'radiobutton' },
33215
+ React__default.createElement(
33216
+ 'label',
33217
+ { className: 'radiobutton__label' },
33218
+ React__default.createElement('input', {
33219
+ type: 'radio',
33220
+ name: 'tripType',
33221
+ value: 'openjaw',
33222
+ checked: tripType === 'openjaw',
33223
+ onChange: function () {
33224
+ return handleTripTypeChange('openjaw');
33225
+ },
33226
+ className: 'radiobutton__input'
33227
+ }),
33228
+ React__default.createElement('span', null, translations.QSM.OPENJAW)
33229
+ )
33230
+ )
33231
+ ),
33232
+ React__default.createElement(
33233
+ 'div',
33234
+ { className: 'qsm__filter__classgroup' },
33235
+ qsmType !== build.PortalQsmType.Accommodation &&
33236
+ qsmType !== build.PortalQsmType.Car &&
33237
+ qsmType !== build.PortalQsmType.Ticket &&
33238
+ qsmType !== build.PortalQsmType.Cruise &&
33239
+ qsmType !== build.PortalQsmType.Transfer &&
33240
+ qsmType !== build.PortalQsmType.GroupTour &&
33241
+ askTravelClass &&
33242
+ React__default.createElement(TravelClassPicker, null),
33243
+ qsmType !== build.PortalQsmType.Multidestination &&
33244
+ qsmType !== build.PortalQsmType.Car &&
33245
+ qsmType !== build.PortalQsmType.Flight &&
33246
+ qsmType !== build.PortalQsmType.Transfer &&
33247
+ askTravelType &&
33248
+ React__default.createElement(TravelTypePicker, null),
33249
+ askNationality && React__default.createElement(TravelNationalityPicker, null)
33250
+ )
33251
+ ),
33107
33252
  React__default.createElement(
33108
33253
  'button',
33109
33254
  { type: 'button', className: 'cta', onClick: handleSubmit },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "1.4.108",
3
+ "version": "1.4.109",
4
4
  "description": "React Booking wizard & Booking product component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "types": "build/build-cjs/src/index.d.ts",
package/src/content/components/image-with-text.tsx CHANGED
@@ -65,7 +65,6 @@ interface ImageWithTextSectionProps {
65
65
 
66
66
  export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
67
67
  const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
68
- console.log('variant', variant);
69
68
  return (
70
69
  <div className={className}>
71
70
  <div className="image-with-text__container">