mautourco-components 0.2.21 → 0.2.23

package/src/components/molecules/Calendar/DateTime.tsx

@@ -1,25 +1,28 @@
-import { useState, useEffect } from "react";
-import { Calendar } from "../../ui/calendar";
-import { DateRange } from "react-day-picker";
-import { Button } from "../../ui/button";
-import TimePicker from "./TimePicker";
-import { Locale } from "date-fns/locale";
-import Icon from "../../atoms/Icon/Icon";
+import { Locale } from 'date-fns/locale';
+import { useEffect, useState } from 'react';
+import { DateRange } from 'react-day-picker';
+import Icon from '../../atoms/Icon/Icon';
+import { Button } from '../../ui/button';
+import { Calendar } from '../../ui/calendar';
+import TimePicker from './TimePicker';
 
 export interface DateTimeProps {
-  mode?: "calendar" | "time" | "both";
-  selectionMode?: "single" | "range";
+  mode?: 'calendar' | 'time' | 'both';
+  selectionMode?: 'single' | 'range';
   numberOfMonths?: 1 | 2;
   disableBeforeToday?: boolean;
   disableToday?: boolean;
   defaultDateRange?: DateRange;
-  defaultTime?: { hour: string; minute: string; meridiem: "AM" | "PM" };
-  onChange?: (payload: { dateRange?: DateRange; time?: { hour: string; minute: string; meridiem: "AM" | "PM" } }) => void;
+  defaultTime?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+  onChange?: (payload: {
+    dateRange?: DateRange;
+    time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+  }) => void;
 }
 
 const DateTime: React.FC<DateTimeProps> = ({
-  mode = "both",
-  selectionMode = "range",
+  mode = 'both',
+  selectionMode = 'range',
   numberOfMonths = 2,
   disableBeforeToday = true,
   disableToday = false,
@@ -28,15 +31,19 @@ const DateTime: React.FC<DateTimeProps> = ({
   onChange,
 }) => {
   const [dateRange, setDateRange] = useState<DateRange | undefined>(defaultDateRange);
-  const [hours, setHours] = useState<string>(defaultTime?.hour ?? "12");
-  const [minutes, setMinutes] = useState<string>(defaultTime?.minute ?? "00");
-  const [amPm, setAmPm] = useState<"AM" | "PM">(defaultTime?.meridiem ?? "AM");
+  const [month, setMonth] = useState<Date | undefined>(defaultDateRange?.from);
+  const [hours, setHours] = useState<string>(defaultTime?.hour ?? '12');
+  const [minutes, setMinutes] = useState<string>(defaultTime?.minute ?? '00');
+  const [amPm, setAmPm] = useState<'AM' | 'PM'>(defaultTime?.meridiem ?? 'AM');
 
   // notify parent when date or time changes
   useEffect(() => {
     onChange?.({
       dateRange: dateRange ?? undefined,
-      time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
+      time:
+        mode === 'calendar'
+          ? undefined
+          : { hour: hours, minute: minutes, meridiem: amPm },
     });
   }, [dateRange, hours, minutes, amPm, onChange, mode]);
 
@@ -60,9 +67,9 @@ const DateTime: React.FC<DateTimeProps> = ({
   };
 
   const resetTime = () => {
-    setHours("12");
-    setMinutes("00");
-    setAmPm("AM");
+    setHours('12');
+    setMinutes('00');
+    setAmPm('AM');
   };
 
   const clearSelection = () => {
@@ -76,7 +83,7 @@ const DateTime: React.FC<DateTimeProps> = ({
     setDateRange({ from: today, to: today });
   };
 
-  const calendarMode = selectionMode === "single" ? "single" : "range";
+  const calendarMode = selectionMode === 'single' ? 'single' : 'range';
 
   const buildDisabled = () => {
     const disabled: any[] = [];
@@ -95,44 +102,55 @@ const DateTime: React.FC<DateTimeProps> = ({
 
   const disabledDays = buildDisabled();
 
+  useEffect(() => {
+    if (defaultDateRange) {
+      setMonth(defaultDateRange?.from);
+    }
+  }, [defaultDateRange]);
+
   return (
     <div className="calendar--dropdown">
-      {mode !== "time" && (() => {
-        const calendarProps: any = {
-          mode: calendarMode,
-          selected: dateRange,
-          onSelect: handleSelect,
-          weekStartsOn: 1,
-          showOutsideDays: false,
-          numberOfMonths: numberOfMonths,
-          disabled: disabledDays,
-          className:"p-0",
-          formatters: {
-            formatWeekdayName: (weekday: Date, options?: { locale?: Locale }) => {
-              return weekday
-                .toLocaleDateString(options?.locale?.code, { weekday: "short" })
-                .toUpperCase();
+      {mode !== 'time' &&
+        (() => {
+          const calendarProps: any = {
+            mode: calendarMode,
+            selected: dateRange,
+            onSelect: handleSelect,
+            weekStartsOn: 1,
+            month,
+            onMonthChange: setMonth,
+            showOutsideDays: false,
+            numberOfMonths: numberOfMonths,
+            disabled: disabledDays,
+            className: 'p-0',
+            formatters: {
+              formatWeekdayName: (weekday: Date, options?: { locale?: Locale }) => {
+                return weekday
+                  .toLocaleDateString(options?.locale?.code, { weekday: 'short' })
+                  .toUpperCase();
+              },
             },
-          },
-        };
+          };
 
-        return <Calendar {...calendarProps}/>;
-      })()}
+          return <Calendar {...calendarProps} />;
+        })()}
 
-      {mode !== "calendar" && (
-        <div className={`${mode === "both" ? "calendar--time_container_separated" : ""}`}>
+      {mode !== 'calendar' && (
+        <div className={`${mode === 'both' ? 'calendar--time_container_separated' : ''}`}>
           <TimePicker
             label="Time"
             hour={hours}
             minute={minutes}
             meridiem={amPm}
             onChange={(h, m, mm) => {
-              const hh = String(
-                Math.max(0, Math.min(12, Number(h || 0)))
-              ).padStart(2, "0");
-              const mmn = String(
-                Math.max(0, Math.min(59, Number(m || 0)))
-              ).padStart(2, "0");
+              const hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(
+                2,
+                '0'
+              );
+              const mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(
+                2,
+                '0'
+              );
               setHours(hh);
               setMinutes(mmn);
               setAmPm(mm);
@@ -141,7 +159,7 @@ const DateTime: React.FC<DateTimeProps> = ({
         </div>
       )}
 
-      {mode !== "time" && (
+      {mode !== 'time' && (
         <div className="calendar--footer">
           <Button
             variant="ghost"
@@ -149,8 +167,7 @@ const DateTime: React.FC<DateTimeProps> = ({
             onClick={selectToday}
             type="button"
             className="calendar--footer--button"
-            disabled={disableToday}
-          >
+            disabled={disableToday}>
             <Icon name="calendar-outline" size="sm" />
             Today
           </Button>
@@ -159,8 +176,7 @@ const DateTime: React.FC<DateTimeProps> = ({
             size="sm"
             onClick={clearSelection}
             type="button"
-            className="calendar--footer--button"
-          >
+            className="calendar--footer--button">
             Clear
           </Button>
         </div>

package/src/components/molecules/DialogContentPolicy/DialogCancellationList.tsx

@@ -10,28 +10,48 @@ import {
 import { DialogContentPolicy } from './DialogContentPolicy';
 
 export interface CancellationItem {
+  /**
+   * The type of the cancellation.
+   */
   type: 'accommodation' | 'excursion';
+  /**
+   * The data of the cancellation.
+   */
   data: DialogCancellationAccomProps | DialogCancellationExcursionProps;
 }
 
 export interface DialogCancellationListProps {
+  /**
+   * The cancellations to display.
+   */
   cancellations: CancellationItem[];
 }
 
-export const DialogCancellationList: React.FC<DialogCancellationListProps> = (props) => {
-  const { cancellations } = props;
+const isAccommodation = (
+  data: CancellationItem['data']
+): data is DialogCancellationAccomProps => {
+  return 'hotelName' in data;
+};
 
-  const isAccommodation = (
-    data: CancellationItem['data']
-  ): data is DialogCancellationAccomProps => {
-    return 'hotelName' in data;
-  };
+const isExcursion = (
+  data: CancellationItem['data']
+): data is DialogCancellationExcursionProps => {
+  return 'excursionName' in data;
+};
 
-  const isExcursion = (
-    data: CancellationItem['data']
-  ): data is DialogCancellationExcursionProps => {
-    return 'excursionName' in data;
-  };
+/**
+ * DialogCancellationList is a component that allows the user to display the cancellations.
+ *
+ * @example
+ * <DialogCancellationList
+ *  cancellations={cancellations}
+ * />
+ *
+ * @param props - The props for the DialogCancellationList component.
+ * @returns The DialogCancellationList component.
+ */
+export const DialogCancellationList: React.FC<DialogCancellationListProps> = (props) => {
+  const { cancellations } = props;
 
   return (
     <DialogContentPolicy>

package/src/components/molecules/DialogContentPolicy/DialogContentPolicy.tsx

@@ -1,32 +1,48 @@
-import { CheckedState } from '@radix-ui/react-checkbox';
 import React, { useState } from 'react';
 import Button from '../../atoms/Button/Button';
-import { Text } from '../../atoms/Typography/Typography';
-import { Checkbox } from '../../ui/checkbox';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
 import { DialogCancellationAccom } from './DialogCancellationAccom';
 import { DialogCancellationExcursion } from './DialogCancellationExcursion';
 import { DialogCancellationList } from './DialogCancellationList';
 
 export interface DialogContentPolicyProps {
+  /**
+   * The children to display.
+   */
   children: React.ReactNode;
+  /**
+   * The callback function to call when the submit button is clicked.
+   */
   onSubmit?: () => void;
 }
 
+/**
+ * DialogContentPolicy is a component that allows the user to display the cancellation policy.
+ *
+ * @example
+ * <DialogContentPolicy
+ *  children={children}
+ *  onSubmit={onSubmit}
+ * />
+ *
+ * @param props - The props for the DialogContentPolicy component.
+ * @returns The DialogContentPolicy component.
+ */
 export const DialogContentPolicy = (props: DialogContentPolicyProps) => {
   const { children, onSubmit } = props;
-  const [accepted, setAccepted] = useState<CheckedState>(false);
+  const [accepted, setAccepted] = useState<boolean>(false);
 
   return (
     <div className="cancellation-policy">
       {children}
-      <div className="flex justify-end gap-x-8 py-9">
+      <div className="flex justify-end gap-x-5 py-9">
         <div className="flex gap-x-2.5 items-center">
-          <label htmlFor="accept-terms">
-            <Text size="sm" as="span">
-              I've read and accept the cancellation policy.
-            </Text>
-          </label>
-          <Checkbox id="accept-terms" checked={accepted} onCheckedChange={setAccepted} />
+          <Checkbox
+            checked={accepted}
+            onChange={setAccepted}
+            label="I've read and accept the cancellation policy."
+            labelPosition="leading"
+          />
         </div>
         <Button
           className="w-[250px]"

package/src/components/molecules/ServiceSelector/ServiceSelector.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '@/src/lib/utils';
+import React, { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/service-selector.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
-import '../../../styles/components/molecule/service-selector.css';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 
 export type ServiceType = 'transfer' | 'accommodation' | 'excursion';
 
@@ -22,6 +24,8 @@ export interface ServiceSelectorProps {
   disabled?: boolean;
   /** Additional CSS classes */
   className?: string;
+  /** Options to display */
+  options?: ServiceOption[];
 }
 
 const DEFAULT_OPTIONS: ServiceOption[] = [
@@ -44,12 +48,16 @@ const DEFAULT_OPTIONS: ServiceOption[] = [
   },
 ];
 
+export const DEFAULT_SERVICE_SELECTOR_OPTIONS: ServiceOption[] = DEFAULT_OPTIONS;
+
 const ServiceSelector: React.FC<ServiceSelectorProps> = ({
   value,
   onChange,
   disabled = false,
+  options = DEFAULT_OPTIONS,
   className = '',
 }) => {
+  const [selectedValue, setSelectedValue] = useState(value);
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -77,103 +85,103 @@ const ServiceSelector: React.FC<ServiceSelectorProps> = ({
     if (disabled || option.disabled) return;
     onChange(option.value);
     setIsOpen(false);
+    setSelectedValue(option.value);
   };
 
   const getDropdownState = () => {
     if (disabled) return 'disabled';
     // If a service is selected, always show selected state (even if open)
-    if (value) return 'selected';
+    if (selectedValue) return 'selected';
     if (isOpen) return 'open';
     return 'default';
   };
+  const defaultOptions = options.length > 0 ? options : DEFAULT_OPTIONS;
 
-  const selectedOption = value ? DEFAULT_OPTIONS.find(opt => opt.value === value) : null;
+  const selectedOption = selectedValue
+    ? defaultOptions.find((opt) => opt.value === selectedValue)
+    : null;
   const displayText = selectedOption ? selectedOption.label : 'Select a service';
 
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
   return (
-    <div ref={dropdownRef} className={`service-selector ${className}`}>
-      <button
-        type="button"
-        className={`service-selector__trigger service-selector__trigger--${getDropdownState()}`}
-        onClick={handleToggleDropdown}
-        disabled={disabled}
-        aria-expanded={isOpen}
-        aria-haspopup="listbox"
-      >
-        <div className="service-selector__trigger-content">
-          {selectedOption && (
-            <Icon 
-              name={selectedOption.icon as any} 
-              size="md" 
-              className="service-selector__trigger-icon" 
-            />
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            `service-selector__trigger service-selector__trigger--${getDropdownState()}`,
+            className
           )}
-          <Text 
-            size="base" 
-            variant="bold"
-            className="service-selector__trigger-text"
-          >
-            {displayText}
-          </Text>
-        </div>
-        <Icon 
-          name="chevron-down-new" 
-          size="sm" 
-          className="service-selector__trigger-chevron"
-          style={{
-            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            transformOrigin: 'center'
-          }}
-        />
-      </button>
-
-      {isOpen && (
-        <div className="service-selector__panel" role="listbox">
-          <div className="service-selector__content">
-            <div className="service-selector__options-wrapper">
-              {DEFAULT_OPTIONS.map((option) => {
-                const isSelected = value === option.value;
-                const isDisabled = option.disabled || disabled;
-                
-                return (
-                  <button
-                    key={option.value}
-                    type="button"
-                    className={`service-selector__option ${isSelected ? 'service-selector__option--selected' : ''} ${isDisabled ? 'service-selector__option--disabled' : ''}`}
-                    onClick={() => handleOptionSelect(option)}
-                    disabled={isDisabled}
-                    role="option"
-                    aria-selected={isSelected}
-                  >
-                    <Icon 
-                      name={option.icon as any} 
-                      size="md" 
-                      className={`service-selector__option-icon ${isSelected ? 'service-selector__option-icon--selected' : ''}`} 
-                    />
-                    <Text 
-                      size="base" 
-                      variant="bold"
-                      color={isSelected ? 'inverted' : 'default'}
-                      className="service-selector__option-text"
-                    >
-                      {option.label}
-                    </Text>
-                    {option.badge && (
-                      <span className="service-selector__option-badge">
-                        {option.badge}
-                      </span>
-                    )}
-                  </button>
-                );
-              })}
-            </div>
+          onClick={handleToggleDropdown}
+          disabled={disabled}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox">
+          <div className="service-selector__trigger-content">
+            {selectedOption && (
+              <Icon
+                name={selectedOption.icon as any}
+                size="md"
+                className="service-selector__trigger-icon"
+              />
+            )}
+            <Text size="base" variant="bold" className="service-selector__trigger-text">
+              {displayText}
+            </Text>
+          </div>
+          <Icon
+            name="chevron-down-new"
+            size="sm"
+            className="service-selector__trigger-chevron"
+            style={{
+              transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              transformOrigin: 'center',
+            }}
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="service-selector__panel" align="start">
+        <div className="service-selector__content">
+          <div className="service-selector__options-wrapper">
+            {defaultOptions.map((option) => {
+              const isSelected = value === option.value;
+              const isDisabled = option.disabled || disabled;
+
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  className={`service-selector__option ${isSelected ? 'service-selector__option--selected' : ''} ${isDisabled ? 'service-selector__option--disabled' : ''}`}
+                  onClick={() => handleOptionSelect(option)}
+                  disabled={isDisabled}
+                  role="option"
+                  aria-selected={isSelected}>
+                  <Icon
+                    name={option.icon as any}
+                    size="md"
+                    className={`service-selector__option-icon ${isSelected ? 'service-selector__option-icon--selected' : ''}`}
+                  />
+                  <Text
+                    size="base"
+                    variant="bold"
+                    color={isSelected ? 'inverted' : 'default'}
+                    className="service-selector__option-text">
+                    {option.label}
+                  </Text>
+                  {option.badge && (
+                    <span className="service-selector__option-badge">{option.badge}</span>
+                  )}
+                </button>
+              );
+            })}
           </div>
         </div>
-      )}
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 };
 
 export default ServiceSelector;
-

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

@@ -11,7 +11,13 @@ import {
 } from '../../molecules/BookingPax/BookingPaxClient/BookingPaxClient';
 
 export interface BookingPaxData {
+  /**
+   * The type of the booking pax.
+   */
   type: 'accommodation' | 'excursion' | 'transfer';
+  /**
+   * The data of the booking pax.
+   */
   data:
     | Omit<BookingPaxAccomProps, 'clientsInfo'>
     | Omit<BookingPaxExcursionProps, 'clientsInfo'>
@@ -19,25 +25,64 @@ export interface BookingPaxData {
 }
 
 export interface BookingPaxAutoFilledData {
+  /**
+   * The type of the booking pax.
+   */
   type: BookingPaxData['type'];
+  /**
+   * The parent index of the booking pax.
+   */
   parentIndex: number;
+  /**
+   * The room index of the booking pax.
+   */
   roomIndex?: number;
+  /**
+   * The selected clients of the booking pax.
+   */
   selectedClients: BookingPaxClientInfo[];
 }
 
 export interface BookingPaxProps {
+  /**
+   * The data of the booking pax.
+   */
   data: BookingPaxData[];
+  /**
+   * The clients info of the booking pax.
+   */
   clientsInfo: BookingPaxClientInfo[];
+  /**
+   * Whether the booking pax is submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The callback function to call when the pax changes.
+   */
   onPaxChange?: (
     index: number,
     type: BookingPaxData['type'],
     options: BookingPaxClientOptions
   ) => void;
+  /**
+   * The callback function to call when the remark changes.
+   */
   onRemarkChange?: (index: number, type: BookingPaxData['type'], value: string) => void;
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (index: number, type: BookingPaxData['type'], hasError: boolean) => void;
+  /**
+   * The callback function to call when the time changes.
+   */
   onTimeChange?: (index: number, value: string | string[]) => void;
+  /**
+   * The callback function to call when the flight number changes.
+   */
   onFlightNumberChange?: (index: number, value: string) => void;
+  /**
+   * The callback function to call when the auto filled data changes.
+   */
   onAutoFilled?: (data: BookingPaxAutoFilledData[]) => void;
 }
 
@@ -60,6 +105,25 @@ const isTransferData = (
   return 'from' in data && 'to' in data && 'type' in data;
 };
 
+/**
+ * BookingPaxList is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxList
+ *  data={data}
+ *  clientsInfo={clientsInfo}
+ *  isSubmitted={isSubmitted}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ *  onTimeChange={onTimeChange}
+ *  onFlightNumberChange={onFlightNumberChange}
+ *  onAutoFilled={onAutoFilled}
+ * />
+ *
+ * @param props - The props for the BookingPaxList component.
+ * @returns The BookingPaxList component.
+ */
 export const BookingPaxList: React.FC<BookingPaxProps> = (props) => {
   const {
     data,