mautourco-components 0.2.22 → 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/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/BookingAddItem/AddItemNewService.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import { Text } from '../../atoms/Typography/Typography';
+import { BookingPaxClientInfo } from '../../molecules/BookingPax';
+import ServiceSelector, {
+  ServiceOption,
+  ServiceType,
+} from '../../molecules/ServiceSelector';
+import DateTimePicker from '../DateTimePicker/DateTimePicker';
+
+export interface AddItemNewServiceProps {
+  options?: ServiceOption[];
+  date: string | string[];
+  clients: BookingPaxClientInfo[];
+  onServiceChange: (service: ServiceType) => void;
+  onNext: (selectedClients: BookingPaxClientInfo[]) => void;
+  onBack: () => void;
+}
+
+export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
+  const { date, options, clients, onServiceChange, onNext, onBack } = props;
+  const [service, setService] = useState<ServiceType>('accommodation');
+  const [selectedClients, setSelectedClients] = useState<BookingPaxClientInfo[]>([]);
+  const handleServiceChange = (service: ServiceType) => {
+    onServiceChange(service);
+    setService(service);
+  };
+
+  const isAccommodation = service === 'accommodation';
+  const selectionMode = isAccommodation ? 'range' : 'single';
+  const numberOfMonths = isAccommodation ? 2 : 1;
+
+  const handleClientChange = useCallback(
+    (client: BookingPaxClientInfo) => {
+      if (selectedClients.includes(client)) {
+        setSelectedClients(selectedClients.filter((c) => c.clientId !== client.clientId));
+      } else {
+        setSelectedClients([...selectedClients, client]);
+      }
+    },
+    [selectedClients]
+  );
+
+  return (
+    <div className="space-y-9">
+      <div className="flex sm:items-center gap-4 flex-col sm:flex-row">
+        <ServiceSelector
+          className="sm:basis-[245px] xl:basis-[260px] shrink-0 grow-0"
+          value={service}
+          onChange={handleServiceChange}
+          options={options}
+        />
+        <div className="sm:basis-[245px] xl:basis-[260px] shrink-0 grow-0">
+          <DateTimePicker
+            mode="calendar"
+            selectionMode={selectionMode}
+            defaultValue={date}
+            placeholder="Select date"
+            numberOfMonths={numberOfMonths}
+            iconPosition="left"
+            iconBGFull={false}
+            showChevron={true}
+          />
+        </div>
+      </div>
+      <div className="space-y-4">
+        <Text variant="bold">Please select the pax affected by the new service</Text>
+        <ul>
+          {clients.map((client, index) => (
+            <li key={`cl-${index}`}>
+              <Checkbox
+                id={`cl-${index}`}
+                label={`${client.firstName} ${client.lastName} (${client.clientType}${client.clientType !== 'Adult' ? ` - ${client.age} years old` : ''})`}
+                checked={selectedClients.some((c) => c.clientId === client.clientId)}
+                onChange={() => handleClientChange(client)}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex justify-end gap-x-4 [&>*]:w-[250px] pb-2">
+        <Button variant="outline-secondary" onClick={onBack}>
+          Back
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => onNext(selectedClients)}
+          disabled={selectedClients.length === 0}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/BookingAddItem/AddItemSelector.tsx

@@ -0,0 +1,43 @@
+import { Text } from '../../atoms/Typography/Typography';
+import { AddItemButton } from '../../molecules/AddItemButton/AddItemButton';
+
+export enum AddItemType {
+  NEW = 'NEW',
+  EXISTING = 'EXISTING',
+}
+
+export interface AddItemSelectorProps {
+  onAddItem?: (type: AddItemType) => void;
+}
+
+export const AddItemSelector: React.FC<AddItemSelectorProps> = ({ onAddItem }) => {
+  return (
+    <div className="space-y-9">
+      <Text size="sm" variant="medium">
+        If you are sure you want to add this service, please confirm below. New prices and
+        cancellation policies will apply to the added service.
+      </Text>
+      <div className="grid grid-cols-2 gap-4">
+        <AddItemButton
+          label={
+            <>
+              Add new service <br /> and new pax
+            </>
+          }
+          onClick={() => onAddItem?.(AddItemType.NEW)}
+        />
+        <AddItemButton
+          label={
+            <>
+              Add new service <br /> for your existing pax
+            </>
+          }
+          onClick={() => onAddItem?.(AddItemType.EXISTING)}
+        />
+      </div>
+      <Text size="sm" variant="medium">
+        Note: This action is irreversible and cannot be undone.
+      </Text>
+    </div>
+  );
+};