mautourco-components 0.2.171 → 0.2.172

package/dist/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.js

@@ -23,7 +23,7 @@ import Checkbox from '../../../atoms/Checkbox/Checkbox';
 import { Text } from '../../../atoms/Typography/Typography';
 import useBookingPax from '../../../../hooks/useBookingPax';
 import { cn } from '../../../../lib/utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './BookingPaxClient.css';
 /**
  * BookingPaxClient is a component that allows the user to select the pax for a booking.
@@ -99,9 +99,15 @@ export function BookingPaxClient(props) {
             setSelectedClientsInfoIds(defaultSelectedClientsInfoIds);
         }
     }, [defaultSelectedClientsInfoIds]);
+    var prevErrorRef = useRef(undefined);
     useEffect(function () {
-        onError === null || onError === void 0 ? void 0 : onError(hasError && clients.length !== paxCount);
-    }, [hasError]);
+        var _a;
+        var hasError = ((_a = selectedClientsInfoIds[selectedIndex]) === null || _a === void 0 ? void 0 : _a.length) !== paxCount;
+        if (prevErrorRef.current !== hasError) {
+            prevErrorRef.current = hasError;
+            onError === null || onError === void 0 ? void 0 : onError(hasError);
+        }
+    }, [selectedClientsInfoIds, selectedIndex, paxCount, onError]);
     return (_jsxs("div", { className: "booking_spacing-y-2", children: [_jsxs(Text, { children: ["Please confirm the pax which applies on this service (", paxCount, " Pax)", ' ', _jsx(Text, { color: "state-error", as: "span", children: "*" })] }), _jsx("div", { className: cn('booking-pax-client', {
                     'booking-pax-accom--error': hasError,
                 }), children: clients.map(function (client) {

package/dist/components/organisms/Booking/BookingPaxList.js

@@ -19,7 +19,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { BookingPax, } from '../../molecules/BookingPax';
 // Type guards for better type safety
 var isAccommodationData = function (data) {
@@ -53,6 +54,7 @@ var isTransferData = function (data) {
 export function BookingPaxList(props) {
     var data = props.data, isSubmitted = props.isSubmitted, clientsInfo = props.clientsInfo, onPaxChange = props.onPaxChange, onRemarkChange = props.onRemarkChange, onError = props.onError, onTimeChange = props.onTimeChange, onFlightNumberChange = props.onFlightNumberChange, onAutoFilled = props.onAutoFilled, onChange = props.onChange;
     var _a = useState([]), autoFilledData = _a[0], setAutoFilledData = _a[1];
+    var autoFilledDataRef = useRef([]);
     // Memoized callback handlers to reduce re-renders
     var handlePaxChange = useCallback(function (type, index, options) {
         onPaxChange === null || onPaxChange === void 0 ? void 0 : onPaxChange(index, type, options);
@@ -116,8 +118,11 @@ export function BookingPaxList(props) {
         });
     }, [data, handleAutoFilled]);
     useEffect(function () {
-        onAutoFilled === null || onAutoFilled === void 0 ? void 0 : onAutoFilled(autoFilledData);
-    }, [autoFilledData, onAutoFilled]);
+        if (!isEqual(autoFilledData, autoFilledDataRef.current)) {
+            autoFilledDataRef.current = autoFilledData;
+            onAutoFilled === null || onAutoFilled === void 0 ? void 0 : onAutoFilled(autoFilledData);
+        }
+    }, [autoFilledData]);
     return (_jsx(BookingPax, { children: data.map(function (item, index) {
             var type = item.type, itemData = item.data;
             var callbacks = {

package/package.json

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

package/src/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.tsx

@@ -2,7 +2,7 @@ import Checkbox, { CheckboxProps } from '@/src/components/atoms/Checkbox/Checkbo
 import { Text } from '@/src/components/atoms/Typography/Typography';
 import useBookingPax from '@/src/hooks/useBookingPax';
 import { cn } from '@/src/lib/utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './BookingPaxClient.css';
 
 export interface BookingPaxClientInfo {
@@ -214,9 +214,15 @@ export function BookingPaxClient(props: BookingPaxClientProps) {
     }
   }, [defaultSelectedClientsInfoIds]);
 
+  const prevErrorRef = useRef<boolean | undefined>(undefined);
+
   useEffect(() => {
-    onError?.(hasError && clients.length !== paxCount);
-  }, [hasError]);
+    const hasError = selectedClientsInfoIds[selectedIndex]?.length !== paxCount;
+    if (prevErrorRef.current !== hasError) {
+      prevErrorRef.current = hasError;
+      onError?.(hasError);
+    }
+  }, [selectedClientsInfoIds, selectedIndex, paxCount, onError]);
 
   return (
     <div className="booking_spacing-y-2">

package/src/components/organisms/Booking/BookingPaxList.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   BookingPax,
   BookingPaxAccomProps,
@@ -168,6 +169,8 @@ export function BookingPaxList(props: BookingPaxProps) {
     }[]
   >([]);
 
+  const autoFilledDataRef = useRef<BookingPaxAutoFilledData[]>([]);
+
   // Memoized callback handlers to reduce re-renders
   const handlePaxChange = useCallback(
     (type: BookingPaxData['type'], index: number, options: BookingPaxClientOptions) => {
@@ -252,8 +255,11 @@ export function BookingPaxList(props: BookingPaxProps) {
   }, [data, handleAutoFilled]);
 
   useEffect(() => {
-    onAutoFilled?.(autoFilledData);
-  }, [autoFilledData, onAutoFilled]);
+    if (!isEqual(autoFilledData, autoFilledDataRef.current)) {
+      autoFilledDataRef.current = autoFilledData;
+      onAutoFilled?.(autoFilledData);
+    }
+  }, [autoFilledData]);
 
   return (
     <BookingPax>