mautourco-components 0.2.18 → 0.2.20

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

@@ -0,0 +1,224 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  BookingPax,
+  BookingPaxAccomProps,
+  BookingPaxExcursionProps,
+  BookingPaxTransferProps,
+} from '../../molecules/BookingPax';
+import {
+  BookingPaxClientInfo,
+  BookingPaxClientOptions,
+} from '../../molecules/BookingPax/BookingPaxClient/BookingPaxClient';
+
+export interface BookingPaxData {
+  type: 'accommodation' | 'excursion' | 'transfer';
+  data:
+    | Omit<BookingPaxAccomProps, 'clientsInfo'>
+    | Omit<BookingPaxExcursionProps, 'clientsInfo'>
+    | Omit<BookingPaxTransferProps, 'clientsInfo'>;
+}
+
+export interface BookingPaxAutoFilledData {
+  type: BookingPaxData['type'];
+  parentIndex: number;
+  roomIndex?: number;
+  selectedClients: BookingPaxClientInfo[];
+}
+
+export interface BookingPaxProps {
+  data: BookingPaxData[];
+  clientsInfo: BookingPaxClientInfo[];
+  isSubmitted?: boolean;
+  onPaxChange?: (
+    index: number,
+    type: BookingPaxData['type'],
+    options: BookingPaxClientOptions
+  ) => void;
+  onRemarkChange?: (index: number, type: BookingPaxData['type'], value: string) => void;
+  onError?: (index: number, type: BookingPaxData['type'], hasError: boolean) => void;
+  onTimeChange?: (index: number, value: string | string[]) => void;
+  onFlightNumberChange?: (index: number, value: string) => void;
+  onAutoFilled?: (data: BookingPaxAutoFilledData[]) => void;
+}
+
+// Type guards for better type safety
+const isAccommodationData = (
+  data: BookingPaxData['data']
+): data is BookingPaxAccomProps => {
+  return 'rooms' in data && 'hotelName' in data && 'roomName' in data;
+};
+
+const isExcursionData = (
+  data: BookingPaxData['data']
+): data is BookingPaxExcursionProps => {
+  return 'name' in data && 'type' in data && !('from' in data);
+};
+
+const isTransferData = (
+  data: BookingPaxData['data']
+): data is BookingPaxTransferProps => {
+  return 'from' in data && 'to' in data && 'type' in data;
+};
+
+export const BookingPaxList: React.FC<BookingPaxProps> = (props) => {
+  const {
+    data,
+    isSubmitted,
+    clientsInfo,
+    onPaxChange,
+    onRemarkChange,
+    onError,
+    onTimeChange,
+    onFlightNumberChange,
+    onAutoFilled,
+  } = props;
+
+  const [autoFilledData, setAutoFilledData] = useState<
+    {
+      type: BookingPaxData['type'];
+      parentIndex: number;
+      roomIndex?: number;
+      selectedClients: BookingPaxClientInfo[];
+    }[]
+  >([]);
+
+  // Memoized callback handlers to reduce re-renders
+  const handlePaxChange = useCallback(
+    (type: BookingPaxData['type'], index: number, options: BookingPaxClientOptions) => {
+      onPaxChange?.(index, type, options);
+    },
+    [onPaxChange]
+  );
+
+  const handleRemarkChange = useCallback(
+    (type: BookingPaxData['type'], index: number, value: string) => {
+      onRemarkChange?.(index, type, value);
+    },
+    [onRemarkChange]
+  );
+
+  const handleError = useCallback(
+    (index: number, type: BookingPaxData['type'], hasError: boolean) => {
+      onError?.(index, type, hasError);
+    },
+    [onError]
+  );
+
+  const handleTimeChange = useCallback(
+    (value: string | string[], index: number) => {
+      // Don't need type because only transfer has this callback
+      onTimeChange?.(index, value);
+    },
+    [onTimeChange]
+  );
+
+  const handleFlightNumberChange = useCallback(
+    (value: string, index: number) => {
+      // Don't need type because only transfer has this callback
+      onFlightNumberChange?.(index, value);
+    },
+    [onFlightNumberChange]
+  );
+
+  const handleAutoFilled = useCallback((type: BookingPaxData['type']) => {
+    return (paxCount: number, index: number, roomIndex?: number) => {
+      if (paxCount === clientsInfo.length) {
+        setAutoFilledData((prev) => {
+          const findParentIndex = prev.find((d) => d.parentIndex === index);
+          if (findParentIndex) {
+            return prev;
+          }
+          return [
+            ...prev,
+            {
+              type,
+              parentIndex: index,
+              selectedClients: clientsInfo,
+              roomIndex,
+            },
+          ];
+        });
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    data.forEach((item, index) => {
+      const { type, data: itemData } = item;
+      if (type === 'accommodation' && isAccommodationData(itemData)) {
+        const initAccom = handleAutoFilled('accommodation');
+        // if(itemData.clientsInfo.length === itemData)
+        itemData.rooms.forEach((room, roomIndex) => {
+          initAccom(room.paxCount, index, roomIndex);
+        });
+      } else if (type === 'excursion' && isExcursionData(itemData)) {
+        const initExcursion = handleAutoFilled('excursion');
+        initExcursion(itemData.paxCount, index);
+      } else if (type === 'transfer' && isTransferData(itemData)) {
+        const initTransfer = handleAutoFilled('transfer');
+        initTransfer(itemData.paxCount, index);
+      }
+    });
+  }, [data, handleAutoFilled]);
+
+  useEffect(() => {
+    onAutoFilled?.(autoFilledData);
+  }, [autoFilledData, onAutoFilled]);
+
+  return (
+    <BookingPax>
+      {data.map((item, index) => {
+        const { type, data: itemData } = item;
+
+        const callbacks = {
+          onPaxChange: (options: BookingPaxClientOptions) =>
+            handlePaxChange(type, index, options),
+          onRemarkChange: (value: string) => handleRemarkChange(type, index, value),
+        };
+
+        if (type === 'accommodation' && isAccommodationData(itemData)) {
+          return (
+            <BookingPax.Accom
+              key={`bp-accom-${index}`}
+              {...itemData}
+              {...callbacks}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(roomIndex, hasError) => handleError(roomIndex, type, hasError)}
+            />
+          );
+        }
+
+        if (type === 'excursion' && isExcursionData(itemData)) {
+          return (
+            <BookingPax.Excursion
+              key={`bp-excursion-${index}`}
+              {...itemData}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(hasError) => handleError(index, type, hasError)}
+              {...callbacks}
+            />
+          );
+        }
+
+        if (type === 'transfer' && isTransferData(itemData)) {
+          return (
+            <BookingPax.Transfer
+              key={`bp-transfer-${index}`}
+              {...itemData}
+              onTimeChange={(value) => handleTimeChange(value, index)}
+              onFlightNumberChange={(value) => handleFlightNumberChange(value, index)}
+              clientsInfo={clientsInfo}
+              isSubmitted={isSubmitted}
+              onError={(hasError) => handleError(index, type, hasError)}
+              {...callbacks}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </BookingPax>
+  );
+};

package/src/components/organisms/Booking/BookingStep/BookingStep.css

@@ -0,0 +1,12 @@
+.booking-step {
+  @apply flex flex-col items-end max-w-[500px] space-y-6;
+  @screen xl {
+    max-width: none;
+    flex-direction: row;
+    align-items: center;
+    column-gap: var(--spacing-gap-gap-6);
+    > button {
+      margin-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import Button from '@/src/components/atoms/Button/Button';
+import {
+  StepperTimeline,
+  StepperTimelineItem,
+} from '@/src/components/molecules/StepperTimeline/StepperTimeline';
+import React, { useState } from 'react';
+import './BookingStep.css';
+
+export interface BookingStepProps {
+  steps: StepperTimelineItem[];
+  className?: string;
+  nextDisabled?: boolean;
+  onStepChange?: (step: StepperTimelineItem, index: number) => void;
+  onNextClick?: (step: StepperTimelineItem, index: number) => void;
+}
+
+export const BookingStep: React.FC<BookingStepProps> = (props) => {
+  const { steps, className, nextDisabled, onStepChange, onNextClick } = props;
+
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+
+  const handleStepChange = (step: StepperTimelineItem, index: number) => {
+    setCurrentIndex(index);
+    onStepChange?.(step, index);
+  };
+
+  const handleNextClick = () => {
+    const currentStep = currentIndex + 1;
+    setCurrentIndex(currentStep);
+    onNextClick?.(steps[currentStep], currentStep);
+  };
+
+  return (
+    <div className="booking-step">
+      <StepperTimeline
+        steps={steps}
+        className={className}
+        currentIndex={currentIndex}
+        onChange={handleStepChange}
+      />
+      <Button
+        trailingIcon="arrow-right-outline"
+        variant="secondary"
+        className="w-[189px]"
+        disabled={nextDisabled}
+        onClick={handleNextClick}>
+        {currentIndex === steps.length - 1 ? 'Confirm' : 'Next'}
+      </Button>
+    </div>
+  );
+};

package/src/components/organisms/Booking/index.ts

@@ -0,0 +1,3 @@
+export * from './Booking';
+export type { BookingDocketProps } from './BookingDocket/BookingDocket';
+export type { BookingStepProps } from './BookingStep/BookingStep';

package/src/components/organisms/CarBookingCard/index.ts

@@ -13,3 +13,4 @@ export type {
 
 
 
+

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

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
-import CalendarInput from "../../molecules/Calendar/CalendarInput";
-import DateTime, { DateTimeProps } from "../../molecules/Calendar/DateTime";
-import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+import React, { useState } from 'react';
+import CalendarInput from '../../molecules/Calendar/CalendarInput';
+import DateTime, { DateTimeProps } from '../../molecules/Calendar/DateTime';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 
-import { format } from "date-fns";
+import { format } from 'date-fns';
+import { IconName } from '../../atoms/Icon/Icon';
 
 export interface DateTimePickerProps extends Partial<DateTimeProps> {
   placeholder?: string;
@@ -14,40 +15,43 @@ export interface DateTimePickerProps extends Partial<DateTimeProps> {
   /** Whether the calendar icon has full bg*/
   iconBGFull?: boolean;
   /** Position of the calendar icon: left or right */
-  iconPosition?: "left" | "right";
+  iconPosition?: 'left' | 'right';
   /** Show chevron on the right when icon is on the left */
   showChevron?: boolean;
+  /** Icon to display on the left of the input */
+  icon?: IconName;
 }
 
 const formatDateRange = (dateRange: any) => {
-  if (!dateRange || !dateRange.from) return "";
+  if (!dateRange || !dateRange.from) return '';
   const from = dateRange.from;
   const to = dateRange.to ?? dateRange.from;
-  
-  if (+from === +to) return format(from, "dd/MM/yyyy");
-  return `${format(from, "dd/MM/yyyy")} - ${format(to, "dd/MM/yyyy")}`;
+
+  if (+from === +to) return format(from, 'dd/MM/yyyy');
+  return `${format(from, 'dd/MM/yyyy')} - ${format(to, 'dd/MM/yyyy')}`;
 };
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  placeholder = "Select date",
+  placeholder = 'Select date',
   disabled = false,
-  mode = "both",
-  selectionMode = "range",
+  mode = 'both',
+  selectionMode = 'range',
   numberOfMonths = 2,
   disableBeforeToday = true,
   disableToday = false,
   onValueChange,
   defaultValue,
   iconBGFull = true,
-  iconPosition = "right",
+  iconPosition = 'right',
   showChevron = false,
+  icon,
 }) => {
   // Parse default value and set initial state
   const parseDefaultValue = () => {
-    if (!defaultValue) return { value: "", dateRange: undefined };
+    if (!defaultValue) return { value: '', dateRange: undefined };
 
     try {
-      if (selectionMode === "range" && Array.isArray(defaultValue)) {
+      if (selectionMode === 'range' && Array.isArray(defaultValue)) {
         // Handle range: ["yyyy-MM-dd", "yyyy-MM-dd"]
         const [fromStr, toStr] = defaultValue;
         const from = new Date(fromStr);
@@ -55,56 +59,71 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
         const dateRange = { from, to };
         const displayValue = formatDateRange(dateRange);
         return { value: displayValue, dateRange };
-      } else if (selectionMode === "single" && typeof defaultValue === "string") {
+      } else if (selectionMode === 'single' && typeof defaultValue === 'string') {
         // Handle single: "yyyy-MM-dd"
         const date = new Date(defaultValue);
         const dateRange = { from: date, to: date };
-        const displayValue = format(date, "dd/MM/yyyy");
+        const displayValue = format(date, 'dd/MM/yyyy');
         return { value: displayValue, dateRange };
       }
     } catch (error) {
-      console.error("Error parsing default date value:", error);
+      console.error('Error parsing default date value:', error);
     }
 
-    return { value: "", dateRange: undefined };
+    return { value: '', dateRange: undefined };
   };
 
   const initialState = parseDefaultValue();
   const [value, setValue] = useState<string>(initialState.value);
   const [selectedDateRange, setSelectedDateRange] = useState<any>(initialState.dateRange);
-  const [selectedTime, setSelectedTime] = useState<{ hour: string; minute: string; meridiem: "AM" | "PM" } | undefined>(undefined);
+  const [selectedTime, setSelectedTime] = useState<
+    { hour: string; minute: string; meridiem: 'AM' | 'PM' } | undefined
+  >(undefined);
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleDtChange = React.useCallback((payload: { dateRange?: any; time?: { hour: string; minute: string; meridiem: "AM" | "PM" } }) => {
-    const datePart = formatDateRange(payload.dateRange);
-    const time = payload.time ? `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}` : "";
-    const combined = [datePart, time].filter(Boolean).join(" ");
-    setValue(combined);
-    setSelectedDateRange(payload.dateRange);
-    setSelectedTime(payload.time);
-    
-    // Return date strings in yyyy-MM-dd format for both modes
-    if (payload.dateRange) {
-      if (selectionMode === "range") {
-        // Return array of date strings for range mode
-        const from = payload.dateRange.from;
-        const to = payload.dateRange.to ?? payload.dateRange.from;
-        
-        if (from && to) {
-          const fromStr = format(from, "yyyy-MM-dd");
-          const toStr = format(to, "yyyy-MM-dd");
-          onValueChange?.([fromStr, toStr]);
-        }
-      } else {
-        // Return single date string in yyyy-MM-dd format for single mode
-        const date = payload.dateRange.from;
-        if (date) {
-          const dateStr = format(date, "yyyy-MM-dd");
-          onValueChange?.(dateStr);
+  const handleDtChange = React.useCallback(
+    (payload: {
+      dateRange?: any;
+      time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+    }) => {
+      const datePart = formatDateRange(payload.dateRange);
+      const time = payload.time
+        ? `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}`
+        : '';
+      const combined = [datePart, time].filter(Boolean).join(' ');
+      setValue(combined);
+      setSelectedDateRange(payload.dateRange);
+      setSelectedTime(payload.time);
+
+      // Return date strings in yyyy-MM-dd format for both modes
+      if (payload.dateRange) {
+        if (selectionMode === 'range') {
+          // Return array of date strings for range mode
+          const from = payload.dateRange.from;
+          const to = payload.dateRange.to ?? payload.dateRange.from;
+
+          if (from && to) {
+            const fromStr = format(from, 'yyyy-MM-dd');
+            const toStr = format(to, 'yyyy-MM-dd');
+            onValueChange?.([fromStr, toStr]);
+          }
+        } else {
+          // Return single date string in yyyy-MM-dd format for single mode
+          const date = payload.dateRange.from;
+          if (date) {
+            const dateStr = format(date, 'yyyy-MM-dd');
+            onValueChange?.(dateStr);
+          }
         }
       }
-    }
-  }, [onValueChange, selectionMode]);
+
+      if (!payload.dateRange && payload.time) {
+        const timeStr = `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}`;
+        onValueChange?.(timeStr);
+      }
+    },
+    [onValueChange, selectionMode]
+  );
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
@@ -118,6 +137,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
             iconPosition={iconPosition}
             showChevron={showChevron}
             isOpen={isOpen}
+            icon={icon}
           />
         </div>
       </PopoverTrigger>

package/src/components/organisms/DialogBookingConfirm/DialogBookingConfirm.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Dialog from '../Dialog/Dialog';
+
+interface DialogBookingConfirmProps {
+  open: boolean;
+  title: string;
+  children: React.ReactNode;
+  setOpen: (open: boolean) => void;
+  className?: string;
+}
+
+export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
+  const { open, title, children, setOpen, className } = props;
+
+  return (
+    <Dialog
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      title={title}
+      className={className}
+      showFooter={false}>
+      {children}
+    </Dialog>
+  );
+};

package/src/components/organisms/TabCancellationPolicy/HeaderAccom.tsx

@@ -1,5 +1,4 @@
-import { differenceInDays } from 'date-fns';
-import { useMemo } from 'react';
+import useStays from '@/src/hooks/useStays';
 import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
 import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
@@ -13,12 +12,7 @@ export interface HeaderAccomProps {
 export default function HeaderAccom(props: HeaderAccomProps) {
   const { hotelName, pax, dates } = props;
 
-  const stay = useMemo(() => {
-    if (dates.length) {
-      return differenceInDays(dates[1], dates[0]);
-    }
-    return 0;
-  }, [dates]);
+  const stay = useStays(dates);
 
   return (
     <div>

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+
+import { cn } from '@/src/lib/utils';
+import Icon from '../atoms/Icon/Icon';
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'w-5 h-5 border border-[var(--checkbox-color-checkbox-border-default-default)] data-[state=checked]:border-[var(--checkbox-color-checkbox-border-selected-default)] rounded-[var(--border-radius-rounded-sm)] data-[error=true]:border-[var(--checkbox-color-checkbox-border-default-error)] data-[error=true]:bg-[var(--checkbox-color-checkbox-background-error)] disabled:opacity-50 disabled:cursor-not-allowed',
+        className
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none">
+        <Icon
+          name="check"
+          size="sm"
+          className="text-[var(--checkbox-color-checkbox-checked-default)]"
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };