mautourco-components 0.2.30 → 0.2.31

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

@@ -1,3 +1,5 @@
+import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useMobile } from '../../../hooks/useMobile';
@@ -268,74 +270,93 @@ export const Dialog: React.FC<DialogProps> = ({
     .filter(Boolean)
     .join(' ');
 
-  if (!isOpen) {
-    return null;
-  }
-
   const dialogContent = (
-    <>
-      {/* Overlay */}
-      <div className="dialog-overlay" onClick={handleOverlayClick} aria-hidden="true" />
-
-      {/* Dialog container */}
-      <div
-        className="dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-describedby={bodyId}
-        ref={dialogRef}
-        tabIndex={-1}
-        onClick={handleOverlayClick}>
-        {/* Dialog content */}
-        <div className={contentClasses}>
-          {/* Header */}
-          <div className={headerClasses}>
-            <h2 id={titleId} className={titleClasses}>
-              {title}
-            </h2>
-            {showCloseButton && (
-              <button
-                type="button"
-                className={closeButtonClasses}
-                onClick={onClose}
-                aria-label="Close dialog">
-                <Icon name="close" size="md" />
-              </button>
-            )}
-          </div>
+    <LazyMotion features={domAnimation}>
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Overlay */}
+            <motion.div
+              className="dialog-overlay"
+              onClick={handleOverlayClick}
+              aria-hidden="true"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}
+            />
 
-          {/* Body */}
-          <div id={bodyId} className={bodyClasses}>
-            <div className="dialog__body-content">{children}</div>
-          </div>
+            {/* Dialog container */}
+            <motion.div
+              className="dialog"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={titleId}
+              aria-describedby={bodyId}
+              ref={dialogRef}
+              tabIndex={-1}
+              onClick={handleOverlayClick}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ duration: 0.25, ease: 'easeOut' }}>
+              {/* Dialog content */}
+              <motion.div
+                className={contentClasses}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2, delay: 0.05 }}>
+                {/* Header */}
+                <div className={headerClasses}>
+                  <h2 id={titleId} className={titleClasses}>
+                    {title}
+                  </h2>
+                  {showCloseButton && (
+                    <button
+                      type="button"
+                      className={closeButtonClasses}
+                      onClick={onClose}
+                      aria-label="Close dialog">
+                      <Icon name="close" size="md" />
+                    </button>
+                  )}
+                </div>
 
-          {/* Footer */}
-          {showFooter && (
-            <div className={footerClasses}>
-              {footer ? (
-                footer
-              ) : (
-                <div className={footerButtonsClasses}>
-                  <Button
-                    variant="outline-secondary"
-                    size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handleSecondaryClick}>
-                    {secondaryButtonText}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size={isMobileSize ? 'sm' : 'md'}
-                    onClick={handlePrimaryClick}>
-                    {primaryButtonText}
-                  </Button>
+                {/* Body */}
+                <div id={bodyId} className={bodyClasses}>
+                  <div className="dialog__body-content">{children}</div>
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
+
+                {/* Footer */}
+                {showFooter && (
+                  <div className={footerClasses}>
+                    {footer ? (
+                      footer
+                    ) : (
+                      <div className={footerButtonsClasses}>
+                        <Button
+                          variant="outline-secondary"
+                          size={isMobileSize ? 'sm' : 'md'}
+                          onClick={handleSecondaryClick}>
+                          {secondaryButtonText}
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          size={isMobileSize ? 'sm' : 'md'}
+                          onClick={handlePrimaryClick}>
+                          {primaryButtonText}
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </motion.div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </LazyMotion>
   );
 
   // Use portal to render at the document body level

package/src/components/organisms/{BookingAddItem → DialogBookingAddItem}/AddItemNewService.tsx

@@ -9,12 +9,18 @@ import ServiceSelector, {
 } from '../../molecules/ServiceSelector';
 import DateTimePicker from '../DateTimePicker/DateTimePicker';
 
+export interface AddItemNewServicePayload {
+  clients: BookingPaxClientInfo[];
+  dates?: string | string[];
+  service: ServiceType;
+}
+
 export interface AddItemNewServiceProps {
   options?: ServiceOption[];
   date: string | string[];
   clients: BookingPaxClientInfo[];
   onServiceChange: (service: ServiceType) => void;
-  onNext: (selectedClients: BookingPaxClientInfo[]) => void;
+  onNext: (payload: AddItemNewServicePayload) => void;
   onBack: () => void;
 }
 
@@ -22,6 +28,8 @@ 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 [dates, setDates] = useState<string | string[]>(date ?? []);
+
   const handleServiceChange = (service: ServiceType) => {
     onServiceChange(service);
     setService(service);
@@ -61,6 +69,7 @@ export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
             iconPosition="left"
             iconBGFull={false}
             showChevron={true}
+            onValueChange={setDates}
           />
         </div>
       </div>
@@ -85,7 +94,13 @@ export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
         </Button>
         <Button
           variant="secondary"
-          onClick={() => onNext(selectedClients)}
+          onClick={() =>
+            onNext({
+              clients: selectedClients,
+              dates: Array.isArray(dates) ? dates : [dates],
+              service: service,
+            })
+          }
           disabled={selectedClients.length === 0}>
           Next
         </Button>

package/src/components/organisms/{BookingAddItem/BookingAddItem.tsx → DialogBookingAddItem/DialogBookingAddItem.tsx}

@@ -5,10 +5,10 @@ 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 { AddItemNewService, AddItemNewServicePayload } from './AddItemNewService';
 import { AddItemSelector, AddItemType } from './AddItemSelector';
 
-export interface BookingAddItemProps {
+export interface DialogBookingAddItemProps {
   open: boolean;
   serviceDate?: string | string[];
   serviceOptions?: ServiceOption[];
@@ -16,11 +16,11 @@ export interface BookingAddItemProps {
   setOpen: (open: boolean) => void;
   onAddItem?: (type: AddItemType) => void;
   onServiceChange?: (service: ServiceType) => void;
-  onValidatePax?: (selectedClients: BookingPaxClientInfo[]) => void;
+  onValidatePax?: (payload: AddItemNewServicePayload) => void;
   onBackToSelector?: () => void;
 }
 
-export const BookingAddItem: React.FC<BookingAddItemProps> = (props) => {
+export const DialogBookingAddItem: React.FC<DialogBookingAddItemProps> = (props) => {
   const {
     open,
     serviceDate = [],
@@ -75,7 +75,7 @@ export const BookingAddItem: React.FC<BookingAddItemProps> = (props) => {
           transition={{ duration: 0.2, ease: 'easeInOut' }}
           style={{ overflow: 'hidden' }}>
           <div ref={contentRef}>
-            <AnimatePresence mode="wait">
+            <AnimatePresence mode="wait" initial={false}>
               {selectedType === AddItemType.EXISTING ? (
                 <motion.div
                   key="add-item-new-service"
@@ -94,7 +94,7 @@ export const BookingAddItem: React.FC<BookingAddItemProps> = (props) => {
                           )
                     }
                     clients={clients}
-                    onNext={(selectedClients) => onValidatePax?.(selectedClients)}
+                    onNext={(payload) => onValidatePax?.(payload)}
                     onBack={() => {
                       onBackToSelector?.();
                       setSelectedType(null);

package/src/components/organisms/{BookingAddItem → DialogBookingAddItem}/index.ts

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

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

@@ -1,5 +1,5 @@
 import { DialogContentPolicy } from '../../molecules/DialogContentPolicy';
-import { CancellationItem } from '../../molecules/DialogContentPolicy/DialogCancellationList';
+import { CancellationPolicyItem } from '../../molecules/DialogContentPolicy/DialogCancellationList';
 import { DialogBookingConfirm } from './DialogBookingConfirm';
 
 export interface BookingCancellationPolicyProps {
@@ -14,7 +14,7 @@ export interface BookingCancellationPolicyProps {
   /**
    * The cancellations to display.
    */
-  cancellations: CancellationItem[];
+  cancellations: CancellationPolicyItem[];
 }
 
 /**

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

@@ -26,6 +26,11 @@ interface DialogBookingConfirmProps {
    * The class name of the dialog.
    */
   className?: string;
+
+  /**
+   * Whether to close the dialog when the overlay is clicked.
+   */
+  closeOnOverlayClick?: boolean;
 }
 
 /**
@@ -45,7 +50,14 @@ interface DialogBookingConfirmProps {
  * @returns The DialogBookingConfirm component.
  */
 export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
-  const { open, title, children, setOpen, className } = props;
+  const {
+    open,
+    title,
+    children,
+    setOpen,
+    className,
+    closeOnOverlayClick = false,
+  } = props;
 
   return (
     <Dialog
@@ -54,7 +66,7 @@ export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
       title={title}
       className={className}
       showFooter={false}
-      closeOnOverlayClick={false}>
+      closeOnOverlayClick={closeOnOverlayClick}>
       {children}
     </Dialog>
   );

package/src/components/organisms/DialogCancelService/CancelBooking/CancelBooking.css

@@ -0,0 +1,24 @@
+.cancel-booking {
+  @apply space-y-6;
+}
+
+.cancel-booking__header {
+  @apply flex items-start gap-4;
+  .card-service-accom {
+    flex: 0 0 290px;
+    min-height: 0;
+  }
+}
+
+.cancel-booking__header-info {
+  @apply grow space-y-2;
+}
+
+.cancel-booking__cancellations {
+  @apply overflow-y-auto -mr-5 pr-2.5;
+  max-height: 350px;
+}
+
+.cancel-booking__footer {
+  @apply flex justify-end gap-x-5 pt-9 pb-2;
+}

package/src/components/organisms/DialogCancelService/CancelBooking/CancelBooking.tsx

@@ -0,0 +1,98 @@
+import Button from '@/src/components/atoms/Button/Button';
+import CardServiceAccom from '@/src/components/atoms/CardServiceAccom/CardServiceAccom';
+import Checkbox from '@/src/components/atoms/Checkbox/Checkbox';
+import { Heading, Text } from '@/src/components/atoms/Typography/Typography';
+import {
+  CancellationPolicyItem,
+  CancellationsList,
+} from '@/src/components/molecules/DialogContentPolicy/DialogCancellationList';
+import { PaxChips, PaxCount } from '@/src/components/molecules/PaxChips/PaxChips';
+import React, { useState } from 'react';
+import './CancelBooking.css';
+
+export interface CancelBookingProps {
+  bookingNo: string;
+  pax: PaxCount;
+  bookingDetails: {
+    number: string;
+    agency: string;
+    client: string;
+  };
+  cancellationPolicies: CancellationPolicyItem[];
+  onSubmit: () => void;
+}
+
+export const CancelBooking: React.FC<CancelBookingProps> = (props) => {
+  const { bookingNo, cancellationPolicies, pax, bookingDetails, onSubmit } = props;
+  const [accepted, setAccepted] = useState(false);
+
+  const bookingDetailsList = [
+    {
+      label: 'Booking no. :',
+      value: bookingDetails.number,
+    },
+    {
+      label: 'Agency :',
+      value: bookingDetails.agency,
+    },
+    {
+      label: 'Client type :',
+      value: bookingDetails.client,
+    },
+  ];
+
+  return (
+    <div className="cancel-booking">
+      <Text>
+        This action is irreversible, and you won’t be able to undo it. If you are certain
+        you want to cancel you booking, please confirm below.
+      </Text>
+      <div className="cancel-booking__header">
+        <div className="cancel-booking__header-info">
+          <Heading level={6} as="h3" color="brand">
+            Booking °{bookingNo}
+          </Heading>
+          <Text>Booking cancellation</Text>
+          <PaxChips pax={pax} />
+        </div>
+        <CardServiceAccom className="space-y-4">
+          <Text color="accent" variant="bold">
+            Documents details
+          </Text>
+          <div className="space-y-2">
+            {bookingDetailsList.map((detail) => (
+              <div key={detail.label} className="grid grid-cols-2 gap-x-4">
+                <Text variant="bold" size="sm" leading="4" as="span">
+                  {detail.label}
+                </Text>
+                <Text size="sm" leading="4" as="span">
+                  {detail.value}
+                </Text>
+              </div>
+            ))}
+          </div>
+        </CardServiceAccom>
+      </div>
+      <div className="cancel-booking__cancellations">
+        <CancellationsList cancellations={cancellationPolicies} />
+      </div>
+      <div className="cancel-booking__footer">
+        <div className="flex gap-x-2.5 items-center">
+          <Checkbox
+            checked={accepted}
+            onChange={setAccepted}
+            label="I've read and accept the cancellation policy."
+            labelPosition="leading"
+          />
+        </div>
+        <Button
+          className="w-[250px]"
+          variant="secondary"
+          disabled={!accepted}
+          onClick={onSubmit}>
+          Confirm cancellation
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/{CancelService → DialogCancelService}/CancelPolicy.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import Button from '../../atoms/Button/Button';
 import { Text } from '../../atoms/Typography/Typography';
 import {
-  CancellationItem,
-  DialogCancellations,
+  CancellationPolicyItem,
+  CancellationsList,
 } from '../../molecules/DialogContentPolicy/DialogCancellationList';
 
 export interface CancelPolicyProps {
   /**
    * The cancellations to display.
    */
-  cancellations: CancellationItem[];
+  cancellations: CancellationPolicyItem[];
 
   /**
    * Whether the policy is transgressed.
@@ -50,7 +50,7 @@ export const CancelPolicy: React.FC<CancelPolicyProps> = (props) => {
         </Text>
       )}
       <div className="max-h-[400px] overflow-y-auto -mr-5 pr-2.5">
-        <DialogCancellations cancellations={cancellations} />
+        <CancellationsList cancellations={cancellations} />
       </div>
 
       <div className="flex justify-end mt-9">

package/src/components/organisms/{CancelService/CancelService.tsx → DialogCancelService/DialogCancelService.tsx}

@@ -1,10 +1,11 @@
 import React from 'react';
 import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { CancelBooking } from './CancelBooking/CancelBooking';
 import { CancelPolicy } from './CancelPolicy';
 import { ConfirmDelete } from './ConfirmDelete/ConfirmDelete';
 import { FromList } from './FromList';
 
-export interface CancelServiceProps {
+export interface DialogCancelServiceProps {
   open: boolean;
   children?: React.ReactNode;
   title?: string;
@@ -12,7 +13,7 @@ export interface CancelServiceProps {
   setOpen: (open: boolean) => void;
 }
 
-export const CancelService = (props: CancelServiceProps) => {
+export const DialogCancelService = (props: DialogCancelServiceProps) => {
   const { open, children, title, className, setOpen } = props;
   return (
     <DialogBookingConfirm
@@ -25,6 +26,7 @@ export const CancelService = (props: CancelServiceProps) => {
   );
 };
 
-CancelService.FromList = FromList;
-CancelService.Confirm = ConfirmDelete;
-CancelService.CancelPolicy = CancelPolicy;
+DialogCancelService.FromList = FromList;
+DialogCancelService.Confirm = ConfirmDelete;
+DialogCancelService.CancelPolicy = CancelPolicy;
+DialogCancelService.Booking = CancelBooking;

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

@@ -0,0 +1,6 @@
+export * from './DialogCancelService';
+
+export type { CancelBookingProps } from './CancelBooking/CancelBooking';
+export type { CancelPolicyProps } from './CancelPolicy';
+export type { ConfirmDeleteProps } from './ConfirmDelete/ConfirmDelete';
+export type { FromListProps } from './FromList';

package/src/components/organisms/DialogComparison/DialogComparison.css

@@ -0,0 +1,23 @@
+.dialog-comparison__list {
+  @apply max-w-full overflow-x-auto pb-6;
+  @apply flex items-start gap-x-6;
+}
+
+.dialog-comparison__item {
+  @apply px-5 py-6 space-y-4;
+  flex: 0 0 572px;
+  border: solid 1px var(--color-border-medium);
+  border-radius: var(--border-radius-rounded-xl);
+}
+
+.dialog-comparison__footer {
+  @apply flex justify-end pt-9 pb-2;
+  .button {
+    width: 250px;
+  }
+}
+
+.dialog-comparison__filter {
+  @apply mb-6;
+  max-width: 364px;
+}