mautourco-components 0.2.21 → 0.2.22

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';

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/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,

package/src/components/organisms/Dialog/Dialog.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useMobile } from '../../../hooks/useMobile';
+import '../../../styles/components/organism/dialog.css';
 import Button from '../../atoms/Button/Button';
 import Icon from '../../atoms/Icon/Icon';
-import '../../../styles/components/organism/dialog.css';
 
 /**
  * Size variants for the Dialog component
@@ -25,7 +25,7 @@ export interface DialogProps {
   /**
    * Title displayed in the dialog header
    */
-  title: string;
+  title?: string;
   /**
    * Content to be rendered in the dialog body
    */
@@ -109,7 +109,7 @@ export interface DialogProps {
 export const Dialog: React.FC<DialogProps> = ({
   isOpen,
   onClose,
-  title,
+  title = '',
   children,
   footer,
   size = 'responsive',
@@ -210,8 +210,10 @@ export const Dialog: React.FC<DialogProps> = ({
   };
 
   // Generate unique IDs for accessibility
-  const titleId = ariaLabelledBy || `dialog-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
-  const bodyId = ariaDescribedBy || `dialog-body-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const titleId =
+    ariaLabelledBy || `dialog-title-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const bodyId =
+    ariaDescribedBy || `dialog-body-${title.replace(/\s+/g, '-').toLowerCase()}`;
 
   // Build class names
   const contentClasses = [
@@ -273,11 +275,7 @@ export const Dialog: React.FC<DialogProps> = ({
   const dialogContent = (
     <>
       {/* Overlay */}
-      <div
-        className="dialog-overlay"
-        onClick={handleOverlayClick}
-        aria-hidden="true"
-      />
+      <div className="dialog-overlay" onClick={handleOverlayClick} aria-hidden="true" />
 
       {/* Dialog container */}
       <div
@@ -288,8 +286,7 @@ export const Dialog: React.FC<DialogProps> = ({
         aria-describedby={bodyId}
         ref={dialogRef}
         tabIndex={-1}
-        onClick={handleOverlayClick}
-      >
+        onClick={handleOverlayClick}>
         {/* Dialog content */}
         <div className={contentClasses}>
           {/* Header */}
@@ -302,8 +299,7 @@ export const Dialog: React.FC<DialogProps> = ({
                 type="button"
                 className={closeButtonClasses}
                 onClick={onClose}
-                aria-label="Close dialog"
-              >
+                aria-label="Close dialog">
                 <Icon name="close" size="md" />
               </button>
             )}
@@ -324,15 +320,13 @@ export const Dialog: React.FC<DialogProps> = ({
                   <Button
                     variant="outline-secondary"
                     size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handleSecondaryClick}
-                  >
+                    onClick={handleSecondaryClick}>
                     {secondaryButtonText}
                   </Button>
                   <Button
                     variant="secondary"
                     size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handlePrimaryClick}
-                  >
+                    onClick={handlePrimaryClick}>
                     {primaryButtonText}
                   </Button>
                 </div>
@@ -349,4 +343,3 @@ export const Dialog: React.FC<DialogProps> = ({
 };
 
 export default Dialog;
-

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

@@ -0,0 +1,44 @@
+import { DialogContentPolicy } from '../../molecules/DialogContentPolicy';
+import { CancellationItem } from '../../molecules/DialogContentPolicy/DialogCancellationList';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingCancellationPolicyProps {
+  /**
+   * Whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * The callback function to call when the dialog is closed.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * The cancellations to display.
+   */
+  cancellations: CancellationItem[];
+}
+
+/**
+ * BookingCancellationPolicy is a component that allows the user to display the booking cancellation policy.
+ *
+ * @example
+ * <BookingCancellationPolicy
+ *  open={open}
+ *  setOpen={setOpen}
+ *  cancellations={cancellations}
+ * />
+ *
+ * @param props - The props for the BookingCancellationPolicy component.
+ * @returns The BookingCancellationPolicy component.
+ */
+export const BookingCancellationPolicy = (props: BookingCancellationPolicyProps) => {
+  const { open, setOpen, cancellations } = props;
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title="Confirmation of Terms & Cancellation policy"
+      className="!max-w-[800px]">
+      <DialogContentPolicy.List cancellations={cancellations} />
+    </DialogBookingConfirm>
+  );
+};

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

@@ -0,0 +1,56 @@
+import { Button, Heading } from '@/src';
+import React from 'react';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingMailSentProps {
+  /**
+   * Whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * The callback function to call when the dialog is closed.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * The callback function to call when the next button is clicked.
+   */
+  onNext: () => void;
+}
+
+/**
+ * BookingMailSent is a component that allows the user to display the booking mail sent confirmation.
+ *
+ * @example
+ * <BookingMailSent
+ *  open={open}
+ *  setOpen={setOpen}
+ *  onNext={onNext}
+ * />
+ *
+ * @param props - The props for the BookingMailSent component.
+ * @returns
+ */
+export const BookingMailSent: React.FC<BookingMailSentProps> = (props) => {
+  const { open, setOpen, onNext } = props;
+  return (
+    <DialogBookingConfirm open={open} setOpen={setOpen} className="!max-w-[800px]">
+      <div className="space-y-9">
+        <div className="space-y-8">
+          <img
+            src="/images/svg/booking-mail-sent.svg"
+            alt="Booking success"
+            className="mx-auto"
+            width={150}
+            height={150}
+          />
+          <Heading as="p" level={6} variant="medium" className="text-center">
+            You will receive a copy of your booking in your mail inbox.
+          </Heading>
+        </div>
+        <Button variant="secondary" onClick={onNext} className="w-full">
+          Go to booking grid
+        </Button>
+      </div>
+    </DialogBookingConfirm>
+  );
+};