@qite/tide-booking-component 1.4.107 → 1.4.109

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -434,107 +434,109 @@ const QSMContainer: React.FC = () => {
             {translations.QSM.CRUISES}
           </button> */}
         </div>
-        <div className="qsm__filter">
-          {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
-            <div className="radiobutton-group qsm__filter__inputgroup">
-              <div className="radiobutton">
-                <label className="radiobutton__label">
-                  <input
-                    type="radio"
-                    name="numberOfAccommodations"
-                    // onChange={handleMainBookerChange}
-                    // onBlur={formik.handleBlur}
-                    value=""
-                    checked={true}
-                    readOnly
-                    className="radiobutton__input"
-                  />
-                  <span>{translations.QSM.ONE_ACCOMMODATION}</span>
-                </label>
-              </div>
-              <div className="radiobutton">
-                <label className="radiobutton__label">
-                  <input
-                    type="radio"
-                    name="numberOfAccommodations"
-                    // onChange={handleMainBookerChange}
-                    // onBlur={formik.handleBlur}
-                    value=""
-                    className="radiobutton__input"
-                    disabled={true}
-                  />
-                  <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
-                </label>
-              </div>
-            </div>
-          )}
-          {qsmType === PortalQsmType.Flight && (
-            <div className="radiobutton-group qsm__filter__inputgroup">
-              {allowOneWay && (
+        {!isMobile && (
+          <div className="qsm__filter">
+            {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
+              <div className="radiobutton-group qsm__filter__inputgroup">
                 <div className="radiobutton">
                   <label className="radiobutton__label">
                     <input
                       type="radio"
-                      name="tripType"
-                      value="oneway"
-                      checked={tripType === 'oneway'}
-                      onChange={() => handleTripTypeChange('oneway')}
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
+                      checked={true}
+                      readOnly
                       className="radiobutton__input"
                     />
-                    <span>{translations.QSM.ONEWAY}</span>
+                    <span>{translations.QSM.ONE_ACCOMMODATION}</span>
                   </label>
                 </div>
-              )}
-
-              {allowRoundtrip && (
                 <div className="radiobutton">
                   <label className="radiobutton__label">
                     <input
                       type="radio"
-                      name="tripType"
-                      value="roundtrip"
-                      checked={tripType === 'roundtrip'}
-                      onChange={() => handleTripTypeChange('roundtrip')}
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
                       className="radiobutton__input"
+                      disabled={true}
                     />
-                    <span>{translations.QSM.ROUNDTRIP}</span>
+                    <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
                   </label>
                 </div>
-              )}
-
-              {allowOpenJaw && (
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      name="tripType"
-                      value="openjaw"
-                      checked={tripType === 'openjaw'}
-                      onChange={() => handleTripTypeChange('openjaw')}
-                      className="radiobutton__input"
-                    />
-                    <span>{translations.QSM.OPENJAW}</span>
-                  </label>
-                </div>
-              )}
+              </div>
+            )}
+            {qsmType === PortalQsmType.Flight && (
+              <div className="radiobutton-group qsm__filter__inputgroup">
+                {allowOneWay && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="oneway"
+                        checked={tripType === 'oneway'}
+                        onChange={() => handleTripTypeChange('oneway')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ONEWAY}</span>
+                    </label>
+                  </div>
+                )}
+
+                {allowRoundtrip && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="roundtrip"
+                        checked={tripType === 'roundtrip'}
+                        onChange={() => handleTripTypeChange('roundtrip')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ROUNDTRIP}</span>
+                    </label>
+                  </div>
+                )}
+
+                {allowOpenJaw && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="openjaw"
+                        checked={tripType === 'openjaw'}
+                        onChange={() => handleTripTypeChange('openjaw')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.OPENJAW}</span>
+                    </label>
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="qsm__filter__classgroup">
+              {qsmType !== PortalQsmType.Accommodation &&
+                qsmType !== PortalQsmType.Car &&
+                qsmType !== PortalQsmType.Ticket &&
+                qsmType !== PortalQsmType.Cruise &&
+                qsmType !== PortalQsmType.Transfer &&
+                qsmType !== PortalQsmType.GroupTour &&
+                askTravelClass && <TravelClassPicker />}
+              {qsmType !== PortalQsmType.Multidestination &&
+                qsmType !== PortalQsmType.Car &&
+                qsmType !== PortalQsmType.Flight &&
+                qsmType !== PortalQsmType.Transfer &&
+                askTravelType && <TravelTypePicker />}
+              {askNationality && <TravelNationalityPicker />}
             </div>
-          )}
-          <div className="qsm__filter__classgroup">
-            {qsmType !== PortalQsmType.Accommodation &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Ticket &&
-              qsmType !== PortalQsmType.Cruise &&
-              qsmType !== PortalQsmType.Transfer &&
-              qsmType !== PortalQsmType.GroupTour &&
-              askTravelClass && <TravelClassPicker />}
-            {qsmType !== PortalQsmType.Multidestination &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Flight &&
-              qsmType !== PortalQsmType.Transfer &&
-              askTravelType && <TravelTypePicker />}
-            {askNationality && <TravelNationalityPicker />}
           </div>
-        </div>
+        )}
         <div className="qsm__input-group">
           {/* TODO, determine which fields to show for what type of QSM */}
           {(qsmType == PortalQsmType.Flight || qsmType == PortalQsmType.AccommodationAndFlight) && originDestinationField && (
@@ -551,6 +553,110 @@ const QSMContainer: React.FC = () => {
 
           {askTravelers && <TravelInputGroup />}
 
+          {isMobile && (
+            <div className="qsm__filter">
+              {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
+                <div className="radiobutton-group qsm__filter__inputgroup">
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="numberOfAccommodations"
+                        // onChange={handleMainBookerChange}
+                        // onBlur={formik.handleBlur}
+                        value=""
+                        checked={true}
+                        readOnly
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ONE_ACCOMMODATION}</span>
+                    </label>
+                  </div>
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="numberOfAccommodations"
+                        // onChange={handleMainBookerChange}
+                        // onBlur={formik.handleBlur}
+                        value=""
+                        className="radiobutton__input"
+                        disabled={true}
+                      />
+                      <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
+                    </label>
+                  </div>
+                </div>
+              )}
+              {qsmType === PortalQsmType.Flight && (
+                <div className="radiobutton-group qsm__filter__inputgroup">
+                  {allowOneWay && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="oneway"
+                          checked={tripType === 'oneway'}
+                          onChange={() => handleTripTypeChange('oneway')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.ONEWAY}</span>
+                      </label>
+                    </div>
+                  )}
+
+                  {allowRoundtrip && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="roundtrip"
+                          checked={tripType === 'roundtrip'}
+                          onChange={() => handleTripTypeChange('roundtrip')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.ROUNDTRIP}</span>
+                      </label>
+                    </div>
+                  )}
+
+                  {allowOpenJaw && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="openjaw"
+                          checked={tripType === 'openjaw'}
+                          onChange={() => handleTripTypeChange('openjaw')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.OPENJAW}</span>
+                      </label>
+                    </div>
+                  )}
+                </div>
+              )}
+              <div className="qsm__filter__classgroup">
+                {qsmType !== PortalQsmType.Accommodation &&
+                  qsmType !== PortalQsmType.Car &&
+                  qsmType !== PortalQsmType.Ticket &&
+                  qsmType !== PortalQsmType.Cruise &&
+                  qsmType !== PortalQsmType.Transfer &&
+                  qsmType !== PortalQsmType.GroupTour &&
+                  askTravelClass && <TravelClassPicker />}
+                {qsmType !== PortalQsmType.Multidestination &&
+                  qsmType !== PortalQsmType.Car &&
+                  qsmType !== PortalQsmType.Flight &&
+                  qsmType !== PortalQsmType.Transfer &&
+                  askTravelType && <TravelTypePicker />}
+                {askNationality && <TravelNationalityPicker />}
+              </div>
+            </div>
+          )}
+
           <button type="button" className="cta" onClick={handleSubmit}>
             {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
             <span>{translations.QSM.CONFIRM}</span>

package/src/qsm/components/item-picker/index.tsx

@@ -14,7 +14,6 @@ interface ItemPickerProps {
 const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeholder, classModifier, valueFormatter, onPick }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const handlePick = (picked: string, id?: string) => {
     setIsDropdownOpen(false);
@@ -37,11 +36,8 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   return (
     <div className={'dropdown__input ' + classModifier}>
       <span className="dropdown__label">{label}</span>
-      <div className="dropdown">
-        <button
-          className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`}
-          onClick={() => setIsDropdownOpen((prev) => !prev)}
-          ref={toggleButtonRef}>
+      <div className="dropdown" ref={dropdownRef}>
+        <button className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`} onClick={() => setIsDropdownOpen((prev) => !prev)}>
           <span>{selection || placeholder}</span>
           <span className="arrow">&#9662;</span>
         </button>

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -35,6 +35,8 @@ const MobileFilterModal: React.FC = () => {
     destination
   } = useSelector((state: QSMRootState) => state.qsm);
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
   const [inputValue, setInputValue] = useState('');
 
   /* ---------------------------------------------------------------- */
@@ -48,6 +50,18 @@ const MobileFilterModal: React.FC = () => {
     }
   }, [activeSearchFieldProps]);
 
+  useEffect(() => {
+    if (mobileFilterType !== 'search') return;
+
+    requestAnimationFrame(() => {
+      const input = searchInputRef.current;
+      if (!input) return;
+
+      input.focus();
+      input.setSelectionRange(input.value.length, input.value.length);
+    });
+  }, [mobileFilterType, activeSearchFieldProps?.fieldKey]);
+
   /* ---------------------------------------------------------------- */
   /* Helpers                                                          */
   /* ---------------------------------------------------------------- */
@@ -229,12 +243,12 @@ const MobileFilterModal: React.FC = () => {
         <div className="qsm__double-input qsm__double-input--search-modal">
           <label className="qsm__input-wrapper">
             <input
+              ref={searchInputRef}
               type="text"
               id="search"
               value={inputValue}
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => handleInputChange(e.target.value)}
-              // onChange={(e) => handleLocationChange(e.target.value)}
               className="qsm__input qsm__input--modal qsm__from-to u-ps-2"
               placeholder={activeSearchFieldProps.placeholder}
             />

package/src/shared/components/icon.tsx

@@ -1079,6 +1079,20 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
         </svg>
       );
 
+    case 'ui-triangle-error':
+      return (
+        <svg
+          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
+          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z" />
+        </svg>
+      );
+
     default:
       return null;
   }

package/styles/components/_error.scss

@@ -0,0 +1,50 @@
+@use '../components/mixins' as mixins;
+
+.error {
+  padding: 60px 0px;
+  background: var(--tide-booking-bg);
+
+  &__container {
+    @include mixins.container-wide();
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  &__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__icon {
+    border-radius: 20%;
+    display: flex;
+    font-size: 24px;
+    font-weight: 600;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    color: var(--tide-booking-invalid);
+
+    @include media-lg {
+      font-size: 50px;
+    }
+
+    svg {
+      width: 40px;
+      height: 40px;
+
+      @include media-lg {
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
+
+  &__link {
+    max-width: 150px;
+    margin-top: 1rem;
+  }
+}

package/styles/components/_faq.scss

@@ -1,3 +1,4 @@
+@use '../components/mixins' as mixins;
 .faq {
   padding: 30px 0;
 

package/styles/components/_footer.scss

@@ -16,14 +16,8 @@
 
   &__top {
     display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    @include mixins.media-xxs {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
+    justify-content: space-between;
+    align-items: center;
   }
 
   &__logo {

package/styles/components/_search.scss

@@ -134,12 +134,12 @@
     &--close {
       position: fixed;
       z-index: 100020;
-      top: 30px;
-      right: 30px;
+      top: 10px;
+      right: 15px;
       display: none;
       background: none;
       border: none;
-      color: white;
+      color: var(--tide-booking-search-filter-price-amount-color);
       cursor: pointer;
     }
 
@@ -180,8 +180,8 @@
         .search__filters {
           position: relative;
           display: block;
-          max-width: 360px;
-          width: 360px;
+          max-width: 100%;
+          width: 100%;
           height: 100%;
           margin: 0;
           border: none;

package/styles/content-blocks.scss

@@ -26,6 +26,7 @@ body {
   @import './components/login';
   @import './components/accordion';
   @import './components/footer';
+  @import './components/error';
 
   @import './qsm/qsm';
 

package/styles/qsm/_qsm.scss

@@ -521,6 +521,9 @@
       // border-bottom: 4px solid variables.$secondary-color;
       display: flex;
       flex-direction: column;
+      max-height: 300px;
+      overflow: auto;
+      @extend %scrollbar-thin;
 
       @include mixins.media-md {
         width: 100%;