mautourco-components 0.2.19 → 0.2.21

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

@@ -0,0 +1,188 @@
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { Checkbox } from '@/src/components/ui/checkbox';
+import useBookingPax from '@/src/hooks/useBookingPax';
+import { cn } from '@/src/lib/utils';
+import { CheckboxProps } from '@radix-ui/react-checkbox';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import './BookingPaxClient.css';
+
+export interface BookingPaxClientInfo {
+  firstName: string;
+  lastName: string;
+  age: number;
+  clientType: 'Adult' | 'Teen' | 'Child' | 'Infant';
+  clientId: string;
+}
+
+export interface BookingPaxClientOptions {
+  clientId: string;
+  checked: CheckboxProps['checked'];
+  selectedIndex: number;
+  selectedPaxIndex?: number;
+  paxCount?: number;
+  selectedClientsInfoIds?: Record<string | number, string[]>;
+  selectedClients?: Record<string | number, BookingPaxClientInfo[]>;
+}
+
+export interface BookingPaxClientProps {
+  clients: BookingPaxClientInfo[];
+  id: string;
+  selectedClientsInfoIds?: Record<string | number, string[]>;
+  selectedIndex: number;
+  selectedPaxIndex?: number;
+  paxCount?: number;
+  isSubmitted?: boolean;
+  onPaxChange?: (options: BookingPaxClientOptions) => void;
+  onError?: (hasError: boolean) => void;
+}
+
+export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
+  const {
+    clients,
+    id,
+    selectedClientsInfoIds: defaultSelectedClientsInfoIds,
+    selectedIndex,
+    paxCount = 0,
+    isSubmitted,
+    onPaxChange,
+    onError,
+  } = props;
+  const [selectedClientsInfoIds, setSelectedClientsInfoIds] = useState<
+    Record<string | number, string[]>
+  >({});
+
+  const { isSelectedClient } = useBookingPax(selectedClientsInfoIds);
+
+  // Calculate selected count for current index
+  const selectedCount = useMemo(
+    () => selectedClientsInfoIds[selectedIndex]?.length ?? 0,
+    [selectedClientsInfoIds, selectedIndex]
+  );
+
+  // Calculate error state using useMemo for better performance
+  const hasError = useMemo(() => {
+    if (!isSubmitted || paxCount === 0) {
+      return false;
+    }
+
+    // Error if selected count is less than required pax count
+    const isInsufficientSelection = selectedCount < paxCount;
+
+    // Check if there are unselected clients
+    const hasUnselectedClients = clients.some(
+      (client) => !isSelectedClient(selectedIndex, client.clientId)
+    );
+
+    return isInsufficientSelection && hasUnselectedClients;
+  }, [isSubmitted, paxCount, selectedCount, clients, selectedIndex, isSelectedClient]);
+
+  const handlePaxChange = useCallback(
+    (options: BookingPaxClientOptions) => {
+      setSelectedClientsInfoIds((prev) => {
+        const currentRoomSelection = prev[options.selectedIndex] || [];
+        const currentLength = currentRoomSelection.length;
+        let newState: Record<string | number, string[]>;
+
+        // If all pax are selected and trying to select another, clear and select only this one
+        if (options.checked && options.paxCount === currentLength) {
+          newState = {
+            ...prev,
+            [options.selectedIndex]: [options.clientId],
+          };
+        } else if (options.checked) {
+          // Add client if checked (prevent duplicate selection)
+          if (currentRoomSelection.includes(options.clientId)) {
+            return prev; // No change needed
+          }
+          newState = {
+            ...prev,
+            [options.selectedIndex]: [...currentRoomSelection, options.clientId],
+          };
+        } else {
+          // Remove client if unchecked
+          newState = {
+            ...prev,
+            [options.selectedIndex]: currentRoomSelection.filter(
+              (id) => id !== options.clientId
+            ),
+          };
+        }
+
+        // Call callback with updated state (not stale closure)
+        onPaxChange?.({
+          ...options,
+          selectedClientsInfoIds: newState,
+        });
+
+        return newState;
+      });
+    },
+    [onPaxChange, selectedClientsInfoIds]
+  );
+
+  // Sync external state prop to internal state
+  useEffect(() => {
+    if (defaultSelectedClientsInfoIds !== undefined) {
+      setSelectedClientsInfoIds(defaultSelectedClientsInfoIds);
+    }
+  }, [defaultSelectedClientsInfoIds]);
+
+  useEffect(() => {
+    onError?.(hasError);
+  }, [hasError, onError]);
+
+  return (
+    <div className="space-y-2">
+      <Text>
+        Please confirm the pax which applies on this service ({paxCount} Pax){' '}
+        <Text color="state-error" as="span">
+          *
+        </Text>
+      </Text>
+      <div
+        className={cn('booking-pax-client', {
+          'booking-pax-accom--error': hasError,
+        })}>
+        {clients.map((client: BookingPaxClientInfo) => {
+          const isSelected = isSelectedClient(selectedIndex, client.clientId);
+          const showError = hasError && !isSelected && clients.length !== paxCount;
+
+          return (
+            <div key={client.clientId}>
+              <div className="flex items-center gap-x-2">
+                <Checkbox
+                  data-error={showError}
+                  id={`pc-${id}-${selectedIndex}-${client.clientId}`}
+                  checked={isSelected || clients.length === paxCount}
+                  disabled={clients.length === paxCount}
+                  onCheckedChange={(checked) => {
+                    handlePaxChange({
+                      clientId: client.clientId,
+                      checked,
+                      paxCount,
+                      selectedIndex,
+                    });
+                  }}
+                />
+                <label
+                  htmlFor={`pc-${id}-${selectedIndex}-${client.clientId}`}
+                  className={cn('cursor-pointer', {
+                    'pointer-events-none': clients.length === paxCount,
+                  })}>
+                  <Text
+                    size="sm"
+                    leading="4"
+                    as="span"
+                    color={showError ? 'state-error' : undefined}>
+                    {client.firstName} {client.lastName} ({client.clientType}
+                    {client.clientType !== 'Adult' && ` - ${client.age} years old`})
+                  </Text>
+                </label>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import useBookingPax from '@/src/hooks/useBookingPax';
+import React, { useEffect } from 'react';
+import {
+  BookingPaxClient,
+  BookingPaxClientInfo,
+  BookingPaxClientProps,
+} from './BookingPaxClient/BookingPaxClient';
+import { BookingPaxHeader } from './BookingPaxHeader';
+import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
+import { BookingPaxRemarks } from './BookingPaxRemarks';
+
+export type ExcursionType = 'sea' | 'land' | 'catamaran';
+
+export interface BookingPaxExcursionProps extends Pick<
+  BookingPaxClientProps,
+  'selectedClientsInfoIds' | 'onPaxChange'
+> {
+  clientsInfo: BookingPaxClientInfo[];
+  name: string;
+  type: ExcursionType;
+  isSubmitted?: boolean;
+  paxCount: number;
+  maxPaxCount?: number;
+  onRemarkChange?: (value: string) => void;
+  onError?: (hasError: boolean) => void;
+}
+
+const mapType: Record<BookingPaxExcursionProps['type'], string> = {
+  sea: 'Sea excursion',
+  land: 'Land excursion',
+  catamaran: 'Cruise excursion',
+};
+
+export const BookingPaxExcursion: React.FC<BookingPaxExcursionProps> = (props) => {
+  const {
+    name,
+    type,
+    clientsInfo,
+    paxCount,
+    selectedClientsInfoIds,
+    isSubmitted,
+    onPaxChange,
+    onRemarkChange,
+    onError,
+  } = props;
+
+  const { changeOptions, onPaxOptionsChange, onSelectedClients } =
+    useBookingPax(selectedClientsInfoIds);
+
+  useEffect(() => {
+    onSelectedClients(clientsInfo, onPaxChange);
+  }, [changeOptions, onPaxChange]);
+
+  return (
+    <BookingPaxLayout
+      title="Excursion"
+      icon="map"
+      className="booking-pax-accom"
+      header={
+        <BookingPaxHeader>
+          <BookingPaxHeader.Name name={name} icon={type} location={mapType[type]} />
+        </BookingPaxHeader>
+      }>
+      <BookingPaxClient
+        id="excursion"
+        clients={clientsInfo}
+        selectedClientsInfoIds={selectedClientsInfoIds}
+        selectedIndex={0}
+        paxCount={paxCount}
+        onPaxChange={onPaxOptionsChange}
+        isSubmitted={isSubmitted}
+        onError={onError}
+      />
+      <BookingPaxRemarks onChange={onRemarkChange} />
+    </BookingPaxLayout>
+  );
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface BookingPaxWithNameProps {
+  name: string;
+  icon: IconName;
+  location: string;
+}
+
+export interface BookingPaxWithLocationProps {
+  from: string;
+  to: string;
+}
+
+const BookingPaxWithName: React.FC<BookingPaxWithNameProps> = (props) => {
+  const { name, icon, location } = props;
+  return (
+    <div className="space-y-1">
+      <Text variant="bold" size="sm" leading="4">
+        {name}
+      </Text>
+      <TextWithIcon icon={icon} textLeading="4">
+        {location}
+      </TextWithIcon>
+    </div>
+  );
+};
+
+const BookingPaxWithLocation: React.FC<BookingPaxWithLocationProps> = (props) => {
+  const { from, to } = props;
+  return (
+    <div className="flex items-center gap-x-1">
+      <Text size="sm">{from}</Text>
+      <Icon name="arrow-right-outline" size="sm" />
+      <Text size="sm">{to}</Text>
+    </div>
+  );
+};
+
+export const BookingPaxHeader = (props: React.PropsWithChildren) => {
+  return <div className="booking-pax-header" {...props} />;
+};
+
+BookingPaxHeader.Name = BookingPaxWithName;
+BookingPaxHeader.Location = BookingPaxWithLocation;

package/src/components/molecules/BookingPax/BookingPaxLayout/BookingPaxLayout.css

@@ -0,0 +1,15 @@
+.booking-pax-layout {
+  @apply p-6 space-y-8;
+  border-radius: var(--card-border-radius-default);
+  background-color: var(--card-color-background-default);
+  border: 1px solid var(--card-color-border-default);
+  max-width: 500px;
+}
+
+.booking-pax-layout__header {
+  @apply space-y-3;
+}
+
+.booking-pax-layout__content {
+  @apply space-y-8;
+}

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

@@ -0,0 +1,25 @@
+import { IconName } from '@/src/components/atoms/Icon/Icon';
+import { cn } from '@/src/lib/utils';
+import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
+import './BookingPaxLayout.css';
+
+export interface BookingPaxLayoutProps {
+  title: React.ReactNode;
+  icon: IconName;
+  header?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const BookingPaxLayout: React.FC<BookingPaxLayoutProps> = (props) => {
+  const { title, icon, header, children, className } = props;
+  return (
+    <div className={cn('booking-pax-layout', className)}>
+      <div className="booking-pax-layout__header">
+        <ServiceTitle title={title} icon={icon} />
+        {header}
+      </div>
+      <div className="booking-pax-layout__content">{children}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Textarea from '../../atoms/Inputs/Textarea/Textarea';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface BookingPaxRemarksProps {
+  onChange?: (value: string) => void;
+}
+
+export const BookingPaxRemarks: React.FC<BookingPaxRemarksProps> = ({ onChange }) => {
+  const [remarks, setRemarks] = useState('');
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  useEffect(() => {
+    adjustHeight();
+  }, [remarks]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setRemarks(value);
+    onChange?.(value);
+    adjustHeight();
+  };
+
+  return (
+    <div className="space-y-2">
+      <Text size="sm">Remarks</Text>
+      <Textarea
+        ref={textareaRef}
+        placeholder="Do you have any remarks?"
+        onInput={handleChange}
+        className="resize-none overflow-hidden"
+        rows={1}
+        style={{ minHeight: '44px', height: '44px', lineHeight: '1.5' }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,121 @@
+import useBookingPax from '@/src/hooks/useBookingPax';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Text } from '../../atoms/Typography/Typography';
+import DateTimePicker, {
+  DateTimePickerProps,
+} from '../../organisms/DateTimePicker/DateTimePicker';
+import {
+  BookingPaxClient,
+  BookingPaxClientInfo,
+  BookingPaxClientProps,
+} from './BookingPaxClient/BookingPaxClient';
+import { BookingPaxHeader } from './BookingPaxHeader';
+import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
+import { BookingPaxRemarks } from './BookingPaxRemarks';
+
+export type ExcursionType = 'sea' | 'land' | 'catamaran';
+
+export interface BookingPaxTransferProps extends Pick<
+  BookingPaxClientProps,
+  'selectedClientsInfoIds' | 'onPaxChange'
+> {
+  clientsInfo: BookingPaxClientInfo[];
+  type: 'ARV' | 'DEP' | 'INH';
+  from: string;
+  to: string;
+  isSubmitted?: boolean;
+  paxCount: number;
+  maxPaxCount?: number;
+  onRemarkChange?: (value: string) => void;
+  onFlightNumberChange?: (value: string) => void;
+  onTimeChange?: DateTimePickerProps['onValueChange'];
+  onError?: (hasError: boolean) => void;
+}
+
+const mapType: Record<BookingPaxTransferProps['type'], string> = {
+  ARV: 'Arrival',
+  DEP: 'Departure',
+  INH: 'Inter-Hotel',
+};
+
+export const BookingPaxTransfer: React.FC<BookingPaxTransferProps> = (props) => {
+  const {
+    from,
+    to,
+    type,
+    clientsInfo,
+    paxCount,
+    selectedClientsInfoIds,
+    isSubmitted,
+    onPaxChange,
+    onRemarkChange,
+    onTimeChange,
+    onError,
+    onFlightNumberChange,
+  } = props;
+
+  const { changeOptions, onPaxOptionsChange, onSelectedClients } =
+    useBookingPax(selectedClientsInfoIds);
+
+  const handleFlightNumberChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onFlightNumberChange?.(e.target.value);
+    },
+    [onFlightNumberChange]
+  );
+
+  const id = useMemo(() => {
+    return `transfer-${type}-${Math.random().toString(36).substring(2, 15)}`;
+  }, [type]);
+
+  useEffect(() => {
+    onSelectedClients(clientsInfo, onPaxChange);
+  }, [changeOptions, onPaxChange]);
+
+  return (
+    <BookingPaxLayout
+      title={
+        <>
+          Transfer{' '}
+          <Text as="span" color="accent" variant="bold" size="xl" className="italic">
+            ({mapType[type]})
+          </Text>
+        </>
+      }
+      icon="car"
+      className="booking-pax-accom"
+      header={
+        <BookingPaxHeader>
+          <BookingPaxHeader.Location from={from} to={to} />
+        </BookingPaxHeader>
+      }>
+      {type === 'INH' ? (
+        <DateTimePicker
+          icon="clock"
+          mode="time"
+          onValueChange={onTimeChange}
+          placeholder="Time of Transfer"
+        />
+      ) : (
+        <Input
+          icon="arrival"
+          iconPosition="leading"
+          placeholder="Flight number"
+          onChange={handleFlightNumberChange}
+        />
+      )}
+      <BookingPaxClient
+        id={id}
+        clients={clientsInfo}
+        selectedClientsInfoIds={selectedClientsInfoIds}
+        selectedIndex={0}
+        paxCount={paxCount}
+        isSubmitted={isSubmitted}
+        onPaxChange={onPaxOptionsChange}
+        onError={onError}
+      />
+      <BookingPaxRemarks onChange={onRemarkChange} />
+    </BookingPaxLayout>
+  );
+};

package/src/components/molecules/BookingPax/index.ts

@@ -0,0 +1,9 @@
+export type { BookingPaxAccomProps, RoomData } from './BookingPaxAccom';
+export type {
+  BookingPaxClientInfo,
+  BookingPaxClientProps,
+} from './BookingPaxClient/BookingPaxClient';
+export type { BookingPaxExcursionProps } from './BookingPaxExcursion';
+export type { BookingPaxTransferProps } from './BookingPaxTransfer';
+
+export * from './BookingPax';

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

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import Icon from "../../atoms/Icon/Icon";
+import React, { useState } from 'react';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
 
 export interface CalendarInputProps {
   /** Placeholder text */
@@ -7,7 +7,7 @@ export interface CalendarInputProps {
   /** Selected date value (formatted as string) */
   value?: string;
   /** State of the input: default, active, typing, disabled, success, error */
-  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  state?: 'default' | 'active' | 'typing' | 'disabled' | 'success' | 'error';
   /** Helper/support text below input */
   /** Whether the input is disabled */
   disabled?: boolean;
@@ -26,36 +26,39 @@ export interface CalendarInputProps {
   /** 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;
   /** Whether the calendar popover is open */
   isOpen?: boolean;
+  /** Icon to display on the left of the input */
+  icon?: IconName;
 }
 
 const CalendarInput: React.FC<CalendarInputProps> = ({
-  placeholder = "Select date",
-  value = "",
-  state = "default",
+  placeholder = 'Select date',
+  value = '',
+  state = 'default',
   disabled = false,
   onClick,
   onCalendarClick,
   onChange,
   onFocus,
   onBlur,
-  className = "",
+  className = '',
   iconBGFull = true,
-  iconPosition = "right",
+  iconPosition = 'right',
   showChevron = false,
   isOpen = false,
+  icon = 'calendar',
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const [isTyping, setIsTyping] = useState(false);
 
-  const finalState = disabled ? "disabled" : state;
+  const finalState = disabled ? 'disabled' : state;
   const displayState =
-    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    isFocused && isTyping ? 'typing' : isFocused ? 'active' : finalState;
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
@@ -89,13 +92,12 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
   const iconButton = (
     <button
       type="button"
-      className={`calendar-input__icon-button ${iconBGFull ? " calendar-input__icon-button--full-bg" : ""} calendar-input__icon-button--${iconPosition}`}
+      className={`calendar-input__icon-button ${iconBGFull ? ' calendar-input__icon-button--full-bg' : ''} calendar-input__icon-button--${iconPosition}`}
       onClick={handleCalendarClick}
       disabled={disabled}
       aria-label="Open calendar picker"
-      title="Select date"
-    >
-      <Icon name="calendar" size="sm" className="calendar-input__icon" />
+      title="Select date">
+      <Icon name={icon} size="sm" className="calendar-input__icon" />
     </button>
   );
 
@@ -103,10 +105,9 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
     <div
       className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
       data-node-id="3425:11289"
-      onClick={onClick}
-    >
-      {iconPosition === "left" && iconButton}
-      
+      onClick={onClick}>
+      {iconPosition === 'left' && iconButton}
+
       <div className="calendar-input__input-wrapper">
         <input
           type="text"
@@ -118,16 +119,17 @@ const CalendarInput: React.FC<CalendarInputProps> = ({
           onFocus={handleFocus}
           onBlur={handleBlur}
           readOnly={true}
-          aria-label={"Select date"}
+          aria-label={'Select date'}
         />
-        {iconPosition === "left" && showChevron && (
-          <div className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
-            <Icon name={"chevron-down"} size="sm" />
+        {iconPosition === 'left' && showChevron && (
+          <div
+            className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
+            <Icon name={'chevron-down'} size="sm" />
           </div>
         )}
       </div>
 
-      {iconPosition === "right" && iconButton}
+      {iconPosition === 'right' && iconButton}
     </div>
   );
 };

package/src/components/molecules/DialogContentPolicy/CancellationLayout/CancellationLayout.css

@@ -0,0 +1,37 @@
+.cancellation-layout {
+  @apply py-6 relative space-y-6;
+  &::after {
+    content: '';
+    @apply absolute bottom-0 left-0 right-0;
+    height: 1px;
+    background-color: transparent;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--divider-color-default) 0,
+      var(--divider-color-default) 8px,
+      transparent 8px,
+      transparent 16px
+    );
+  }
+  .chip__label {
+    @apply gap-x-4;
+  }
+}
+
+.cancellation-layout__content {
+  @apply flex gap-x-4 items-start;
+}
+
+.cancellation-layout__content-left {
+  @apply flex-1;
+}
+
+.cancellation-layout__content-right {
+  @apply overflow-hidden;
+  max-width: 150px;
+  border-radius: var(--border-radius-rounded-2xl);
+  img {
+    object-fit: cover;
+    height: 200px;
+  }
+}