mautourco-components 0.2.92 → 0.2.94

package/dist/components/organisms/DateTimePicker/DateTimePicker.js

@@ -82,7 +82,16 @@ var DateTimePicker = function (_a) {
                 }
             }
         }
-        if (!payload.dateRange && payload.time) {
+        else if (!payload.dateRange && !payload.time) {
+            // Handle clearing: return empty string for single mode, empty array for range mode
+            if (selectionMode === 'range') {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([]);
+            }
+            else {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange('');
+            }
+        }
+        else if (!payload.dateRange && payload.time) {
             var timeStr = "".concat(payload.time.hour, ":").concat(payload.time.minute, " ").concat(payload.time.meridiem);
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(timeStr);
         }

package/dist/components/organisms/RoundTrip/RoundTrip.js

@@ -168,10 +168,11 @@ var RoundTrip = function (_a) {
         onPaxChange === null || onPaxChange === void 0 ? void 0 : onPaxChange(newPaxData);
     };
     var handleDateRangeChange = function (dates) {
-        if (Array.isArray(dates) && dates.length === 2) {
-            setInternalArrivalDate(dates[0]);
-            setInternalDepartureDate(dates[1]);
-            onDatesChange === null || onDatesChange === void 0 ? void 0 : onDatesChange(dates[0], dates[1]);
+        console.log({ dates: dates });
+        if (Array.isArray(dates)) {
+            setInternalArrivalDate(dates === null || dates === void 0 ? void 0 : dates[0]);
+            setInternalDepartureDate(dates === null || dates === void 0 ? void 0 : dates[1]);
+            onDatesChange === null || onDatesChange === void 0 ? void 0 : onDatesChange(dates === null || dates === void 0 ? void 0 : dates[0], dates === null || dates === void 0 ? void 0 : dates[1]);
         }
     };
     // Helper to convert LocationData to LocationOption
@@ -216,8 +217,22 @@ var RoundTrip = function (_a) {
             internalPaxData.teens === 0 &&
             internalPaxData.children === 0 &&
             (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
+    // Show error if checkEmpty is true and either date is missing
     var isDateEmpty = checkEmpty && (!internalArrivalDate || !internalDepartureDate ||
         internalArrivalDate === '' || internalDepartureDate === '');
+    // Check if user filled one date but not the other (even without checkEmpty)
+    var hasPartialDates = function () {
+        console.log({ checkEmpty: checkEmpty, internalArrivalDate: internalArrivalDate, internalDepartureDate: internalDepartureDate });
+        if (!checkEmpty)
+            return false;
+        if (!internalArrivalDate || !internalDepartureDate)
+            return true;
+        return internalArrivalDate === internalDepartureDate;
+    };
+    var isDateError = function () {
+        console.log('isDateEmpty', isDateEmpty, hasPartialDates());
+        return isDateEmpty || hasPartialDates();
+    };
     var isPickupDropoffEmpty = checkEmpty && !internalPickupDropoffPoint;
     var isAccommodationEmpty = checkEmpty && !internalAccommodation;
     var pickupDropoffOptions = getPickupDropoffOptions();
@@ -237,6 +252,6 @@ var RoundTrip = function (_a) {
     };
     var defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
     var defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateEmpty ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupDropoffOption }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultAccommodationOption }) })] }) }));
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined, inputClassName: "round-trip__date-picker--input", state: isDateError() ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupDropoffOption }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultAccommodationOption }) })] }) }));
 };
 export default RoundTrip;

package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.js

@@ -49,6 +49,7 @@ var SearchBarTransfer = function (_a) {
     var _j = useState(defaultRoundTripData), roundTripData = _j[0], setRoundTripData = _j[1];
     var _k = useState(initializeTransferLines(defaultTransferLines)), transferLines = _k[0], setTransferLines = _k[1];
     var _l = useState(null), error = _l[0], setError = _l[1];
+    var _m = useState(0), validationTrigger = _m[0], setValidationTrigger = _m[1];
     // Notify parent of changes
     useEffect(function () {
         var data = {
@@ -367,6 +368,7 @@ var SearchBarTransfer = function (_a) {
     };
     // Handle search
     var handleSearch = function () {
+        setValidationTrigger(function (prev) { return prev + 1; });
         if (validateData()) {
             var data = {
                 mode: mode,
@@ -377,7 +379,7 @@ var SearchBarTransfer = function (_a) {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
         }
     };
-    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === "roundtrip" ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint, accommodation: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
+    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === "roundtrip" ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint, accommodation: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, "roundtrip-".concat(validationTrigger)), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -396,7 +398,7 @@ var SearchBarTransfer = function (_a) {
                                 departure: { label: "Departure", icon: "departure" },
                                 "inter-hotel": { label: "Inter-Hotel", icon: "building" },
                             };
-                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line) { return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: line.pickupPoint, dropoffPoint: line.dropoffPoint, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, line.id)); }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
+                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line) { return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: line.pickupPoint, dropoffPoint: line.dropoffPoint, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, "".concat(line.id, "-").concat(validationTrigger))); }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
                         })() }))] })), _jsxs("div", { className: "search-bar-transfer__actions", children: [_jsx(Checkbox, { checked: sameVehicle, onChange: setSameVehicle, label: "Use the same vehicle for all your transfers" }), _jsxs("div", { className: "search-bar-transfer__cta", children: [error && (_jsx(Toast, { text: error, type: "danger" })), _jsx(Button, { variant: "primary", size: "lg", onClick: handleSearch, children: "Search" })] })] })] }));
 };
 export default SearchBarTransfer;

package/dist/styles/components/selected-value.css

@@ -17,23 +17,21 @@
   max-width: 200px;
   width: auto;
   opacity: var(--opacity-opacity-100);
-}
-
-/* Variant: text-only (no background, no padding) */
-
-.selected-value--text {
-  background: transparent;
-  padding: 0;
-  color: var(--color-slate-900);
-}
-
-.selected-value__text {
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  /* Typography styles are now handled by the Text component */
+  /* Variant: text-only (no background, no padding) */
+  .selected-value--text {
+    background: transparent;
+    padding: 0;
+    color: var(--color-slate-900);
+  }
+
+  .selected-value__text {
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    /* Typography styles are now handled by the Text component */
+  }
 }
 
 .selected-value__remove {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.92",
+  "version": "0.2.94",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -132,9 +132,14 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
             onValueChange?.(dateStr);
           }
         }
-      }
-
-      if (!payload.dateRange && payload.time) {
+      } else if (!payload.dateRange && !payload.time) {
+        // Handle clearing: return empty string for single mode, empty array for range mode
+        if (selectionMode === 'range') {
+          onValueChange?.([]);
+        } else {
+          onValueChange?.('');
+        }
+      } else if (!payload.dateRange && payload.time) {
         const timeStr = `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}`;
         onValueChange?.(timeStr);
       }

package/src/components/organisms/RoundTrip/RoundTrip.tsx

@@ -271,10 +271,12 @@ const RoundTrip: React.FC<RoundTripProps> = ({
   };
 
   const handleDateRangeChange = (dates: string | string[]) => {
-    if (Array.isArray(dates) && dates.length === 2) {
-      setInternalArrivalDate(dates[0]);
-      setInternalDepartureDate(dates[1]);
-      onDatesChange?.(dates[0], dates[1]);
+    console.log({dates});
+    
+    if (Array.isArray(dates)) {
+      setInternalArrivalDate(dates?.[0]);
+      setInternalDepartureDate(dates?.[1]);
+      onDatesChange?.(dates?.[0], dates?.[1]);
     }
   };
 
@@ -324,8 +326,22 @@ const RoundTrip: React.FC<RoundTripProps> = ({
      internalPaxData.children === 0 && 
      (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
 
+  // Show error if checkEmpty is true and either date is missing
   const isDateEmpty = checkEmpty && (!internalArrivalDate || !internalDepartureDate || 
     internalArrivalDate === '' || internalDepartureDate === '');
+  
+  // Check if user filled one date but not the other (even without checkEmpty)
+  const hasPartialDates = (): boolean => {
+    console.log({checkEmpty, internalArrivalDate, internalDepartureDate});
+    if (!checkEmpty) return false;
+    if (!internalArrivalDate || !internalDepartureDate) return true;
+    return internalArrivalDate === internalDepartureDate;
+  };
+  
+  const isDateError = (): boolean => {
+    console.log('isDateEmpty', isDateEmpty, hasPartialDates());
+    return isDateEmpty || hasPartialDates();
+  };
 
   const isPickupDropoffEmpty = checkEmpty && !internalPickupDropoffPoint;
 
@@ -382,7 +398,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             selectionMode="range"
             defaultValue={internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined}
             inputClassName="round-trip__date-picker--input"
-            state={isDateEmpty ? 'error' : undefined}
+            state={isDateError() ? 'error' : undefined}
             scrollOnOpen={scrollOnOpen}
           />
         </div>

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -85,6 +85,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     initializeTransferLines(defaultTransferLines)
   );
   const [error, setError] = useState<string | null>(null);
+  const [validationTrigger, setValidationTrigger] = useState<number>(0);
 
   // Notify parent of changes
   useEffect(() => {
@@ -467,6 +468,8 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   // Handle search
   const handleSearch = () => {
+    setValidationTrigger(prev => prev + 1);
+    
     if (validateData()) {
       const data: SearchBarTransferData = {
         mode,
@@ -501,6 +504,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
       {mode === "roundtrip" ? (
         <>
           <RoundTrip
+            key={`roundtrip-${validationTrigger}`}
             id="roundtrip-main"
             locations={locations}
             paxData={roundTripData?.paxData}
@@ -579,7 +583,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                     {/* Transfer lines in this category */}
                     {groupedTransfers[type].map((line) => (
                       <TransferLine
-                        key={line.id}
+                        key={`${line.id}-${validationTrigger}`}
                         id={line.id}
                         type={line.type}
                         paxData={line.paxData}

package/src/styles/components/selected-value.css

@@ -11,22 +11,21 @@
   max-width: 200px;
   width: auto;
   opacity: var(--opacity-opacity-100);
-}
-
-/* Variant: text-only (no background, no padding) */
-.selected-value--text {
-  background: transparent;
-  padding: 0;
-  color: var(--color-slate-900);
-}
+  /* Variant: text-only (no background, no padding) */
+  .selected-value--text {
+    background: transparent;
+    padding: 0;
+    color: var(--color-slate-900);
+  }
 
-.selected-value__text {
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  /* Typography styles are now handled by the Text component */
+  .selected-value__text {
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    /* Typography styles are now handled by the Text component */
+  }
 }
 
 .selected-value__remove {