mautourco-components 0.2.21 → 0.2.23

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>
+  );
+};

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

@@ -0,0 +1,120 @@
+import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
+import * as motion from 'motion/react-m';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { BookingPaxClientInfo } from '../../molecules/BookingPax';
+import { ServiceOption, ServiceType } from '../../molecules/ServiceSelector';
+import { DEFAULT_SERVICE_SELECTOR_OPTIONS } from '../../molecules/ServiceSelector/ServiceSelector';
+import Dialog from '../Dialog/Dialog';
+import { AddItemNewService } from './AddItemNewService';
+import { AddItemSelector, AddItemType } from './AddItemSelector';
+
+export interface BookingAddItemProps {
+  open: boolean;
+  serviceDate?: string | string[];
+  serviceOptions?: ServiceOption[];
+  clients: BookingPaxClientInfo[];
+  setOpen: (open: boolean) => void;
+  onAddItem?: (type: AddItemType) => void;
+  onServiceChange?: (service: ServiceType) => void;
+  onValidatePax?: (selectedClients: BookingPaxClientInfo[]) => void;
+  onBackToSelector?: () => void;
+}
+
+export const BookingAddItem: React.FC<BookingAddItemProps> = (props) => {
+  const {
+    open,
+    serviceDate = [],
+    serviceOptions = [],
+    clients,
+    setOpen,
+    onAddItem,
+    onServiceChange,
+    onValidatePax,
+    onBackToSelector,
+  } = props;
+  const [selectedType, setSelectedType] = useState<AddItemType | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState<number | 'auto'>('auto');
+
+  const handleAddItem = (type: AddItemType) => {
+    onAddItem?.(type);
+    setSelectedType(type);
+    console.log(type);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setSelectedType(null);
+  };
+
+  // Measure and update content height when selectedType changes
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      if (contentRef.current && open) {
+        const measuredHeight = contentRef.current.scrollHeight;
+        setContentHeight(measuredHeight);
+      }
+    }, 50);
+  }, [selectedType, open, serviceDate, serviceOptions, clients]);
+
+  const title =
+    selectedType === AddItemType.EXISTING
+      ? 'Add new service to your existing pax'
+      : 'Select how to add items to your booking';
+
+  return (
+    <Dialog
+      isOpen={open}
+      onClose={handleClose}
+      showFooter={false}
+      title={title}
+      className="!max-w-[798px]">
+      <LazyMotion features={domAnimation}>
+        <motion.div
+          animate={{ height: contentHeight }}
+          transition={{ duration: 0.2, ease: 'easeInOut' }}
+          style={{ overflow: 'hidden' }}>
+          <div ref={contentRef}>
+            <AnimatePresence mode="wait">
+              {selectedType === AddItemType.EXISTING ? (
+                <motion.div
+                  key="add-item-new-service"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 10 }}
+                  transition={{ duration: 0.25, ease: 'easeInOut' }}>
+                  <AddItemNewService
+                    date={serviceDate}
+                    onServiceChange={(service) => onServiceChange?.(service)}
+                    options={
+                      serviceOptions.length > 0
+                        ? serviceOptions
+                        : DEFAULT_SERVICE_SELECTOR_OPTIONS.map(
+                            ({ disabled, badge, ...option }) => option
+                          )
+                    }
+                    clients={clients}
+                    onNext={(selectedClients) => onValidatePax?.(selectedClients)}
+                    onBack={() => {
+                      onBackToSelector?.();
+                      setSelectedType(null);
+                    }}
+                  />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="add-item-selector"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 10 }}
+                  transition={{ duration: 0.25, ease: 'easeInOut' }}>
+                  <AddItemSelector onAddItem={handleAddItem} />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      </LazyMotion>
+    </Dialog>
+  );
+};

package/src/components/organisms/BookingAddItem/index.ts

@@ -0,0 +1,3 @@
+export * from './AddItemNewService';
+export * from './AddItemSelector';
+export * from './BookingAddItem';

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import CalendarInput from '../../molecules/Calendar/CalendarInput';
 import DateTime, { DateTimeProps } from '../../molecules/Calendar/DateTime';
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
@@ -47,7 +47,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   icon,
 }) => {
   // Parse default value and set initial state
-  const parseDefaultValue = () => {
+  const parseDefaultValue = useMemo(() => {
     if (!defaultValue) return { value: '', dateRange: undefined };
 
     try {
@@ -64,6 +64,8 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
         const date = new Date(defaultValue);
         const dateRange = { from: date, to: date };
         const displayValue = format(date, 'dd/MM/yyyy');
+        console.log('defaultValue', defaultValue, selectionMode, displayValue);
+
         return { value: displayValue, dateRange };
       }
     } catch (error) {
@@ -71,11 +73,10 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
     }
 
     return { value: '', dateRange: undefined };
-  };
+  }, [defaultValue, selectionMode]);
 
-  const initialState = parseDefaultValue();
-  const [value, setValue] = useState<string>(initialState.value);
-  const [selectedDateRange, setSelectedDateRange] = useState<any>(initialState.dateRange);
+  const [value, setValue] = useState<string>(parseDefaultValue.value);
+  const [selectedDateRange, setSelectedDateRange] = useState<any>([]);
   const [selectedTime, setSelectedTime] = useState<
     { hour: string; minute: string; meridiem: 'AM' | 'PM' } | undefined
   >(undefined);
@@ -125,6 +126,11 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
     [onValueChange, selectionMode]
   );
 
+  useEffect(() => {
+    setValue(parseDefaultValue.value);
+    setSelectedDateRange(parseDefaultValue.dateRange);
+  }, [defaultValue]);
+
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
@@ -142,7 +148,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
         </div>
       </PopoverTrigger>
 
-      <PopoverContent className="w-auto p-0 border-transparent">
+      <PopoverContent className="w-auto border-transparent !p-0">
         <DateTime
           mode={mode}
           selectionMode={selectionMode}

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>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingReferenceProps {
+  /**
+   * 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 cancel button is clicked.
+   */
+  onCancel: () => void;
+  /**
+   * The callback function to call when the confirm button is clicked.
+   */
+  onConfirm: (ref: string) => void;
+}
+
+/**
+ * BookingReference is a component that allows the user to display the booking reference.
+ *
+ * @example
+ * <BookingReference
+ *  open={open}
+ *  setOpen={setOpen}
+ *  onCancel={onCancel}
+ *  onConfirm={onConfirm}
+ * />
+ *
+ *
+ * @param props - The props for the BookingReference component.
+ * @returns The BookingReference component.
+ */
+export const BookingReference: React.FC<BookingReferenceProps> = (props) => {
+  const { open, setOpen, onCancel, onConfirm } = props;
+  const [reference, setReference] = useState('');
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title="Reference number"
+      className="!max-w-[500px]">
+      <div className="space-y-9">
+        <div className="space-y-2">
+          <label>
+            <Text as="span" size="sm">
+              Reference number
+            </Text>
+          </label>
+          <Input
+            placeholder="Please insert a reference number"
+            value={reference}
+            onChange={(e) => setReference(e.target.value)}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-x-4">
+          <Button variant="outline-secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button variant="secondary" onClick={() => onConfirm(reference)}>
+            Confirm booking
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { Button, Heading, Text } from '@/src';
+import React from 'react';
+import { DialogBookingConfirm } from './DialogBookingConfirm';
+
+export interface BookingSuccessProps {
+  /**
+   * Whether the dialog is open.
+   */
+  open: boolean;
+  /**
+   * The name of the booking.
+   */
+  bookingName: string;
+  /**
+   * 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;
+}
+
+/**
+ * BookingSuccess is a component that allows the user to display the booking success.
+ *
+ * @example
+ * <BookingSuccess
+ *  open={open}
+ *  bookingName={bookingName}
+ *  setOpen={setOpen}
+ *  onNext={onNext}
+ * />
+ *
+ *
+ * @param props - The props for the BookingSuccess component.
+ * @returns The BookingSuccess component.
+ */
+export const BookingSuccess: React.FC<BookingSuccessProps> = (props) => {
+  const { open, bookingName, 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-confirm.svg"
+            alt="Booking success"
+            className="mx-auto"
+            width={150}
+            height={150}
+          />
+          <div className="text-center">
+            <Heading as="p" level={6} variant="medium">
+              Your booking has been successfully confirmed!
+            </Heading>
+            <Text variant="bold" size="lg">
+              "{bookingName}"
+            </Text>
+          </div>
+        </div>
+        <Button variant="secondary" onClick={onNext} className="w-full">
+          Confirm booking
+        </Button>
+      </div>
+    </DialogBookingConfirm>
+  );
+};