mautourco-components 0.2.21 → 0.2.23

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

@@ -3,6 +3,49 @@ import { BookingPaxAccom } from './BookingPaxAccom';
 import { BookingPaxExcursion } from './BookingPaxExcursion';
 import { BookingPaxTransfer } from './BookingPaxTransfer';
 
+/**
+ * BookingPax is a component that allows the user to display the booking pax.
+ *
+ * @example
+ * <BookingPax>
+ *  <BookingPax.Accom
+ *    name="Hotel Name"
+ *    type="hotel"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Excursion
+ *    name="Excursion Name"
+ *    type="sea"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Transfer
+ *    name="Transfer Name"
+ *    type="transfer"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ * </BookingPax>
+ *
+ * @param props - The props for the BookingPax component.
+ * @returns The BookingPax component.
+ */
 export const BookingPax = (props: React.PropsWithChildren) => {
   return <div className="booking-pax space-y-6" {...props} />;
 };

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

@@ -11,16 +11,50 @@ import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
 import { BookingPaxRemarks } from './BookingPaxRemarks';
 
 export interface BookingPaxAccomRoom {
+  /**
+   * The pax count of the room.
+   */
   paxCount: number;
 }
 
 export interface RoomData {
+  /**
+   * The room of the room data.
+   */
   room: BookingPaxAccomRoom;
+  /**
+   * The room index of the room data.
+   */
   roomIndex: number;
+  /**
+   * The selected count of the room data.
+   */
   selectedCount: number;
+  /**
+   * Whether the pax count is error.
+   */
   isPaxCountError: boolean;
 }
 
+/**
+ * BookingPaxAccomProps is the props for the BookingPaxAccom component.
+ *
+ * @example
+ * <BookingPaxAccom
+ *  rooms={rooms}
+ *  clientsInfo={clientsInfo}
+ *  hotelName="Hotel Name"
+ *  roomName="Room Name"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxAccom component.
+ * @returns The BookingPaxAccom component.
+ */
 export interface BookingPaxAccomProps extends Pick<
   BookingPaxClientProps,
   'selectedClientsInfoIds' | 'onPaxChange'

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

@@ -1,4 +1,10 @@
 .booking-pax-client {
   @apply grid gap-x-4 gap-y-2;
   @apply lg:grid-cols-2;
+  .checkbox-container {
+    label {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
 }

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

@@ -1,41 +1,128 @@
+import Checkbox, { CheckboxProps } from '@/src/components/atoms/Checkbox/Checkbox';
 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 {
+  /**
+   * The first name of the client.
+   */
   firstName: string;
+  /**
+   * The last name of the client.
+   */
   lastName: string;
+  /**
+   * The age of the client.
+   */
   age: number;
+  /**
+   * The client type.
+   */
   clientType: 'Adult' | 'Teen' | 'Child' | 'Infant';
+  /**
+   * The client id.
+   */
   clientId: string;
 }
 
 export interface BookingPaxClientOptions {
+  /**
+   * The client id.
+   */
   clientId: string;
+  /**
+   * Whether the client is checked.
+   */
   checked: CheckboxProps['checked'];
+  /**
+   * The selected index.
+   */
   selectedIndex: number;
+  /**
+   * The selected pax index.
+   */
   selectedPaxIndex?: number;
+  /**
+   * The pax count.
+   */
   paxCount?: number;
+  /**
+   * The selected clients info ids.
+   */
   selectedClientsInfoIds?: Record<string | number, string[]>;
+  /**
+   * The selected clients.
+   */
   selectedClients?: Record<string | number, BookingPaxClientInfo[]>;
 }
 
 export interface BookingPaxClientProps {
+  /**
+   * The clients to select from.
+   */
   clients: BookingPaxClientInfo[];
+  /**
+   * The id of the booking pax client.
+   */
   id: string;
+  /**
+   * The selected clients info ids.
+   */
   selectedClientsInfoIds?: Record<string | number, string[]>;
+  /**
+   * The selected index.
+   */
   selectedIndex: number;
+  /**
+   * The selected pax index.
+   */
   selectedPaxIndex?: number;
+  /**
+   * The pax count.
+   */
   paxCount?: number;
+  /**
+   * Whether the form has been submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The callback function to call when the pax changes.
+   */
   onPaxChange?: (options: BookingPaxClientOptions) => void;
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (hasError: boolean) => void;
 }
 
+/**
+ * BookingPaxClient is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxClient
+ *  clients={clients}
+ *  id="booking-pax-client"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  selectedIndex={0}
+ *  paxCount={1}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxClient component.
+ * @param props.clients - The clients to select from.
+ * @param props.id - The id of the booking pax client.
+ * @param props.selectedClientsInfoIds - The selected clients info ids.
+ * @param props.selectedIndex - The selected index.
+ * @param props.paxCount - The pax count.
+ * @param props.isSubmitted - Whether the form has been submitted.
+ * @param props.onPaxChange - The callback function to call when the pax changes.
+ * @returns The BookingPaxClient component.
+ */
 export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
   const {
     clients,
@@ -151,11 +238,12 @@ export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
             <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) => {
+                  error={showError}
+                  label={`${client.firstName} ${client.lastName} (${client.clientType}${client.clientType !== 'Adult' ? ` - ${client.age} years old` : ''})`}
+                  onChange={(checked) => {
                     handlePaxChange({
                       clientId: client.clientId,
                       checked,
@@ -164,20 +252,6 @@ export const BookingPaxClient: React.FC<BookingPaxClientProps> = (props) => {
                     });
                   }}
                 />
-                <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>
           );

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

@@ -15,13 +15,37 @@ export interface BookingPaxExcursionProps extends Pick<
   BookingPaxClientProps,
   'selectedClientsInfoIds' | 'onPaxChange'
 > {
+  /**
+   * The clients info of the booking pax excursion.
+   */
   clientsInfo: BookingPaxClientInfo[];
+  /**
+   * The name of the booking pax excursion.
+   */
   name: string;
+  /**
+   * The type of the booking pax excursion.
+   */
   type: ExcursionType;
+  /**
+   * Whether the booking pax excursion is submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The pax count of the booking pax excursion.
+   */
   paxCount: number;
+  /**
+   * The max pax count of the booking pax excursion.
+   */
   maxPaxCount?: number;
+  /**
+   * The callback function to call when the remark changes.
+   */
   onRemarkChange?: (value: string) => void;
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (hasError: boolean) => void;
 }
 
@@ -31,6 +55,25 @@ const mapType: Record<BookingPaxExcursionProps['type'], string> = {
   catamaran: 'Cruise excursion',
 };
 
+/**
+ * BookingPaxExcursion is a component that allows the user to display the booking pax excursion.
+ *
+ * @example
+ * <BookingPaxExcursion
+ *  name="Excursion Name"
+ *  type="sea"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={1}
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxExcursion component.
+ * @returns The BookingPaxExcursion component.
+ */
 export const BookingPaxExcursion: React.FC<BookingPaxExcursionProps> = (props) => {
   const {
     name,

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

@@ -4,16 +4,43 @@ import { Text } from '../../atoms/Typography/Typography';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 
 export interface BookingPaxWithNameProps {
+  /**
+   * The name of the booking pax with name.
+   */
   name: string;
+  /**
+   * The icon of the booking pax with name.
+   */
   icon: IconName;
+  /**
+   * The location of the booking pax with name.
+   */
   location: string;
 }
 
 export interface BookingPaxWithLocationProps {
+  /**
+   * The from of the booking pax with location.
+   */
   from: string;
+  /**
+   * The to of the booking pax with location.
+   */
   to: string;
 }
-
+/**
+ * BookingPaxWithName is a component that allows the user to display the booking pax with name.
+ *
+ * @example
+ * <BookingPaxWithName
+ *  name="Hotel Name"
+ *  icon="hotel"
+ *  location="Hotel Location"
+ * />
+ *
+ * @param props - The props for the BookingPaxWithName component.
+ * @returns The BookingPaxWithName component.
+ */
 const BookingPaxWithName: React.FC<BookingPaxWithNameProps> = (props) => {
   const { name, icon, location } = props;
   return (

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

@@ -4,13 +4,43 @@ import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
 import './BookingPaxLayout.css';
 
 export interface BookingPaxLayoutProps {
+  /**
+   * The title of the booking pax layout.
+   */
   title: React.ReactNode;
+  /**
+   * The icon of the booking pax layout.
+   */
   icon: IconName;
+  /**
+   * The header of the booking pax layout.
+   */
   header?: React.ReactNode;
+  /**
+   * The children of the booking pax layout.
+   */
   children?: React.ReactNode;
+  /**
+   * The class name of the booking pax layout.
+   */
   className?: string;
 }
 
+/**
+ * BookingPaxLayout is a component that allows the user to display the booking pax layout.
+ *
+ * @example
+ * <BookingPaxLayout
+ *  title={title}
+ *  icon={icon}
+ *  header={header}
+ *  children={children}
+ *  className={className}
+ * />
+ *
+ * @param props - The props for the BookingPaxLayout component.
+ * @returns The BookingPaxLayout component.
+ */
 export const BookingPaxLayout: React.FC<BookingPaxLayoutProps> = (props) => {
   const { title, icon, header, children, className } = props;
   return (

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

@@ -3,9 +3,23 @@ import Textarea from '../../atoms/Inputs/Textarea/Textarea';
 import { Text } from '../../atoms/Typography/Typography';
 
 export interface BookingPaxRemarksProps {
+  /**
+   * The callback function to call when the remarks changes.
+   */
   onChange?: (value: string) => void;
 }
 
+/**
+ * BookingPaxRemarks is a component that allows the user to display the booking pax remarks.
+ *
+ * @example
+ * <BookingPaxRemarks
+ *  onChange={onChange}
+ * />
+ *
+ * @param props - The props for the BookingPaxRemarks component.
+ * @returns The BookingPaxRemarks component.
+ */
 export const BookingPaxRemarks: React.FC<BookingPaxRemarksProps> = ({ onChange }) => {
   const [remarks, setRemarks] = useState('');
 

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

@@ -20,25 +20,75 @@ export interface BookingPaxTransferProps extends Pick<
   BookingPaxClientProps,
   'selectedClientsInfoIds' | 'onPaxChange'
 > {
+  /**
+   * The clients info of the booking pax transfer.
+   */
   clientsInfo: BookingPaxClientInfo[];
+  /**
+   * The type of the booking pax transfer.
+   */
   type: 'ARV' | 'DEP' | 'INH';
+  /**
+   * The from of the booking pax transfer.
+   */
   from: string;
+  /**
+   * The to of the booking pax transfer.
+   */
   to: string;
+  /**
+   * Whether the booking pax transfer is submitted.
+   */
   isSubmitted?: boolean;
+  /**
+   * The pax count of the booking pax transfer.
+   */
   paxCount: number;
+  /**
+   * The max pax count of the booking pax transfer.
+   */
   maxPaxCount?: number;
+  /**
+   * The callback function to call when the remark changes.
+   */
   onRemarkChange?: (value: string) => void;
+  /**
+   * The callback function to call when the flight number changes.
+   */
   onFlightNumberChange?: (value: string) => void;
+  /**
+   * The callback function to call when the time changes.
+   */
   onTimeChange?: DateTimePickerProps['onValueChange'];
+  /**
+   * The callback function to call when the error changes.
+   */
   onError?: (hasError: boolean) => void;
 }
 
-const mapType: Record<BookingPaxTransferProps['type'], string> = {
+export const mapTransferType: Record<BookingPaxTransferProps['type'], string> = {
   ARV: 'Arrival',
   DEP: 'Departure',
   INH: 'Inter-Hotel',
 };
 
+/**
+ * BookingPaxTransfer is a component that allows the user to display the booking pax transfer.
+ *
+ * @example
+ * <BookingPaxTransfer
+ *  type="ARV"
+ *  from="Plaisance Airport"
+ *  to="Grand Paradise Hotel"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={2}
+ *  selectedClientsInfoIds={{ 0: [] }}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *
+ * @param props - The props for the BookingPaxTransfer component.
+ * @returns The BookingPaxTransfer component.
+ */
 export const BookingPaxTransfer: React.FC<BookingPaxTransferProps> = (props) => {
   const {
     from,
@@ -79,7 +129,7 @@ export const BookingPaxTransfer: React.FC<BookingPaxTransferProps> = (props) =>
         <>
           Transfer{' '}
           <Text as="span" color="accent" variant="bold" size="xl" className="italic">
-            ({mapType[type]})
+            ({mapTransferType[type]})
           </Text>
         </>
       }

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

@@ -6,4 +6,6 @@ export type {
 export type { BookingPaxExcursionProps } from './BookingPaxExcursion';
 export type { BookingPaxTransferProps } from './BookingPaxTransfer';
 
+export { mapTransferType } from './BookingPaxTransfer';
+
 export * from './BookingPax';